React.jsのprops

前回の投稿で予告しましたとおり、今回はReact.jsにおけるpropsの基本的な知識、注意点、使い方について解説していきます。

propsとは

React.jsのpropsとは、コンポーネントに渡される情報で、HTMLで言えばタグの属性に当たります。
ただし、HTMLの属性は仕様で決められたものしか使うことはできませんが、React.jsのpropsでは自分で決めた属性を指定することができます。

propsの注意点

• Reactではデータフロー（情報の流れ）が一方向
  • 親コンポーネントから子コンポーネントにpropsを渡すことはできても、逆方向（子から親）への受け渡しはできない
• props は読み取り専用なので、値を変更して使い回すことはできない

propsのサンプル

前回までで作成済のhello-appプロジェクトを使用します。

まずは、App.jsxを開き、以下のように修正してください。

// props（属性）を受け取る
function App(props) {
  return (
    // props（属性）のtargetを使用する
    <p>{props.target}！ フォースを使うのだ！</p>
  )
}

export default App

続いて、Appを呼びだしているmain.jsxを開き、以下のように修正してください。

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
//import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    // 👇target属性に「ルーク」を指定してAppを呼びだしている
    <App target="ルーク" />
  </StrictMode>,
)

実行結果を確認する

ブラウザで実行結果を確認します。

1. コマンドプロンプトを開き、cd コマンドでプロジェクトのディレクトリに移動します。
   • 例）cd c:\work\react\hello-app
2. 次のコマンドを実行し、サーバーを起動します。
   • npm run dev
3. ブラウザで次のURLにアクセスします。
   • http://localhost:5173

以下のように表示されれば成功です。

propsの練習問題

main.jsxから複数のpropsをApp.jsxに渡せるようプログラムを修正してみましょう。

現状は、targetという属性のみを渡していますが、skillという属性を追加して「フォース」を値にします。

まずは答えを見ないで、どこまでできるかチャレンジしてみることをお勧めします。

練習問題の解答例

ここから下に解答例のプログラムを掲載します。

自分なりにプログラムを書き終えた際の答え合わせとして参考にしてください。

function App(props) {
  return (
    <p>{props.target}！ {props.skill}を使うのだ！</p>
  )
}

export default App

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
//import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App target="ルーク" skill="フォース" />
  </StrictMode>,
)

最後に

propsはReactを使いこなす上で重要な基本知識です。

サンプルプログラムを実際に手を動かして作成いただくとともに、ぜひ練習問題にも挑戦してみてください。

次回は、propsと並びReactを使う上で必須となる知識であり、難易度的に少し高めのstateについて解説します。

それでは、最後までお読みいただき、ありがとうございます。

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。