はじめに
前回は、Vite + Reactの開発環境を構築し、「Hello, PC-LABO!」とカウンターだけの画面を表示するところまで確認した。
今回は、この初期画面を削って、予定管理アプリの本体となる「予定を一覧表示するだけ」のシンプルな画面を作っていく。あわせて、Reactの基本概念であるコンポーネント分割とpropsを学ぶ。
今回やること
- 画面の部品（コンポーネント）をファイル単位で分割する
- 親コンポーネントから子コンポーネントへ、propsを使ってデータを渡す
- 配列データを
.map()でまとめて画面に描画する
状態管理（追加・削除）はまだ扱わない。今回はあくまで「決まったデータを、部品化して表示する」ところまでがゴールである。
コンポーネントを分割する理由
Ver.1では、画面の中身をすべてApp.jsx一つに書いていた。小さな画面ならそれでも困らないが、予定管理アプリのように画面が育っていくことを見越すと、次第に見通しが悪くなる。
そこで、「予定1件分の表示」をScheduleItemという別のコンポーネントに切り出す。Appは「どの予定を表示するか」を管理し、実際の見た目はScheduleItemに任せる、という役割分担にする。
propsとは
propsは、親コンポーネントから子コンポーネントへデータを渡すための仕組みである。関数の引数のようなものだとイメージすると理解しやすい。
// 親から子へ、titleとdateを渡す
<ScheduleItem title="Reactの記事を書く" date="2026-07-21" />子コンポーネント側は、渡された値を引数として受け取る。
function ScheduleItem({ title, date }) {
return (
<li>
<span>{date}</span>
<span>{title}</span>
</li>
)
}実装
ファイル構成
02_components-and-props/
└── src/
├── App.jsx
└── components/
└── ScheduleItem.jsx（package.jsonやvite.config.jsなど、環境構築時にツールが自動生成したファイルは今回も変更していない。読むべきは上記2つのファイルだけである。詳しくは第1回を参照）
ScheduleItem.jsx（子コンポーネント）
function ScheduleItem({ title, date }) {
return (
<li className="schedule-item">
<span className="schedule-item__date">{date}</span>
<span className="schedule-item__title">{title}</span>
</li>
)
}
export default ScheduleItem予定1件分の見た目だけに集中した、シンプルなコンポーネントである。
App.jsx（親コンポーネント）
import './App.css'
import ScheduleItem from './components/ScheduleItem'
const schedules = [
{ id: 1, date: '2026-07-20', title: 'Reactの環境構築を復習する' },
{ id: 2, date: '2026-07-21', title: 'コンポーネント分割の記事を書く' },
{ id: 3, date: '2026-07-22', title: 'propsの動きを検証する' },
]
function App() {
return (
<div className="app">
<h1>予定管理アプリ</h1>
<p>Ver.2：コンポーネント分割とpropsの練習</p>
<ul className="schedule-list">
{schedules.map((schedule) => (
<ScheduleItem key={schedule.id} title={schedule.title} date={schedule.date} />
))}
</ul>
</div>
)
}
export default App
schedulesという配列に予定データを持たせ、.map()で1件ずつScheduleItemに変換している。それぞれのScheduleItemに付けているkeyは、Reactがリストの各要素を正しく識別するために必要なもので、配列の.map()でコンポーネントを並べる際は必ず指定する。
実行結果
npm run devで開発サーバーを起動し、ブラウザで確認する。終了する場合はターミナル上でCtrl + Cを押す（Ctrl + Zは一時停止するだけなので使わない）。
日付とタイトルが並んだ、シンプルな予定一覧が表示される。
今回のまとめ
- 画面の部品をコンポーネント単位でファイル分割すると、見通しがよくなる
- propsを使うと、親から子へデータを渡せる
.map()を使うと、配列データを一括でコンポーネントに変換できる
次回は、この一覧に「予定の追加・削除」機能を付ける。Reactの状態管理の基本であるuseStateを扱う。
ソースコード
今回のソースコードは、私のGitHubで公開している。以下のリンクを参照していたただきたい。
GitHub：https://github.com/HappyTalk10/pc-labo-react-learning/tree/main/02_components-and-props
コメント