Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Elm for React.js Users

Yosuke Torii
February 23, 2016

Elm for React.js Users

React.js Meetup #3 での発表資料。Elmの簡単な紹介です。

Yosuke Torii

February 23, 2016
Tweet

More Decks by Yosuke Torii

Other Decks in Programming

Transcript

  1. React.js ユーザのための Elm
    2016/02/23
    Yosuke Torii

    View Slide

  2. ・鳥居 陽介
    ・株式会社ワークスアプリケーションズ勤務
    ・ CodeZine に 5 記事 (React.js, HTTP/2, Elm)
    ・ジンジャー研究室
    誰?
    @jinjor

    View Slide

  3. Elm の紹介

    View Slide

  4. main =
    span [class "message"] [text "Hello, World!"]
    ・関数型言語
    ・静的型付き言語
    ・ JavaScript にコンパイルされる
    ・ 2012 年誕生
    Elm is 何?

    View Slide

  5. React.js Elm
    なぜ React.js Meetup で Elm ?

    View Slide

  6. React.js
    Flux
    Elm
    と一緒に使われる
    アーキテクチャの
    なぜ React.js Meetup で Elm ?

    View Slide

  7. React.js
    Flux
    Elm
    Redux
    と一緒に使われる
    アーキテクチャの
    で有名な
    ライブラリの
    なぜ React.js Meetup で Elm ?

    View Slide

  8. React.js
    Flux
    Elm
    Redux
    と一緒に使われる
    アーキテクチャの
    で有名な
    ライブラリの
    が参考にしたと
    言われる
    なぜ React.js Meetup で Elm ?

    View Slide

  9. React.js/Flux を追っている人なら
    Elm を楽しめるはず!

    View Slide

  10. フロントエンド界隈で人気急上昇
    2015 年内に
    3 倍の伸び
    http://elm-lang.org/blog/new-adventures-for-elm

    View Slide

  11. 最近の Elm
    Virtual DOM の導入
    The Elm Architecture

    View Slide

  12. Virtual DOM の導入

    View Slide

  13. VDOM の生成コストを抑えたい
    Old
    VDOM
    New
    VDOM
    diff

    View Slide

  14. VDOM の生成コストを抑えたい
    Old
    Model
    Old
    VDOM
    New
    Model
    New
    VDOM
    diff
    diff
    ・ Model 同士を比較したい
    ・ shouldComponentUpdate()
    ・ Immutable.js

    View Slide

  15. VDOM の生成コストを抑えたい
    Old
    Model
    Old
    VDOM
    New
    Model
    New
    VDOM
    diff
    diff
    ・ Model 同士を比較したい
    ・ shouldComponentUpdate()
    ・ Immutable.js
    Elm では全てのデータが
    Immutable

    View Slide

  16. Elm の描画は速い
    ※2014 年当時

    View Slide

  17. The Elm Architecture

    View Slide

  18. Elm は FRP 言語
    ・ FRP = Functional Reactive Programming
    (関数型リアクティブプログラミング)
    ・ JS ライブラリでは RxJS, Bacon.js, Kefier など

    View Slide

  19. Elm は FRP 言語
    Time
    a 2
    1
    Signal: 時間とともに変化する値

    View Slide

  20. Elm は FRP 言語
    Time
    a 2
    1
    Time
    b 4
    2
    map
    (*2)
    Signal: 時間とともに変化する値

    View Slide

  21. 例:クリック回数を出力する
    Time
    Time
    mouse
    clicks
    count 2
    1
    Time
    HTML
    1


    2

    map
    foldp

    View Slide

  22. Elm アプリケーションの構造
    mouse
    position
    HTML
    mouse
    clicks keydown Enter
    ?
    アクションの Signal を
    最終的に HTML の Signal
    に変換するのが目的

    View Slide

  23. 設計方針がないとカオスに
    mouse
    position
    mouse
    clicks
    keydown Enter
    HTML
    ? ?
    ?
    ?
    ?
    ?
    ?
    ?
    ?

    View Slide

  24. The Elm Architecture
    ・ Elm 公式で推しているアーキテクチャ
    ・ Redux にインスピレーションを与えた
    ・ GitHub のチュートリアルが人気(★ 1774 )

    View Slide

  25. The Elm Architecture
    ・ Elm 公式で推しているアーキテクチャ
    ・ Redux にインスピレーションを与えた
    ・ GitHub のチュートリアルが人気(★ 1774 )
    去年の 11 月

    View Slide

  26. Elm Architecture に従うと
    Action
    View
    Model

    View Slide

  27. Elm Architecture に従うと
    Action
    View
    Model
    しかも、
    開発者は Signal をほとんど意識しなくていい

    View Slide

  28. コードが見たい

    View Slide

  29. カウンターを作る

    View Slide

  30. カウンターを作る
    import StartApp.Simple exposing (start)
    main =
    start { model = model, update = update, view = view }
    初期状態 状態を更新
    する関数
    HTML 描画
    する関数

    View Slide

  31. model = 0
    type Action = Increment | Decrement
    update action model =
    case action of
    Increment ->
    model + 1
    Decrement ->
    model - 1
    view address model =
    div [ ]
    [ button [ onClick address Decrement ] [ text "-" ]
    , span [ ] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]

    View Slide

  32. model = 0
    type Action = Increment | Decrement
    update action model =
    case action of
    Increment ->
    model + 1
    Decrement ->
    model - 1
    view address model =
    div [ ]
    [ button [ onClick address Decrement ] [ text "-" ]
    , span [ ] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]
    初期状態

    View Slide

  33. model = 0
    type Action = Increment | Decrement
    update action model =
    case action of
    Increment ->
    model + 1
    Decrement ->
    model - 1
    view address model =
    div [ ]
    [ button [ onClick address Decrement ] [ text "-" ]
    , span [ ] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]
    初期状態
    アクションの種類

    View Slide

  34. model = 0
    type Action = Increment | Decrement
    update action model =
    case action of
    Increment ->
    model + 1
    Decrement ->
    model - 1
    view address model =
    div [ ]
    [ button [ onClick address Decrement ] [ text "-" ]
    , span [ ] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]
    初期状態
    アクションの種類
    アクションの種類に
    応じて状態を更新

    View Slide

  35. model = 0
    type Action = Increment | Decrement
    update action model =
    case action of
    Increment ->
    model + 1
    Decrement ->
    model - 1
    view address model =
    div [ ]
    [ button [ onClick address Decrement ] [ text "-" ]
    , span [ ] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]
    初期状態
    アクションの種類
    アクションの種類に
    応じて状態を更新
    状態に対応する
    HTML を生成

    View Slide

  36. model = 0
    type Action = Increment | Decrement
    update action model =
    case action of
    Increment ->
    model + 1
    Decrement ->
    model - 1
    view address model =
    div [ ]
    [ button [ onClick address Decrement ] [ text "-" ]
    , span [ ] [ text (toString model) ]
    , button [ onClick address Increment ] [ text "+" ]
    ]
    初期状態
    アクションの種類
    アクションの種類に
    応じて状態を更新
    状態に対応する
    HTML を生成

    View Slide

  37. Model
    Model
    複雑なケースは Tutorial で
    ・コンポーネントの階層化
    ・非同期通信するコンポーネント
    Action
    View
    Model
    Action
    View
    Model
    Effect
    Action
    Action
    View
    View

    View Slide

  38. 改めて Elm の良さ

    View Slide

  39. 膨大なスタックを必要としない
    React
    TypeScript
    Fluxible
    FluxUtils
    virtual-dom
    Immutable.js
    Redux
    Flow
    Browserify
    Gulp
    react-tools
    Babel
    ES6
    JSX
    webpack
    (start-app)
    elm-html (Gulp)
    JS
    Elm

    View Slide

  40. 静的型付け最高
    ・基本的にランタイムエラーが起きない
    ・超絶リファクタリングしてもバグらない
    ・アーキテクチャをきちんと守れる

    View Slide

  41. 本番で使えるの?
    ・覚悟の問題
    ・まずは社内で
    社内ビデオ通話アプリ

    View Slide

  42. Elm をはじめるには
    ・ Elm 公式
    http://elm-lang.org/
    ・ The Elm Architecture
    https://github.com/evancz/elm-architecture-tutorial
    ・関数型リアクティブプログラミング言語 Elm に学ぶ フロントエンド開発の
    新しい形 ( CodeZine )
    【前編】 http://codezine.jp/article/detail/8873
    【後編】 http://codezine.jp/article/detail/8986
    ・ Elm Advent Calendar 2014
    http://qiita.com/advent-calendar/2014/elm
    ・ Elm Advent Calendar 2015
    http://qiita.com/advent-calendar/2015/elm

    View Slide

  43. ありがとうございました

    View Slide