【ITニュース解説】Understanding Props in React

Reactは、ウェブサイトの見た目（ユーザーインターフェース、略してUI）を小さな部品（「コンポーネント」と呼ぶ）に分けて作っていく開発手法だ。これにより、複雑なUIでも整理しやすく、再利用もしやすくなる。このコンポーネントという考え方がReactの大きな特徴だが、ただ部品を作るだけでは意味がない。それぞれの部品が連携し、必要な情報をやり取りすることで、初めて動的なUIが実現できる。その情報伝達の仕組みの中心にあるのが、「Props（プロップス）」という概念だ。

Propsとは「properties（プロパティ、特性）」の略であり、コンポーネントに対して渡される「引数」や「属性」のようなものだと考えると分かりやすい。これは、主に親となるコンポーネントから、その子となるコンポーネントへデータを送るための仕組みだ。Propsを使うことで、コンポーネントは特定のデータに縛られず、様々なデータを受け取って表示内容を柔軟に変えられるようになる。結果として、同じ見た目のコンポーネントでも表示する情報だけを変えて何度も使えるようになり、開発効率が向上し、アプリケーション全体がより動的で柔軟になるのだ。

Propsを使うのは、具体的にどのような場面だろうか。最も基本的なのは、親コンポーネントが持っているデータを子コンポーネントに渡したいときだ。例えば、ユーザーのプロフィールを表示するコンポーネントがあったとして、親コンポーネントが「ユーザー名」や「メッセージ」のデータを持っている場合、そのデータを子コンポーネントに渡して表示させる必要がある。また、ボタンやカード、ヘッダーといった、デザインは同じでも表示するテキストや画像が異なるような「再利用可能なコンポーネント」を作りたいときにもPropsは不可欠だ。さらに、ユーザー名や商品情報、最新のメッセージなど、状況によって表示内容が変わる「動的な値」を画面に表示したい場合にもPropsを活用する。これにより、コンポーネント自身がどのようなデータを表示するかを知らなくても、外部からデータを受け取って適切に表示できる。

では、実際にPropsはどのように使われるのだろうか。まず、親コンポーネントからPropsを渡す方法から見ていこう。親コンポーネントが子コンポーネントを呼び出す際、HTMLタグの属性のようにキーと値のペアでデータを指定する。例えば、Greetingというコンポーネントに対してname="vadivu"のように記述することで、「name」という名前のPropsに「vadivu」という値を渡すことができる。もし、異なる名前で挨拶したい場合は、Greeting name="lakshmi"のように、同じGreetingコンポーネントに異なるnameの値を渡すだけで良い。このようにすることで、同じGreetingコンポーネントを使い回しながら、異なる挨拶文を表示できる。

次に、子コンポーネントがPropsを受け取る方法だ。子コンポーネントが関数コンポーネントの場合、その関数は引数として一つのオブジェクトを受け取る。このオブジェクトが、親から渡された全てのPropsをまとめたものになる。この引数には慣習的にpropsという名前が付けられることが多い。子コンポーネントは、受け取ったpropsオブジェクトの中から、必要なデータの名前を指定してアクセスする。例えば、親からnameというPropsが渡されていれば、子コンポーネントはprops.nameと記述することで、その値を取り出せる。これにより、親コンポーネントから渡された「vadivu」や「lakshmi」といった名前が、子コンポーネントの内部で利用可能となり、「hello, vadivu!」や「hello, lakshmi!」といった挨拶文が動的に生成されて表示されるわけだ。

Propsを受け取る際には、より簡潔に記述する方法もある。「分割代入（Destructuring Assignment）」というJavaScriptの機能を使うと、propsオブジェクトから特定のプロパティを直接取り出して変数として利用できる。具体的には、function Greeting(props)の代わりにfunction Greeting({ name })と書くことで、props.nameと書かずに直接nameという変数として値を使えるようになる。これはコードをより短く、読みやすくするテクニックであり、実務でも頻繁に使われる。

Propsを使うことのメリットは大きい。第一に、異なるデータを持つコンポーネントを再利用できる点だ。これにより、同じ見た目のUIを何度もコーディングする必要がなくなり、開発時間が短縮される。第二に、コードがよりきれいに整理され、保守しやすくなる。コンポーネントごとに役割が明確になり、データがどのように流れているかが分かりやすくなるためだ。第三に、UIを柔軟で動的に作れるようになる。外部からデータを受け取って表示内容を変えられるため、様々な状況に対応できる、生き生きとしたアプリケーションを構築できる。

ここで、{props.name}という表記や、ドット（.）の意味について詳しく見てみよう。ReactのPropsは、内部的にはJavaScriptの「オブジェクト」として扱われる。親コンポーネントでname="vadivu"のようにPropsを渡すと、Reactはこれをprops = { name: "vadivu" }のようなJavaScriptオブジェクトとして子コンポーネントに渡すのだ。このオブジェクトの中から特定の「値」を取り出すために、JavaScriptでは「ドット記法（.）」を使う。これは、オブジェクト名.プロパティ名という形式で、オブジェクトの持つプロパティ（特性）の値にアクセスする標準的な方法だ。例えば、let person = { firstName: "vadivu", age: 25 };というオブジェクトがあった場合、person.firstNameと書けば「vadivu」という値を取り出せる。ReactのJSX（JavaScript XML）という記法では、HTMLのようなタグの中にJavaScriptの式を埋め込みたい場合に波括弧 {} を使う決まりがある。そのため、propsオブジェクトの中からnameプロパティの値を取り出して表示する際には、{props.name}と記述することになるのだ。ドット（.）は、オブジェクトの中から必要な情報を取り出すための、JavaScriptの基本的な文法の一つであることを理解しておけば、Propsの扱い方も自然と身についていくだろう。