第1章 Setup

モダンな開発環境の構築

本章では、chibi-reactを開発するための環境構築を行います。現代のフロントエンド開発で標準的に使用される技術スタックを採用し、プロフェッショナルレベルの開発体験を実現します。

技術選定の背景

技術スタック一覧

• Node.js 22: 最新のJavaScript実行環境
• TypeScript 5: 静的型付けによる堅牢なコード品質確保
• pnpm: パフォーマンスとディスク効率に優れたパッケージマネージャー
• Jest + ts-jest: TypeScript完全対応のテストフレームワーク
• ESM (ECMAScript Modules): 標準化されたモジュールシステム

なぜこれらの技術を選んだのか

TypeScript: Reactの内部実装は複雑な型システムを持っており、TypeScriptなしでは理解が困難です。型安全性により、コンパイル時にエラーを検出し、IDEの補完機能も活用できます。

ESM: 現代のJavaScript標準であり、ブラウザとNode.js両方でネイティブサポートされています。chibi-reactもこの標準に従って実装します。

Jest: React公式でも使用されているテストフレームワークで、豊富な機能とTypeScript統合により効率的なテスト開発が可能です。

環境構築手順

1. Node.jsのインストール

まず、Node.js 22をインストールします。nodenvやnvmなどのバージョン管理ツールの使用をお勧めします。

# nvmを使用する場合
nvm install 22
nvm use 22

# バージョン確認
node -v
# v22.x.x が表示されることを確認

2. pnpmのインストール

次に、パッケージマネージャーとしてpnpmをインストールします。

npm install -g pnpm

# バージョン確認
pnpm -v

3. プロジェクトの初期化

プロジェクトディレクトリを作成し、初期化します。

mkdir chibi-react
cd chibi-react
pnpm init

4. TypeScriptの設定

TypeScriptをインストールし、設定ファイルを作成します。

pnpm add -D typescript
npx tsc --init

tsconfig.jsonを以下のように編集します：

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "strict": true,
    "jsx": "react",
    "jsxFactory": "createElement",
    "declaration": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "noImplicitAny": true,
    "strictNullChecks": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.test.ts"]
}

この設定では：

• ES2022をターゲットとし、最新のJavaScript機能を使用可能に
• ESModulesを使用
• JSXをサポートし、createElement関数を使用するよう設定
• 厳格な型チェックを有効化

5. Jestのセットアップ

テスト環境としてJestとts-jestをセットアップします。

pnpm add -D jest ts-jest @types/jest

jest.config.tsを作成します：

import type { Config } from 'jest';

const config: Config = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  transform: {
    '^.+\\.tsx?$': ['ts-jest', {
      useESM: true,
    }]
  },
  extensionsToTreatAsEsm: ['.ts', '.tsx']
};

export default config;

この設定では：

• ts-jestプリセットを使用してTypeScriptファイルをテスト
• jsdomテスト環境でブラウザAPIをシミュレート
• ESModulesサポートを有効化

6. package.jsonの設定

package.jsonを以下のように編集して、必要なスクリプトを追加します：

{
  "name": "@upamume/chibi-react",
  "version": "0.1.0",
  "description": "React を最小構成で自作しながら学ぶ",
  "type": "module",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "tsc",
    "test": "jest",
    "test:watch": "jest --watch",
    "lint": "tsc --noEmit"
  },
  "keywords": [
    "react",
    "tutorial",
    "learning"
  ],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "@types/jest": "^29.5.0",
    "jest": "^29.5.0",
    "jest-environment-jsdom": "^29.5.0",
    "ts-jest": "^29.1.0",
    "typescript": "^5.0.0"
  }
}

この設定では：

• パッケージ名を@upamume/chibi-reactとして設定
• ESModulesを使用するため"type": "module"を指定
• ビルド、テスト、型チェックのスクリプトを追加

プロジェクト構造

chibi-reactのプロジェクト構造は以下のようになります：

環境検証

環境が正しく設定されたことを確認するために、簡単なテストを作成して実行してみましょう。

src/index.tsを作成：

export const hello = (name: string): string => {
  return `Hello, ${name}!`;
};

tests/hello.test.tsを作成：

import { hello } from '../src/index';

describe('環境検証', () => {
  it('挨拶が正しく返されること', () => {
    expect(hello('chibi-react')).toBe('Hello, chibi-react!');
  });
});

テストを実行：

pnpm test

テストが成功すれば、開発環境の準備は完了です！

次のステップ

環境構築が完了したら、次の章では実際にReactの核となるcreateElement関数の実装に進みます。この関数は、JSXをJavaScriptオブジェクト（Virtual Node）に変換する重要な役割を担っています。