環境構築

ReactとTypeScriptを始めるためには、まず開発環境を整える必要があります。この章では、Node.jsとnpmのインストールから、Create React Appを使ったプロジェクト作成、TypeScript設定の確認までの手順を解説します。

Node.jsとnpmのインストール

ReactとTypeScriptを使用するには、Node.jsとそのパッケージマネージャであるnpmが必要です。

手順

Node.jsのダウンロードとインストール
- Node.js公式サイトにアクセスします。
- 推奨されているLTS（Long-Term Support）バージョンをダウンロードします。
- インストーラーを実行し、画面の指示に従ってインストールを完了します。
Node.jsとnpmのバージョン確認
- インストール後、ターミナルで以下のコマンドを実行してバージョンを確認します。
  bash
```
node -v
npm -v
```
- 正常にインストールされていれば、それぞれのバージョンが表示されます。

Create React Appを使用したプロジェクトの作成

Reactプロジェクトを簡単に作成するために、Create React App（CRA）を使用します。

手順

プロジェクトディレクトリの作成
- ターミナルで任意のディレクトリに移動し、新しいReactプロジェクトを作成します。
  bash
```
npx create-react-app my-app --template typescript
```
- my-appの部分はプロジェクト名に置き換えてください。
- --template typescriptを指定することで、TypeScriptがセットアップされた状態のReactプロジェクトが作成されます。
プロジェクトディレクトリに移動
bash
```
cd my-app
```
開発サーバーの起動
- 作成したプロジェクトの動作確認を行います。
  bash
```
npm start
```
- ブラウザで http://localhost:3000 が開き、Reactアプリケーションが表示されれば成功です。

初期状態のディレクトリ構造

Create React Appで作成したプロジェクトのディレクトリ構造は以下のようになります。

my-app/
├── node_modules/       # プロジェクト依存関係が保存されるディレクトリ
├── public/             # 公開される静的ファイル
│   ├── index.html      # メインHTMLファイル
│   └── ...
├── src/                # ソースコードディレクトリ
│   ├── App.css         # アプリのスタイル
│   ├── App.tsx         # メインコンポーネント
│   ├── index.css       # グローバルスタイル
│   ├── index.tsx       # エントリーポイント
│   └── ...
├── .gitignore          # Gitで無視するファイルを指定
├── package.json        # プロジェクトの依存関係とスクリプト
├── tsconfig.json       # TypeScriptの設定
└── README.md           # プロジェクトの説明ファイル

この構造を理解しておくことで、どこに何を配置すればよいかが明確になります。

TypeScript設定の確認と調整

Create React Appで作成したプロジェクトには、TypeScriptの基本設定が既に含まれています。ここではその設定を確認し、必要に応じて調整します。

tsconfig.jsonの確認

tsconfig.jsonファイルはTypeScriptのコンパイル設定を管理します。

tsconfig.jsonの確認

プロジェクトのルートディレクトリにある tsconfig.json を開きます。

デフォルトの設定例:

json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

推奨される調整
- プロジェクトに応じて以下の設定を調整することが考えられます。
  - strict: 型チェックの厳密性を高めるオプション。trueにしておくことで、より安全なコードを記述できます。
  - jsx: react-jsx（React 17以降用）を推奨。

型定義ファイルの確認

TypeScriptは、node_modules/@typesディレクトリ内にインストールされる型定義ファイルを使用します。ReactやReact DOMの型定義もデフォルトでインストールされています。

確認コマンド:
bash
```
npm list @types/react @types/react-dom
```
- エラーが発生した場合は以下のコマンドで再インストールできます:
  bash
```
npm install @types/react @types/react-dom
```

Node.jsとnpmのインストール ​

手順 ​

Create React Appを使用したプロジェクトの作成 ​

手順 ​

初期状態のディレクトリ構造 ​

TypeScript設定の確認と調整 ​

tsconfig.jsonの確認 ​

型定義ファイルの確認 ​