Elmが思ったより良かった話

Transcript

1. 2019/6/19 PWA
   Night localhost:8080 1/19 Elmが思ってたより良かった話 Elmの紹介とElmアプリケーションでのPWA
2. 2019/6/19 PWA
   Night localhost:8080 2/19 About me Webフルスタック(雑⽤)エンジニア,
   UIデザイナー
   Elixir,
   Elm,
   TypeScript
   神社巡り,
   バスケ
   @ngmr_mo
   (nagimaru) Tomoya Ishizaka
3. 2019/6/19 PWA
   Night localhost:8080 3/19 Elmは余分な機能を削ぎ落とし、 さらにフレームワーク(TEA)を内包した関数型⾔語
4. 2019/6/19 PWA
   Night localhost:8080 4/19 TEA (The Elm Architecture) とは
5. 2019/6/19 PWA
   Night localhost:8080 5/19 TEAとは 引⽤: https://medium.com/@l.mugnaini/the-elm-architecture-tea-animation-3efc555e8faf の始祖とか⾔われてるやつ Redux
6. 2019/6/19 PWA
   Night localhost:8080 6/19 TEAとは Update Msgを受け取り、新しいModelとCmdを返す Model 状態 View Modelを元にHTMLを返す Cmd 副作⽤を扱う仕組み。APIのレスポンスなどをMsgと共に返してくれたり。
7. 2019/6/19 PWA
   Night 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 }
8. 2019/6/19 PWA
   Night 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 )
9. 2019/6/19 PWA
   Night 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 [ ] [ ] ] ] }
10. 2019/6/19 PWA
    Night localhost:8080 10/19 ElmはTEAでアプリケーションを構築するための⾔語 と⾔っても過⾔ではない (⾔語とフレームワークが密結合)
11. 2019/6/19 PWA
    Night localhost:8080 11/19 Elmのいいところ 基本的に実⾏時エラーが出ない 仕様が⼩さいため学習コストが極めて低い [1,2,3]
    ===
    [1,2,3] がTrue *1 コンパイル早え エラーメッセージが親切すぎる 型付けに「がんばる」とか「がんばらない」とかない*2 *1 参照を考えなくて良い *2 「がんばらないTypeScript」が話題でしたね
12. 2019/6/19 PWA
    Night localhost:8080 12/19 Elmのつらいところ UnsafeなものをElmアプリケーションの外側に出すためにボイラープレートが 強制される(Portなど) TEA以外のフレームワークやアーキテクチャを選択できない(⾒⽅によってはメ リット) ⼩さいUIパーツに独⽴した状態を持たせられないので複雑なUIを作ろうとする と⾟い
13. 2019/6/19 PWA
    Night localhost:8080 13/19 個⼈的な使い分け ハッカソンなどの使い捨てプロダクト JavaScript + React + MobX 普段の業務 TypeScript + React + (MobX or Typeless) ⼤規模開発 TypeScript + Angular + NgRx (angular-cliが⼼強い) とにかく堅牢に⾏きたい Elm + The Elm Architecture
14. 2019/6/19 PWA
    Night localhost:8080 14/19 ElmでPWAをやってみよう
15. 2019/6/19 PWA
    Night localhost:8080 15/19 PWA with Elm $ create-elm-app pwa_app
16. 2019/6/19 PWA
    Night localhost:8080 16/19 PWA with Elm $ create-elm-app pwa_app これだけでPWA対応したコードが吐き出されます
17. 2019/6/19 PWA
    Night localhost:8080 17/19 create-elm-appによるPWA対応 manifest.jsonが吐き出される ビルド時sw-precache-webpack-pluginによってservice-worker.jsを⽣産する ServiceWorkerをregisterしたりunregisterしたりする関数が⼊った registerServiceWorker.jsが吐き出される
18. 2019/6/19 PWA
    Night localhost:8080 18/19 好き勝⼿webpack.con gをいじろう $ elm-app eject
19. 2019/6/19 PWA
    Night localhost:8080 19/19 ありがとうございました！