Reactは現代のWeb開発において非常に人気のあるJavaScriptライブラリです。その柔軟性と効率性から、多くの開発者に愛用されています。

一方、TypeScriptはJavaScriptに静的型付けを追加した言語で、大規模なアプリケーション開発において特に力を発揮します。

この記事では、ReactとTypeScriptを組み合わせた開発環境の構築方法と、その中での関数コンポーネントの活用方法について詳しく解説します！

この記事を書いた人

• 現役のフルスタックエンジニアとして活躍中
• 開発チームリーダーとして複数プロジェクトをリード
• 副業プログラミングスクール講師として数百名以上を指導してきた教育のプロ
• プログラミングスクールのカリキュラム執筆経験あり

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

ReactとTypeScriptの相性

ReactはFacebookが開発したJavaScriptライブラリで、ユーザーインターフェースを構築するための強力なツールです。一方、TypeScriptはMicrosoftが開発した言語で、JavaScriptに静的型付けを追加しています。

これら二つの技術を組み合わせることで、以下のようなメリットが得られます：

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

TypeScriptを使用することで、開発者はより安全で予測可能なコードを書くことができます。以下に具体例を示します。

JavaScriptの場合:

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

TypeScriptの場合:

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

TypeScriptでは、関数の引数と戻り値の型を明示的に指定できます。これにより、誤った型の値が渡されるのを防ぎ、コードの信頼性が向上します。

ReactとTypeScriptの環境構築

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

ReactとTypeScriptの開発環境を構築するには、以下のツールとライブラリが必要です：

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

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

TypeScriptの設定ファイルの説明

TypeScriptプロジェクトには、tsconfig.jsonという設定ファイルが必要です。このファイルでTypeScriptコンパイラの動作を細かく制御できます。以下は一般的な設定例です：

{
  "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コンパイラに対して、ES5をターゲットとすること、strictモードを有効にすること、JSXを使用することなどを指示しています。

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

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

関数コンポーネントは、Reactにおけるコンポーネントの一種で、JavaScriptの関数として定義されます。これは、Reactの最新のベストプラクティスに沿った方法で、以下のような特徴があります：

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

TypeScriptを使用した関数コンポーネントの基本的な形は以下のようになります：

import React from 'react';

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

ここで、React.FCはFunction Componentの略で、この関数がReactの関数コンポーネントであることを示しています。

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

関数コンポーネントでpropsを使用する場合、以下のように型を定義します：

import React from 'react';

type Props = {
  name: string;
};

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

このように、Propsの型を定義することで、コンポーネントが受け取るpropsの型安全性を確保できます。

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

関数コンポーネントで状態を扱うには、ReactのuseStateフックを使用します：

import React, { useState } from 'react';

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

  return (
    

      
カウント: {count}
       setCount(count + 1)}>増やす
    
  );
}

この例では、useStateフックを使用してcountという状態とその更新関数setCountを定義しています。TypeScriptを使用することで、countの型をnumberと明示的に指定できます。

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

関数コンポーネントは、以前よく使用されていたクラスコンポーネントと比較して、いくつかの利点があります：

以上が、ReactとTypeScriptを組み合わせた開発環境の構築方法と、関数コンポーネントの基本的な使い方です。これらの知識を活用することで、より安全で保守性の高いReactアプリケーションを開発することができます。

ReactとTypeScriptの組み合わせは、モダンなWeb開発において非常に強力なツールとなります。特に関数コンポーネントを活用することで、より保守性の高い、効率的なコードを書くことができます。

この記事で学んだ内容を実践し、より良いReactアプリケーションの開発に活かしていきましょう！

コスパよく React を学習できる Udemy 講座人気ランキング

ちなみに姉妹サイトの Learning Next では、React を独学で学べる Udemy 講座の人気ランキングや、各講座の受講生レビューをもとにした分析スコアを公開しています。

「学習にあまりお金をかけたくない…」「スクールに通う時間がない」という方は、こちらを参考に Udemy 講座の学習も検討してはいかがでしょうか？

▶️ UdemyでReactを学べる講座の人気ランキング – Learning Next

ひとめで良い点・悪い点、さらにおすすめポイントが分かりますので、講座選びで失敗したくない方はぜひ活用してみてください！