プログラミングElmを始めてみる


このエントリーをはてなブックマークに追加

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



Haskellの影響を受けた関数型web言語


どうやらHTML, CSS, JSをひとつのファイルで書けるらしい
(コンパイルするとJSが吐き出される)

で、純粋関数型なので副作用なども生じにくいとか

今日から始めるelm-lang

Haskell 的視点から見た Elm

Elmとはどんな言語か?その7つの特徴【Elmアドベントカレンダー2014 1日目】


Functional Reactive Programmingに対応

FRPというリアクティブプログラミングに対応しているらしい

モナドは無い?

Haskellによくにた文法ではあるがElmにはFRPがあるのでモナドは無いらしい
???

とにかくJSをほぼ純粋関数型的に書くことができる

JSは関数型的に書くことができるけど純粋ってわけでもないので
これが本当ならいいかもしれん(ES6ではどうかわからないけど)



ともあれ始めて見る


まずは公式サイトをみてみる

公式サイトで始めてみる
Get Started

Qiitaの記事も参考になりそう
今日から始めるelm-lang

自分はMac OSX El Capitanで行った

インストール

brewだと0.17らしいが最新は0.17.1っぽい?

公式でもインストーラー使ってたのでインストーラーを使う

Editor

公式ではSublime Textをおすすめされているのでそっちでもいいが

VScodeの拡張でも書きやすいらしい

VScodeつかってみよかな



とりあえず書いてみる


まずはHello World

Qiitaの記事を参考にした
Elm Reactor で Hello World

記事内ではnpm installでelmを入れてるっぽいけどまぁ大丈夫だろう

適当なディレクトリを作成してelm-makeでプロジェクトをセットアップする

1
2
3
4
5
6
7
8
9
$ mkdir elm-project
$ cd elm-project
$ elm-make --yes
# パッケージの導入
$ elm-package install elm-lang/html --yes
# Hello World用のファイルを作成する
$ touch Hello.elm

とにかくコードを書いてみる

Hello.elm
1
2
3
import Html exposing (text)
main = text "Hello, World!"

HTTPサーバーを起動させる

ターミナルでHTTPサーバーを起動させる

1
$ elm-reactor

で、デフォルトだとポート8000でサーバーが起動するのでブラウザで http://localhost:8000/ をひらく

以下のような画面が出てきたら成功っぽい

あとはHello.elmをクリックして開いてみて、Hello World!が表示されたら成功

ちなみにサーバー起動時にport番号を指定したい場合、例えば3000にしたい場合は以下のようにする

1
$ elm-reactor --port 3000

公式サイトのコード

適当なディレクトリにMain.elmファイルを作る(さっきと同じところでいいかな)
中身はIntroductionに従って以下な感じ

Main.elm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Html exposing (Html, button, div, text)
import Html.App as App
import Html.Events exposing (onClick)
main =
App.beginnerProgram { model = 0, view = view, update = update}
type Msg = Increment | Decrement
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (toString model) ]
, button [ onClick Increment ] [ text "+" ]
]

で、$ elm-reactorでサーバーを起動してあげて
下記リンクみたいに数字の増減ボタンが表示されたら成功
http://elm-lang.org/examples/buttons


Elmファイルをコンパイルしてみる

elm-makeコマンドでコンパイルしてみる

1
$ elm-make Main.elm

すると、同じディレクトリにindex.htmlファイルが生成しているので
ブラウザでアクセスしてみて動いたら成功

これだけ短いコードだったがindex.htmlファイルの中身を見てみたら8000行ぐらい
出力されていたので中身は省略

ちなみに、名前をつけてコンパイルしたい場合は以下のようにする

1
$ elm-make Hello.elm --output main.html

コマンドについては$ elm-make -hでオプションを調べることができる


elmのREPL

以下のコマンドを打つとElmのREPLが起動する

1
$ elm-repl


その他チュートリアル

elm-tutorial.orgというのがあったので
そこをみてやってみてもいいかもしれない
http://www.elm-tutorial.org/en/


もしもelm-reactorの挙動が変になったら

下記qiita記事によると、coreを4.0.1 -> 4.0.2に更新した後、elm-reactorを動作させたら
表示されなくなったとのこと
http://qiita.com/koichirokamoto/items/97218ee7fa641eb13847

elm-stuffディレクトリを削除してelm-package installしたら戻ったとのことだが
念の為覚えておこう


このエントリーをはてなブックマークに追加