ElmのHello Worldができるまで (2018 10/25)

nodeのインストール

可能であれば、nvm, nodebrew等を使ってnodeをインストールする。

以下が、現時点(2018/9/3)の安定版のバージョン。

$ node -v
v8.11.4
$ npm --version
6.1.0

Elmとformatterのインストール

グローバル環境にElmを入れるかどうかは、よく考えてから入れてください。ベストはプロジェクトローカルに入れることですが、エディタ等の考慮してグローバルに入れています。

$ npm install -g [email protected]
$ npm install -g elm-format
$ npm install -g elm-test@beta
$ elm --version
0.19.0
$ elm-format
elm-format-0.19 0.8.0
$ elm-test --version
0.19.0-beta10

REPLを試そう

REPL簡単なコードを即時に評価して、返された値や型を確認できます。文法やライブラリ関数などの確認で使います。REPLを試してみましょう。

$ elm repl
> 1 + 1 -- 最初は遅い。遅すぎて評価が失敗する場合には、もう一度、評価をし直してみましょう。
2 : number
> 2 // 3
0 : Int
> 10 // 3
3 : Int

次にファイル(モジュール)を作ってREPLから読み込んで見ましょう。elm initをして、src/以下にMain.elmを配置する必要があります。

$ elm init $ mkdir src

src/Main.elm

module Main exposing (..)

add : Int -> Int -> Int
add x y = x + y

$ elm-repl -- srcディレクトリが見える階層で実行
> import Main exposing (..)
> add 10 5
15 : Int

atomの導入

atomには、elmをパワフルに書く環境elmjutsu

Windowsの方は、こちら

elmjutsu他必要なpackage以下になります。

atom-ide-ui
language-elm
elm-format
elmjutsu

elmのソースコード(例えば、先程のMain.elmなど)をatomで開いてみます。もし、elm-makeやelm-formatが見つかりませんと言うエラーが出た場合には、各packageのオプションで、それらのPATHを通します。PATHは、使用したnvm, nodebrewに準拠した場所に存在します。

elm-dev-env

elm-dev-envは、Elmを始めるためのスタータキットです。手元にクローンしてお使いください。他の使い方は、READMEをお読みください。

$ cd elm-dev-env
$ npm i
$ npm start
open http://localhost:3000/
-- Elmのアイコンと共に、「Your Elm App is working!」と言う文章が表示されれば成功です！

あとはatomを利用して、ソースコードを改変してみましょう。