MENU
  1. ホーム
  2. React
  3. TypeScriptで始めるReactプロジェクト完全ガイド

TypeScriptで始めるReactプロジェクト完全ガイド

React

TypeScriptでReactプロジェクトをセットアップする方法は、React開発における最新のベストプラクティスの一つです。TypeScriptを活用することで、コードの保守性を高め、型安全性を確保しながら効率的に開発を進めることができます。本記事では、TypeScriptとReactを組み合わせたプロジェクトの構築方法を、初心者でもわかりやすく、ステップバイステップで解説します。これを読むことで、開発環境の準備から、実際のアプリケーションの作成までの一連の流れを理解することができます。

目次

TypeScriptを選ぶ理由

React開発でTypeScriptを使用することには多くのメリットがあります。型安全性を確保することで、開発効率やコードの品質が向上し、チーム開発や長期的なプロジェクトにおいて特に効果を発揮します。

型安全性によるエラーの削減

TypeScriptはコンパイル時に型エラーを検出するため、実行時エラーの発生を大幅に減らします。これにより、開発中のバグを早期に発見し、修正することが可能になります。

コードの可読性と保守性の向上

型情報を明示することで、コードの意図がより明確になり、他の開発者がコードを理解しやすくなります。また、将来的な変更や追加が容易になり、プロジェクト全体の保守性が向上します。

開発者支援ツールとの相性の良さ

TypeScriptを導入することで、Visual Studio Codeなどのエディタでの補完機能や型チェックが強化されます。これにより、より効率的に開発を進めることが可能です。

広範なエコシステムとの互換性

TypeScriptは、Reactをはじめとする多くのライブラリやツールと統合されています。サードパーティの型定義も豊富に提供されており、既存のライブラリとスムーズに連携できます。

TypeScriptのこれらの利点により、ReactプロジェクトにTypeScriptを導入することは、効率的で堅牢な開発を実現するための選択肢として非常に有効です。

必要なツールと環境の準備

ReactとTypeScriptを使ったプロジェクトを始めるには、いくつかのツールと環境を準備する必要があります。以下は、その具体的な手順です。

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

ReactプロジェクトはNode.jsの環境上で動作します。以下の手順でNode.jsをインストールしてください。

  1. Node.js公式サイトにアクセスし、LTS（長期サポート版）をダウンロード。
  2. インストール後、ターミナルで以下のコマンドを実行してインストール確認。
   node -v
   npm -v

これにより、Node.jsとnpmのバージョンが表示されます。

コードエディタの準備

開発効率を上げるため、Visual Studio Code（VS Code）のような高度なエディタを使用することを推奨します。

  • VS Code公式サイトからインストール。
  • TypeScriptとReactの開発を補助する以下の拡張機能を追加。
  • ESLint
  • Prettier
  • TypeScript Language Basics

TypeScriptのグローバルインストール（任意）

TypeScriptをグローバルにインストールしておくと、プロジェクト外で型の確認などができて便利です。

npm install -g typescript

インストール後、以下のコマンドでバージョンを確認。

tsc -v

Gitとバージョン管理の準備

プロジェクトを管理するためにGitを導入します。ターミナルで以下を実行してGitがインストールされているか確認。

git --version

インストールされていない場合は、Git公式サイトからインストールしてください。

パッケージマネージャの選択

npm以外に、Yarnやpnpmなどの代替パッケージマネージャを使用することも可能です。必要に応じてインストールしてください。

npm install -g yarn

これらの準備が整えば、ReactとTypeScriptのプロジェクトを構築する準備は完了です。次のステップでは、新しいReactアプリケーションの作成に進みます。

新しいReactアプリの作成

TypeScriptを使用したReactプロジェクトを始めるためには、Reactアプリケーションを初期化する必要があります。以下に具体的な手順を示します。

Create React Appを使ったセットアップ

Facebookが提供するCreate React App（CRA）は、Reactプロジェクトのセットアップを簡単にするためのツールです。以下の手順でプロジェクトを初期化します。

  1. ターミナルを開き、プロジェクトを作成したいディレクトリに移動。
  2. 以下のコマンドを実行してReactアプリを初期化します。
   npx create-react-app my-app --template typescript

ここでmy-appはプロジェクト名です。任意の名前に置き換えてください。

  1. プロジェクトが作成されたら、以下のコマンドでディレクトリに移動します。
   cd my-app

セットアップ内容の確認

プロジェクトディレクトリには、以下のようなファイルとフォルダが生成されます。

  • src: アプリケーションのソースコードが含まれるフォルダ。
  • public: 静的ファイルが格納されるフォルダ。
  • tsconfig.json: TypeScriptの設定ファイル。
  • package.json: プロジェクトの依存関係やスクリプトが記載されたファイル。

開発サーバーの起動

セットアップが完了したら、開発サーバーを起動してアプリが正常に動作することを確認します。

npm start

ブラウザが自動的に起動し、http://localhost:3000 が表示されます。ここにReactアプリのデフォルトページが表示されれば成功です。

Viteを使ったセットアップ（高速化を重視する場合）

Create React Appの代わりに、Viteを使用してプロジェクトをセットアップすることも可能です。Viteは高速なビルドを特徴とするツールです。

  1. ターミナルで以下を実行。
   npm create vite@latest my-app --template react-ts
  1. プロジェクトディレクトリに移動し、依存関係をインストール。
   cd my-app
   npm install
  1. 開発サーバーを起動。
   npm run dev

これで、新しいReactアプリの作成が完了しました。次のステップでは、TypeScriptの基本設定を行います。

TypeScriptの基本設定

ReactとTypeScriptのプロジェクトを効率的に進めるために、tsconfig.jsonの設定を確認し、必要に応じてカスタマイズします。これにより、プロジェクトの動作が最適化され、型安全性が向上します。

tsconfig.jsonの役割

tsconfig.jsonは、TypeScriptコンパイラ（tsc）の動作を制御する設定ファイルです。Reactプロジェクトを作成した際にデフォルトで生成されますが、必要に応じて編集することで、TypeScriptの動作を調整できます。

基本的な設定項目

以下は、tsconfig.jsonの主要な設定項目の説明です。

1. コンパイラオプション

compilerOptionsはTypeScriptのコンパイラ動作を設定するセクションです。デフォルトのtsconfig.jsonには以下のような設定があります。

{
  "compilerOptions": {
    "target": "ESNext", // 出力するJavaScriptのバージョン
    "module": "ESNext", // 使用するモジュールシステム
    "jsx": "react-jsx", // JSXの扱い方を設定
    "strict": true, // 厳格な型チェックを有効化
    "moduleResolution": "node", // Node.jsのモジュール解決方法を使用
    "esModuleInterop": true, // ESモジュールの互換性を有効化
    "skipLibCheck": true, // ライブラリの型チェックをスキップ
    "forceConsistentCasingInFileNames": true // ファイル名の大文字小文字の一貫性を強制
  }
}

2. includeとexclude

includeとexcludeは、TypeScriptコンパイラがどのファイルを対象にするかを制御します。

{
  "include": ["src"],
  "exclude": ["node_modules"]
}
  • include: コンパイル対象のファイルやフォルダを指定。
  • exclude: コンパイル対象外とするファイルやフォルダを指定。

推奨カスタマイズ

プロジェクトに応じて、以下のようなカスタマイズが有効です。

1. パスエイリアスの設定

コードを簡潔にするために、パスエイリアスを設定できます。

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@utils/*": ["utils/*"]
    }
  }
}

これにより、import文が短縮されます。

import Header from "@components/Header";

2. 型チェックの厳格性を調整

strictオプションを活用して、型チェックをさらに厳格にすることができます。例えば、以下の設定を追加すると、コードの品質が向上します。

{
  "compilerOptions": {
    "strictNullChecks": true,
    "noImplicitAny": true
  }
}

設定の反映と動作確認

tsconfig.jsonを編集したら、開発サーバーを再起動することで設定が反映されます。ターミナルで以下を実行して再起動してください。

npm start

これで、TypeScriptの基本設定は完了です。次はReactコンポーネントにTypeScriptの型を適用する方法を学びます。

コンポーネントの作成と型の適用

ReactとTypeScriptを組み合わせることで、Reactコンポーネントに型情報を付与し、コードの安全性と可読性を向上させることができます。ここでは、TypeScriptを使用したReactコンポーネントの作成と型の適用方法を解説します。

基本的な関数型コンポーネント

TypeScriptでは、Reactの関数型コンポーネントを以下のように作成できます。

import React from "react";

type Props = {
  title: string;
  isActive: boolean;
};

const MyComponent: React.FC<Props> = ({ title, isActive }) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{isActive ? "Active" : "Inactive"}</p>
    </div>
  );
};

export default MyComponent;

コード解説

  • type Props: Props型を定義して、コンポーネントのプロパティを明確化しています。
  • React.FC<Props>: Reactの関数型コンポーネントに型を適用しています。
  • titleとisActive: コンポーネントが受け取る具体的なプロパティ。

React.FCの注意点

React.FCを使うと自動的にchildrenプロパティが付与されますが、必須ではありません。シンプルな関数型コンポーネントには次のように型を直接付与することも一般的です。

const MyComponent = ({ title, isActive }: Props) => {
  return (
    <div>
      <h1>{title}</h1>
      <p>{isActive ? "Active" : "Inactive"}</p>
    </div>
  );
};

クラス型コンポーネント

クラス型コンポーネントにも型を適用できます。以下は基本的な例です。

import React, { Component } from "react";

type Props = {
  name: string;
};

type State = {
  count: number;
};

class Counter extends Component<Props, State> {
  state: State = {
    count: 0,
  };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

コード解説

  • type Propsとtype State: PropsとStateを明確に型定義しています。
  • Component<Props, State>: クラス型コンポーネントに型情報を付与しています。

型適用のベストプラクティス

  1. 汎用的な型を定義する
    型が複雑になる場合は、再利用可能な型を作成すると便利です。
   type ButtonProps = {
     label: string;
     onClick: () => void;
   };

   const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
     <button onClick={onClick}>{label}</button>
   );
  1. 型エイリアスを活用する
    必要に応じてユーティリティ型（Partial, Readonly, Pick, Omitなど）を活用します。
   type OptionalProps = Partial<ButtonProps>;

コンポーネント型の確認とデバッグ

  • 型エラーがある場合、エディタが即座に警告を表示します。
  • 開発サーバーを再起動して、実行時の動作も確認してください。

これで、Reactコンポーネントに型を適用する基礎を学びました。次は、PropsとStateの型定義について詳しく解説します。

PropsとStateの型定義

Reactの開発では、PropsとStateの型定義が重要です。これにより、コンポーネント間のデータの受け渡しや内部状態を明確かつ安全に管理できます。ここでは、PropsとStateの型定義方法と具体的な例を紹介します。

Propsの型定義

Propsは親コンポーネントから子コンポーネントにデータを渡すためのオブジェクトです。Propsに型を定義することで、渡されるデータの形式を明確にできます。

基本的な型定義

以下の例では、titleとonClickという2つのプロパティを持つPropsを型定義しています。

import React from "react";

type Props = {
  title: string;
  onClick: () => void;
};

const Header: React.FC<Props> = ({ title, onClick }) => {
  return (
    <header>
      <h1>{title}</h1>
      <button onClick={onClick}>Click Me</button>
    </header>
  );
};

export default Header;

必須プロパティとオプショナルプロパティ

プロパティをオプショナルにするには、?を使用します。

type Props = {
  title?: string; // オプショナルプロパティ
  onClick: () => void;
};

const Header: React.FC<Props> = ({ title = "Default Title", onClick }) => {
  return (
    <header>
      <h1>{title}</h1>
      <button onClick={onClick}>Click Me</button>
    </header>
  );
};

Stateの型定義

Stateはコンポーネントが内部で管理するデータの状態を表します。関数型コンポーネントではuseStateフックを使用し、クラス型コンポーネントではthis.stateで管理します。

useStateの型定義

以下は、関数型コンポーネントでuseStateを使用する例です。

import React, { useState } from "react";

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

export default Counter;
  • useState<number>: countがnumber型であることを明示。
  • 型推論が効く場合は省略可能ですが、明示することで意図が明確になります。

クラス型コンポーネントでのState定義

クラス型コンポーネントでは、以下のようにState型を定義します。

import React, { Component } from "react";

type State = {
  count: number;
};

class Counter extends Component<{}, State> {
  state: State = {
    count: 0,
  };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;
  • type State: State型を明確に定義。
  • this.setState: 型安全な状態更新を実現。

PropsとStateを組み合わせる

以下は、PropsとStateを同時に型定義する例です。

type Props = {
  initialCount: number;
};

type State = {
  count: number;
};

class Counter extends Component<Props, State> {
  state: State = {
    count: this.props.initialCount,
  };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;
  • initialCount: 親から渡される初期値。
  • count: 内部で管理される状態。

PropsとStateのベストプラクティス

  1. 型は具体的に
    明確な型定義によりエラーを防ぎ、意図を共有しやすくします。
  2. 再利用可能な型を作成
    共通の型をtypes.tsなどにまとめて再利用します。
  3. 型推論を活用
    型推論が効く場合は、冗長な型定義を避けます。

これで、PropsとStateの型定義の基本を学びました。次は、型安全なイベント処理について解説します。

型安全なイベント処理

ReactとTypeScriptを組み合わせることで、イベント処理にも型を適用し、安全で明確なコードを書くことができます。ここでは、主要なイベントタイプに対する型の定義方法と、型安全なイベント処理の実践を解説します。

基本的なイベント型

Reactで頻繁に使用されるイベントの型は、React名前空間の中に用意されています。代表的なものは以下の通りです：

  • React.MouseEvent: マウスイベント（クリック、ホバーなど）。
  • React.ChangeEvent: フォームの値変更イベント。
  • React.KeyboardEvent: キーボードイベント。
  • React.FormEvent: フォームの送信イベント。

クリックイベントの型定義

以下は、onClickイベントに型を適用する例です。

import React from "react";

type Props = {
  handleClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
};

const Button: React.FC<Props> = ({ handleClick }) => {
  return <button onClick={handleClick}>Click Me</button>;
};

export default Button;
  • React.MouseEvent<HTMLButtonElement>: マウスイベントで、対象がbutton要素であることを示しています。

フォームの値変更イベント

フォームの値を変更するイベントでは、React.ChangeEventを使用します。

import React, { useState } from "react";

const InputField: React.FC = () => {
  const [value, setValue] = useState<string>("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  };

  return <input type="text" value={value} onChange={handleChange} />;
};

export default InputField;
  • React.ChangeEvent<HTMLInputElement>: 入力フォームの変更イベントに型を適用しています。
  • event.target.value: 入力値を取得します。

キーボードイベントの型定義

キーボードイベントには、React.KeyboardEventを使用します。

const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
  if (event.key === "Enter") {
    console.log("Enter key pressed");
  }
};

<div onKeyDown={handleKeyDown} tabIndex={0}>
  Press Enter
</div>;
  • React.KeyboardEvent<HTMLDivElement>: 対象がdiv要素であるキーボードイベントの型です。
  • event.key: 押されたキーの値を取得します。

カスタムイベントの型定義

カスタムイベントの場合、CustomEvent型を使用して定義することも可能です。

type CustomEvent = React.SyntheticEvent & {
  customData?: string;
};

const handleCustomEvent = (event: CustomEvent) => {
  console.log(event.customData);
};

イベント型の注意点

Reactのイベント型はすべてSyntheticEventを基盤としており、ネイティブのDOMイベントとは異なります。必要に応じてevent.nativeEventを使用してネイティブイベントを取得できます。

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
  console.log(event.nativeEvent);
};

イベント処理のベストプラクティス

  1. 明確な型を指定する
    イベントごとに適切な型を割り当てて、コードの意図を明確化します。
  2. 型推論を活用
    必要以上に型を冗長に記述せず、型推論を適切に活用します。
  3. カスタム型の作成
    複雑なイベントデータを扱う場合は、再利用可能な型を作成します。
  4. ユニットテストで検証
    型安全性を確認するだけでなく、イベントハンドラーが期待通りに動作することをテストします。

これで、型安全なイベント処理についての理解が深まりました。次は、サードパーティライブラリの型の利用方法を解説します。

サードパーティライブラリの型の利用

Reactプロジェクトでは、サードパーティライブラリを活用することで開発効率を高めることができます。TypeScriptと組み合わせる場合、これらのライブラリに型定義を適切に適用することで、エラーのない堅牢なコードを構築できます。

型定義の確認

多くのサードパーティライブラリは、公式またはコミュニティによって提供される型定義を含んでいます。以下の手順で、型定義が適切に利用可能かを確認します。

  1. ライブラリ自体に型定義が含まれている場合
    パッケージに型定義が組み込まれている場合、特別な操作は不要です。
   npm install some-library

使用例：

   import { SomeComponent } from "some-library";
  1. 型定義が別パッケージとして提供される場合
    型定義が独立したパッケージ（@types/名前）として提供されている場合があります。これをインストールします。
   npm install @types/some-library --save-dev

使用例：

   import { SomeUtility } from "some-library";

型定義が提供されていない場合

一部のライブラリでは、型定義が提供されていない場合があります。この場合、以下の方法で型を適用します。

1. 型定義を自作する

型定義ファイル（some-library.d.ts）をプロジェクトのsrcディレクトリ内に作成し、自分で型を定義します。

declare module "some-library" {
  export function someFunction(arg: string): number;
}

2. 型アサーションを使用する

一時的な方法として、asキーワードを使用して型を指定します。

import someLibrary from "some-library";

const result = someLibrary.someMethod() as string;

よく使うライブラリの型利用例

1. React Router

React Routerの型定義は公式に組み込まれています。以下のように利用可能です。

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

const App: React.FC = () => (
  <Router>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  </Router>
);

2. Axios

Axiosの型定義も公式に提供されています。

import axios, { AxiosResponse } from "axios";

type Data = {
  id: number;
  name: string;
};

axios.get<Data>("https://api.example.com/data").then((response: AxiosResponse<Data>) => {
  console.log(response.data.name);
});

3. Styled-Components

@types/styled-componentsをインストールして型を利用します。

import styled from "styled-components";

const Button = styled.button<{ primary: boolean }>`
  background: ${(props) => (props.primary ? "blue" : "gray")};
`;

<Button primary={true}>Click Me</Button>;

型定義のトラブルシューティング

  • エラーが出る場合: 型定義が古い可能性があります。最新バージョンに更新してください。
  npm update @types/some-library
  • 型定義が不完全な場合: 必要な部分のみ型定義を上書きするか、サポートに報告します。

型の利用のベストプラクティス

  1. 型定義の確認
    利用するライブラリの公式ドキュメントを参照し、型定義の有無を確認します。
  2. 型の一元管理
    独自に型定義を作成する場合は、types/ディレクトリにまとめて管理します。
  3. 型定義のアップデート
    使用するライブラリや型定義を定期的に更新し、プロジェクトを最新の状態に保ちます。

これで、サードパーティライブラリの型の利用方法を学びました。次はこの記事のまとめに進みます。

まとめ

本記事では、TypeScriptを用いたReactプロジェクトのセットアップ方法について詳しく解説しました。TypeScriptを導入することで、型安全性を確保し、コードの保守性と可読性が向上します。また、PropsやStateの型定義、型安全なイベント処理、そしてサードパーティライブラリとの統合を学ぶことで、効率的かつ堅牢なアプリケーションの開発が可能になります。

TypeScriptの活用により、React開発がよりスムーズかつエラーの少ないものとなります。初めてのセットアップから高度な型定義の適用まで、このガイドを参考にプロジェクトを成功に導いてください。

React
Web開発 React TypeScript

コメント

コメントする

目次