前回は、Elmという言語について簡単に学びました。
今回は、Elmをインストールして実際に書いてみます。
インストール
インストールします。
公式:http://elm-lang.org/install
Mac用のinstallerをクリック。
エディタ用にシンタックスハイライトもインストールします。
僕はAtomを使っているので、こちらをインストールしました。
スタートアップ
インストールが終わると、インストーラからこちらのページを試すよう言われました。
http://elm-lang.org/get-started
初回のガイドですね。こちらに沿って進めていきます。
ツール
インストールが終わったことによって、以下のツールが使用可能となりました。
- elm
- elm-package
- elm-make
- elm-repl
- elm-reactor
以下、1つずつ見て行きます。
elm
elmは他の全てのツールを起動します。ターミナルでelmとコマンドすると、ヘルプメッセージを見ることができます。
elm-package
elm-packageはElmのパッケージマネージャのようです。npmやgem bundlerみたいな感じでしょうか。
パッケージの一覧は以下から参照できます。
新しいプロジェクトを立ち上げるときは、以下のコマンドを打ちます。
$ elm package install
elm-lang/coreというものをインストールするか聞かれました。ひとまずyes。
このようなディレクトリ構造が自動生成されました。
elm-package.jsonにはプロジェクトの状態を書きます。
elm-make
elm-makeはElmをHTMLとJavaScriptにコンパイルするツールだそうです。
Main.elmというファイルをindex.htmlにコンパイルしたい時は、以下のコマンドを打ちます。
$ elm make Main.elm --output=index.html
elmを書いてみる
他のツールの説明は次回に行うとして、まずはelmを書いてコンパイルまでを行ってみます。
Hello World
HTMLとしてブラウザにHello Worldを出力してみます。
コードサンプルは公式のTOPページ。
写経したコードがこちら。
elm makeコマンドでcompileします。
エラーが。
調べてみたところ、必要な部品をimportしなくてはいけないようですね。
もちろん、importする部品はパッケージとしてinstallしなくてはいけません。
このように変更。
これでコード内でspan, class, textが使えるようになりました。
コンパイルするとこのとおり!
無事にindex.htmlが生成されました。
ブラウザで確認するとこんな感じ。
今日はここまで。