Elm開発環境について
Elm Architecture の Model-View-Updateについて
ElmはWebアプリのフロントエンドの開発言語です。Haskellのような純粋関数型言語であり、コンパイルするとJavaScriptとHtml、CSSのコードを吐き出します。つまりAltJSの言語です。個人的にはHaskellが単に好きなので、JavaScriptを書かずにHaskellのようなシンタックスで書けるのならありがたいと思います。今まで手を出さずに来たのですが、最近はElmも十分に実用的になり生産性の高い言語になったとの噂を聞き、試してみたいと思いました。
まずは公式サイトを見ながら、基本的な開発環境を構築したいと思います。Centos7のサーバ上で実験をしていきます。
https://guide.elm-lang.org/install.html
１．elmのインストール
次のnpmコマンド一発でインストールできます。必要最低限な開発ツールーもインストールされますので、便利です。
npm install -g elm
（追記）2018/09/05 上記のインストールでは Elm 0.19がインストールされます。
0.19の新機能を特に望まない方は下記のコマンドで0.18をインストールすることをお勧めします。
既存のパッケージが使えません。===>Elm 0.19 について
npm install -g elm@0.18.0
elm-repl (the Read-Eval-Print Loop, or REPL)という会話型のインタープリタが使えるようになります。elm言語のコアの部分を確認するには良いツールでしょう。まあ、しかしここでは説明はしません。
その他に、elm-packageとelm-make、elm-reactorというツールが使えるようになります。これはよく使うので以下に説明していきます。
２．elmのソースコード
公式サイトのButtonsサンプルプログラムを少し修正します。
module MyButtons exposing (..)
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
main =
Html.beginnerProgram { model = model, view = view, update = update }
-- MODEL
type alias Model = Int
model : Model
model =
0
-- UPDATE
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
-- VIEW
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, div [] [ text (toString model) ]
, button [ onClick Increment ] [ text "+" ]
]
先頭にmodule宣言を置きました。これで他のファイルからこのプログラムをMyButtons moduleとして読み込むことが可能となります。実際にはindex.jsでElm.MyButtons.embed()のようにMyButtons moduleを使っています。
module MyButtons exposing (..)
ここでは開発環境の構築に焦点を合わせていますので、プログラムの中身の説明は後日に回します。Elm Architecture (Model,Update,View)はReduxのモデルとなったということもありますし、cmd/subはHaskellのIO モナドとの関連もありそうなので別テーマとしたいです。
３．パッケージのインストール
MyButtons.elmのソースコードでHtmlパッケージをimportしているので、そのパッケージをインストールしておく必要があります。以下のコマンドを打ちます。
elm-package install elm-lang/html
以下にコマンド履歴を示しておきます。
[sand@www13134uf test]$ elm-package install elm-lang/html
Some new packages are needed. Here is the upgrade plan.
Install:
elm-lang/core 5.1.1
elm-lang/html 2.0.0
elm-lang/virtual-dom 2.0.4
Do you approve of this plan? [Y/n]
Starting downloads...
● elm-lang/html 2.0.0
● elm-lang/core 5.1.1
● elm-lang/virtual-dom 2.0.4
Packages configured successfully!
htmlとvirtual-domがダウンロードされるばかりでなく、coreもローカルにダウンロードされるようです。virtual-domはReactのものよりも高速だとの評判があります。elm-stuffディレクトリの下にダウンロードされます。またnpmの時と同じように、elm-package.jsonファイルが作られます。
{
"version": "1.0.0",
"summary": "helpful summary of your project, less than 80 characters",
"repository": "https://github.com/user/project.git",
"license": "BSD3",
"source-directories": [
"."
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "5.1.1 <= v < 6.0.0",
"elm-lang/html": "2.0.0 <= v < 3.0.0"
},
"elm-version": "0.18.0 <= v < 0.19.0"
}
４．コンパイル
次のコマンドをターミナルから打つことで、MyButtons.elmをコンパイルし、elm.jsを出力します。コンパイルの位置づけは、Reactの時にWebpackでバンドルファイルを作るのに似ています。index.htmlで読み込むと、ブラウザからアクセスできる仕組みです。
elm-make MyButtons.elm --output elm.js
５．index.html
コンパイル結果であるelm.jsをindex.htmlで読み込みます。
<!doctype html>
<html>
<head>
</head>
<body>
<div id="elm-area"></div>
<script src="elm.js"></script>
<script>
Elm.MyButtons.embed(document.getElementById("elm-area"));
</script>
</body>
</html>
Elm.MyButtons.embed(document.getElementById("elm-area"))行で、作成したプログラム(elm.js)が、＜div id="elm-area"＞＜/div＞の中で走るようになります。
６．httpサーバの立ち上げ
以下のコマンドでhttpサーバが立ち上がります。www.mypress.jpはサーバのアドレスで、3030はポート番号です。
elm-reactor -a=www.mypress.jp -p=3030
以下のURLにブラウザでアクセスするとアプリがブラウザに表示されます（今回は参照することができません）。
http://www.mypress.jp:3030/index.html
今回はこれで終わりますが、次回からは言語やアーキテクチャーの中身に触れていきたいと思います。