ReactJS - コンポーネントライフサイクルとReact Hooksを使用した管理

ReactJS - Component Life Cycle Using React Hooks

こんにちは、志を抱く開発者たち！今日は、ReactJSの世界に飛び込み、React Hooksを使用したコンポーネントライフサイクルについて楽しく学びましょう。プログラミングが初めての人でも心配ありません。私は各ステップを明確な説明と豊富な例を用いてガイドしますので、さあ、潜りましょう！

React Hooksの紹介

コンポーネントライフサイクルに入る前に、まずReact Hooksとは何かを理解しましょう。Hooksは、クラスを書かずにステートや他のReact機能を使用できる特別なツールを思い浮かべてください。まるでfunctionalコンポーネントにスーパーパワーの魔法の杖を与えるようなものです！

Hooksの理由

昔（技術年数で言えばそれほど昔ではありませんが）は、ステートやサイドエフェクトを管理するためにクラスコンポーネントを使用する必要がありました。しかし、クラスは特に初心者にとって難しいことがあります。Hooksはこのプロセスを簡素化し、コードをクリーンで再利用可能にします。

コンポーネントライフサイクル

私たち人間と同様に、Reactコンポーネントにもライフサイクルがあります。生まれる（マウント）、成長し変化する（更新）、そして最終的には必要なくなります（アンマウント）。このライフサイクルを理解することは、効率的なReactアプリケーションを作成するために非常に重要です。

コンポーネントの3つの段階

マウント：コンポーネントがDOMに追加されます。
更新：コンポーネントがpropsやステートの変更により再レンダリングされます。
アンマウント：コンポーネントがDOMから削除されます。

では、これらの段階をHooksを使用してどのように管理するか見てみましょう！

useState: コンポーネントステートの管理

useState Hookは、functionalコンポーネントにステートを追加するための主要なツールです。例を見てみましょう：

import React, { useState } from 'react';

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

  return (
    <div>
      <p>あなたは{count}回クリックしました</p>
      <button onClick={() => setCount(count + 1)}>
        クリックしてね
      </button>
    </div>
  );
}

この例では、useState(0)はステート変数countを0の値で初期化します。setCount関数はこのステートを更新するためのものです。ボタンがクリックされるたびに、setCount(count + 1)が呼び出され、カウントがインクリメントされ、コンポーネントが再レンダリングされます。

useEffect: サイドエフェクトの処理

useEffect Hookは、コンポーネント内のサイドエフェクトを管理するための多様な機能を兼ね備えたスイスアーミーナイフです。クラスコンポーネントの複数のライフサイクルメソッドの機能を統合しています。

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

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

  useEffect(() => {
    // このエフェクトはすべてのレンダリングの後に実行されます
    console.log('コンポーネントがレンダリングされました');

    // APIコールのシミュレーション
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();

    // クリーンアップ関数
    return () => {
      console.log('コンポーネントがアンマウントまたは再レンダリングされます');
    };
  }, []); // 空の依存配列は、このエフェクトがマウント時に一度だけ実行されることを意味します

  return (
    <div>
      {data ? <p>{data}</p> : <p>読み込み中...</p>}
    </div>
  );
}

この例では、以下の主要な概念が示されています：

エフェクトはコンポーネントがレンダリングされた後に実行されます。
APIコールをシミュレーションしています。
クリーンアップ関数（エフェクトから返された関数）は、コンポーネントがアンマウントされる前に実行されます。
空の依存配列[]は、このエフェクトがマウント時に一度だけ実行されることを意味します。

カスタムHooks: 再利用可能なロジックの作成

Hooksの最も強力な機能の1つは、カスタムHooksを作成できることです。これにより、コンポーネントロジックを再利用可能な関数に抽出できます。フォーム入力を処理するためのカスタムHookを作成してみましょう：

import { useState } from 'react';

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return [value, handleChange];
}

// カスタムHookを使用
function LoginForm() {
  const [username, handleUsernameChange] = useInput('');
  const [password, handlePasswordChange] = useInput('');

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(`ログイン中：ユーザー名 ${username} パスワード ${password}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={handleUsernameChange}
        placeholder="ユーザー名"
      />
      <input
        type="password"
        value={password}
        onChange={handlePasswordChange}
        placeholder="パスワード"
      />
      <button type="submit">ログイン</button>
    </form>
  );
}

このカスタムuseInput Hookは、フォーム入力のロジックをカプセル化し、LoginFormコンポーネントをよりクリーンで再利用可能にします。

React childrenプロパティ（コンテナ）

Reactのchildrenプロパティを使用すると、他のコンポーネントをデータとして渡すことができ、ラッパーコンポーネントを作成する方法を提供します。この概念は「コンテナ」として知られています。

function Panel({ children, title }) {
  return (
    <div className="panel">
      <h2>{title}</h2>
      {children}
    </div>
  );
}

function App() {
  return (
    <Panel title="ようこそ">
      <p>これはパネルのコンテンツです。</p>
      <button>クリックしてね！</button>
    </Panel>
  );
}

この例では、Panelコンポーネントは子コンテンツとして渡された任意のコンテンツをラップすることができ、非常に再利用可能です。

結論

今日は多くのことをカバーしました！React Hooksの基本からコンポーネントライフサイクルの管理、そしてカスタムHooksの作成までです。お忘れなく、実践は完璧を生みますので、これらの概念を自分のプロジェクトで実験してみてください。

以下は、今日話題にしたHooksの簡単な参照表です：

Hook	目的	例
useState	コンポーネントステートの管理	`const [count, setCount] = useState(0);`
useEffect	サイドエフェクトの処理	`useEffect(() => { /* effect */ }, []);`
カスタムHooks	再利用可能なロジックの作成	`const [value, handleChange] = useInput('');`

ハッピーコーディング、そしてHooksがあなたと共にありますように！

Credits: Image by storyset

前のチュートリアル:

ReactJS - React Hooks を使用した状態管理

次のチュートリアル:

ReactJS - レイアウトコンポーネント