Contents
ReactとTypeScriptでウェブアプリを始める前に
Reactは現代的なフロントエンド開発で最も広く使われているライブラリであり、TypeScriptはJavaScriptに型情報を追加してコードの信頼性を高める言語拡張です。両者を組み合わせることで、バグの防止とチームでの開発効率向上が期待できます。
初心者向けの学習アプローチ
プログラミング経験者がいない方も安心して進められるよう、以下の3段階の学習ステップを用意しました。
- 環境構築：Node.jsとVSCodeのインストールから始めて開発準備を行う
- コンポーネント設計：propsやstateの使い方を理解し、基本的なUI要素を作成する
- ステート管理：Hooksや型定義を使って複雑なロジックを実装する
本記事が目指すゴール
読者が学習後には「React + TypeScriptで簡単なウェブアプリを開発できる」というスキルセットを持ち、以下のことができるようになります。
- ターミナルでの基本操作（npmコマンドなど）
- 型定義によるエラー防止の実践方法
- プロダクション向けにビルド可能なプロジェクト構築
開発環境の準備
ReactとTypeScriptを扱うには、Node.jsとVSCodeが必須です。それぞれのインストール手順と基本的な使い方を解説します。
Node.jsとVSCodeのインストール手順
OSに応じて以下の手順でセットアップしてください。
- Node.jsのダウンロード
- 公式サイトから最新版（2023年8月時点ではv18.x）を選び、インストーラーを実行します。
-
インストール後は
npm -vコマンドでバージョン確認が可能です。 -
VSCodeの導入
- 公式サイトからダウンロードし、IDEとしてインストールします。
- TypeScript開発に必要な拡張機能（例: TypeScript Language Features）を追加すると便利です。
開発ツールの基本的な使い方
VSCodeではプロジェクト作業フローが以下のように流れます。
- ファイルの新規作成：
File > New Fileから.tsまたは.tsxファイルを作成します。 - ターミナルでのコマンド実行：
Terminal > New Terminalでnpmコマンドなどを実行できます。 - コードのエラー検出：TypeScriptの型チェック機能がリアルタイムで表示されます。
TypeScriptプロジェクトの初期化
create-react-appはReactアプリケーションを簡単に作成できるツールです。以下に初期化手順と設定ポイントを解説します。
create-react-appによるプロジェクト生成
- プロジェクトディレクトリを作成（例:
my-app） -
ターミナルで以下コマンド実行：
bash
npx create-react-app my-app --template typescript -
--template typescriptを指定することで、TypeScript対応のプロジェクトが自動生成されます。 -
ディレクトリ移動と起動：
bash
cd my-app
npm start
tsconfig.jsonの基礎設定
tsconfig.jsonはTypeScriptの型チェックに関する設定ファイルです。初期生成時の主な設定内容は以下の通りです。
|
1 2 3 4 5 6 7 8 |
| 設定項目 | 値 | 補足 | |-----------------|----------------|--------------------------| | `target` | ES6 | JavaScriptのバージョン | | `module` | ESNext | モジュールシステム | | `jsx` | React | JSXが有効化される | | `strict` | true | 型チェックを厳格に | | `esModuleInterop` | true | モジュールの互換性向上 | |
コンポーネント設計の基礎
ReactではUI構成要素を「コンポーネント」として定義します。propsとstateはコンポーネント間でデータをやり取りするための核心的な概念です。
propsによるデータ受け渡し
propsは親コンポーネントから子コンポーネントにデータを送るための方法です。型情報を追加することで、バグが発生しにくくなります。
例：PropsとTypeScriptの結合
|
1 2 3 4 5 6 7 8 9 |
interface User { id: number; name: string; } function UserProfile({ user }: { user: User }) { return <div>{user.name}さん</div>; } |
state管理の基本概念
stateはコンポーネント内部で変化するデータを管理します。useStateを使用することで、リアクティブなUIが実現できます。
例：useStateの使い方
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); return ( <div> カウント: {count} <button onClick={() => setCount(count + 1)}>+</button> </div> ); } |
React Hooksの実践的使用法
Hooksは関数コンポーネントで状態や副作用を扱えるようにする機能です。特にuseStateとuseEffectは基本的な必須知識です。
useState・useEffectの使い分け
以下に両者の特徴と適した用途を比較します。
|
1 2 3 4 5 |
| ホークス | 用途 | 注意点 | |----------------|-------------------------------|--------------------------------| | `useState` | 状態管理（例: カウンター） | 初期値を設定する必要がある | | `useEffect` | 副作用処理（例: APIコール） | レンダリング後のタイミングに注意 | |
例：カスタムHooksの作成
独自のロジックを再利用可能な形式でまとめることも可能です。以下は、入力値のバリデーションを行うカスタムHookです。
|
1 2 3 4 |
function useValidateInput(input: string): boolean { return input.length >= 3; } |
型定義で安全なコード構築
TypeScriptの型システムにより、予期せぬエラーを事前に検出できます。interfaceとtypeは型定義に必要なキーワードです。
interfaceとtypeの使い分け
|
1 2 3 4 5 |
| 見出し | 内容 | |----------------|----------------------------------------------------------------------| | `interface` | オブジェクトの構造を定義する（拡張可能） | | `type` | 任意の型を表現できる（列挙やユニオン型なども扱える） | |
例：インターフェースの定義
|
1 2 3 4 5 |
interface Product { id: number; name: string; } |
型推論の活用シーン
TypeScriptは文脈から自動で型を判断しますが、明示的な定義により信頼性が高まります。
例：関数パラメータ・戻り値に型を指定
|
1 2 3 4 |
function add(a: number, b: number): number { return a + b; } |
プロジェクトのビルドと公開
本番環境で使用するには、npm run buildコマンドで静的ファイルを生成します。この手順はデプロイに不可欠です。
npm run buildの実行手順
-
ターミナルで以下コマンド実行：
bash
npm run build -
出力ディレクトリ確認：
build/フォルダが生成され、ここにHTMLやCSSファイルが含まれます。
生成ファイルの構造解説
|
1 2 3 4 5 6 |
| ファイル名 | 内容 | |------------------|--------------------------------------| | `index.html` | アプリケーションのエントリポイント | | `static/` | CSS・画像などの静的リソース | | `assets/` | オブジェクトや配置ファイル | |
練習用プロジェクトテンプレート
学習をサポートする練習用プロジェクトテンプレートが公開されています。以下のリンクから確認してください。
👉 https://github.com/username/react-ts-template