まだ DOM 操作で 消耗してるの?
2015.06.06 (だいたい)新卒エンジニア向け技術交流会 vol.3
こんばんは
hoge17296
です!!!!!
とうとうプログラマ歴10 年目に突入
それでも 10 年で いろいろなものを見てきた
~ 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
Single Page Application
• HTML5 の history.pushState によってURL の動的書き換えが可能に
• ページ遷移という概念を超越したクライアントサイドプログラミングの極地
例
「SPAで作ってね!!!」
「でも history.back しても前のビューの
スクロール位置保持してるの当然だし 情報も更新されてるよね!!!」
こんなものが ”当たり前”として 要求される世の中は 絶対に間違っている
React
• Facebook 製の UI ライブラリ
• フレームワークじゃない
• 特徴
• リアクティブプログラミング
• Virtual DOM
もう DOM 操作しなくていい
• 変更があったら HTML 全体を書き換える
• 常に最新の状態の DOM をレンダリングし続ければいいだけ
• React が内部で diff / patch してくれるから遅くない
DEMO
http://bit.ly/mtg_timer
「事ある毎に最新の HTML をレンダリングする」
???
これって昔ページ遷移で やっていたことじゃないか
シンプルで古い この概念こそ 正しかった
ぼくたちは ちょっと歪んでいた だけだったんだ
まとめ
• ぼくたちは DOM 操作という苦痛を強いられている
• 麻薬 (jQuery) による対症療法も限界が来ている
• React によってぼくたちは解放される
まだ DOM 操作で 消耗してるの?