Download - E言語スタック
![Page 1: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/1.jpg)
E 言語スタック
![Page 2: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/2.jpg)
自己紹介name = 橘田 隼一|> TwitterID = hayabusa333|> heart = [ カーネル , GC, Erlang, Elixir]|> jobs = ウェッブプログラマ|> position = [Joel 教 , 翔鶴瑞鶴仲良し姉妹同盟 , 社畜な錬金術師 ]
![Page 3: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/3.jpg)
宣伝夏コミ販売物プログラミング Elixir が出る前に出たので、だいたい Elixir についての本 2 冊目ぐらい内容はHound について自作ライブラリ (KinoTake)Ecto のマイグレーション
![Page 4: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/4.jpg)
宣伝100 部作成して、夏コミは 33 部なので、再び大赤字Booth にて販売中https://hayabusa333.booth.pm/items/306892
次回は物理本を買われた方に電子版も取得できるようにします。
![Page 5: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/5.jpg)
宣伝おわり
![Page 6: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/6.jpg)
E 言語スタック ?Elixir(Phoenix) と Elm を使用してWeb アプリケーションの構築をしてみました。てきとうに名前をつけただけ。あと、スマフォアプリを作る言語でE で始まる言語が欲しい
![Page 7: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/7.jpg)
ElmJavaScript へとコンパイルされる関数型言語Elm Compiler 自体は Haskell で書かれているよ
![Page 8: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/8.jpg)
今回の資料は、 Phoenix with Elm の初回部分を行っただけです。気になった方は調べていただければ、すぐに出てきます。またブログにも今後、まとめていきます
![Page 9: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/9.jpg)
環境・ Erlang v19.0・ Elixir v1.3.2・ Phoenix v1.2.0・ Elm v0.7.1・ Node v6.2.2
![Page 10: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/10.jpg)
Elm を Phoenix に含める方法・外部に Elm にてコードを記載して、 JavaScript にコンパイルする・ Phoenix の vendor ディレクトリに配置して JavaScript にコンパイルする・ brunch build で JavaScript にコンパイル
![Page 11: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/11.jpg)
外部に Elm にてコードを記載
http://www.cultivatehq.com/posts/phoenix-elm-2/ より画像を拝借
![Page 12: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/12.jpg)
vendor ディレクトリに配置
http://www.cultivatehq.com/posts/phoenix-elm-2/ より画像を拝借
![Page 13: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/13.jpg)
brunch build で含める
http://www.cultivatehq.com/posts/phoenix-elm-2/ より画像を拝借
![Page 14: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/14.jpg)
Phoenix with Elm ではbrunch build で行っている
![Page 15: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/15.jpg)
Elm のコード記載
![Page 16: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/16.jpg)
Import HtmlElm の HTML レンダリング用のライブラリHTML レンダリング用のライブラリをImport して、 Html.text にて文字を表示できるように設定
![Page 17: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/17.jpg)
package.json
http://www.cultivatehq.com/posts/phoenix-elm-2/ より画像を拝借
![Page 18: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/18.jpg)
brunch-config.json
http://www.cultivatehq.com/posts/phoenix-elm-2/ より画像を拝借
![Page 19: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/19.jpg)
brunch-config.jsonelmFolder: "web/elm", Elm のコードの配置場所の設定mainModules: [“SeatSaver.elm"], Elm のコード名の記載outputFolder: “../static/vendor" JavaScript のアウトプット先指定
![Page 20: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/20.jpg)
index.html.eex
http://www.cultivatehq.com/posts/phoenix-elm-2/ より画像を拝借
![Page 21: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/21.jpg)
web/static/js/app.js
http://www.cultivatehq.com/posts/phoenix-elm-2/ より画像を拝借
![Page 22: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/22.jpg)
web/static/js/app.jsdocument.getElementById(‘elm-main') Html にて elm-main と記載されている Id の箇所を取得するElm.SeatSaver.embed(elmDiv) 上記で取得した箇所に SeatSaver.eml で記載したコードを含める
![Page 23: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/23.jpg)
Elm のコード記載
![Page 24: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/24.jpg)
iex -S mix phoenix.server
![Page 25: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/25.jpg)
そのほか
![Page 26: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/26.jpg)
Elm の構造についてModel :アプリケーションの状態を保持する処理Update :アプリケーションの状態の更新を行う処理View : HTML などの表示の処理
![Page 27: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/27.jpg)
Elm の構造について
![Page 28: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/28.jpg)
感想Phoenix で Elm を使用するのは、そこまで難しくない大規模になった場合の構造化について考えるとどうなのか?Elm で Web 系のゲームのコードの記載されているので、そのあたりを確認かな?
![Page 29: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/29.jpg)
参考資料Phoenix with Elmhttp://www.cultivatehq.com/posts/phoenix-elm-1/
Elmhttp://elm-lang.org/
![Page 30: E言語スタック](https://reader035.vdocuments.pub/reader035/viewer/2022070603/586f716b1a28ab10258b4f41/html5/thumbnails/30.jpg)
ご静聴ありがとうございました