MENU
  1. ホーム
  2. React
  3. Reactでの状態の子コンポーネントへの伝達と効率的な管理方法を徹底解説

Reactでの状態の子コンポーネントへの伝達と効率的な管理方法を徹底解説

React

Reactは、現在最も人気のあるフロントエンドライブラリの一つであり、効率的なUI構築を可能にします。その中でも、親コンポーネントから子コンポーネントへ状態を伝達する方法は、Reactを使いこなす上で非常に重要な概念です。しかし、状態の伝達方法を正しく理解しないと、コードが煩雑化し、保守性が低下する可能性があります。本記事では、Reactにおける状態管理の基本から、PropsやContext APIを活用した子コンポーネントへの状態の伝達方法、さらにはその課題と解決策までを詳しく解説します。これにより、効率的で可読性の高いReactアプリケーションの構築方法を習得することができます。

目次

状態と子コンポーネントの関係性

Reactのコンポーネントは親子関係を持つツリー構造で構築されることが一般的です。この関係性において、状態は通常、親コンポーネントが持ち、子コンポーネントに伝達されます。親コンポーネントが持つ状態を「source of truth（真実の情報源）」として扱い、それを子コンポーネントが受け取り表示や操作を行う形が、Reactにおける基本的な状態管理の仕組みです。

親コンポーネントが状態を持つ理由

  1. 集中管理：親コンポーネントが状態を持つことで、複数の子コンポーネント間で一貫したデータを管理できます。
  2. データの流れ：Reactは単方向データフローを採用しているため、親から子への状態の伝達が直感的で簡単です。

子コンポーネントが状態を受け取る仕組み

親コンポーネントは、Props（プロパティ）を使用して状態を子コンポーネントに渡します。これにより、子コンポーネントは親コンポーネントの状態に依存しながらも、独自のUIやロジックを構築できます。

具体例

以下は、親コンポーネントが状態を持ち、それを子コンポーネントに渡すシンプルな例です。

function ParentComponent() {
  const [message, setMessage] = React.useState("Hello from Parent!");

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent message={message} />
    </div>
  );
}

function ChildComponent({ message }) {
  return (
    <div>
      <h2>Child Component</h2>
      <p>{message}</p>
    </div>
  );
}

この例では、親コンポーネントのmessage状態がChildComponentに渡され、子コンポーネントで表示されます。このように親子関係を意識した状態の設計がReactアプリケーションの基本です。

Propsを使った状態の伝達方法

Reactにおいて、状態を子コンポーネントに伝達する最も基本的な方法は、Props（プロパティ）を使用することです。Propsは、親コンポーネントから子コンポーネントへデータを渡すための仕組みであり、Reactの単方向データフローの基盤となっています。

Propsの基本的な使い方

親コンポーネントは、子コンポーネントを呼び出す際に、属性としてデータを渡します。この属性が子コンポーネントのpropsオブジェクトに格納され、子コンポーネント内で利用できます。

以下は、状態をPropsを通じて渡す例です。

function ParentComponent() {
  const [message, setMessage] = React.useState("Hello, World!");

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent message={message} />
    </div>
  );
}

function ChildComponent({ message }) {
  return (
    <div>
      <h2>Child Component</h2>
      <p>{message}</p>
    </div>
  );
}
  • ParentComponentがmessageという状態を持っています。
  • この状態がChildComponentのprops.messageとして渡され、子コンポーネント内で利用されています。

Propsを使う利点

  1. シンプルで直感的：PropsはJavaScriptのオブジェクトに似ているため、わかりやすく使いやすい。
  2. 単方向データフローの維持：データが親から子へ流れる仕組みを保つため、バグが発生しにくい。
  3. 動的なデータの共有：親コンポーネントの状態が変化すると、Reactが再レンダリングを通じて子コンポーネントも更新します。

Propsでイベントハンドラーを渡す

Propsを使えば、親コンポーネントから子コンポーネントに状態だけでなく、イベントハンドラーも渡すことができます。これにより、子コンポーネントで状態を操作することが可能になります。

function ParentComponent() {
  const [message, setMessage] = React.useState("Hello, World!");

  const updateMessage = () => {
    setMessage("Message updated!");
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent message={message} onUpdate={updateMessage} />
    </div>
  );
}

function ChildComponent({ message, onUpdate }) {
  return (
    <div>
      <h2>Child Component</h2>
      <p>{message}</p>
      <button onClick={onUpdate}>Update Message</button>
    </div>
  );
}

この例では、ChildComponentからonUpdateイベントハンドラーをトリガーすることで、親コンポーネントの状態を変更しています。

まとめ

Propsは、Reactアプリケーションにおける親子間のデータ共有をシンプルかつ効率的に行うための基本的なツールです。ただし、階層が深くなるとコードが複雑化する可能性があり、この問題を解決する方法については後述します。

Props Drillingの問題点

Reactで状態を子コンポーネントに伝達する際、Propsは非常に便利な手段ですが、コンポーネントツリーの階層が深くなると「Props Drilling」と呼ばれる問題が発生することがあります。これは、状態や関数を必要としない中間コンポーネントを経由して、深い階層の子コンポーネントにデータを渡さなければならない状況を指します。

Props Drillingとは

Props Drillingは、親コンポーネントから孫やひ孫のコンポーネントにデータを渡すために、必要以上に多くの中間コンポーネントでPropsを受け渡すことを指します。

以下の例を見てみましょう。

function App() {
  const [message, setMessage] = React.useState("Hello from App!");

  return (
    <div>
      <h1>App Component</h1>
      <Level1 message={message} />
    </div>
  );
}

function Level1({ message }) {
  return (
    <div>
      <h2>Level 1 Component</h2>
      <Level2 message={message} />
    </div>
  );
}

function Level2({ message }) {
  return (
    <div>
      <h3>Level 2 Component</h3>
      <Level3 message={message} />
    </div>
  );
}

function Level3({ message }) {
  return (
    <div>
      <h4>Level 3 Component</h4>
      <p>{message}</p>
    </div>
  );
}

この例では、AppコンポーネントのmessageをLevel3コンポーネントで使用するために、Level1とLevel2コンポーネントを経由して渡しています。これがProps Drillingの典型的なケースです。

Props Drillingの課題

  1. コードの可読性が低下
    必要ない中間コンポーネントでもPropsを受け渡すコードが増えるため、可読性が損なわれます。
  2. メンテナンスの難しさ
    中間コンポーネントが増えると、親コンポーネントの状態や構造の変更がコンポーネントツリー全体に影響を及ぼす可能性があります。
  3. スケーラビリティの制限
    プロジェクトの規模が大きくなるにつれて、Propsの受け渡しが複雑化し、変更が困難になります。

Props Drillingを回避する方法

Props Drillingを避けるためには、以下の方法を活用できます。

Context API

ReactのContext APIを使用すれば、ツリーの任意の階層にデータを提供できるため、中間コンポーネントでの受け渡しを省略できます。

状態管理ライブラリ

ReduxやZustandなどの外部ライブラリを活用することで、コンポーネントツリー全体で状態を簡単に共有できます。

カスタムHooks

状態管理のロジックをカスタムHooksに分離することで、コードの簡潔さを保ちつつ、Props Drillingを減らせます。

まとめ

Props Drillingは、小規模なアプリケーションでは問題にならない場合が多いものの、コンポーネント階層が深くなると、コードの複雑性を増す要因となります。この問題を解決するために、Context APIや状態管理ライブラリなどの適切なツールを活用することが重要です。次のセクションでは、Context APIを使用してProps Drillingを回避する方法について解説します。

Context APIの活用方法

ReactのContext APIは、Props Drillingを回避するために設計された仕組みで、親コンポーネントから子孫コンポーネントに直接データを渡すことができます。この方法を使うと、複雑なツリー構造でも中間コンポーネントを介さずにデータを共有でき、コードの可読性と保守性が向上します。

Context APIの基本構造

Context APIは以下の3つのステップで使用します。

  1. Contextの作成
    React.createContextを使用してContextを作成します。
  2. Providerでデータを提供
    ContextのProviderコンポーネントを使用して、データを子孫コンポーネントに提供します。
  3. Consumerでデータを取得
    子孫コンポーネントでuseContextを使用して、データを取得します。

Context APIの実装例

以下は、Context APIを使ってmessageという状態をコンポーネントツリー全体で共有する例です。

import React, { createContext, useState, useContext } from "react";

// 1. Contextの作成
const MessageContext = createContext();

function App() {
  const [message, setMessage] = useState("Hello from Context!");

  return (
    // 2. Providerでデータを提供
    <MessageContext.Provider value={message}>
      <h1>App Component</h1>
      <Level1 />
    </MessageContext.Provider>
  );
}

function Level1() {
  return (
    <div>
      <h2>Level 1 Component</h2>
      <Level2 />
    </div>
  );
}

function Level2() {
  return (
    <div>
      <h3>Level 2 Component</h3>
      <Level3 />
    </div>
  );
}

function Level3() {
  // 3. Consumerでデータを取得
  const message = useContext(MessageContext);
  return (
    <div>
      <h4>Level 3 Component</h4>
      <p>{message}</p>
    </div>
  );
}

コードの動作

  • AppコンポーネントでMessageContext.Providerを使い、messageというデータをツリー全体に提供しています。
  • Level3コンポーネントではuseContextフックを使い、直接MessageContextからmessageを取得しています。
  • 中間のLevel1やLevel2でPropsを受け渡す必要がなくなり、コードが簡潔になります。

Context APIを使う利点

  1. Props Drillingの解消
    中間コンポーネントを通さずにデータを直接渡せるため、ツリー構造が深くなってもコードが煩雑化しません。
  2. グローバルデータの共有
    ログイン情報やテーマ設定など、アプリ全体で共有するデータを管理するのに最適です。
  3. 再レンダリングの最小化
    必要な部分だけを再レンダリングするように工夫することで、パフォーマンスを向上できます。

Context APIの注意点

  1. 過剰な使用は避ける
    必要以上にContextを使用すると、かえって管理が複雑になることがあります。小規模なアプリケーションでは、通常のPropsの方が適切な場合もあります。
  2. パフォーマンスの影響
    Providerの値が更新されるたびに、その値に依存するコンポーネントが再レンダリングされるため、慎重に設計する必要があります。

まとめ

Context APIは、Props Drillingを回避するための強力なツールであり、Reactアプリケーションの状態管理を簡素化します。ただし、使用箇所を適切に見極め、過剰な使用を避けることが重要です。次のセクションでは、Context API以外の状態管理ライブラリと比較し、その利点と欠点を詳しく説明します。

State Management Librariesの紹介

Context APIはシンプルなアプリケーションでは非常に便利ですが、アプリケーションが大規模になるにつれて、より高度な状態管理が必要になる場合があります。その際に役立つのが、Reactの状態管理ライブラリです。ここでは、代表的なライブラリであるRedux、MobX、Zustandなどを比較し、それぞれの利点と適した場面を解説します。

Redux

Reduxは、最も広く使われている状態管理ライブラリの一つで、アプリケーション全体の状態を一元的に管理します。

特徴

  1. 単一のグローバルストア：状態が一つのストアに集約されるため、アプリ全体で状態を簡単に追跡できます。
  2. 予測可能な状態管理：状態の変化はすべて純粋関数（Reducer）を通じて行われるため、デバッグが容易です。
  3. 強力なツール群：Redux DevToolsなど、デバッグや時間旅行機能が豊富です。

コード例

以下は、Reduxを使ったカウンターアプリの簡単な例です。

import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

store.dispatch({ type: 'increment' });
console.log(store.getState()); // { count: 1 }

利点

  • 大規模なアプリケーションに適している。
  • コミュニティサポートが豊富。

欠点

  • 設定がやや複雑で、学習コストが高い。
  • ボイラープレートコードが多くなる。

MobX

MobXは、状態を観測可能なオブジェクトとして管理し、変更があった場合に自動で再レンダリングを行うライブラリです。

特徴

  1. リアクティブプログラミング：状態が変更されると、それを監視しているコンポーネントが自動で更新されます。
  2. 柔軟性：手続き的な状態管理が可能で、設計の自由度が高い。

利点

  • コードが簡潔で直感的。
  • 中小規模のプロジェクトに最適。

欠点

  • Reduxほどの一貫性がなく、大規模アプリケーションでは管理が複雑になる可能性がある。

Zustand

Zustandは、シンプルで軽量な状態管理ライブラリで、最近注目を集めています。

特徴

  1. ミニマリスト設計：わずか数行のコードで状態管理を実現。
  2. Context APIと併用可能：既存のReact構造に簡単に組み込めます。

コード例

import create from 'zustand';

const useStore = create(set => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 })),
}));

function Counter() {
  const { count, increment, decrement } = useStore();
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

利点

  • 設定がシンプルで、学習コストが低い。
  • 中小規模のアプリケーションに最適。

欠点

  • 大規模な状態管理では拡張性が課題になる場合がある。

状態管理ライブラリの比較

ライブラリ特徴利点適した規模
Reduxグローバル状態管理強力なツール群、予測可能性大規模アプリ
MobXリアクティブ設計簡潔で柔軟中小規模アプリ
Zustand軽量、シンプル設計学習コストが低い、拡張性あり中小規模アプリ

まとめ

Redux、MobX、Zustandといったライブラリにはそれぞれ特長があり、アプリケーションの規模や要件に応じて使い分ける必要があります。小規模で迅速に開発したい場合はZustand、大規模な状態管理が必要な場合はReduxを選ぶとよいでしょう。次のセクションでは、状態管理のベストプラクティスについて解説します。

状態管理のベストプラクティス

Reactアプリケーションの効率性と保守性を高めるためには、適切な状態管理が不可欠です。ここでは、状態管理のベストプラクティスを紹介し、アプリケーションの設計を最適化する方法を解説します。

1. 状態のスコープを最小限に抑える

状態は必要最小限のスコープに限定することが重要です。以下の基準を参考に状態の管理場所を決定しましょう。

  • 状態がどれだけのコンポーネントに影響を与えるか。
  • 状態が再利用される可能性はあるか。

もし状態が特定のコンポーネント内で完結するなら、そのコンポーネントに閉じ込めるべきです。一方、複数のコンポーネント間で共有する必要がある場合は、親コンポーネントやContextを利用することが適切です。

2. ローカル状態とグローバル状態を分ける

状態には、ローカル（特定のコンポーネント内）とグローバル（アプリ全体で共有）という2つの種類があります。

  • ローカル状態は、useStateやuseReducerを使用して管理するのが適しています。
  • グローバル状態は、Context APIや状態管理ライブラリ（ReduxやZustandなど）を使用することで、効率的に管理できます。

グローバル状態を過剰に使用すると、パフォーマンスが低下する可能性があるため、用途を慎重に検討してください。

3. 再レンダリングを最小化する

状態が変更されると、影響を受けるコンポーネントが再レンダリングされます。このプロセスを効率化するには以下の方法が役立ちます。

  • メモ化: React.memoやuseMemoを使用して、再レンダリングを防ぎます。
  • 依存関係の分離: 必要な部分だけが再レンダリングされるように、状態を細かく分離します。

4. 状態の命名と設計を一貫させる

状態の命名規則を統一することで、コードの可読性が向上します。また、状態の構造を事前に設計することで、複雑な状態管理を回避できます。

例: 状態命名の一貫性

// 良い例
const [isLoading, setIsLoading] = useState(false);
const [userData, setUserData] = useState(null);

// 悪い例
const [loading, setLoad] = useState(false);
const [data, changeData] = useState(null);

5. エラー状態も明確に管理する

非同期処理（API呼び出しなど）を伴う状態管理では、エラー状態も考慮に入れる必要があります。たとえば、ローディング状態、成功状態、エラー状態を分離して管理するのが効果的です。

例: 複数の状態を管理する

const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const [data, setData] = useState(null);

const fetchData = async () => {
  setIsLoading(true);
  try {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  } catch (err) {
    setError(err.message);
  } finally {
    setIsLoading(false);
  }
};

6. 不変性を保つ

Reactの状態は不変性を保つ必要があります。useStateやuseReducerで状態を更新する際には、元の状態を直接変更するのではなく、新しい状態を生成してください。

例: 状態の不変性を保つ

// 良い例
setData(prevData => [...prevData, newItem]);

// 悪い例
data.push(newItem);
setData(data);

7. テスト可能な状態設計を行う

状態管理はテスト可能な形に設計することが理想です。関数型の状態更新や、状態管理ライブラリの機能を活用することで、テストの容易さが向上します。

まとめ

状態管理のベストプラクティスを守ることで、Reactアプリケーションの効率性と保守性を向上させることができます。状態のスコープを明確にし、再レンダリングを最小化しつつ、シンプルで一貫性のある設計を心がけることが成功の鍵です。次のセクションでは、実践的な演習を通じて状態管理の理解を深めます。

演習問題：状態の伝達シナリオ

Reactの状態管理について学んだ内容を実践するために、シンプルなアプリケーションを作成します。今回の演習では、親コンポーネントから子コンポーネントに状態を渡し、さらに子コンポーネントから親の状態を更新する仕組みを実装します。

シナリオ

「カウンターアプリ」を作成します。このアプリには以下の機能があります：

  1. カウンターの表示：親コンポーネントがカウントの状態を管理し、子コンポーネントで表示します。
  2. カウントの更新：子コンポーネントのボタンをクリックして、カウンターの値を増減します。

目標

  1. 親から子へ状態を渡す仕組みを理解する。
  2. 子から親にイベントを伝える方法を理解する。

完成イメージ

以下の構造で実現します：

  • ParentComponent: カウンターの状態を持つ親コンポーネント。
  • ChildComponent: カウントの表示とボタン操作を行う子コンポーネント。

コード例

以下のコードを参考に実装してみてください。

import React, { useState } from "react";

// 親コンポーネント
function ParentComponent() {
  const [count, setCount] = useState(0); // カウントの状態を管理

  // カウントを増やす関数
  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  // カウントを減らす関数
  const decrement = () => {
    setCount(prevCount => prevCount - 1);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Current Count: {count}</p>
      <ChildComponent onIncrement={increment} onDecrement={decrement} />
    </div>
  );
}

// 子コンポーネント
function ChildComponent({ onIncrement, onDecrement }) {
  return (
    <div>
      <h2>Child Component</h2>
      <button onClick={onIncrement}>Increment</button>
      <button onClick={onDecrement}>Decrement</button>
    </div>
  );
}

export default ParentComponent;

動作解説

  1. 状態の定義
    ParentComponentでuseStateを使用してcount状態を定義し、setCount関数を使って値を更新します。
  2. 子コンポーネントへの状態の渡し方
    状態を直接渡すのではなく、状態を変更する関数（incrementとdecrement）をPropsとして渡します。
  3. イベントハンドリング
    ChildComponentでは、ボタンのクリックイベントでonIncrementとonDecrementを呼び出し、親コンポーネントの状態を更新します。

演習問題

以下の課題を実施して、状態管理の理解を深めましょう：

  1. 課題1
    上記コードに機能を追加して、カウントの初期値をユーザーが入力できるようにしてください。
  2. 課題2
    カウントが10以上の場合は増加ボタンを無効化し、-5以下の場合は減少ボタンを無効化するロジックを追加してください。
  3. 課題3
    状態をContext APIに変更して、Propsを使わずに状態を管理する方法を試してみてください。

まとめ

この演習を通じて、Reactの基本的な状態の伝達方法と管理手法を体験しました。さらに複雑なアプリケーションを構築する際には、この知識が基盤となります。次のセクションでは、Reactの状態管理における一般的な問題とそのトラブルシューティング方法について解説します。

トラブルシューティングガイド

Reactの状態管理は強力ですが、実際の開発ではさまざまな問題が発生することがあります。本セクションでは、よくある問題とその解決方法について解説します。これらのトラブルシューティングを学ぶことで、より効率的な開発が可能になります。

1. 状態が正しく更新されない

状態が意図したとおりに更新されない場合、以下を確認してください。

原因と解決策

  1. 非同期更新を理解していない
    setState（useStateのセッター関数）は非同期で動作します。このため、直後に状態を参照すると古い値が返されることがあります。 解決策: 状態を基にした更新では、関数型のアップデートを使用してください。
   setCount(prevCount => prevCount + 1);
  1. 直接状態を変更している
    状態を直接変更するとReactが変更を検知できず、再レンダリングが行われません。 解決策: 状態は常に不変性を保つように更新してください。
   // NG
   data.push(newItem);
   setData(data);

   // OK
   setData([...data, newItem]);

2. Propsが正しく渡されない

子コンポーネントでPropsがundefinedになる、または意図しない値が渡される場合があります。

原因と解決策

  1. Propsのタイプミス
    親コンポーネントで指定したProps名と、子コンポーネントで受け取るProps名が一致しているか確認してください。
   // NG: 親で渡した名前と一致しない
   <ChildComponent meesage="Hello" />

   function ChildComponent({ message }) {
     console.log(message); // undefined
   }
  1. Propsのデフォルト値を設定していない
    Propsが必須でない場合、デフォルト値を設定していないとエラーが発生することがあります。 解決策: デフォルト値を設定します。
   function ChildComponent({ message = "Default Message" }) {
     console.log(message);
   }

3. 再レンダリングが多発する

状態の変更により不要な再レンダリングが発生し、パフォーマンスが低下することがあります。

原因と解決策

  1. 依存関係の指定ミス
    useEffectやuseMemoの依存配列が正しく設定されていないと、無限ループや不要な再レンダリングが発生します。 解決策: 必要な依存関係を正確に指定します。
   useEffect(() => {
     console.log("This runs only when 'count' changes");
   }, [count]); // 'count'を依存関係に指定
  1. 無駄な再レンダリングの抑制
    コンポーネントが不要に再レンダリングされる場合、React.memoやuseMemoを活用してください。
   const MemoizedComponent = React.memo(MyComponent);

4. コンポーネント間の状態が同期しない

複数のコンポーネントが同じ状態に依存している場合、状態が同期しない問題が発生することがあります。

原因と解決策

  1. 状態のスコープが分散している
    状態が複数の場所で管理されていると、同期が取れなくなることがあります。 解決策: 状態を親コンポーネントやグローバルストアで一元管理してください。
  2. Context APIの誤用
    Contextの値が頻繁に変更されると、すべてのコンポーネントが再レンダリングされるため、状態が不安定になります。 解決策: Contextには頻繁に更新されるデータを含めず、必要に応じてReduxやZustandを利用します。

5. デバッグが困難

状態が複雑になると、バグの特定が難しくなることがあります。

解決策

  1. 状態をロギングする
    状態の変更を追跡するために、状態変更時にログを出力します。
   useEffect(() => {
     console.log("State updated:", state);
   }, [state]);
  1. デバッグツールを活用する
    Reduxを使用している場合はRedux DevToolsを、React全般ではReact DevToolsを活用して状態を視覚的に追跡します。

まとめ

Reactの状態管理で直面する課題に対処する方法を学びました。状態が正しく更新されない、再レンダリングが多発するなどの問題は、基本的な設計やツールの使い方を見直すことで解決できます。最後に、これらのトラブルシューティングを日常的に活用することで、開発効率が大幅に向上します。次のセクションでは、本記事の内容を総括します。

まとめ

本記事では、Reactにおける状態管理と子コンポーネントへの伝達方法を詳しく解説しました。Propsを使用した基本的な状態の渡し方から、Props Drillingの問題点、それを解決するためのContext APIや状態管理ライブラリの活用法、さらにトラブルシューティングまで幅広く取り上げました。

効率的な状態管理は、Reactアプリケーションの開発をスムーズにし、保守性を向上させる重要な要素です。特に大規模なアプリケーションでは、適切なツールとベストプラクティスを用いて設計を行うことが成功の鍵となります。

今回の記事を通じて、Reactでの状態管理を体系的に学ぶ基盤が築けたと思います。引き続き実践を重ね、より効果的なアプリケーション構築を目指しましょう。

React

コメント

コメントする

目次