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

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

3. !?

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

5. hoto
17296

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

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

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

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

14. Flash 黄金時代

15. 人生の絶頂

16. 2005 年

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

19. 2006 年

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

22. $()

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

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

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

27. なにがつらいか

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

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

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

31. そして
2010 年

32. Single
Page
Application

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

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

35. もはや
人間業ではない

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

37. 俺は
もう

38. 2014 年

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

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

42. DEMO
http://bit.ly/mtg_timer

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

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

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

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

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

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

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