Download as PDF, PPTX
More Related Content
まだ DOM 操作で消耗してるの？
- 1.
- 3.
- 4.
- 5.
- 6.
- 8.
- 9.
- 10. ∼ 2004 年 •JS は「 Web にちょっと動きを加えるもの」 • 「JSが動かない環境のことも 考えなきゃダメでしょ！！！」 • リッチなことは Flash でやれ
- 14.
- 15.
- 16.
- 18. Ajax の誕生 • 実は昔からあったけど知られていなかった XMLHttpRequestが Google Maps によって 再発見されて一躍有名に • Ajax (Asynchronous JavaScript + XML) という 言葉が生まれる • しかしまだまだ敷居が高い
- 19.
- 21. jQuery の衝撃 • クライアントサイドプログラミングの敷居を 圧倒的に下げた •DOM 操作 • イベント処理 • クロスブラウザ • Ajax
- 22.
- 23.
- 24.
- 26. ...とは言えない • なまじ jQueryがあればそこそこ出来てしまう • ちょっとググればプラグインが落ちてる • 出来るような気がしてしまう • 「出来て当たり前」として要求される
- 27.
- 28. すべての DOM の状態管理 •どの DOM が今どんな値を持っているか • どの DOM から何のイベントが発火するか • この値が変わったらどの DOM を 書き換えないといけないか
- 29.
- 30.
- 31.
- 32.
- 33. Single Page Application •HTML5 の history.pushState によって URL の動的書き換えが可能に • ページ遷移という概念を超越した クライアントサイドプログラミングの極地
- 34.
- 35.
- 36.
- 37.
- 38.
- 40. React • Facebook 製のUI ライブラリ • フレームワークじゃない • 特徴 • リアクティブプログラミング • Virtual DOM
- 41. もう DOM 操作しなくていい •変更があったら HTML 全体を書き換える • 常に最新の状態の DOM を レンダリングし続ければいいだけ • React が内部で diff / patch してくれるから 遅くない
- 42.
- 43.
- 44.
- 45.
- 46.
- 47. まとめ • ぼくたちは DOM操作という 苦痛を強いられている • 麻薬 (jQuery) による対症療法も限界が来ている • React によってぼくたちは解放される
- 48.
- 50.