Elm で Hello world! する

環境:
Mac: 10.13.6 High Sierra
node: v10.5.0

Install · An Introduction to Elm

上記の公式ドキュメントを読みながら進めていく。

インストール

まずは公式ドキュメントの Intall > Mac Installer から elm をインストールする。インストール先はホームディレクトリで良いと思う。

そうするとコマンドラインから elm-make, elm-repl, elm-reactor ... などのコマンドが使えるようになる。

コマンドがインストール先のディレクトリを見ると .elm/ が作られている。この中に elm を動かすのに必要なパッケージたちが格納されているようだ。

Hello world する

REPL で Hello world!

先ほど elm をインストールしたことによって elm-repl コマンドが使えるようになったはずだ。REPL を起動するにはコマンドラインでこの elm-repl コマンドを叩くだけだ。

$ elm-repl

すると下記のようなインタフェースが起動する。ここで Hello word してみよう。

---- elm-repl 0.18.0 ------------------------------------------------------
 :help for help, :exit to exit, more at <https://github.com/elm-lang/elm-repl>
--------------------------------------------------------------------------
> "Hello" ++ " world!" 
"Hello world!" : String

Hello world! できた。

ちなみに elm では文字列の連結を ++ で行う。

REPL から離脱するにはお馴染みの ctrl-C または :exit すれば良い。

elm-make してブラウザから Hello world!

まず hello.elm を作成して好きなエディタで開く。

エディタのデフォルトでは elm のシンタックスハイライトが効いていないことが多いので、該当パッケージをインストールしよう。公式ドキュメントの Install > Configure Your Editor にも親切にリンクが貼ってある。

<div>
  <h1>Hello world!</h1>
</div>

こんな感じの HTML にコンパイルするには hello.elm を下記のように書く。

import Html exposing (div, text)

main =
  div [] [
    h1 [] [
      text "Hello world!"
    ]
  ]

どうやらはてブロのエディタブロックでは elm のシンタックスハイライトは対応していないようだ。

それはいいとして、次に上記の hello.elm を保存し、コマンドラインツールで hello.elm があるディレクトリまで移動する。そこで下記コマンドを叩く。

elm-make hello.elm

すると、Package が必要っぽいけどインスコしますか？と聞かれるので Yes と答えよう。hello.elm をコンパイルするのに必要な Package がインストールされ、さらにコンパイルまで完了してくれるはずだ。

ディレクトリを見てみると index.html が生成されている。

ちなみに先の elm-make で --output オプションを指定した場合はファイル名を変更できるみたいだ。ファイル形式も変更できるかもしれない。

下記コマンドでデフォルトに指定しているブラウザで 32px bold の Hello world! が拝めるはずだ。

open index.html