Reactの基本、propsを理解する

はじめに

Reactは、ユーザーインターフェースを構成するためのJavaScriptライブラリです。昨今では、ウェブアプリケーションやモバイルアプリケーションのインターフェースを作成するために、多くの開発現場で使用されています。Reactを学ぶことで、モダンなウェブ開発のスキルを身につけることができるため、フロントエンドエンジニアを目指す上で、必須のスキルと言っても過言ではありません。

フロントエンドエンジニアになりたい、初めてReactを学ぶ方に向けて、この記事ではReactの基本であるpropsについて解説します。propsはReactアプリケーションを構成する上で、必須の知識です。propsの基本を押さえておくことで、これからのReact学習の理解度が深まります。基本を学び、フロントエンドエンジニアへの道を進んでいきましょう！

この記事について

目的

• propsについて知る
• propsを使用したコンポーネントを扱えるようにする

対象者

• 初学者の方
• Reactの勉強を最近始めた方
• propsに苦手意識のある方

Reactの基本について

Reactの基本の説明はこの記事では省略しています。基本や環境構築方法などを知りたい方は、下記のページをご覧ください。

https://envader.plus/article/341

Reactコンポーネントとは

propsの解説に入る前に、コンポーネントについて少し説明します。

Reactにおけるコンポーネントとは、UIを構成する際の再利用可能な要素（部品）です。Reactアプリケーションは、複数のコンポーネントをさまざまな場所で再利用し、コンポーネントを組み合わせてUIを構成します。コンポーネントは、JSXを戻り値として返すJavaScript関数です。

以下は、1つのButtonコンポーネントをCardとFormコンポーネント内で再利用した例です。このように同じコンポーネントを異なるUI構成でも使用することができるため、コードの記述量を削減し、メンテナンスを容易にします。

propsはReactコンポーネントと密接な関連があります。コンポーネントについてより理解したい方は、以下の記事をご覧ください。コンポーネントの基本を一通り解説しています。

https://envader.plus/article/421

propsとは

Reactコンポーネントはpropsを使用することで、コンポーネント間のデータの受け渡しをすることができます。propsで渡せるデータの型に制限はなく、文字列、数値、オブジェクト、配列など、さまざまなデータを扱えます。

コンポーネントは再利用が可能ですが、そのままでは同じ内容のコンポーネントを利用する形となります。例えば、あるButtonコンポーネントをベースに、ボタンの中のテキストを違うものにしたい、ボタンの色を変えたいという場面では、propsが利用されます。親コンポーネントから子コンポーネントへ、テキストデータやCSSのclass属性を渡すことで、ボタンのテキスト内容や見た目を変更しつつ、Buttonコンポーネントの再利用が可能となります。このように、propsを使用することで、コンポーネントのさらなる再利用性が高まります。

propsを使用し、親コンポーネントから子コンポーネントへボタン内のテキストを渡すことで、その場面に合わせたボタンを実装することが可能になります。（以下の場面ではButtonコンポーネントが子コンポーネントです）

親コンポーネントと子コンポーネントとは

ここで親コンポーネントと子コンポーネントについてもう少し理解を深めておきましょう。

親コンポーネントとは、他のコンポーネントを含むコンポーネントのことを指します。子コンポーネントは親から渡されるデータを元に、動的に形を変えてコンポーネントを表示します。子コンポーネントは、propsで親から渡されたデータを受け取り、それを使用して表示や処理を行います。

以下の例では、Appコンポーネントが親コンポーネントにあたり、その関数内のreturn内にあるButtonコンポーネントが子コンポーネントとなります。

コンポーネントを呼び出す側と呼び出される側とは

親と子のコンポーネントの説明の際は、「呼び出す側」「呼び出される側」という表現がよく用いられます。

以下の例では、AppコンポーネントがButtonコンポーネントを含むため、Appコンポーネントが呼び出す側（親コンポーネント）、Buttonコンポーネントが呼び出される側（子コンポーネント）となります。

App.js内にButton.jsがインポートされ、Appコンポーネント内にButtonコンポーネントが配置されています。このコードがレンダリングされる際は、Appコンポーネントの内部に配置されているButtonコンポーネントが呼び出されて画面に表示されます。

Propsでの値の渡し方

propsについて学んだところで、実際にpropsで値を渡す方法を確認していきましょう。このセクションでは、propsを使用して以下のUIを構成します。

ハンズオンでコードの記述を試したい方には、以下のサイトがおすすめです。Reactの環境構築が不要で、ブラウザ上でコードの記述を手軽に試すことができます。

• Codesandbox

  https://codesandbox.io/

• StackBlitz

  https://stackblitz.com/

propsを使用したコンポーネントの作成

今回は以下の3つのファイルを作成し、UIを構成していきます。

• App.js
• Greeting.js
• Button.js

まず初めにApp.jsを以下のように記述します。

// ファイル名：App.js

import Greeting from './Greeting';
import Button from './Button';

export default function App() {
    return (
        <>
            <Greeting message='Hello, World!' />
            <Greeting subMessage='React × エンベーダー' />
            <Button label='OK' />
            <Button label='Cancel' />
        </>
    );
}

次に、子コンポーネントとなるGreeting.jsとButton.jsを作成し、以下のように記述します。

// ファイル名：Greeting.js

export default function Greeting(props) {
    return (
        <>
            <h1>{props.message}</h1>
            <h2>{props.subMessage}</h2>
        </>
    );
}

// ファイル名：Button.js

export default function Button (props) {
    return <button>{props.label}</button>;
}

これらのコードを記述すると、このセクションの最初にご覧いただいたUIが構成できているかと思います。コード内容の解説は次のセクションで行います。

作成したコンポーネントについて

記述したコードの説明の前に、もう少しpropsについて深掘りします。propsはコンポーネントが受け取るデータを格納するためのJavaScriptオブジェクトです。このオブジェクトには、親コンポーネントから渡されたプロパティがキーと値のペアとして含まれています。今回の作成したAppコンポーネント内の子コンポーネントにpropsとして渡しているオブジェクトは、以下のような属性となります。

親コンポーネントが子コンポーネントを呼び出す際に、属性を指定してデータを渡します。この属性がpropsオブジェクトのプロパティとして子コンポーネントに渡されます。子のGreetingコンポーネントでは、親のAppコンポーネントから渡されたpropsオブジェクトを受け取り、その中のmessageとsubMessageプロパティを使って値をそれぞれ表示します。

このことを踏まえて、作成したコンポーネントのコードの説明をしていきます。

Appコンポーネント内のそれぞれの子コンポーネントに、propsのキーと値を指定しています。<Greeting message='Hello, World!' />では、Greetingコンポーネントへキー：message、値：'Hello, World!'をpropsのオブジェクトとして渡しています。<Button label='OK' />はButtonコンポーネントへキー：label、値：'OK'をpropsのオブジェクトとして渡している、ということになります。

// ファイル名：App.js

export default function App() {
    return (
        <>
            <Greeting message='Hello, World!' />
            <Button label='OK' />
            ....
        </>
    );
}

次にそれぞれの子コンポーネントを確認しましょう。function Greeting(props)のように(props)と記述することで、親のAppコンポーネントからpropsのオブジェクトを受け取ることができます。

// ファイル名：Greeting.js

export default function Greeting(props) {
    return ...
}

propsで受け取った値はreturn内で{props.キー値}と記述することで、使用することができます。propsのデータはJavaScriptオブジェクトのため、JSX内でJavaScript構文を使用する際は{}を付ける必要があります。{props.message}は「props内のmessageキーの値を使用する」という指定になります。

// ファイル名：Greeting.js

export default function Greeting(props) {
    return (
        <>
            <h1>{props.message}</h1>
            <h2>{props.subMessage}</h2>
        </>
    );
}

以下のように親から子コンポーネントへ指定したオブジェクトをpropsとして渡し、それを受け取った子から親コンポーネントへ構文が返されます。

propsの分割代入について

分割代入とはJavaScriptの機能の一つで、オブジェクトや配列から個々の要素を簡単に取り出すための構文です。Reactでpropsを使用する際にも、この分割代入を使うことでコードをより簡潔に書くことができます。

分割代入の使用例

「Propsでの値の渡し方」セクションで作成したコードを分割代入を使用して記述します。

// ファイル名：Greeting.js

export default function Greeting({ message, subMessage }) {
    return (
        <>
            <h1>{message}</h1>
            <h2>{subMessage}</h2>
        </>
    );
}

function Greeting({ message, subMessage })という構文で、propsオブジェクトの中から直接 messageとsubMessageを取り出しています。{ message, subMessage }の部分が分割代入の構文です。

分割代入を使うと、propsオブジェクトから必要なプロパティを直接取り出すことができるため、return内の記述はpropsオブジェクトのキー値のみ記述することで値を取得できます。(props)でオブジェクトを受け取っていた際は、{props.キー値}と記述していましたが、分割代入をした場合は、{キー値}を記述するだけで済みます。また、propsとして親コンポーネントから何を受け取っているかが明確になるため、コードの可読性と簡潔さが向上します。

この記事で学んだこと

• propsとは

  Reactコンポーネントはpropsを使用することで、コンポーネント間のデータの受け渡しをすることができます。親コンポーネントから子コンポーネントへ、テキストデータなど、さまざまなデータを渡すことで、コンポーネントを再利用しながら動的に変更することが可能です。

• propsの使用方法

  propsはコンポーネントが受け取るデータを格納するためのJavaScriptオブジェクトです。このオブジェクトには、親コンポーネントから渡されたプロパティがキーと値のペアとして含まれています。子コンポーネントにpropsのキー値を記述することで、キーに紐づく値を使用することができます。

• propsの分割代入

  分割代入とはJavaScriptの機能の一つで、オブジェクトや配列から個々の要素を簡単に取り出すための構文です。分割代入を使うと、propsオブジェクトから必要なプロパティを直接取り出すことができるため、コードの可読性と簡潔さが向上します。

参考資料

以下のリンクは、この記事で説明した手順や概念に関連する参考資料です。より詳しく学びたい方は、ぜひご参照ください。

• React公式

  https://ja.react.dev/learn/passing-props-to-a-component