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

jQueryからElmまで

 jQueryからElmまで

Seiya IZUMI

June 01, 2019
Tweet

More Decks by Seiya IZUMI

Other Decks in Programming

Transcript

  1. 自己紹介 ❏ Fringe81 Web Engineer ❏ Scala, Golang を書いていましたが 現在は

    Elm を書いています ❏ Elm Europe 2019 に登壇予定(6月末)
  2. 状態と画面の分離 { value: 10 } <div class=”value-box”> <div>Value is {{value}}</div>

    </div> Scope HTML Value is 10 ロジックによる計算の結果は Scope(状態)のみに影響を与える
  3. 状態と画面の分離 { value: 10 } <div class=”value-box”> <div>Value is {{value}}</div>

    </div> Scope HTML Value is 10 HTMLはどのように画面を作るかを表現するだけ(画面)
  4. 状態と画面の分離 { value: calc(2) } <div class=”value-box”> <div>Value is {{value}}</div>

    </div> Scope HTML Value is 22 function calc(n) { return (n * 10 + 2) }
  5. 状態と画面の分離 { value: calc(2) } <div class=”value-box”> <div>Value is {{value}}</div>

    </div> Scope HTML Value is 22 function calc(n) { return (n * 10 + 2) } Scopeの依存する ビジネスロジック のみをテストする だけで挙動が担保 できる
  6. 状態と画面の分離 { value: calc(2) } <div class=”value-box”> <div>Value is {{value}}</div>

    </div> Scope HTML Value is 22 function calc(n) { return (n * 10 + 2) } Scopeの依存する ビジネスロジック のみをテストする だけで挙動が担保 できる 画面はビジネスロジックによる影響を受けない
  7. 大規模化するフロントエンドの苦しみ Component Component Component Component Component Event Emitter Subscribe Emit

    Event Emitter Event Emitter Subscribe Emit Subscribe Subscribe Emit Subscribe データの交換のためだけにイベントシステムが 使われる → イベント・エミッタ地獄
  8. 他フレームワークの趨勢 React • Class コンポーネントよりも Functional コンポーネント推し • コンポーネント・ライフサイクルなどの個別の状態表現APIを順次廃止 Vue.js

    • 長らく期待されていたクラスAPIのプロポーザルを却下 • React Hooks インスパイアな関数コンポジションによるコンポーネント定義にシフト
  9. JSにおける “ミュータブル” な状態表現の例 var status = { value: 10 };

    status.value += 5; status.value++; console.log(status.value) // 16
  10. イミュータブルな状態更新 SET_VALUE: 5 PLUS_VALUE: 3 PLUS_VALUE: 3 MINUS_VALUE: 2 イベント

    状態 5 + 3 + 3 - 2 = 9 最新の状態というのは変更(イベント)の積 み上げから計算(畳み込み)されたものにな る { value: 9 }
  11. イミュータブルな状態更新 SET_VALUE: 5 PLUS_VALUE: 3 PLUS_VALUE: 3 MINUS_VALUE: 2 イベント

    状態 最新の状態というのは変更(イベント)の積 み上げから計算(畳み込み)されたものにな る { value: 9 } <div> <div>Value is 9</div> </div> ビューもまた状態から HTMLをつくる関 数として表現できる
  12. TEA (The Elm Architecture) View Model Update レンダリング メッセージ 更新

    アプリケーションの状態は 常にModelが表す ModelからHTML を計算する アプリケーションの 次の状態を計算する
  13. TEA (The Elm Architecture) View Model Update レンダリング メッセージ 更新

    • イミュータビリティと関数型表現を前提としたアプリケーション・ アーキテクチャ • 大規模なアプリケーションを作る上での意外性を排除することで、 データ構造やビジネスロジックの設計に注力できる