React Hooksまとめ 第一弾（useState useEffect useContext）

はじめに

自分は新卒エンジニアです。今回は。現在学習しているReactの機能であるHooksについていつでも見返せるような記事を作成したいという目的で、書き始めました。参考にしていただければ幸いです。

React Hooksまとめ 第一弾

まずReactについては、以下の通りです。

ReactはWeb とネイティブユーザインターフェースのためのライブラリ
コンポーネントからユーザインターフェースを作成

1. Hooksとは

React Hooksとは、クラスを使うことなくReactのstateを扱ったり、ライフサイクルに応じた処理を実装したりできる機能です。 React Hooksを活用すると、簡潔で読みやすいコードを記述できます。

2. useStateフック

useStateフックは、状態を関数コンポーネント内に導入するために使用されます。

useStateは独立した値を持つため、複数の状態を一つのコンポーネントで管理することができます。 また、配列やオブジェクトなどの複雑なデータを扱うことも可能です。 それぞれのuseStateは独立したステートを作りますので、異なる値を保持したい場合にはuseStateを複数回呼び出すことが可能です。

以下は、基本的なuseStateの使用例です。

import React, { useState } from 'react';

function ExampleComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントを増やす</button>
    </div>
  );
}

上記のコードではuseStateを用いることによってボタンクリックをするたびに1が加算されるようになります。

実際の動作

3. useEffectフック

useEffectフックは、コンポーネントの副作用（API呼び出し、購読、データの変更など）を処理するために使用されます。

useEffectを使用すると、関数を実行するタイミングをReactのレンダリング後まで遅らせることが可能です。 useEffectでは、マウント時に行った処理をアンマウント時に解除します。 副作用関数はレンダリング時に毎回実行される仕組みです。

以下は、useEffectの基本的な使用例です。

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

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // データの取得ロジック
    const fetchData = async () => {
      try {
        const result = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        const jsonData = await result.json();
        setData(jsonData);
      } catch (error) {
        console.error('データの取得に失敗しました:', error);
      }
    };
    
    fetchData();// 依存配列が空の場合、マウント時にのみ実行

  return (
    <div>
      <p>取得したデータ: {data ? JSON.stringify(data) : 'データなし'}</p>
    </div>
  );
}

上記のコードは以下のような構成になっています

関数コンポーネントの定義

function DataFetchingComponent() {
  // ...
}

これは、Reactの関数コンポーネント DataFetchingComponent を定義しています。

Stateの設定

const [data, setData] = useState(null);

useStateフックを使用して、コンポーネントの状態を管理しています。data は取得したデータを保持し、setData はそのデータを更新するための関数です。初期値として null が設定されています。

useEffect フック

useEffect(() => {
  // ...
}, []); // 依存配列が空の場合、マウント時にのみ実行

この場合、データの取得ロジックが含まれています。
useEffectフックは、React コンポーネントがレンダリングされた後に非同期または副作用のある操作を実行するために使用されます。第二引数には、この useEffect フックが依存する値の配列を指定します。この値が変化すると、再度 useEffectが実行されます。しかし、配列が空の場合、useEffectは初めて画面に表示されるときにのみ実行され、以後は再レンダー時には実行されなくなります。

データの取得ロジック

const fetchData = async () => {
  try {
    const result = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const jsonData = await result.json();
    setData(jsonData);
  } catch (error) {
    console.error('データの取得に失敗しました:', error);
  }
};

fetchData();

・const fetchData = async () => { ... }: fetchData関数は非同期関数として宣言されています。データの取得ロジックが含まれています。
asyncを使用することでawaitによってPromiseが解決されるまで次の行のコードの実行を一時停止することができます。上記の例では、fetch関数がPromiseを返すため、その結果が解決されるまで処理が待機し、その後に次の行のコードが実行されます。

・try { ... } catch (error) { ... }: try-catchブロックを使用してエラーハンドリングを行っています。データの取得が成功した場合は、取得したデータをsetDataを介してコンポーネントの状態に設定します。エラーが発生した場合は、エラーメッセージをコンソールに出力します。

・fetchData();: fetchData関数がコンポーネントがマウントされた際に実行されます。

コンポーネントのレンダリング

Copy code
return (
  <div>
    <p>取得したデータ: {data ? JSON.stringify(data) : 'データなし'}</p>
  </div>
);

最後に、取得したデータを表示するためにコンポーネントが JSX を返します。data が存在すれば、その内容をJSON文字列に変換して表示し、存在しない場合は "データなし" と表示されます。

実際の動作

4. useContextフック

useContextフックは、Reactのコンテキストを使用してコンポーネントツリーを介して値を渡すために使用されます。

Reactコンポーネントのツリーに対して「グローバル」とみなすデータについて利用するように設計されています。
コンポーネントの再利用をより難しくする為、慎重に利用しなくてはなりません。
Contextによってコンポーネントツリー間におけるデータの橋渡しについて、すべての階層ごとに渡す必要性がなくなり、propsバケツリレーをしなくても下の階層で Contextに収容されているデータにアクセスできるようになりました。

以下は、useContextの基本的な使用例です。

import React, { useContext } from 'react';

const ThemeContext = React.createContext();

function ThemedComponent() {
  const theme = useContext(ThemeContext);

  return (
    <div style={{ background: theme.background, color: theme.color}}>
      テーマに基づくコンポーネント
    </div>
  );
}

コンテキストの作成

const ThemeContext = createContext();

createContextメソッドを使用して、新しいコンテキストオブジェクトを作成しています。このコンテキストオブジェクトは、ThemedComponent内で使用されるテーマ情報を提供します。

ThemedComponentコンポーネント

function ThemedComponent() {
  const theme = useContext(ThemeContext);

  return (
    <div style={{ background: theme.background, color: theme.text }}>
      テーマに基づくコンポーネント
    </div>
  );
}

ThemedComponentは、useContextフックを使用してThemeContextからテーマ情報を取得しています。useContextは、Reactコンポーネント内でコンテキストの値にアクセスするためのフックです。

useContextは引数として対象のコンテキストオブジェクトを取り、そのコンテキストが提供する値を返します。この場合、ThemeContextが提供するテーマ情報をtheme変数に格納しています。

最後に、ThemedComponentはdiv要素をレンダリングし、そのスタイルをtheme.backgroundとtheme.colorに基づいて設定しています。これにより、テーマに基づくスタイルが適用されたコンポーネントが表示されます。

コンテキストの使用

ThemedComponentは、親コンポーネントでThemeContext.Providerを使用してコンテキストの値を設定する必要があります。例えば、次のように行います。

function App() {
  const themeValue = { background: 'lightblue', text: 'darkblue' };

  return (
    <ThemeContext.Provider value={themeValue}>
      <ThemedComponent />
    </ThemeContext.Provider>
  );
}

このように親コンポーネントでThemeContext.Providerでコンテキストの値を提供することで、ThemedComponent内でuseContextを使用してその値にアクセスできます。

実際の動作

5. その他のHooks

Reactには他にも多くのHooksが存在します。以下は一部の例です。以下のHooksに関しては第二弾でまとめていきます。

・useReducer: 複雑な状態ロジックを処理するためのフック。
・useCallbackおよびuseMemo: パフォーマンス最適化のためのコールバックとメモ化。
・useRef: Refオブジェクトの作成および値の保持。
・その他多数...

６．まとめ

今回は３種類のHooksのみでしたが逐一そのほかのHooksについてもまとめていきます。
自分自身作成しながらも実用性の部分やデメリット等、完璧に理解できていない部分もあるため、記事を見直しながら改めて学習を進めていきます。