Phoenix with Elm をやってみた Part1

Elixir Phoenix Elm

Phoenix With Elm をためしてみましたのでメモ書きとして残しておきます。
Phoenix With Elm全体が気になる方は下記をごらんください。

Phoenix with Elm
Phoenix with Elmのリポジトリ

#実行環境
OS：OS X Yosemite
Erlang v19.0
Elixir v1.3.2
Phoenix v1.2.0
Elm v0.7.1
Node v6.2.2

ElmはJavaScriptにコンパイルされる関数型言語です。
Elm自体は既にインストールされていることを前提として進めております。
Elmlang.org にてインストール方法を確認していただければ、特に問題なくインストールは終わるかと思います。

まずは、Phoenixのアプリケーションを作りましょう。
ここは特にきにすることはなく、いつも通り作っていただいて問題はありません。

$ mix phoenix.new phoenix_with_elm
$ cd phoenix_with_elm/
$ mix ecto.create

続いて、Elmのコードを配置する場所の作成を行います。
web配下にelmディレクトリを作成し、その下にコードを作成していくようです。

$ mkdir web/elm

web/elm 配下に SeatSaver.elm という名前でElmのコードを記載します。
Elmには、Htmlのコアライブラリとして htmlというライブラリがあります。
こちらをインポートして、Hello from Elm という文字列を main に渡しているようです。
web/elm/SeatSaver.elm

module SeatSaver exposing (..)

import Html

main = Html.text "Hello from Elm"

さて、elm自体のコードの記載は終わりましたので、json の用意をしていきます。
jsonにてelmパッケージの管理を行うための記載を行っていきましょう。
package.json

{
  "repository": {},
  "license": "MIT",
  "scripts": {
    "deploy": "brunch build --production",
    "watch": "brunch watch --stdin"
  },
  "dependencies": {
    "babel-brunch": "~6.0.0",
    "brunch": "~2.1.3",
    "elm-brunch": "~0.7.0",
    "clean-css-brunch": "~1.8.0",
    "phoenix": "file:deps/phoenix",
    "phoenix_html": "file:deps/phoenix_html"
  },
  "devDependencies": {
    "babel-brunch": "~6.0.0",
    "brunch": "2.7.4",
    "clean-css-brunch": "~2.0.0",
    "css-brunch": "~2.0.0",
    "elm": "^0.17.1",
    "javascript-brunch": "~2.0.0",
    "uglify-js-brunch": "~2.0.1"
  }
}

brunch-config.json

  ...
  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: [
      "web/static",
      "test/static",
      "web/elm/SeatSaver.elm"
    ],

    // Where to compile files to
    public: "priv/static"
  },

  // Configure your plugins
  plugins: {
    elmBrunch: {
      elmFolder: "web/elm",
      mainModules: ["SeatSaver.elm"],
      outputFolder: "../static/vendor"
    },
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/web\/static\/vendor/]
    }
  },
  ...

さて、パッケージの管理のための記載が行えましたので、次はHTML側の準備を行っていきましょう。
Phoenixの基本ページである index.html.eexの内容を変更していきます。
自動生成された内容を削除し、下記を記載します。
web/templates/page/index.html.eex

<div id="elm-main"></div>

さて、続いてapp.js内部にelmの読み込みの記載を行います。
elmはelmで記載されたコードをJavaScriptに変更しますので、その内容をapp.jsにて読み込んで実行していきます。
web/static/js/app.js

...
const elmDiv = document.getElementById('elm-main')
    , elmApp = Elm.SeatSaver.embed(elmDiv)

最後にテンプレートの記載を行って完了です。
web/templates/layout/app.html.eex

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Hello SeatSaver!</title>
    <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
  </head>

  <body>
    <div class="container">

      <main role="main">
        <%= render @view_module, @view_template, assigns %>
      </main>

    </div> <!-- /container -->
    <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
  </body>
</html>

さて、最後に実行すればおわり…かと思いましたら、そうはいきませんでした。
どうやらbabel2015とbabel2016の対応をしなければElmのコンパイルに失敗してしまうようなので、npm installにて実行しましょう。
環境が変わったりすると実際に試してみないとわからないことですね。
compiled seatsaver.js と表示され、seatsaver.js がコンパイルされれば、問題はないはずです。

$ npm install babel-preset-es2015
$ npm install babel-preset-es2016
$ iex -S mix phoenix.server
Erlang/OTP 19 [erts-8.0] [source] [64-bit] [smp:4:4] [async-threads:10] [hipe] [kernel-poll:false]

[info] Running PhoenixWithElm.Endpoint with Cowboy using http://localhost:4000
Interactive Elixir (1.3.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> Elm compile: SeatSaver.elm, in web/elm, to ../static/vendor/seatsaver.js 
19 Sep 20:40:28 - info: compiled 8 files into 2 files, copied 3 in 1.6 sec
19 Sep 20:40:29 - info: compiled seatsaver.js and 5 cached files into app.js in 175ms

http://localhost:4000 にアクセスし、 Hello from Elm と表示されていれば成功です。

Elm自体のコードの書き方は guide.elm-lang.org をみていただければ、どのように記載していくのかがわかるかと思います。
これから少しずつ Phoenix with Elmを続けて参考資料をあげていけれるように頑張ります。