2019/6/19 PWANight localhost:8080 1/19 Elmが思ってたより良かった話 Elmの紹介とElmアプリケーションでのPWA

2019/6/19 PWANight localhost:8080 2/19 About me Webフルスタック(雑⽤)エンジニア,UIデザイナー Elixir,Elm,TypeScript 神社巡り,バスケ @ngmr_mo(nagimaru) Tomoya Ishizaka

2019/6/19 PWANight localhost:8080 3/19 Elmは余分な機能を削ぎ落とし、 さらにフレームワーク(TEA)を内包した関数型⾔語

2019/6/19 PWANight localhost:8080 4/19 TEA (The Elm Architecture) とは

2019/6/19 PWANight localhost:8080 5/19 TEAとは 引⽤: https://medium.com/@l.mugnaini/the-elm-architecture-tea-animation-3efc555e8faf の始祖とか⾔われてるやつ Redux

2019/6/19 PWANight localhost:8080 6/19 TEAとは Update Msgを受け取り、新しいModelとCmdを返す Model 状態 View Modelを元にHTMLを返す Cmd 副作⽤を扱う仕組み。APIのレスポンスなどをMsgと共に返してくれたり。

2019/6/19 PWANight localhost:8080 7/19 TEAとは Model init : String -> ( Model, Cmd Msg ) init slug = getArticle slug -- ① slug と共にGetArticle というMsg を送信 getArticle : String -> ( Model, Cmd Msg ) getArticle slug = update (GetArticle slug) { response = Loading, slug = slug }

2019/6/19 PWANight localhost:8080 8/19 TEAとは Update update : Msg -> Model -> ( Model, Cmd Msg ) update msg model = case msg of -- ③ Cmd が返したGotArticle というMsg と共に結果を受け取りモデル更新 GotArticle result -> case result of Ok articleData -> ( { model | response = Success articleData }, Cmd.none ) Err _ -> ( { model | response = Failure }, Cmd.none ) -- ② GetArticle を受け取ったらContentfulAPI を呼び出す(Cmd 発⾏) GetArticle slug -> ( model, Contentful.getArticle GotArticle slug )

2019/6/19 PWANight localhost:8080 9/19 TEAとは View view : Model -> { title : String, body : List (Html Msg) } view model = { title = "Hoge" , body = [ section [ ] [ case model.response of Loading -> p [ ] [ text "Loading..." ] Failure -> p [ ] [ text "Not Found" ] Success articleData -> -- TODO: 記事表⽰ article [ ] [ ] ] ] }

2019/6/19 PWANight localhost:8080 10/19 ElmはTEAでアプリケーションを構築するための⾔語 と⾔っても過⾔ではない (⾔語とフレームワークが密結合)

2019/6/19 PWANight localhost:8080 11/19 Elmのいいところ 基本的に実⾏時エラーが出ない 仕様が⼩さいため学習コストが極めて低い [1,2,3]===[1,2,3] がTrue *1 コンパイル早え エラーメッセージが親切すぎる 型付けに「がんばる」とか「がんばらない」とかない*2 *1 参照を考えなくて良い *2 「がんばらないTypeScript」が話題でしたね

2019/6/19 PWANight localhost:8080 12/19 Elmのつらいところ UnsafeなものをElmアプリケーションの外側に出すためにボイラープレートが 強制される(Portなど) TEA以外のフレームワークやアーキテクチャを選択できない(⾒⽅によってはメ リット) ⼩さいUIパーツに独⽴した状態を持たせられないので複雑なUIを作ろうとする と⾟い

2019/6/19 PWANight localhost:8080 13/19 個⼈的な使い分け ハッカソンなどの使い捨てプロダクト JavaScript + React + MobX 普段の業務 TypeScript + React + (MobX or Typeless) ⼤規模開発 TypeScript + Angular + NgRx (angular-cliが⼼強い) とにかく堅牢に⾏きたい Elm + The Elm Architecture

2019/6/19 PWANight localhost:8080 14/19 ElmでPWAをやってみよう

2019/6/19 PWANight localhost:8080 15/19 PWA with Elm $ create-elm-app pwa_app

2019/6/19 PWANight localhost:8080 16/19 PWA with Elm $ create-elm-app pwa_app これだけでPWA対応したコードが吐き出されます

2019/6/19 PWANight localhost:8080 17/19 create-elm-appによるPWA対応 manifest.jsonが吐き出される ビルド時sw-precache-webpack-pluginによってservice-worker.jsを⽣産する ServiceWorkerをregisterしたりunregisterしたりする関数が⼊った registerServiceWorker.jsが吐き出される

2019/6/19 PWANight localhost:8080 18/19 好き勝⼿webpack.con gをいじろう $ elm-app eject

2019/6/19 PWANight localhost:8080 19/19 ありがとうございました！