初対面のElmと仲良くなろうとしてみる
日々新しいツールや考え方が生まれているプログラミング業界において、業務で使うものだけを触り続けるのは勿体無いなと思い、たとえ初見のものだろうと評判が良いものは試しに触っていこうかと考えています。
その一環として、今回はElmを使ってみます。
Elmについて
Elmとは関数型言語で、コンパイル後にJavaScriptになります。Webアプリケーションの作成を想定して作られており、The Elm Architectureという考え方に基づいています。
The Elm Architectureとは、
* Model (アプリケーション内の状態の定義)
* update (状態をどう更新するかの定義)
* Msg (アプリケーション内のイベントの定義)
* view (状態の表示)
といった役割を型として書くという考え方になります。
Elmがなぜ評判なのかというと、他のJSフレームワークに比べてレンダリングやコンパイルが速く、また学習を始めやすいという点が理由として挙げられます。
前置きはこれぐらいにして、実際にElmを使ってみます。
Elmを始める
まずはインストールです。Macだと簡単で
brew install elm
で完了です。
elm --version
と打ち込んでElmのバージョンが表示されたら、問題なくインストールされています。
実際にElmでサンプルアプリケーションを作成してみましょう。
まずは空のディレクトリを用意する必要があるので、
mkdir elm-sample-app
cd elm-sample-app
と作成したディレクトリに移動し、
elm init
とコマンドを打ちます。elm.jsonファイルを作成するか聞かれるので”Y”のキーを押すと、Elmアプリケーションの土台が作成されます。
ここで、
elm reactor
とコマンドを打ち、
http://localhost:8000/
にアクセスすると、
とelm-sample-appのディレクトリ構成がブラウザ上に再現されます。
アプリケーションのコードはsrcディレクトリ内に書いていきます。記述が更新されるたびにブラウザ上に反映されるので都度都度確認しながらプログラミングしていきます。
ではsrcディレクトリの中に、
import Html exposing (..)
greeting = h1 [] [text "hello world"]
main =
div [] [greeting]
という内容のhello.elmというファイルを作ります。
Htmlモジュールをインポートし、greetingという変数にh1タグで”hello world”という文字列を持たせ、それをmainで定義し反映させようとしています。
ここで、ブラウザ上のsrcディレクトリをクリックすると、
実際に設置した通りにhello.elmが存在しており、それをクリックすると、
と意図通りに反映されました。
“hello world”という文字列がh1タグで表示されています。
もう少し入り組んだサンプル
hello.elmではElmの関数型っぽい処理やThe Elm Architectureの考え方もわかりにくいので、もう少し入り組んだアプリケーションを作ってみます。
hello.elmと同様に、srcディレクトリの中に
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
main =
Browser.sandbox { init = 0, update = update, view = view }
type Msg = IncrementOne | IncrementTwo | Reset
update msg model =
case msg of
IncrementOne ->
model + 1
IncrementTwo ->
model + 2
Reset ->
0
view model =
div []
[ div [] [ text (String.fromInt model) ]
, button [ onClick IncrementOne ] [ text "1を足す" ]
, button [ onClick IncrementTwo ] [ text "2を足す" ]
, button [ onClick Reset ] [ text "リセット" ]
]
というcounter.elmを作成します。
Msgにて、IncrementOneとIncrementTwoとResetというイベントの存在を定義しており、updateにてそれぞれのイベントの役割を定義、viewにてDOM要素とそれに結びつくイベントを定義しています。
これを、先ほどと同様にブラウザ上にてアクセスしてみると
意図通り動いてくれています。
まとめ
関数型の記述についての知識がほとんどなかったのでそいういう部分での恩恵はあまり授かれなかったものの、そのような状態でも割と滞りなくコーディングすることが出来ました。
もう少し知識を深めてから再挑戦してより複雑なものを作ってみたいですね。
