【React】10分内に「ざっくり」わかる！Reactの必須技術5選

2024年1月24日 18:30

はじめに

ReactをベースにしたTypeScriptは、静的型言語を利用して開発者に強力な開発体験を提供します。このブログでは、TypeScriptを使用してReactでのコンポーネント・Props、イベント処理・スタイル、useState、useEffect、useContextの基本的な概念を簡単なコード例と共に説明します。

コンポーネント・Propsの使用方法

TypeScriptでのコンポーネントの作成は、通常、関数型コンポーネントと一緒にプロップスの型を定義するためにインターフェース（Interface）を使用します。

import React from 'react';

interface MyComponentProps {
  name: string;
}

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

export default MyComponent;

上記のコードでは、MyComponentはMyComponentPropsというインターフェースを使用してプロップスの型を定義し、その型を使用して関数型コンポーネントを作成しています。

イベントとスタイルの使用方法

イベント処理とスタイルの適用も、TypeScriptで基本的に使用可能です。

import React, { useState } from 'react';

interface EventAndStyleProps {
  initialColor: string;
}

const EventAndStyleComponent: React.FC<EventAndStyleProps> = ({ initialColor }) => {
  const [color, setColor] = useState<string>(initialColor);

  const handleClick = () => {
    setColor(color === 'blue' ? 'red' : 'blue');
  };

  const textStyle: React.CSSProperties = {
    color: color,
    cursor: 'pointer',
  };

  return (
    <div style={textStyle} onClick={handleClick}>
      Click me to change color!
    </div>
  );
};

export default EventAndStyleComponent;

上記のコードでは、EventAndStyleComponentでプロップスの型を定義し、スタイルはReact.CSSPropertiesを使用して明示的に指定しています。

useStateの使用方法

useStateを使用する際も、型を明示して状態を管理することができます。

import React, { useState } from 'react';

const StateComponent: 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 StateComponent;

上記のコードでは、countの状態の型をnumberとして指定しています。

useEffectの使用方法

useEffectを使用する際も、型を指定して副作用を扱うことができます。

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

const EffectComponent: React.FC = () => {
  const [data, setData] = useState<string[]>([]);

  useEffect(() => {
    // データのロードなどの作業を実行
    fetchData();
  }, []); // 空の配列は初回レンダリング時のみ実行

  const fetchData = async () => {
    // 非同期の作業を実行してデータを設定
    const result = await fetchDataFromAPI();
    setData(result);
  };

  return <div>Data: {data.join(', ')}</div>;
};

export default EffectComponent;

上記のコードでは、EffectComponentでdataの状態の型をstring[]として指定しています。

useContextの使用方法

useContextを使用してグローバルな状態を共有する際も、型を指定して安全に使用できます。

import React, { createContext, useContext } from 'react';

// Contextの作成
interface MyContextProps {
  value: string;
}

const MyContext = createContext<MyContextProps | undefined>(undefined);

// Providerの提供
const App: React.FC = () => {
  return (
    <MyContext.Provider value={{ value: 'Hello from Context!' }}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

// useContextで値を使用
const ChildComponent: React.FC = () => {
  const contextValue = useContext(MyContext);

  if (!contextValue) {
    return null;
  }

  return <div>{contextValue.value}</div>;
};

export default App;

上記のコードでは、MyContextを作成する際にインターフェースを使用して値を明示的に指定し、useContextを使用する際にその型を指定しています。

最後に

このブログでは、TypeScriptを基にしたReactでの基本的な概念を簡単なコード例と共に紹介しました。関数型コンポーネント・Props、イベント処理・スタイル、useState、useEffect、useContextの主要なトピックを触れ、TypeScriptを使用することでより安全にコードを記述できるようになります。Happy coding!

向上心のエンジニア
ソンさん