第0章 Introduction

Reactの本質を理解するために

React は、2013年にFacebook（現Meta）によって開発され、現在では世界中のWebアプリケーション開発で標準的に使用されているJavaScriptライブラリです。宣言的なアプローチでユーザーインターフェースを構築し、コンポーネントベースのアーキテクチャを採用することで、複雑なUIを効率的に管理できます。

特に注目すべきは「仮想DOM（Virtual DOM）」という革新的な概念です。これにより、DOMの更新を最適化し、アプリケーションのパフォーマンスを大幅に向上させることが可能になりました。

なぜReactを自作するのか

多くの開発者は日常的にReactを使用していますが、その内部で何が起こっているかを詳しく知る機会は限られています。Reactをただのツールとして使うのではなく、その核心部分を理解することで、以下のようなメリットが得られます：

• デバッグ能力の向上: 問題の根本原因を特定しやすくなる
• パフォーマンス最適化: ボトルネックを理解し、適切な最適化手法を選択できる
• アーキテクチャ設計力: コンポーネント設計やステート管理の理解が深まる
• 他のライブラリの理解: Vue.js、Svelte等の仕組みも類推できるようになる

本書「chibi-react」では、Reactの本質的な機能を最小構成で再実装することで、これらの知識を体系的に身につけていきます。

学習ロードマップ

このプロジェクトでは、以下の順序でReactの主要機能を実装していきます：

各章の概要

1. Setup: TypeScript、Jest、Node.js環境の構築
2. createElement: JSXをJavaScriptオブジェクト（Virtual Node）に変換
3. Renderer: Virtual NodeをDOMに描画
4. Diffing: 変更点を効率的に検出し、最小限のDOM更新を実現
5. Fiber: 処理を小さな単位に分割し、非同期レンダリングを可能に
6. Hooks: 関数コンポーネントで状態管理や副作用を扱う仕組み
7. Context: コンポーネントツリーを超えたデータ共有の実現
8. Error Boundary: コンポーネントエラーを適切に処理する機構
9. Portal: 親コンポーネントのDOM階層外に子要素を描画する機能

Reactの基本概念

Reactを自作する前に、その基本概念を理解しておきましょう：

1. 宣言的UI

Reactでは「どのように」ではなく「何を」表示するかを宣言します。状態に応じてUIがどう見えるべきかを記述し、実際のDOM操作はReactに任せます。

2. コンポーネント

UIを独立した再利用可能な部品（コンポーネント）に分割します。各コンポーネントは自身の状態を管理し、必要に応じて子コンポーネントを描画します。

3. 単方向データフロー

親から子へのデータ伝達は「props」を通じて行われ、データは常に上から下へ流れます。これにより、アプリケーションの状態変化が予測可能になります。

4. 仮想DOM

DOMの直接操作は高コストなため、Reactは仮想DOMという軽量なコピーを内部で管理し、実際のDOMとの差分だけを効率的に更新します。

実装アプローチ

このプロジェクトでは、以下の原則に従って実装を進めます：

1. 関数コンポーネントのみ: 最新のReactベストプラクティスに沿い、クラスコンポーネントは使用しません
2. TypeScript: 型安全なコードで堅牢な実装を目指します
3. テスト駆動開発: 各機能はテストファーストで実装します
4. 最小依存: 外部ライブラリに頼らず、核となる機能を自作します

次の章からは、実際にコードを書きながらReactの内部動作を探っていきましょう。