この記事はSchoo Advent Calendar2025の18日目の記事です！
はじめに
Schooでエンジニアをしている@himari_karesakiです！
最近私は業務でVue.jsを利用したフロントエンド開発を始めました。
しかし、業務を進める中で、コンポーネント間のデータの受け渡し、特にpropsの概念でつまづき、親コンポーネントから子コンポーネントへデータを渡す仕組みをスムーズに理解することができませんでした。
コンポーネント指向の開発において、データフローの明確さはプロダクトの保守性と品質に直結します。
この記事では、私がpropsの概念をどのように理解し、Vue.jsでの開発を楽しめるようになったのか、その具体的なステップをご紹介します。
このpropsの理解ステップが、コンポーネント設計におけるデータ連携で悩むエンジニアの方々の行動のヒントとなれば幸いです！
Props理解のための具体的なステップ
propsによるデータの受け渡しを理解する上で、私が実践したのは、「誰が何を必要としていて、誰がそれを提供するのか」という役割分担を明確にするアプローチです。
概要
詳細
手順1. 子コンポーネント側：何のデータが必要なのか明らかにする
まず、データを受け取る側である子コンポーネントが「どのようなデータが必要なのか」を定義します。
これは、子コンポーネントが自立して機能するために不可欠なプロセスです。
Vue.jsの<script setup>構文では、definePropsを使用して外部から受け取るべきデータを宣言します。
<script setup lang="ts">
/**
* defineProps: 親コンポーネントから受け取る props を型ベースで定義します。
*/
// 1. propsの型定義（interfaceを使用）
interface Props {
/** 表示メッセージ (string) */
message: string;
/** スタイル設定（例: 文字色など） (string) */
setting: string;
/** 数値データ (number) */
number: number;
}
// 2. defineProps マクロでpropsを宣言
const props = defineProps<Props>();
// 3. テンプレート内でpropsを使用
// 例として、settingの値によってスタイルを適用し、他の値を表示する
const styleColor = { color: props.setting };
</script>
<template>
<div class="child-component">
<p :style="styleColor">
メッセージ: {{ message }}
</p>
<p>
設定色: {{ setting }}
</p>
<p>
通し番号: {{ number }}
</p>
</div>
</template>
このステップにより、子コンポーネントは、親から提供されるデータ（props）がないと機能しないデータ群を明確に示します。
手順2. 親コンポーネント側：必要なデータを定義し提供する
子コンポーネントが必要とするデータ（props）が明らかになったら、次にデータを提供する親コンポーネント側でそのデータを準備し、子コンポーネントに渡します。
親コンポーネントは、子コンポーネントが必要とする型や値に合わせてデータを定義します。
<script setup lang="ts">
import ChildDisplay from './ChildDisplay.vue'; // 子コンポーネントをインポート
// 1. 親コンポーネントでデータを定義
// 子コンポーネントの定義（string, string, number）に合わせて値を準備します。
const message: string = "こんにちは";
const setting: string = "blue";
const number: number = 5;
</script>
<template>
<div>
<h1>親コンポーネント</h1>
<!-- 子コンポーネントを呼び出し、propsをバインドして渡す -->
<ChildDisplay
:message
:setting
:number
/>
</div>
</template>
定義されたデータを子コンポーネントにバインドして渡すことで、子コンポーネントはそのデータを使って描画を行います。
このようにして、子コンポーネントが要求したデータ（message, setting, number）を親コンポーネントが提供することで、子コンポーネントが正しく表示されます。
おわりに
親コンポーネントからのデータの受け渡し、つまりpropsによるデータ連携の構造を理解したことで、Vue.jsでの開発が格段に楽しくなりました🎉
「子コンポーネントで必要なデータを定義し、親コンポーネントでそのデータを渡す」という明確な役割分担を理解することは、コンポーネント指向におけるデータフローを整理し、プロダクトの品質を維持する上でも重要です。
propsを正しく活用することは、保守性の高いコンポーネント設計への第一歩となります。
ぜひ、今後の開発に活かしていただければ幸いです！
Schooでは一緒に働く仲間を募集しています！