まだ DOM 操作で消耗してるの？

まだ DOM 操作で
消耗してるの？
2015.06.06
(だいたい)新卒エンジニア向け技術交流会 vol.3

こんばんは
hoge17296
です！！！！！

とうとうプログラマ歴 
10 年目に突入

それでも 10 年で
いろいろなものを見てきた

クライアントサイド JS
近代史

∼ 2004 年
• JS は「 Web にちょっと動きを加えるもの」
• 「JSが動かない環境のことも 
考えなきゃダメでしょ！！！」
• リッチなことは Flash でやれ

Ajax の誕生
• 実は昔からあったけど知られていなかった 
XMLHttpRequest が Google Maps によって 
再発見されて一躍有名に
• Ajax (Asynchronous JavaScript + XML) という 
言葉が生まれる
• しかしまだまだ敷居が高い

jQuery の衝撃
• クライアントサイドプログラミングの敷居を 
圧倒的に下げた
• DOM 操作
• イベント処理
• クロスブラウザ
• Ajax

あまいあまい
シンタックス
シュガー

jQuery 職人が社会問題に
「これグーグルみたいに 
ギュイーンって感じで 
できるよね？」

...とは言えない
• なまじ jQuery があればそこそこ出来てしまう
• ちょっとググればプラグインが落ちてる
• 出来るような気がしてしまう
• 「出来て当たり前」として要求される

すべての DOM の状態管理
• どの DOM が今どんな値を持っているか
• どの DOM から何のイベントが発火するか
• この値が変わったらどの DOM を 
書き換えないといけないか

コンポーネントが増えるたび
考えるべきことが
指数関数的に増えていく
プログラミング

一部の優れた職人にしか
成し得ない超絶技巧

Single Page Application
• HTML5 の history.pushState によって 
URL の動的書き換えが可能に
• ページ遷移という概念を超越した 
クライアントサイドプログラミングの極地

例
「SPAで作ってね！！！」
「でも history.back しても前のビューの 
スクロール位置保持してるの当然だし 
情報も更新されてるよね！！！」

もはや
人間業ではない

こんなものが
”当たり前”として
要求される世の中は
絶対に間違っている

React
• Facebook 製の UI ライブラリ
• フレームワークじゃない
• 特徴
• リアクティブプログラミング
• Virtual DOM

もう DOM 操作しなくていい
• 変更があったら HTML 全体を書き換える
• 常に最新の状態の DOM を 
レンダリングし続ければいいだけ
• React が内部で diff / patch してくれるから 
遅くない

「事ある毎に最新の HTML を 
レンダリングする」
？？？

これって昔ページ遷移で
やっていたことじゃないか

シンプルで古い
この概念こそ
正しかった

ぼくたちは
ちょっと歪んでいた
だけだったんだ

まとめ
• ぼくたちは DOM 操作という 
苦痛を強いられている
• 麻薬 (jQuery) による対症療法も限界が来ている
• React によってぼくたちは解放される

楽しかったあの頃に戻ろう

まだ DOM 操作で
消耗してるの？

Recommended