PhoenixでElmしてみる - Galapagos Tech Blog

ご機嫌よう、奢侈文弱なガラパゴスのおとめです。

ガラパゴスでは社内勉強会というものが毎週開催されているのですが、その席で、Elm推しのナイスミドルで格好いい本柳さんが「PhoenixとElm連携できます(｀･ω･´)ｷﾘｯ」と発表されていましたので、今回はそれを試してみます。

この記事はPhoenix Framework 1.3-rc.1を対象にしています。1.2以前はディレクトリ構造などが異なります。また、PhoenixやElmのインストールなどは済んでいるものとします。

$ iex -v
Erlang/OTP 19 [erts-8.3] [source-d5c06c6] [64-bit] [async-threads:10] [hipe] [kernel-poll:false]

IEx 1.4.1
$ mix phx.new -v
Phoenix v1.3.0-rc.1
$ node -v
v6.10.3
$ elm -v
0.18.0

おさらい：Phoenix FrameworkとElm

もちろんこのblogをご覧の皆様には説明の必要などないと思われますが、Phoenix Frameworkは、RailsとErlangのいいとこ取りをしようといったWebフレームワークで（1.3でRails Wayとは一線を画す素敵な方向に進んだことはこのblogでも触れました）、一方のElmは乱立するAltJSの戦いで瀕死のフロントエンドエンジニアにもたらされた希望です。

因みにですが、PhoenixのデフォルトではフロントエンドにはES6が使われます。

まとめ

いきなりですがまとめますと、Phoenix Frameworkで使用しているbrunchにElm対応の拡張を入れると、それだけでフロントエンドはElmで書くことができます。ほら、簡単でしょう？

アセット管理のおはなし

簡単でしょう？ ……？？

何を言っているのかちょっと意味がわかりませんね。Elm対応の拡張を入れる？　なに言うてはりますのん？

その前にbrunchについてお話ししましょう。brunchはフロントエンドのビルドツールで、Phoenixではデフォルトのアセット管理ツールとして採用されています。アセットというのはJavascriptやCSSなど、Viewのナカミのように動的に生成されるわけではないリソースのことですが、例えばLESSやSCSSで書いたものはCSSにコンパイルしたり、Javascriptはサイズを圧縮したりしますね？　そういったことを行うためのツールです。行うと言っても実際には意識することはほとんどなくて、アプリケーションの実行時にフレームワークがよしなにそういうことをしてくれるのですが。

さて、ここまでのおはなしで、諸兄諸姉にはもう、アセットというものは静的で、変更後一回だけ生成すればよく、しかしその一回は確実に実行されなければならない、ということがお分かりかと思います。

ところで、例えばES6ならイマドキのモダンなブラウザなら普通に使うことができます−−できるはずですね？−−が、Elmの場合はJavascriptに変換する必要も出てきます。トランスパイルですね。もちろん、Elmで書いて手動でトランスパイルして、出てきたJavascriptをbrunch（などのビルドツール）で使う、ということもできますが、面倒じゃなくてですか？　もしも万が一手順書のようなものに従って何かするとしたら、トランスパイルしたり、そうして出力されたファイルを決まった場所にコピーしたり、といった「手順」はいかにも省略されそうじゃなくてですか？　人が行うなら、確実に実行される、という要求を満たせそうにありません。

そんなわけですので、ソースツリー上では普通にElmを書いて、トランスパイル以下略などは自動的によろしくして頂きたいですね。

elm-brunchを使ってみる

もちろんシェルスクリプトなどを書いてCIに組み込んでも良いのですが（それはそれでローカルデバッグの時面倒そうですが）、もっと朗報があります。Elmに対応したツールを使えば良いのです。はじめの方でお話ししたように、brunchにElm対応の拡張を入れましょう。

ここにelm-brunchがありんす。早速インストールしましょう。

$ npm install --save-dev elm-brunch

Phoenixプロジェクト上にElmのためのフォルダを作って関連するパッケージをインストールします。

$ mkdir assets/elm
$ cd assets/elm
$ elm package install elm-lang/html

せっかくelmディレクトリにいることですし、早速Elmを書いていきましょう（テキストに「ご機嫌よう世界」と出力するだけの簡単なものです）。この時、App.elmというファイル名にすると、トランスパイルして出力されたファイルが既存のapp.jsを上書きしてしまうので注意しましょう。今回はElmApp.elmという名前にしてみました。

module ElmApp exposing (..)

import Html exposing (Html, text)

main : Html msg
main =
  text "ご機嫌よう世界"

さて、もちろん現時点ではまだbrunchの設定などは行なっていませんので、このままではトランスパイルなどは自動では行われません。そこで、brunchの設定をします。

まず、assets/brunch-config.jsに、elm-brunchに関する設定を書きます。brunchが監視しているフォルダに"elm"を追加するのもお忘れなく。

elmBrunchの設定でelmFolderを指定する設定方法をよく見るのですが、それでは動かなかったので、ここではmainModulesでパスも指定しています。

...
  paths: {
    // Dependencies and current project directories to watch
    watched: ["static", "css", "js", "vendor", "elm"],
    // Where to compile files to
    public: "../priv/static"
  },

  // Configure your plugins
  plugins: {
    elmBrunch: {
      mainModules: ["elm/ElmApp.elm"],
      outputFolder: "../assets/js",
      makeParameters: ["--debug"]
    },
    babel: {
      // Do not use ES6 compiler in vendor code
      ignore: [/vendor/]
    }
  },
...

依存関係にもElm関連を指定する必要がありますので、assets/package.jsonに追加します。

...
  "devDependencies": {
    "babel-brunch": "6.0.6",
    "brunch": "2.10.7",
    "elm": "^0.18.0",
    "elm-brunch": "~0.8.0",
    "clean-css-brunch": "2.10.0",
    "css-brunch": "2.10.0",
    "uglify-js-brunch": "2.1.1"
  }
...

この段階で、一旦アセットパイプラインを動かして、Elmがトランスパイルされることを確認してみましょう。Phoenixでbrunchなアセットパイプラインを手動で実行するには以下のようにします。問題がなければ、このように完了メッセージが表示されるはずです。

$ node node_modules/brunch/bin/brunch build
14:56:35 - info: compiled 66 files into 2 files, copied 3 in 2.8 sec
Elm compile: elm/ElmApp.elm, to ../assets/js/elmapp.js

ところで先ほど書いたElmApp.elmはどこでどう動くのでしょう？

assets/brunch-config.jsに、outputFolder: "../assets/js"と書きました。これは、トランスパイルしたファイルの出力先の指定になります。アセットパイプラインを実行した際のコンソールログからもこのことはお分かりいただけますね？　でも、このままではアプリケーションにロードされませんので、どこかに書く必要があります。

どこかに……？

ElmApp.elmは、単に「ご機嫌よう世界」と出力するだけなのを思い出してください。とりあえず適当な要素にでも出してみましょう。

というわけで、elmというIDの要素に出力してみます。assets/js/app.jsにElmAppを使います的な感じで、要素を書き換えるJavascriptを記述します。

...
import "phoenix_html"
import Elm from "./elmapp.js"
...
const elmElement = document.querySelector("#elm")
const elmApp = Elm.ElmApp.embed(elmElement)

次に、出力先の要素を適当に用意します。プロジェクトを作ったばかりの場合はインデックスページ（lib/YOUR_APP_NAME/web/templates/page/index.html.eex）しかありませんが、ここに追加してしまいましょう。

...
  <div id="elm"></div>
...

ではサーバを起動してみます。

$ mix phx.server

するとこのように、無事にご機嫌よう世界できました。

f:id:glpgsinc:20170517153955p:plain

elmapp.jsがありません、というようなエラーになる場合は、app.jsの該当の行を一旦コメントアウトしてアセットパイプラインを実行してください。これは、elmのトランスパイルがjsのコンパイルよりも後に行われることで発生します。一度トランスパイルしてしまえば大丈夫です。トランスパイルを必ず先に行うこともできると思うのですが、この記事ではそこまで突っ込みません。