E 言語スタック

自己紹介name = 橘田 隼一|> TwitterID = hayabusa333|> heart = [ カーネル , GC, Erlang, Elixir]|> jobs = ウェッブプログラマ|> position = [Joel 教 , 翔鶴瑞鶴仲良し姉妹同盟 , 社畜な錬金術師 ]

宣伝夏コミ販売物プログラミング Elixir が出る前に出たので、だいたい Elixir についての本 2 冊目ぐらい内容はHound について自作ライブラリ (KinoTake)Ecto のマイグレーション

宣伝100 部作成して、夏コミは 33 部なので、再び大赤字Booth にて販売中https://hayabusa333.booth.pm/items/306892

次回は物理本を買われた方に電子版も取得できるようにします。

宣伝おわり

E 言語スタック ?Elixir(Phoenix) と Elm を使用してWeb アプリケーションの構築をしてみました。てきとうに名前をつけただけ。あと、スマフォアプリを作る言語でE で始まる言語が欲しい

ElmJavaScript へとコンパイルされる関数型言語Elm Compiler 自体は Haskell で書かれているよ

今回の資料は、 Phoenix with Elm の初回部分を行っただけです。気になった方は調べていただければ、すぐに出てきます。またブログにも今後、まとめていきます

環境・ Erlang v19.0・ Elixir v1.3.2・ Phoenix v1.2.0・ Elm v0.7.1・ Node v6.2.2

Elm を Phoenix に含める方法・外部に Elm にてコードを記載して、 JavaScript にコンパイルする・ Phoenix の vendor ディレクトリに配置して JavaScript にコンパイルする・ brunch build で JavaScript にコンパイル

外部に Elm にてコードを記載

http://www.cultivatehq.com/posts/phoenix-elm-2/ より画像を拝借

vendor ディレクトリに配置

http://www.cultivatehq.com/posts/phoenix-elm-2/ より画像を拝借

brunch build で含める

http://www.cultivatehq.com/posts/phoenix-elm-2/ より画像を拝借

Phoenix with Elm ではbrunch build で行っている

Elm のコード記載

Import HtmlElm の HTML レンダリング用のライブラリHTML レンダリング用のライブラリをImport して、 Html.text にて文字を表示できるように設定

package.json

http://www.cultivatehq.com/posts/phoenix-elm-2/ より画像を拝借

brunch-config.json

http://www.cultivatehq.com/posts/phoenix-elm-2/ より画像を拝借

brunch-config.jsonelmFolder: "web/elm", Elm のコードの配置場所の設定mainModules: [“SeatSaver.elm"], Elm のコード名の記載outputFolder: “../static/vendor" JavaScript のアウトプット先指定

index.html.eex

http://www.cultivatehq.com/posts/phoenix-elm-2/ より画像を拝借

web/static/js/app.js

http://www.cultivatehq.com/posts/phoenix-elm-2/ より画像を拝借

web/static/js/app.jsdocument.getElementById(‘elm-main')　 Html にて elm-main と記載されている Id の箇所を取得するElm.SeatSaver.embed(elmDiv) 上記で取得した箇所に SeatSaver.eml で記載したコードを含める

Elm のコード記載

iex -S mix phoenix.server

そのほか

Elm の構造についてModel ：アプリケーションの状態を保持する処理Update ：アプリケーションの状態の更新を行う処理View ： HTML などの表示の処理

Elm の構造について

感想Phoenix で Elm を使用するのは、そこまで難しくない大規模になった場合の構造化について考えるとどうなのか？Elm で Web 系のゲームのコードの記載されているので、そのあたりを確認かな？

参考資料Phoenix with Elmhttp://www.cultivatehq.com/posts/phoenix-elm-1/

Elmhttp://elm-lang.org/

ご静聴ありがとうございました