ハードリカーエンジニア

2016-09-19

Phoenix with Elm をやってみた Part1

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

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

#実行環境
OSOS 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 と表示されていれば成功です。
f:id:hayabusa333:20160919204353p:image

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

jinjorjinjor 2016/09/21 07:41 > どうやらbabel2015とbabel2016の対応をしなければElmのコンパイルに失敗してしまうようなので
Babelに詳しくないのでよく分からなかったのですが、ElmのコンパイルはES6と関係ない気がしますが?

hayabusa333hayabusa333 2016/09/22 13:47 確かにおっしゃるとおりで、こちら側の調査が少ない状態ですので、もう少し中身を読んでから、ご指定機いただいた内容を説明させていただきたいと思います。
指摘いただきまことにありがとうございました。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/hayabusa333/20160919/phoenixwithelmpart1
Connection: close