Elm, Hello World!

Elm で Hello World! したので、備忘録としてブログへ書き残しておきます.

install

$ npm install -g elm
$ elm --version
0.19.1

プロジェクト作成

プロジェクトディレクトリを作成して、そのディレクトリに移動して elm init する.

$ mkdir hello
$ cd hello
$ elm init

これで elm.json が生成される. node.js の package.json のようなものかな.

Hello World と表示するだけの HTML を生成するための Elm コードを書く

プロジェクトディレクトリに src ディレクトリをつくり src/Main.elm ファイルを作成

$ mkdir src
$ touch src/Main.elm

Main.elm の中身はこんな感じ

module Main exposing (main)
import Html

main: Html.Html msg
main =
  Html.div [] [ Html.text "Hello World!" ]

import Html で HTML モジュールをインポートしている（らしい）. main: Html.Html msg の部分の Html.Html は Htmlモジュールの Html型のことを指している（らしい）. Htmlモジュールにはその他 div, text などの型もあるので... Html.div とか Html.text などを記述できる. Html がたくさん出てきて 鬱陶しい 冗長なので、 import Html exposing (Html, div, text) と記述すれば、 Html. を省略できるようになる.

つまり、普通は以下のように書くことになる.

module Main exposing (main)
import Html exposing (Html, div, text)

main: Html msg
main =
  div [] [ text "Hello World!" ]

Main.elm をビルドする.

$ elm make src/Main.elm

index.html が生成されるので、それをブラウザで開く. → Hello World! と表示されている.

まとめ

１年ほど前に購入して死蔵していた「基礎からわかる Elm」を読みながら書いている. しかし、本の記載通りに動かなくて少し困ったのですが、 Elm の出すエラーメッセージが結構親切で、なんとかなりました.