まだ DOM 操作で 消耗してるの?
2015.06.06 (だいたい)新卒エンジニア向け技術交流会 vol.3
~ 2004 年
• JS は「 Web にちょっと動きを加えるもの」
• 「JSが動かない環境のことも 考えなきゃダメでしょ!!!」
• リッチなことは Flash でやれ
Ajax の誕生
• 実は昔からあったけど知られていなかったXMLHttpRequest が Google Maps によって再発見されて一躍有名に
• Ajax (Asynchronous JavaScript + XML) という言葉が生まれる
• しかしまだまだ敷居が高い
jQuery の衝撃
• クライアントサイドプログラミングの敷居を圧倒的に下げた
• DOM 操作
• イベント処理
• クロスブラウザ
• Ajax
...とは言えない
• なまじ jQuery があればそこそこ出来てしまう
• ちょっとググればプラグインが落ちてる
• 出来るような気がしてしまう
• 「出来て当たり前」として要求される
すべての DOM の状態管理
• どの DOM が今どんな値を持っているか
• どの DOM から何のイベントが発火するか
• この値が変わったらどの DOM を書き換えないといけないか
Single Page Application
• HTML5 の history.pushState によってURL の動的書き換えが可能に
• ページ遷移という概念を超越したクライアントサイドプログラミングの極地
例
「SPAで作ってね!!!」
「でも history.back しても前のビューの
スクロール位置保持してるの当然だし 情報も更新されてるよね!!!」
こんなものが ”当たり前”として 要求される世の中は 絶対に間違っている
もう DOM 操作しなくていい
• 変更があったら HTML 全体を書き換える
• 常に最新の状態の DOM をレンダリングし続ければいいだけ
• React が内部で diff / patch してくれるから遅くない
「事ある毎に最新の HTML をレンダリングする」
???
まとめ
• ぼくたちは DOM 操作という苦痛を強いられている
• 麻薬 (jQuery) による対症療法も限界が来ている
• React によってぼくたちは解放される