Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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 }

Slide 8

Slide 8 text

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 )

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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