Elm が苦手なことは Haskell にやらせよう チェシャ猫 (@y_taka_23) We Are JavaScripters! @19th (2018/05/21) #wejs 

Elm http://elm-lang.org #wejs 

超・目的特化型言語 Elm ● Web フロントエンドに特化 ○ 逆に言えばそれ以外には全く向かない ● 必要最小限の言語仕様 ○ Haskell 風だが、かなり機能が絞られている ● フレームワークと不可分 ○ いわゆる The Elm Architecture (TEA) ○ 面倒な部分はすべて隠蔽されている #wejs 

さて、サーバサイドは何で書く？ #wejs 

Haskell https://haskell.org #wejs 

サーバサイド用の言語は？ ● REST API が書けるなら何でも OK ○ サーバサイド Elm (elm-node) も一応ある ● 迷うなら Haskell は悪くない選択肢 ○ Elm とクラスタが近いし、困ったら相談可 ● Haskell から Elm のコードが生成可 ○ elm-export : JSON エンコーダ・デコーダを生成 ○ servant-elm : REST クライアントを生成 #wejs 

それ以上の Haskell のメリット？ #wejs 

Isomorphic JavaScript #wejs 

Isomorphic JavaScript ● 初回アクセスはサーバで HTML 生成 ○ ロード時間の短縮 ○ SEO 対策（最近は大丈夫だと思うけど） ● それ以後はクライアントで差分更新 ● 両者で共通のロジックを使用 ○ フロント側とサーバ側を同じ言語で書く ○ しかし Elm はサーバ用に設計されていない #wejs 

Elm の書きやすさを残しつつ フロントエンドも Haskell で書きたい #wejs 

Miso https://haskell-miso.org #wejs 

GHCJS + Miso ● Glasgow Haskell Compiler (GHC) ○ Haskell のデファクトスタンダード ● GHCJS ○ GHC のコンパイル先を JavaScript に改造 ○ 通常の Haskell ライブラリを再利用可能 ● Miso フレームワーク ○ GHCJS で The Elm Architecture を実装 #wejs 

Miso https://github.com/FPtje/miso-isomorphic-example #wejs 

コード比較：カウンタ https://github.com/dmjio/miso ＋ － 42 #wejs 

例：カウンタ type alias Model = Int type Msg = NoOp | Increase | Decrease update : Msg -> Model -> ( Model, Cmd Msg ) update msg count = case msg of NoOp -> ( count, Cmd.none ) Increase -> ( count + 1, Cmd.none ) Decrease -> ( count - 1, Cmd.none ) Elm type Model = Int data Action = NoOp | Increase | Decrease updateModel :: Action -> Model -> Effect Action Model updateModel act count = case act of NoOp -> noEff count Increase -> noEff (count + 1) Decrease -> noEff (count - 1) Miso #wejs 

例：カウンタ view : Model -> Html Msg view count = div [] [ [ button [ onClick Decrease ] [ text "-" ] ] , [ text (toString count) ] , [ button [ onClick Increase ] [ text "+" ] ] ] Elm viewModel :: Model -> View Action viewModel count = div_ [] [ [ button_ [ onClick Decrease ] [ text "-" ] ] , [ text (ms (show count)) ] , [ button_ [ onClick Increase ] [ text "+" ] ] ] Miso #wejs 

まとめ ● Elm はフロントエンド特化言語 ○ 本来の目的から外れた用途は苦手 ● サーバサイドは Haskell で書くと便利 ○ コード生成ツールや困った時の相談先など ● GHCJS + Miso でフル Haskell 化 ○ フロントエンドが Elm 感覚かつ Haskell で書ける ○ Isomorphic JS で SPA の弱点を解消 #wejs 

Enjoy Elm & Haskell! Presented by チェシャ猫 (@y_taka_23) #wejs