Elm開発環境について

[Elm開発環境について](https://qiita.com/sand/items/9afaef65c6f1ebf453da "Elm開発環境について")
[Elm Architecture の Model-View-Updateについて](https://qiita.com/sand/items/d9830b4226710a969488 "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 について](https://qiita.com/sand/items/ee42d9b439dfd3624018)**

```
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サンプルプログラムを少し修正します。

```elm:MyButtons.elm
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を使っています。

```elm
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ファイルが作られます。

```json: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で読み込みます。

```html: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
```

　今回はこれで終わりますが、次回からは言語やアーキテクチャーの中身に触れていきたいと思います。