React において、props（"properties" の略）は、コンポーネント間でデータを渡すための基本的な概念です。これにより、動的で再利用可能なコンポーネントを作成できます。props は関数に渡す引数のようなものだと考えてください。親コンポーネントが子コンポーネントを設定することを可能にします。props は読み取り専用であり、子コンポーネントは受け取った props を決して変更してはなりません。
この実験（Lab）では、以下のことを学びます。
始めましょう！
このステップでは、新しい子コンポーネントを作成し、props を受け取る準備をします。React の関数コンポーネントは、単一の引数を受け取ることができます。この引数は、コンポーネントに渡されたすべての props を含むオブジェクトです。慣例として、このオブジェクトは props と名付けられます。
まず、プロジェクトディレクトリに移動しましょう。セットアップスクリプトは既に my-app という名前のプロジェクトを作成しています。
cd ~/project/my-app次に、プロジェクトの依存関係をインストールする必要があります。
npm installそれでは、新しいコンポーネントファイルを作成しましょう。左側のファイルエクスプローラーで src フォルダに移動します。src 内に新しいファイルを作成し、Greeting.jsx と名付けます。
新しく作成した src/Greeting.jsx ファイルに以下のコードを追加します。これは、props パラメータを受け取るシンプルな関数コンポーネントを定義します。
function Greeting(props) {
return <h2>Hello, World!</h2>;
}
export default Greeting;次に、この新しいコンポーネントをメインの App コンポーネントにインポートして使用する必要があります。src/App.jsx ファイルを開き、以下のように変更してください。
import Greeting from "./Greeting.jsx";
function App() {
return (
<>
<h1>Welcome to My App</h1>
<Greeting />
</>
);
}
export default App;それでは、開発サーバーを起動してアプリケーションを確認しましょう。
npm run dev -- --host 0.0.0.0 --port 8080コマンドを実行した後、インターフェースの左上隅にある Web 8080 タブに切り替えてください。「Welcome to My App」と「Hello, World!」が表示されているアプリケーションが実行されているはずです。
このステップでは、親コンポーネント (App) から子コンポーネント (Greeting) へデータを渡す方法を学びます。これは JSX で属性のような構文を使用して行われます。
Greeting コンポーネントに人の名前を渡して、パーソナライズされたメッセージを表示できるようにしたいと考えています。
src/App.jsx ファイルを開きます。<Greeting /> の行を修正して、値が "John" の name prop を含めます。
import Greeting from "./Greeting.jsx";
function App() {
return (
<>
<h1>Welcome to My App</h1>
<Greeting name="John" />
</>
);
}
export default App;ここで、name="John" が prop です。name は prop のキーであり、"John" はその値です。波括弧 {} で囲むことで、任意の JavaScript 式を prop の値として渡すことができます。文字列の場合は、引用符で十分です。
ファイルを保存すると、開発サーバーは自動的にリロードされます。Web 8080 タブを確認しても、出力はまだ変更されていません。これは、props を渡しましたが、Greeting コンポーネントがまだそれを使用していないためです。次のステップで修正します。
Greeting コンポーネントが name prop を受け取るようになったので、それを使用しましょう。子コンポーネントの props オブジェクトには、親から渡されたすべてのプロパティが含まれています。これらは props.propertyName のようなドット記法を使用してアクセスできます。
src/Greeting.jsx ファイルを開きます。props.name にアクセスしてパーソナライズされた挨拶を表示するように変更します。波括弧 {} を使用して、JavaScript 式を JSX に直接埋め込みます。
src/Greeting.jsx を以下のコードで更新します。
function Greeting(props) {
return <h2>Hello, {props.name}!</h2>;
}
export default Greeting;ファイルを保存します。次に、Web 8080 タブに切り替えます。メッセージが「Hello, John!」に更新されているはずです。
これにより、React におけるデータの基本的な流れ、つまり親から子へ props を介してデータが流れる様子が示されます。
props.name や props.age などを記述するのは、特にコンポーネントが多くの props を受け取る場合、繰り返しが多くなりがちです。よりクリーンで一般的なアプローチは、ES6 の分割代入を使用して、関数のパラメータリストで直接 props オブジェクトからプロパティをアンパックすることです。
Greeting コンポーネントをリファクタリングして分割代入を使用しましょう。
src/Greeting.jsx を開き、関数シグネチャを変更します。props を受け取る代わりに、それを分割代入して name を直接取得します。
ファイルを以下のように更新します。
function Greeting({ name }) {
return <h2>Hello, {name}!</h2>;
}
export default Greeting;(props) を ({ name }) に変更することで、関数に渡されたオブジェクトから name プロパティを抽出するように JavaScript に指示しています。これにより、コンポーネントの本体がよりクリーンになり、props.name の代わりに name を直接使用できるようになります。
ファイルを保存し、Web 8080 タブを確認します。出力はまったく同じ（「Hello, John!」）であるはずですが、コードはより簡潔で読みやすくなりました。
親コンポーネントが必要な prop を渡さなかった場合はどうなるでしょうか？値は undefined になり、エラーや予期しない UI につながる可能性があります。これを防ぐために、props のデフォルト値を指定できます。
関数コンポーネントの場合、関数シグネチャでデフォルトパラメータを使用できます。
Greeting コンポーネントにデフォルトの名前を設定しましょう。src/Greeting.jsx を開き、関数パラメータを変更してデフォルト値を含めます。デフォルトの名前を「Guest」に設定します。
function Greeting({ name = "Guest" }) {
return <h2>Hello, {name}!</h2>;
}
export default Greeting;次に、これをテストしましょう。src/App.jsx を開き、別の <Greeting /> コンポーネントを追加します。ただし、今回は name prop を渡さないようにします。
import Greeting from "./Greeting.jsx";
function App() {
return (
<>
<h1>Welcome to My App</h1>
<Greeting name="John" />
<Greeting />
</>
);
}
export default App;両方のファイルを保存します。Web 8080 タブに移動します。次の 2 つの挨拶が表示されるはずです。
これは、コンポーネントをより予測可能にし、エラーを防ぐための堅牢な方法です。
実験完了おめでとうございます！React で props を使用して、再利用可能で動的なコンポーネントを作成する基本を学びました。
この実験では、以下のことを練習しました。
props オブジェクトを使用して、子コンポーネント内で props にアクセスすること。defaultProps を使用して props のデフォルト値を設定し、コンポーネントをより堅牢にすること。props は React 開発の礎であり、それらを習得することは、複雑なアプリケーションを構築する上での重要なステップです。React での学習を続ける中で、これらの概念を引き続き練習してください。
