ReactでのTypeScript入門！環境構築から関数コンポーネントの活用まで

2023-12-03

当サイトでは一部リンクに広告が含まれています

この記事では、ReactとTypeScriptの組み合わせで開発環境を作り型、関数コンポーネントをどう活用するかについて説明します。

ReactとTypeScriptの組み合わせについて

ReactとTypeScriptの相性

Reactはウェブアプリケーションを作るためのツールです。
TypeScriptは、JavaScriptの上に型を加えたプログラミング言語です。
これらは一緒に使うことで、より安全で効率的なコードを書くことが可能になります。

TypeScriptをReactで利用するメリット

TypeScriptを使うと、コードが間違いにくくなります。
具体的な例を見てみましょう。

JavaScriptの場合:

function greet(name) {
  return "こんにちは、" + name + "さん";
}

TypeScriptの場合:

function greet(name: string): string {
  return "こんにちは、" + name + "さん";
}

TypeScriptでは、関数が受け取る引数と、関数が返す値の型が明確になります。
これにより、コードが間違いにくくなります。

ReactとTypeScriptの環境構築

必要なツールとライブラリ

ReactとTypeScriptの開発環境を作るには、いくつかのツールとライブラリが必要です。

Node.js
npm（Node.jsに同梱されています）
TypeScript
create-react-app（Reactアプリケーションを作成するツール）

これらをインストールした後、以下のコマンドでReactとTypeScriptのプロジェクトを作成します。

npx create-react-app プロジェクト名 --template typescript

TypeScriptの設定ファイルの説明

TypeScriptの設定ファイルはtsconfig.jsonというnameで、プロジェクトのルートディレクトリにあります。
このファイルで、TypeScriptの動作を細かく設定することができます。

例えば、以下の設定は、TypeScriptをJavaScriptに変換する際のルールを指定しています。

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

TypeScriptでの関数コンポーネント

関数コンポーネントとは何か？

Reactでアプリケーションを作る際、コンポーネントという部品を作ります。
関数コンポーネントは、その一種で、関数として定義されたコンポーネントのことを指します。

TypeScriptでの関数コンポーネントの基本的な作り方

Reactにおけるコンポーネントは、ウェブページの一部を形成する要素です。
関数コンポーネントは、その名の通り関数として定義されるコンポーネントです。
以下にTypeScriptで関数コンポーネントを定義する基本的な方法を示します。

import React from 'react';

const Greet: React.FC = () => {
  return <h1>こんにちは、皆さん！</h1>;
}

この例では、Greetというnameの関数コンポーネントを定義しています。
これは、画面に「こんにちは、皆さん！」という見出しを表示するコンポーネントです。

React.FCは、Function Componentの略で、関数コンポーネントの型を表します。

関数コンポーネントでpropsを使う方法

関数コンポーネントはpropsというデータを受け取ることができます。
propsは親コンポーネントから子コンポーネントにデータを渡すための仕組みです。
以下に、propsを受け取る関数コンポーネントの例を示します。

import React from 'react';

type Props = {
  name: string;
};

const Greet: React.FC<Props> = ({ name }) => {
  return <h1>こんにちは、{name}さん！</h1>;
}

この例では、Greetはnameというpropsを受け取り、それを表示します。

関数コンポーネントで状態を扱う方法

関数コンポーネントはuseStateというReactのフックを使うことで、状態を管理できます。
以下に、状態を持つ関数コンポーネントの例を示します。

import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, countを設定する] = useState<number>(0);

  return (
    <div>
      <p>あなたがボタンを押した回数: {count}</p>
      <button onClick={() => countを設定する(count + 1)}>押す</button>
    </div>
  );
}

この例では、Counterはcountという状態を持ち、それを表示します。
ボタンを押すと、countが1増えます。

以上が、TypeScriptを用いたReactの関数コンポーネントの基本的な使い方になります。

クラスコンポーネントとの違い

Reactでは、関数コンポーネントの他にクラスコンポーネントというコンポーネントの定義方法があります。

例えば、以下のようにクラスコンポーネントを定義することができます。

import React from 'react';

type Props = {
  name: string;
};

type State = {
  count: number;
};

class Greet extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  render() {
    return (
      <div>
        <p>あなたがボタンを押した回数: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>押す</button>
      </div>
    );
  }
}

クラスコンポーネントは、関数コンポーネントと比べて以下のような特徴があります。