Elmを使ってみる（1）

はじめに

自分が見聞きして使ってみたいなと思った技術を一旦触りだけやってみることで、色々な技術を使う心理的なハードルを下げたいなと思っています。
（例えばプログラミング言語ならHello,World書いて～みたいな）
また新しいことをするのは、視野も広がるし、いい気分転換にもなるということで定期的にやっていけたらなーと思います。
というわけで今回はこの「使ってみるシリーズ」第3弾として、Elmというプログラミング言語を使ってみようと思います。
今回の記事は技術解説記事というよりは勉強の記録的な意味合いが強いです。(特に後半）
間違った情報なども含まれている可能性もありますので、ご指摘等ございましたら私のTwitterに宜しくお願い致します。

Elmとは

Elmはフロントエンド開発で使用されるプログラミング言語です
以下のような特徴があります。

コンパイルするとHTML・CSS・JavaScriptに変換される

フロントエンド開発言語といえば、HTML・CSS・JavaScriptですよね。
実際現状ブラウザが読み込んで処理できるのは、これらの言語だけです。
しかしElmを使うとフロントエンド開発ができるというのはどういうことでしょうか。
実はElmはコンパイルするとHTML・CSS・JavaScriptに変換されるのです。

JavaScriptの拡張…というわけではない

先程、ElmはコンパイルするとHTML・CSS・JavaScriptに変換されると、説明しました。
ここから連想されるのはコンパイルするとJavaScriptに変換されるという特徴を持つAltJSに似ているというところではないでしょうか。
しかし、ElmはAltJSとは似て非なる特徴を備えています。
AltJSはあくまでJavaScriptをベースに拡張的に機能追加したものです(例えばTypeScriptなら静的型の概念を付与するとか)。 一方でElmではJavaScriptやCSSの機能を直接呼び出したりすることはできません。
あくまでElmが提供しているやり方でJavaScriptやCSSを操作するという開発方法になります。

不変性

不変性とはどういうことでしょうか。
例えばElmでは以下のコードはエラーになります。

1a = 2
2a = 3

再代入は許さないということですね。
JavaScriptではES6から「const」が導入され、同じようなことができると思うかもしれませんが、constはあくまで不変性を意識した書き方ができるだけに過ぎません。letを使えば、再代入も可能ですし、そもそもvarもまだ使えますしね。
一方でElmでは再代入可能な変数を宣言することはそもそもできません。これはなんだか息苦しいようにも感じますが、一度宣言した変数の中身は変更されないことが保証されているので、関数の副作用による予期しないバグを完全に防ぐことができます。

プログラマーができることを制限することで、シンプルでバグりにくいプログラミングを可能にすることがElmの目指すひとつのテーマであると感じられます。

静的型

Elmは強力な静的型付け言語です。
静的かつ強力な型検査により「事実上一切の実行時例外が起こらない」ということを謳っている言語です。
これによってコンパイル時でのエラーの検出やユニットテストの軽量化など多くのメリットを享受することができます。

Virtual DOM

前回の記事のReactの項で解説したVirtual DOMも採用されています。
elm/htmlというライブラリによってElmの内部でHTMLやCSSを扱うことができるのですが、その際の更新においてVirtual DOMが使われています。

導入

早速Elmを導入してみましょう！
公式ガイドを参考に進めていきます(日本語あるのが最高)。
今回はWindowsに環境を構築するので上記の公式ガイドにのっているこちらのリンクからWindows用のインストーラーをダウンロードします。 インストールは特別なことをする必要はなく、基本的に次へを選んでいけば完了します。

次にエディタのElm拡張機能を導入します。
今回私はVisual Studio Codeを使用しますので、このプラグインを使用します(VS Codeの拡張機能の検索で「Elm」と検索すれば出てきます)。

ここでとりあえず公式のチュートリアルプロジェクトを取得してみます。
以下のコマンドでGitHubからプロジェクトをクローンします。

1git clone https://github.com/evancz/elm-architecture-tutorial.git

またelm reactor というコマンドを使うと、Elmビルド用サーバーを立ち上げて、動作を確認することができます。
@angular/cliでいうng serveみたいなものですね。

これで導入は以上となります。

Elmのソースコードを読んでみる

クローンしてきたチュートリアル内のソースコードを1つ読んでみます。
まだElmの文法とか何も知らないですけど、現在の知識で予想できるところは予想します。
で、読んで抱いた感想を記録しておきます。ちゃんとElmを理解した後に見返したいと思います。
ただ受動的に学ぶのではなく、あらかじめ疑問点を持って臨むことで記憶の定着につながればなーと(実験的な試みです。効果的なやり方かどうかはわかりません笑)。

examples/01-button.elm

 1import Browser
 2import Html exposing (Html, button, div, text)
 3import Html.Events exposing (onClick)
 4
 5
 6main =
 7  Browser.sandbox { init = init, update = update, view = view }
 8
 9-- MODEL
10
11type alias Model = Int
12
13init : Model
14init =
15  0
16
17
18-- UPDATE
19
20type Msg = Increment | Decrement
21
22update : Msg -> Model -> Model
23update msg model =
24  case msg of
25    Increment ->
26      model + 1
27
28    Decrement ->
29      model - 1
30
31
32-- VIEW
33
34view : Model -> Html Msg
35view model =
36  div []
37    [ button [ onClick Decrement ] [ text "-" ]
38    , div [] [ text (String.fromInt model) ]
39    , button [ onClick Increment ] [ text "+" ]
40    ]

上のソースで実装された画面はこちら

以下まだ文法を何も知らない状態での感想
(後で見返したらトンチンカンなこと言ってるんだろうなー)

・type宣言してるのってその名の通り、型だよな・・・？
・データとデータ操作とViewが完全に分離してていい感じ
・ViewもHTMLを直書きするんじゃなくて、宣言的に書くんだ。
　→ 入れ子構造とか結構ごちゃごちゃしそうだけど大丈夫なのかな
・Msg型はIncrement関数もしくはDecrement関数？
→ 多分これ全部関数なんだよね？MsgっていうクラスにIncrementとDecrementっていう2つのメソッドを定義しているみたいな感じになってるな
・Viewの部分、Model -> Html Msg でMsgとHTMLが紐付けられているのかな
→ Angularでいうテンプレートとコンポーネントクラスの紐づけみたいなものかな？
・Browser.sandbox { init = init, update = update, view = view } ってなんだ？sandbox環境を作るためのものってことはわかるけど、何を設定してるかピンとこない
・update : Msg -> Model -> Model → なにこれ？

おわりに

今回はElmがどんな言語なのかというところとElmの導入について勉強しました。
本当は一つの記事にまとめたかったのですが、1つのプログラミング言語を学ぶというのは当然奥が深く、何回かに分けて記事にしようと思いました。
現時点ではElmの文法などまだ何も知らない状態ですが、ここから合間を見て勉強し、何か試しに作ってみてそれを記事にできたらなと思います。

それでは今回はこのへんで。ここまで読んでいただきありがとうございました！
感想やご意見・質問等ございましたら、私のTwitterまでお気軽にどうぞ。