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

!?

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

hoto
17296

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

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

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

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

Flash 黄金時代

人生の絶頂

2005 年

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

2006 年

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

$()

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

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

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

なにがつらいか

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

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

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

そして
2010 年

Single
Page
Application

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

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

もはや
人間業ではない

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

俺は
もう

2014 年

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

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

DEMO
http://bit.ly/mtg_timer

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

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

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

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

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

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

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