ReactとTypeScriptで始めるモダンWeb開発入門

先生

ReactとTypeScript、最強タッグでWeb開発を始めよう！🚀 型安全で効率的な開発をあなたに。

ReactとTypeScriptで始めるモダンWeb開発

ReactとTypeScriptは、現代のWeb開発において非常に強力な組み合わせです。ReactはUI構築のためのJavaScriptライブラリであり、TypeScriptはJavaScriptに静的型付けを追加する言語です。この組み合わせにより、より堅牢で保守性の高いアプリケーションを開発できます。

この記事では、ReactとTypeScriptを使ったWeb開発の基礎を、具体的なコード例を交えながら解説します。初心者の方でも、一歩ずつ理解を深められるように丁寧に説明していきます。

開発環境の構築

まず、開発に必要なツールをインストールしましょう。Node.jsとnpm（またはyarn）が必須です。まだインストールしていない場合は、公式サイトからダウンロードしてインストールしてください。

次に、Create React Appを使ってReactプロジェクトをTypeScriptで作成します。以下のコマンドを実行します。

npx create-react-app my-app --template typescript
cd my-app

このコマンドを実行すると、my-appというディレクトリにReactプロジェクトが作成されます。--template typescriptオプションを指定することで、TypeScriptが最初から設定された状態になります。

プロジェクトのディレクトリに移動し、開発サーバーを起動します。

npm start

コンポーネントの作成

Reactでは、UIをコンポーネントと呼ばれる小さな部品に分割して構築します。TypeScriptを使うことで、コンポーネントの型を厳密に定義できます。

例えば、以下のようなシンプルなコンポーネントを作成してみましょう。srcディレクトリにMyComponent.tsxというファイルを作成し、以下のコードを記述します。

import React from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ name }) => {
  return (
    <div>
      Hello, {name}!
    </div>
  );
};

export default MyComponent;

このコンポーネントは、nameというpropsを受け取り、挨拶を表示します。MyComponentPropsインターフェースでnameの型をstringとして定義しているため、TypeScriptは型エラーを検出できます。

作成したコンポーネントをApp.tsxで利用してみましょう。

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div className="App">
      <MyComponent name="World" />
    </div>
  );
}

export default App;

状態管理

Reactでは、コンポーネントの状態を管理するためにuseStateフックを使用します。TypeScriptと組み合わせることで、状態の型も厳密に管理できます。

例えば、ボタンをクリックするたびにカウントが増加するコンポーネントを作成してみましょう。

import React, { useState } from 'react';

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

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

export default Counter;

useState<number>(0)で、countの状態を数値として初期化しています。これにより、setCountで数値以外の値を設定しようとすると、TypeScriptがエラーを検出します。

API連携

Webアプリケーションでは、APIからデータを取得して表示することがよくあります。useEffectフックとfetch APIを使って、APIからデータを取得し、コンポーネントに表示する例を見てみましょう。

import React, { useState, useEffect } from 'react';

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<Todo[]>([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos');
      const data: Todo[] = await response.json();
      setTodos(data);
    };

    fetchData();
  }, []);

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

export default TodoList;

この例では、https://jsonplaceholder.typicode.com/todosからTODOアイテムを取得し、リストとして表示しています。Todoインターフェースでデータの型を定義しているため、TypeScriptはデータの不整合を検出できます。

参考リンク

まとめ

この記事では、ReactとTypeScriptを使ったWeb開発の基礎を学びました。開発環境の構築から、コンポーネントの作成、状態管理、API連携まで、一通りの流れを理解できたかと思います。

ReactとTypeScriptを組み合わせることで、より効率的で安全なWeb開発が可能になります。ぜひ、この記事を参考に、モダンなWebアプリケーション開発に挑戦してみてください。