コンパイラかく語りき

import { Fun } from 'programming'

Elmに入門する(2)

前回は、Elmという言語について簡単に学びました。 

chuckwebtips.hatenablog.com

 

今回は、Elmをインストールして実際に書いてみます。

 

 

インストール

インストールします。

公式:http://elm-lang.org/install

 

f:id:chuck0523:20160323075439p:plain

Mac用のinstallerをクリック。

 

エディタ用にシンタックスハイライトもインストールします。

僕はAtomを使っているので、こちらをインストールしました。

atom.io

 

スタートアップ

インストールが終わると、インストーラからこちらのページを試すよう言われました。

http://elm-lang.org/get-started

 

初回のガイドですね。こちらに沿って進めていきます。

 

ツール

インストールが終わったことによって、以下のツールが使用可能となりました。

  • elm
  • elm-package
  • elm-make
  • elm-repl
  • elm-reactor

以下、1つずつ見て行きます。

 

elm

elmは他の全てのツールを起動します。ターミナルでelmとコマンドすると、ヘルプメッセージを見ることができます。

f:id:chuck0523:20160323080225p:plain

 

elm-package

elm-packageはElmのパッケージマネージャのようです。npmやgem bundlerみたいな感じでしょうか。

パッケージの一覧は以下から参照できます。

http://package.elm-lang.org/

 

新しいプロジェクトを立ち上げるときは、以下のコマンドを打ちます。

$ elm package install

f:id:chuck0523:20160323080923p:plain

elm-lang/coreというものをインストールするか聞かれました。ひとまずyes。

 

このようなディレクトリ構造が自動生成されました。

f:id:chuck0523:20160323081347p:plain

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ページ。

f:id:chuck0523:20160323081811p:plain

 

写経したコードがこちら。

gist46c91f40035948cbe32b

 

elm makeコマンドでcompileします。

f:id:chuck0523:20160323082517p:plain

エラーが。

 

調べてみたところ、必要な部品をimportしなくてはいけないようですね。

もちろん、importする部品はパッケージとしてinstallしなくてはいけません。

www.lambdacat.com

 

このように変更。

gist8742bbc1b4185105f465

 

これでコード内でspan, class, textが使えるようになりました。

コンパイルするとこのとおり!

f:id:chuck0523:20160323083207p:plain

無事にindex.htmlが生成されました。

 

ブラウザで確認するとこんな感じ。

f:id:chuck0523:20160323083606p:plain

 

今日はここまで。

 

chuckwebtips.hatenablog.com