Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

32,955 views

Published on

(だいたい)新卒エンジニア向け技術交流会 vol.3
での発表内容です

Published in: Technology
  • Be the first to comment

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

  1. 1. まだ DOM 操作で 消耗してるの? 2015.06.06 (だいたい)新卒エンジニア向け技術交流会 vol.3
  2. 2. !?
  3. 3. こんばんは hoge17296 です!!!!!
  4. 4. hoto
 17296
  5. 5. とうとうプログラマ歴
 10 年目に突入
  6. 6. それでも 10 年で いろいろなものを見てきた
  7. 7. クライアントサイド JS 近代史
  8. 8. ∼ 2004 年 • JS は「 Web にちょっと動きを加えるもの」 • 「JSが動かない環境のことも
  考えなきゃダメでしょ!!!」 • リッチなことは Flash でやれ
  9. 9. Flash 黄金時代
  10. 10. 人生の絶頂
  11. 11. 2005 年
  12. 12. Ajax の誕生 • 実は昔からあったけど知られていなかった
 XMLHttpRequest が Google Maps によって
 再発見されて一躍有名に • Ajax (Asynchronous JavaScript + XML) という
 言葉が生まれる • しかしまだまだ敷居が高い
  13. 13. 2006 年
  14. 14. jQuery の衝撃 • クライアントサイドプログラミングの敷居を
 圧倒的に下げた • DOM 操作 • イベント処理 • クロスブラウザ • Ajax
  15. 15. $()
  16. 16. あまいあまい シンタックス シュガー
  17. 17. jQuery 職人が社会問題に 「これグーグルみたいに
  ギュイーンって感じで
  できるよね?」
  18. 18. ...とは言えない • なまじ jQuery があればそこそこ出来てしまう • ちょっとググればプラグインが落ちてる • 出来るような気がしてしまう • 「出来て当たり前」として要求される
  19. 19. なにがつらいか
  20. 20. すべての DOM の状態管理 • どの DOM が今どんな値を持っているか • どの DOM から何のイベントが発火するか • この値が変わったらどの DOM を
 書き換えないといけないか
  21. 21. コンポーネントが増えるたび 考えるべきことが 指数関数的に増えていく プログラミング
  22. 22. 一部の優れた職人にしか 成し得ない超絶技巧
  23. 23. そして 2010 年
  24. 24. Single Page Application
  25. 25. Single Page Application • HTML5 の history.pushState によって
 URL の動的書き換えが可能に • ページ遷移という概念を超越した
 クライアントサイドプログラミングの極地
  26. 26. 例 「SPAで作ってね!!!」 「でも history.back しても前のビューの
  スクロール位置保持してるの当然だし
  情報も更新されてるよね!!!」
  27. 27. もはや 人間業ではない
  28. 28. こんなものが ”当たり前”として 要求される世の中は 絶対に間違っている
  29. 29. 俺は もう
  30. 30. 2014 年
  31. 31. React • Facebook 製の UI ライブラリ • フレームワークじゃない • 特徴 • リアクティブプログラミング • Virtual DOM
  32. 32. もう DOM 操作しなくていい • 変更があったら HTML 全体を書き換える • 常に最新の状態の DOM を
 レンダリングし続ければいいだけ • React が内部で diff / patch してくれるから
 遅くない
  33. 33. DEMO http://bit.ly/mtg_timer
  34. 34. 「事ある毎に最新の HTML を
 レンダリングする」 ???
  35. 35. これって昔ページ遷移で やっていたことじゃないか
  36. 36. シンプルで古い この概念こそ 正しかった
  37. 37. ぼくたちは ちょっと歪んでいた だけだったんだ
  38. 38. まとめ • ぼくたちは DOM 操作という
 苦痛を強いられている • 麻薬 (jQuery) による対症療法も限界が来ている • React によってぼくたちは解放される
  39. 39. 楽しかったあの頃に戻ろう
  40. 40. まだ DOM 操作で 消耗してるの?

×