Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Elmの開発環境を整えて、HelloWorldをするまで

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 elm@0.19.0-bugfix2
$ 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

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

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

elmのソースコード(例えば、先程のMain.elmなど)をatomで開いてみます。もし、elm-makeelm-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を利用して、ソースコードを改変してみましょう。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.