Reactの歴史を振り返る

チームの勉強会で使用した資料になります。
急いで作成した資料のため、内容として説明不足や間違った解釈をしている箇所があるかもしれません。もしお気づきの方は、ご連絡いただけますと幸いです。

Transcript

1. Reactの歴史を振り返る
2. - 背景の共有 - Reactの歴史 - Reactとは - 初回リリース - メジャーバージョンリリースまで - メジャーバージョンの更新 - まとめ - FAQ 目次
3. 背景の共有
4. Reactは、今日（2025/07）時点での最新バージョンは v19.1.0 で、リリー スからかなりの時間とアップデートが行われています。 背景の共有
5. Reactは、今日（2025/07）時点での最新バージョンは v19.1.0 で、リリー スからかなりの時間とアップデートが行われています。 自分がエンジニアを本格的に目指し始めた時には、すでにReact（Vue, Angular）でのフロントエンド開発が主流になりつつあったため、どのよう な歴史で今のReactあるのか知らない状態で日々開発を行っています。 背景の共有
6. 背景の共有 Reactは、今日（2025/07）時点での最新バージョンは v19.1.0 で、リリー スからかなりの時間とアップデートが行われています。 自分がエンジニアを本格的に目指し始めた時には、すでにReact（Vue, Angular）でのフロントエンド開発が主流になりつつあったため、どのよう な歴史で今のReactあるのか知らない状態で日々開発を行っています。 改めて、Reactの歴史を振り返り、Reactのことをもう少し詳しくなれればと 思っています。
7. Reactの歴史
8. Reactとは... Facebookが開発したJavaScriptライブラリで、ユーザーインターフェース の構築に特化した、世界で最も広く使用されているフロントエンド開発ライ ブラリの一つです。 Reactとは
9. Reactとは... Facebookが開発したJavaScriptライブラリで、ユーザーインターフェース の構築に特化した、世界で最も広く使用されているフロントエンド開発ライ ブラリの一つです。 現在（2025/07）は、v19 .1.0 まで公開されており、2013/05 の最初の公 開から12年の歴史があるライブラリになります。 Reactとは
10. 2013/07 GitHub上にReactの初回リリースが行われました。 初回リリース
11. 2013/07 GitHub上にReactの初回リリースが行われました。 この初回リリースの v0.3.0 時点で、Reactの革新的なアプローチである以下 の概念が既に実装されていました。 - 仮想DOM ... DOMへの変更を最小限に抑える効率的な更新メカニズム - 宣言的UI ... 「どのように変更するか」ではなく「どのような状態を表示したいか」を記述する開発スタイル - JSXの導入 ... HTMLライクな構文でJavaScript内にマークアップを記述できる記法 初回リリース https://github.com/facebook/react/releases/tag/v0.3.0
12. 2013/07 GitHub上にReactの初回リリースが行われました。 この初回リリースの v0.3.0 時点で、Reactの革新的なアプローチである以下 の概念が既に実装されていました。 - 仮想DOM ... DOMへの変更を最小限に抑える効率的な更新メカニズム - 宣言的UI ... 「どのように変更するか」ではなく「どのような状態を表示したいか」を記述する開発スタイル - JSXの導入 ... HTMLライクな構文でJavaScript内にマークアップを記述できる記法 これらの概念は当時のjQuery中心のWeb開発に対する革新的なアプローチと して大きな注目を集めました。 初回リリース https://github.com/facebook/react/releases/tag/v0.3.0
13. メジャーバージョンリリースまで メジャーバージョンリリースまでの主要なアップデート
14. メジャーバージョンリリースまで メジャーバージョンリリースまでの主要なアップデート v0.8.0 (2013/12)　 npmパッケージとして公開 v0.11.0 (2014/07) React DevToolsの初回リリース v0.12.0 (2014/10) JSXの根本的改善とES6クラス構文のサポート v0.13.0 (2015/03) クラスコンポーネントのサポート追加 v0.14.0 (2015/10) ReactとReact DOMの分割（React Native対応準備） v0.14.0 (2015/10) Stateless Function Components の導入
15. メジャーバージョンリリースまで メジャーバージョンリリースまでの主要なアップデート v0.8.0 (2013/12)　 npmパッケージとして公開 v0.11.0 (2014/07) React DevToolsの初回リリース v0.12.0 (2014/10) JSXの根本的改善とES6クラス構文のサポート v0.13.0 (2015/03) クラスコンポーネントのサポート追加 v0.14.0 (2015/10) ReactとReact DOMの分割（React Native対応準備） v0.14.0 (2015/10) Stateless Function Components の導入 これらのアップデートの後、メジャーバージョンがリリースされる。
16. v15.0.0（2016/04）Reactのメジャーバージョンのリリース。 メジャーバージョンのリリース
17. メジャーバージョンのリリース v15.0.0（2016/04）Reactのメジャーバージョンのリリース。 前バージョンの 0.14.0 から続くアップデートのため、14に続けてメジャー バージョンのファーストリリースは、v15から始まっている。 This 15.0 release follows our previous 0.14 version and we’ll continue to follow semver like we’ve been doing since 2013. https://legacy.reactjs.org/blog/2016/04/07/react-v15.html
18. メジャーバージョンのリリース v15.0.0（2016/04）Reactのメジャーバージョンのリリース。 前バージョンの 0.14.0 から続くアップデートのため、14に続けてメジャー バージョンのファーストリリースは、v15から始まっている。 This 15.0 release follows our previous 0.14 version and we’ll continue to follow semver like we’ve been doing since 2013. アップデート内容としては、パフォーマンスや体験の向上などが多く含まれ ており、実装を行う上での大きな変更点はないものの、このリリースによっ て、Reactは本格的な本番運用ライブラリとしての地位を確立しました。 https://legacy.reactjs.org/blog/2016/04/07/react-v15.html
19. React v15.0.0 から v16.0.0（2017/09） の主要なアップデート。 メジャーバージョンの更新
20. React v15.0.0 から v16.0.0（2017/09） の主要なアップデート。 - React Fiberという新たなレンダリングエンジンへの移行 - Error Boundaryの追加（以前まではエラーでクラッシュしていた） - Portalの導入（異なるDOM階層への描画が可能に） このv15からv16の間（2016/07）にCreate React Appが公開されました。 メジャーバージョンの更新
21. React v15.0.0 から v16.0.0（2017/09） の主要なアップデート。 - React Fiberという新たなレンダリングエンジンへの移行 - Error Boundaryの追加（以前まではエラーでクラッシュしていた） - Portalの導入（異なるDOM階層への描画が可能に） このv15からv16の間（2016/07）にCreate React Appが公開されました。 現在のReactにある機能群は未だ追加されていないものの、Create React Appによって学習コストが大幅に下がったため、Reactの普及が加速しまし た。 メジャーバージョンの更新
22. React v16.0.0 から v17.0.0（2020/10） の主要なアップデート。 メジャーバージョンの更新
23. React v16.0.0 から v17.0.0（2020/10） の主要なアップデート。 - Context, ref, memo, lazy, Suspenceなどの機能・APIの追加 - Stateful Functional Componentの追加 - React Hook の登場 メジャーバージョンの更新
24. React v16.0.0 から v17.0.0（2020/10） の主要なアップデート。 - Context, ref, memo, lazy, Suspenceなどの機能・APIの追加 - Stateful Functional Componentの追加 - React Hook の登場 このアップデートにより、現在の主流な実装方法である関数コンポーネント やReact Hookを用いた開発が可能になり、クラスコンポーネント中心の複雑 な記述から、よりシンプルで直感的な関数型アプローチへと変化しました。 メジャーバージョンの更新
25. React v17.0.0 のアップデートは、公式からも打ち出されているようにアッ プデートによる新機能はなく、今後より安全にReactの更新を行えるように する足がかりとなるリリースであると説明がされています。 （余談）v17について https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.ht
26. React v17.0.0 のアップデートは、公式からも打ち出されているようにアッ プデートによる新機能はなく、今後より安全にReactの更新を行えるように する足がかりとなるリリースであると説明がされています。 具体的には段階的なアップデートを可能にする対応が入りました。 今までのバージョンを更新する際、一度で全てを更新する必要があり、大規 模なアプリケーションでは段階的な移行が困難でした。 そのため、今後のアップデートの「踏み台」となるリリースを行い、開発者 がReactの更新を安定して行えるような対応が行われました。 （余談）v17について https://legacy.reactjs.org/blog/2020/08/10/react-v17-rc.ht
27. React v17.0.0 から v18.0.0（2022/03） の主要なアップデート。 メジャーバージョンの更新
28. React v17.0.0 から v18.0.0（2022/03） の主要なアップデート。 - 並行レンダリング（レンダリングの中断・再開が可能に）の追加 - 自動バッチ処理（パフォーマンス向上）の追加 - Transitions（緊急度による更新の優先制御）の追加 メジャーバージョンの更新
29. React v17.0.0 から v18.0.0（2022/03） の主要なアップデート。 - 並行レンダリング（レンダリングの中断・再開が可能に）の追加 - 自動バッチ処理（パフォーマンス向上）の追加 - Transitions（緊急度による更新の優先制御）の追加 これらの機能により、開発者が手動でパフォーマンス最適化を行う負担が軽 減され、自動的に快適で応答性の高いユーザー体験を提供できるようになり ました。 メジャーバージョンの更新
30. メジャーバージョンの更新 React v18.0.0 から v19.0.0（2024/12） の主要なアップデート。
31. メジャーバージョンの更新 React v18.0.0 から v19.0.0（2024/12） の主要なアップデート。 https://speakerdeck.com/tutinoko/react-version-19-zhui-jia-ji-neng-womatomeru アップデート内容については別の資料で行なっております。
32. まとめ
33. - Reactの基本的な概念などはファーストリリース時からあった - 2016/04 に v15 でメジャーバージョンがリリースされる - 現在のReactと遜色ない機能群は、v16 ~ v17 間でリリースされた まとめ
34. - Reactの基本的な概念などはファーストリリース時からあった - 2016/04 に v15 でメジャーバージョンがリリースされる - 現在のReactと遜色ない機能群は、v16 ~ v17 間でリリースされた ちょうど自分がReactを学習し始めた時期（2020年）に、Reactの設計が変 わる大きなアップデートが発生していたようでした。 他のフロントエンドのライブラリ（Vue, Angular）と比べてReactの導入が 多くなったのもこの時期あたりだったと認識しており、v16 ~ v17 間のアッ プデートがReactにとって重要なものだったと思われます。 まとめ
35. 2013/07　GitHub上にReactの初回リリースが行われる。 2013/12　npmパッケージとしてReactを公開 2014/07　React DevToolの初回リリース 2014/10　JSXの根本改善とES6クラス構文のサポート 2015/03　クラスコンポーネントのサポート追加 2015/10　ReactとReact DOMの分割（React Native対応準備） 2015/10　Stateless Functional Components の導入
36. 2016/04　v15.0.0 Reactのメジャーバージョンのリリース 2017/09　v16.0.0 のリリース 2020/10　v17.0.0 のリリース 2022/03　v18.0.0 のリリース 2024/12　v19.0.0 のリリース v15.0.0 ~ v16.0.0 - React Fiberというレンダリングエンジンへ移行 - Error Boundaryの追加（エラークラッシュ） - Portalの追加（異なるDOM階層描画） v16.0.0 ~ v17.0.0 - Context, ref, memo, lazy, Suspenceの追加 - Stateful Componentsの追加 - React Hookの登場 v17.0.0 ~ v18.0.0 - 並行レンダリングの追加 - 自動バッチ処理の追加 - Transitionの追加
37. FAQ
38. FAQ 並行レンダリングについて レンダリングの処理を中断できるようになったことで、ユーザーの操作に対 して即座に更新・反映が行えるようになったパフォーマンス向上の事項。 例えば、v18以前だと、裏側で重たいデータの取得の処理などを行なってい る時に、ユーザーの入力操作などが発生した場合、データの取得処理が完了 するまでの間反応がされなくなる。 一方で、v18以降だと、Reactが裏側で並行で処理を行なってくれるため、 ユーザーの体験を損なわない開発が行えるようになった。
39. 自動バッチ処理について Reactで複数の状態更新（setState等）を1回の再レンダリングにまとめるこ とで、パフォーマンスを向上させる仕組みです。 v18.0.0以前は、イベントハンドラー内でのみ自動バッジ処理が動作してい ましたが、このv18のアップデートにより、全ての場所（Promise, async/await, setTimeout/setInterval等）で適応され、開発者がパフォー マンス最適を意識することなく開発できるようになりました。 FAQ