ElmのバックエンドとしてPhoenixを使う

追記：最新版のphoenix1.3とElmについてはこちらの方を参照してください。
ElmからPhoenix v1.3のRest APIを叩いてみる - Qiita

　Elmのバックエンドとして、Phoenixを使いたいと思いました。そのためにElixirやPhoenixを少し勉強しました。今回はその出発点になる知識をメモっておきたいと思います。以下のサイトを参考にしました。
Phoenix and Elm, a real use case (pt. 1) - Code, Love & Boards
Setting up Elm with Phoenix – Brandon Richey – Medium

　今回は単にPhoenixのフロントエンドとしてelmの単純な画面を表示するだけのプログラムを作ります。まず以下の手順でElmとElixir、Phoenixのインストールを行っていると仮定します。
Elm開発環境について - Qiita
CentOS7にErlangとElixir、Phoenixをインストールしてみる - Qiita

　Phoenixでは、Brunchを使って、静的なアセットをビルドしています。Elmコードはbrunchに従ってコンパイルされ、ロードされます。幸いなことに、ElmコードをコンパイルするためのBrunch pluginであるelm-brunchが利用できます。さっそくプロジェクトを構築していきましょう。

　Phoenixのプロジェクトを作成します

mix phoenix.new phoenix_elm_test

　elm-brunchをインストールします

cd phoenix_elm_test
npm install --save-dev elm-brunch

　brunch-config.jsを編集します。2か所の追加が必要です（追加1と追加2）。

brunch-config.js

exports.config = {
  // See http://brunch.io/#documentation for docs.
  files: {
    javascripts: {
      joinTo: "js/app.js"
    },
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        after: ["web/static/css/app.css"] // concat app.css last
      }
    },
    templates: {
      joinTo: "js/app.js"
    }
  },

  conventions: {
    assets: /^(web\/static\/assets)/
  },

  // Phoenix paths configuration
  paths: {
    // Dependencies and current project directories to watch
    watched: [
      "web/static",
      "test/static",
//-------------追加１
      "web/elm"
//-------------
    ],
    // Where to compile files to
    public: "priv/static"
  },

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

  modules: {
    autoRequire: {
      "js/app.js": ["web/static/js/app"]
    }
  },

  npm: {
    enabled: true
  }
};

　特に追加２のoutputFolderに注目してください。一般的にvendorフォルダはBrunchによってこれ以上変換（コンパイル）されないファイルの置き場所で、そこのファイルは全て、appプログラムの前にロードされ、連結されるという決まりのようです。以下で見るようにjs/app.jsからVendor/Main.js（Elmのコンパイル結果）を参照していますが、特にNotFoundエラーも出さずに、Elm.Mainモジュールを利用できます。
http://brunch.io/docs/config
http://brunch.io/docs/concepts

　次にweb/elmディレクトリを作成しcdして、Elmコードに必要なパッケージをインストールします。今回のElmコードにはelm-lang/htmlだけでokです。

mkdir web/elm
cd web/elm
elm-package install elm-lang/html
# elm-package install elm-lang/http
# elm-package install simonh1000/elm-jwt

次にweb/elm/Main.elmを作成します。

Main.elm

module Main exposing (..)
 
import Html exposing (Html, text)
 
main : Html msg
main =
  text "こんちわ、Elmさん!"

　次にweb/templates/page/index.html.eexを編集して、先頭に以下の行を追加します。

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

　最後にweb/static/js/app.jsを編集して、末尾に以下の2行を追加します。Elm.Mainは当然 web/static/vendor/Main.jsを参照していますが、前述の通り、特に明示的なimportなどは必要ないようです。

const elmDiv = document.querySelector("#elm-container")
const elmApp = Elm.Main.embed(elmDiv)

　編集が終了したので、プロジェクトのトップに戻り、以下のコマンドを打ちプロジェクトを立ち上げます。

mix ecto.create
mix phx.server

　Phoenix起動時にElmコードがコンパイルされた旨のメッセージが確認できます。

[info] Running PhoenixElmTest.Endpoint with Cowboy using http://0.0.0.0:4000
Elm compile: Main.elm, in web/elm, to ../static/vendor/main.js
10:16:47 - info: compiling
10:16:50 - info: compiled 66 files into 2 files, copied 3 in 10.3 sec

　ブラウザからアクセスするとElmコードの出力が確認できます。

http://www.xxxx.jp:4000/

　以下は画面キャプチャーです。

　これで、Phoenixプロジェクトの中でElmが使えるようになりました。Webアプリの骨格を成すものができた感じで、うれしいです。