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

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

2015.06.06 (だいたい)新卒エンジニア向け技術交流会 vol.3

!?

こんばんは

hoge17296

です！！！！！

hoto17296

とうとうプログラマ歴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 操作で 消耗してるの？