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. main = span [class "message"] [text "Hello, World!"] ・関数型言語 ・静的型付き言語

    ・ JavaScript にコンパイルされる ・ 2012 年誕生 Elm is 何?
  2. VDOM の生成コストを抑えたい Old Model Old VDOM New Model New VDOM

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

    diff diff ・ Model 同士を比較したい ・ shouldComponentUpdate() ・ Immutable.js Elm では全てのデータが Immutable
  4. Elm は FRP 言語 ・ FRP = Functional Reactive Programming

    (関数型リアクティブプログラミング) ・ JS ライブラリでは RxJS, Bacon.js, Kefier など
  5. Elm は FRP 言語 Time a 2 1 Time b

    4 2 map (*2) Signal: 時間とともに変化する値
  6. Elm アプリケーションの構造 mouse position HTML mouse clicks keydown Enter ?

    アクションの Signal を 最終的に HTML の Signal に変換するのが目的
  7. カウンターを作る import StartApp.Simple exposing (start) main = start { model

    = model, update = update, view = view } 初期状態 状態を更新 する関数 HTML 描画 する関数
  8. 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 "+" ] ]
  9. 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 "+" ] ] 初期状態
  10. 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 "+" ] ] 初期状態 アクションの種類
  11. 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 "+" ] ] 初期状態 アクションの種類 アクションの種類に 応じて状態を更新
  12. 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 を生成
  13. 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 を生成
  14. 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