ブログ

背景

最近、ソースコードのリファクタリングを行う機会があったため、その際に行ったコンポーネント化についてをご紹介します。

動作環境

React: 18.2.0

親子コンポーネントを使用した実装例

実装方針

• 親コンポーネントでは、カウントアップを行い子コンポーネントに値（メッセージ）を渡します。
• 子コンポーネントでは、受け取ったメッセージを表示します。

実装内容

親コンポーネントの実装

import React, { useState } from "react";
import ChildComponent from "./ChildComponent"; // 子コンポーネントをインポート

// 親コンポーネント
export default function ParentComponent() {

    // 変数の定義と初期化
    const [count, setCount] = useState(0);
    const message = '${count}回押しました';

    // ボタンクリックでカウントを増やす
    const handleButtonClick = () => {
        setCount(count + 1);
    };

    return (
        <>
            <div>
                <button onClick={handleButtonClick}>押してください</button>
                <ChildComponent message={message} />
            </div>
        </>
    );
}

• const [count, setCount] = useState(0);の記述について
  • count変数とsetCount関数を定義します。
  • ここでのuseState(0)では、count変数に初期値0を設定しています。（useStateに関する詳細はこちらの公式ドキュメントでより深く理解できるかと思います。）
  • setCount関数は、count変数の状態更新をするための関数として定義をしています。

• handleButtonClick関数について
  • ボタンをクリックした際にhandleButtonClick関数が呼び出されます。
  • setCount(count + 1);にてcount変数の状態を更新しており、ここではインクリメントを行っています。

• 子コンポーネントの呼び出しについて
  • import ChildComponent from "./ChildComponent";で呼び出せるように準備しておきます。
  • <ChildComponent message={message} />でメッセージを子コンポーネントに渡していますが、この後のメッセージの受け取り方にもポイントがあります。

子コンポーネントの実装

import React from "react";

// 子コンポーネント
export default function ChildComponent({ message }) {
    return (
        <div>
            子コンポーネントです！<br />
            {message}
        </div>
    );
}

• 子コンポーネントでは受け取った値（message）を表示させます。
• 引数を設定することで値を受け取ることができます。

実際にアプリを起動させると以下のような結果になります。（「押してください」ボタンを3回クリック）

最後に

今回は、「メッセージを受け取って表示する」コンポーネントを実装しました。この子コンポーネントを実装しておくことで、他の機能でメッセージを表示する際に、同じ実装を何度も行う必要がなくなります。メッセージを表示するコンポーネントは汎用的に利用されるため、その際に今回実装した子コンポーネントを使い回すことができます。

さらに、コンポーネント化した部分に不具合が発生した場合、修正箇所が子コンポーネントの1箇所だけで済むため、修正作業も容易になります。

開発効率の向上に役立つと思いますので、ぜひご活用ください。ご参考になれば幸いです。

株式会社ウイングドアは福岡のシステム開発会社です。
現在、私達と一緒に"楽しく仕事が出来る仲間"として、新卒・中途採用を絶賛募集しています！
ウイングドアの仲間達となら楽しく仕事できるかも？と興味をもった方、
お気軽にお問い合わせ下さい！