Reactの歴史を平成と共に振り返ろうぜ

Transcript

1. Reactの歴史を平成と共に 振り返ろうぜ × @mk-0A0
2. Momoka Kamijo @mk-0A0 株式会社Gaji-Laboのフロントエンドエンジニ ア。 スタートアップの開発支援をしています。 K-popと美味しい食べ物が好きです！！
3. 経歴 コーダー(2021) Web制作会社 フロントエンドエンジニア(2021) 事業会社 フロントエンドエンジニア(2023) 現在の会社 現在(2025)
4. 経歴 コーダー(2021) 既にReactが普及していたので それ以前の開発経験がない フロントエンドエンジニア(2021) 事業会社 フロントエンドエンジニア(2023) 現在の会社 現在(2025)
5. （めっっっちゃ触りだけ） 調べてみた 💡 経歴
6. 2005年 Google Mapsがリリース 2010年 Backbone.js, Knockout, AngularJS などのフレームワークがリリース 2006年 jQueryがリリース 2011年 Web Componentsの提唱 2009年 Node.js / ES5がリリース 2013年 Reactがリリース React誕生までの主な出来事
7. Google Maps がリリース 2005年
8. Google Maps がリリース 2005年 何がそんなに凄かった？
9. Google Maps がリリース 2005年 何がそんなに凄かった？ ページ遷移せずに追加で画面が読み込まれる
10. Google Maps がリリース 2005年 何がそんなに凄かった？ ページ遷移せずに追加で画面が読み込まれる Ajax (非同期通信)
11. Google Maps がリリース 2005年 当時の JavaScript のイメージ
12. Google Maps がリリース 2005年 当時の JavaScript のイメージ サイトをキラキラさせるだけのやつでしょ？ 😩
13. Google Maps がリリース 2005年 サイトをキラキラさせるだけのやつでしょ？ 😩 Ajax 使って Web アプリ作ろうぜ！！ え、JavaScript ってこんなことできんの？
14. 一方その頃 2005年 盛り上がっている（であろう）Web 界隈。
15. 一方その頃 2005年 盛り上がっている（であろう）Web 界隈。 その頃自分が何してたか覚えてますか？
16. 一方その頃 2005年 振り返りましょう、平成を。
17. 一方その頃(平成17年) 2005年 出来事 「愛・地球博」が愛知県で開幕 日本プロ野球史上初のセ・パ交流戦が開幕 アニメ まじめにふまじめ かいけつゾロリ ドラマ 花より男子 ドラゴン桜
18. jQuery がリリース 2006年
19. jQuery がリリース 2006年 ブラウザ間で JavaScript の実装にバラつきがある
20. jQuery がリリース 2006年 ブラウザ間で JavaScript の実装にバラつきがある 各ブラウザに対応するコードを書かないといけない 🤯 （クロスブラウザ対応）
21. jQuery がリリース 2006年 そこで登場したのが
22. jQuery がリリース 2006年 HTML の一部を jQuery で動的に書き換える
23. jQuery がリリース 2006年 HTML の一部を jQuery で動的に書き換える コードが膨れ上がってメンテナンスが難しくなる 😩
24. 一方その頃(平成18年) 2006年 出来事 ｉＰＳ細胞を作り出すことに成功 アニメ 涼宮ハルヒの憂鬱 DEATH NOTE ドラマ のだめカンタービレ 時効警察
25. FE第2世代のフレームワークがリリース 2010年
26. FE第2世代のフレームワークがリリース 2010年 サーバーサイドで主流だった MVC モデルを クライアントサイドで使えるようアレンジした フレームワークが登場
27. FE第2世代のフレームワークがリリース 2010年 人気！
28. FE第2世代のフレームワークがリリース 2010年 ですが、
29. FE第2世代のフレームワークがリリース 2010年 大規模なアプリケーションになると パフォーマンスが悪くなる 😇
30. 一方その頃(平成22年) 2010年 出来事 日本年金機構が発足 アップル社のiPadが国内で発売開始 アニメ デュラララ!! WORKING!! ドラマ 怪物くん ゲゲゲの女房
31. Web Components の提唱 2011年
32. Web Components の提唱 2011年 開発者が再利用可能な独自の HTML タグを定義できる技術
33. Web Components の提唱 2011年 開発者が再利用可能な独自の HTML タグを定義できる技術 Google のエンジニアによって提唱
34. Web Components の提唱 2011年 何が嬉しい？
35. Web Components の提唱 2011年 何が嬉しい？ 膨大な HTML/CSS を分割 (コンポーネント化)して 再利用できる
36. Web Components の提唱 2011年 何が嬉しい？ 膨大な HTML/CSS を分割 (コンポーネント化)して 再利用できる
37. Web Components の提唱 2011年 仕様が定まったのは
38. Web Components の提唱 2011年 仕様が定まったのは （長くね？） 5年後の2016年
39. Web Components の提唱 2011年 各ブラウザベンダーとの調整が難航していた 😇
40. 一方その頃(平成23年) 2011年 出来事 東日本大震災が発生 焼肉店のユッケが原因で集団食中毒が発生 アニメ 映画けいおん! ドラマ マルモのおきて 妖怪人間ベム 勇者ヨシヒコと魔王の城
41. React がリリース 🎉 2013年 Facabook(現 Meta)
42. React がリリース 🎉 2013年 Web Components の思想をもとに、 JavaScript の技術を用いた UI ライブラリとしてリリースされた
43. React がリリース 🎉 2013年 もともとは Facebook の保守性改善のために開発された
44. React がリリース 🎉 2013年 もともとは Facebook の保守性改善のために開発された instagram を買収し React にリプレイスするタイミングで オープンソース化、 日々アップデートが進み今に至る
45. 一方その頃(平成25年) 2013年 出来事 東京スカイツリーよりテレビの本放送が開始 富士山が世界遺産に登録される アニメ 進撃の巨人 はたらく魔王さま! ドラマ あまちゃん
46. おわり 平成懐かし〜〜！
47. 元記事 フロントエンドの歴史から React を知りたい ++ Gaji-Laboブログ
48. 参考 りあクト！ TypeScriptで始めるつらくないReact開発 第4版
49. 参考 The History of React.js on a Timeline - RisingStack Engineering