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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. 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 }
   

   View Slide

8. 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 )
   

   View Slide

9. 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 [ ] [ ]
   ]
   ]
   }
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. 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が吐き出される
    

    View Slide

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

    View Slide

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

    View Slide