Vue.js Componentの基本から実務での活用までを初心者向けに解説

フロントエンド開発•2025/1/24

はじめに

Vue.jsは、JavaScriptを使ったフレームワークのひとつです。特にコンポーネントという仕組みが特徴で、画面をパーツごとに分割して開発することができます。その結果、複数人で開発するときにコードの管理がしやすくなり、メンテナンス性の向上が期待できます。

ただ、最初にコンポーネントという言葉を聞くと少し難しく感じるかもしれません。しかしコンポーネントの考え方は、各画面をパズルのように組み合わせるイメージで見るとわかりやすいです。一つひとつのピースがコンポーネントになり、それらを組み合わせてアプリケーション全体を構成します。

ここではVue.jsにおけるコンポーネントの基本から、実際の開発現場でよくある使い方までを解説します。初心者の皆さんがプログラミングの実務に近い形で理解できるよう、やさしく具体的に説明していきます。

Vue.jsでコンポーネントを使うメリット

Vue.jsのコンポーネントは画面の一部分を独立した単位としてまとめる仕組みです。そこにはテンプレート、ロジック、スタイルが含まれるので、一つのファイルにまとまっている場合もあります。 Vue.jsではそうした Single File Component (SFC) と呼ばれる仕組みを利用できます。

実務の観点では、コンポーネントを活用することでコードの再利用性が高まります。たとえばボタン、ヘッダー、フッターなど、複数のページで同じ見た目を使いたいときもコンポーネントを一度作れば使い回しができます。さらに、同じコンポーネントが複数ページで使われる場合でも修正が一ヶ所で済むため、保守がしやすいです。

また、コンポーネントが独立しているとテストもしやすくなる傾向があります。なぜなら、一つひとつの見た目や動きが明確に区切られているからです。エラーが起こった場合でも、どのコンポーネントが原因か切り分けやすくなります。

コンポーネントの基本構造（単一ファイルコンポーネント）

Vue.jsでは単一ファイルコンポーネントの形式として「.vue」ファイルをよく使います。この形式を利用すると、HTMLに相当するテンプレート、JavaScriptに相当するスクリプト、そしてCSSに相当するスタイルを1つのファイルにまとめることができます。

以下は簡単な例です。


<template>
  <div class="user-profile">
    <h2>{{ username }}</h2>
    <p>年齢: {{ age }}</p>
  </div>
</template>

<script>
export default {
  name: "UserProfile",
  props: {
    username: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      required: true
    }
  }
}
</script>

<style scoped>
.user-profile {
  border: 1px solid #ccc;
  padding: 16px;
  margin: 8px;
}
</style>

ここではテンプレートの部分にHTMLの見た目、scriptタグの中にはコンポーネントとしてのロジック、styleタグにはデザインの記述がまとめられています。このように、見た目とロジックが一貫して管理できる点が大きな特徴です。

実務でありがちなコンポーネントの使い方

実際の開発現場では、以下のようなコンポーネントを作ることが多いです。

ボタンや入力フォームなどの小さなUI部品
タブ切り替えやモーダルなどのUI機能を担うパーツ
ユーザー情報や商品リストなどのデータ表示をまとめたパーツ

たとえば、ユーザー一覧ページがあるとします。検索結果を一覧表示する部分を「UserListコンポーネント」に分割し、その中で1人分の情報を表示する「UserListItemコンポーネント」を呼び出す構造を作ることが考えられます。こうするとUserListとUserListItemを組み合わせるだけで一覧表示が可能になり、細かな見た目を変えたい場合もそれぞれのコンポーネントを編集すれば済むわけです。

このようにコンポーネント単位で分割すると、画面全体のコードが整理されて読みやすくなります。

propsとemitsの基本

コンポーネント間でデータをやり取りするときに重要になるのがpropsとemits（またはイベント）です。 propsは親コンポーネントから子コンポーネントへ値を渡す仕組みを指します。 emitsは逆に、子コンポーネントが発行するイベントによって親コンポーネントにメッセージを送る仕組みです。

propsやemitsを定義しないまま値やイベントを渡そうとしても、うまく動かないことがあります。

親コンポーネントで以下のように書くとします。


<template>
  <div>
    <UserProfile
      :username="user.name"
      :age="user.age"
      @changeName="onChangeName"
    />
  </div>
</template>

<script>
import UserProfile from "./UserProfile.vue"

export default {
  components: { UserProfile },
  data() {
    return {
      user: { name: "Hanako", age: 20 }
    }
  },
  methods: {
    onChangeName(newName) {
      this.user.name = newName
    }
  }
}
</script>

そして子コンポーネント（UserProfile.vue）側で以下のように受け取ります。


<template>
  <div>
    <p>名前: {{ username }}</p>
    <input v-model="localName" @change="notifyChange" />
  </div>
</template>

<script>
export default {
  props: {
    username: String,
    age: Number
  },
  data() {
    return {
      localName: this.username
    }
  },
  methods: {
    notifyChange() {
      this.$emit("changeName", this.localName)
    }
  }
}
</script>

この例では、親からユーザー名と年齢をpropsで受け取り、子コンポーネント内でユーザー名を編集して入力変更のタイミングで$emitして親に通知しています。こうしたやり取りが複数コンポーネント間で自然にできるのがVue.jsの便利なところです。

Composition APIの活用

Vue.js 3系ではComposition APIが導入されました。これまでのOptions APIと呼ばれる書き方でも開発はできますが、実務ではComposition APIを活用する場面が増えています。 Composition APIを使うと関連するロジックをひとまとめにできるため、コンポーネントの可読性や再利用性が高まりやすいです。

以下はComposition APIの例です。


<template>
  <div>
    <p>カウント: {{ count }}</p>
    <button @click="increment">カウントアップ</button>
  </div>
</template>

<script>
import { ref } from "vue"

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
</script>

上記の例では、refという関数を使ってリアクティブな変数countを定義し、必要に応じてメソッドを定義しています。コンポーネントの状態とメソッドを「setup()」の中にまとめることで、コードの構造がはっきりします。

コンポーネントのライフサイクル

Vue.jsのコンポーネントにはライフサイクルフックが用意されています。画面に表示される前や、表示された直後、コンポーネントが破棄される直前など、開発者が任意のタイミングで処理を挟むことができます。たとえばAPIからデータを取得したい場合は、onMountedフックを使うと便利です。

Composition APIでは次のように書けます。


<script>
import { onMounted } from "vue"

export default {
  setup() {
    onMounted(() => {
      // コンポーネントがマウントされた直後に実行される処理
      console.log("Component has been mounted.")
    })

    return {}
  }
}
</script>

特定のイベントや処理をフックに仕込むことで、データの初期化や後片付けなどを効率的に管理できるようになります。

実務シーンでの注意点

実務でVue.jsのコンポーネントを扱うときには、以下の点に気を配るとわかりやすく整理できます。

コンポーネント名は明確にして、役割がすぐにわかるようにする
propsやemits、ライフサイクルフックなどを適切に使い分ける
大型アプリケーションになる場合は、フォルダ構成や命名規則をチームで統一する
状態管理が複雑になりそうなときはVuexやPiniaなどの外部ライブラリを検討する

実際、たくさんのチームメンバーがいる現場で管理しやすいよう、コンポーネントの命名規則やフォルダ構造は明文化されていることが多いです。そこに従うことでミスが起きにくくなり、開発コストが下がります。

複雑な状態管理に入る前に、コンポーネント分割やprops、emitsだけで十分対応できないか検討すると、コードがシンプルに保たれる可能性があります。

開発でよく使われる主な機能一覧

コンポーネント設計でよく使われる機能を表にまとめると、次のようになります。

機能名	役割
props	親コンポーネントから値を受け取る
emits（またはイベント）	子コンポーネントから親へ通知を行う
lifecycle hooks	コンポーネントの特定タイミングで処理を実行
Composition API	ロジックを簡潔にまとめるためのAPI
provide/inject	コンポーネント階層をまたいだデータ共有

このように機能が整理されているおかげで、コンポーネント間の役割分担がはっきりします。特にComposition APIは初めて見る人にとって新しい書き方ですが、慣れるとロジックをコンパクトにまとめやすいです。

テンプレート構文の活用

Vue.jsのテンプレート構文では、mustache記法（{{ }}）やディレクティブ（v-if, v-for, v-bindなど）を用いて動的にデータを操作することができます。これは実務でも頻繁に使われる仕組みで、サーバーから受け取ったデータを一覧表示したり、条件分岐で出し分けを行う場合などに重宝します。

たとえばv-forディレクティブを使ってリストを表示する例です。


<template>
  <ul>
    <li v-for="(user, index) in users" :key="index">
      {{ user.name }} ({{ user.age }}歳)
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    users: Array
  }
}
</script>

このように書くと、親コンポーネントから配列を受け取って自動でリストを生成できます。実務では検索結果や商品一覧など、さまざまなデータに活用できます。

大規模開発でのコンポーネント設計

大きなプロジェクトでは、多数のコンポーネントが存在します。その場合、Atomic Designなどのデザインシステムの考え方を取り入れることがあります。たとえば「Atoms（最小単位）」「Molecules（Atomsを組み合わせたもの）」「Organisms（さらに大きな単位）」というように階層化してコンポーネントを整理していくわけです。

さらに、メンテナンスのしやすさを考えると、コンポーネントの粒度を揃えたり、命名を統一したりすることが重要になります。こうした点が曖昧だと、チーム全体でコンポーネントを使い回す際に混乱が生じがちです。

Vue.jsは公式ドキュメントが充実しているので、実装時の細かな仕様を確認しながらチームルールに合わせると管理が楽になります。

まとめ

ここまでVue.jsのコンポーネントについて、基本的な仕組みと実務での活用シーンを中心に解説してきました。コンポーネントを活用すれば、画面の見た目やロジックをまとまりとして管理でき、コードの見通しが良くなります。

また、Vue.js 3で登場したComposition APIは、関連する処理を1つのまとまりに集約するのに適しています。ライフサイクルフックやprops、emitsなどの機能を理解すると、開発スピードの向上や保守性の向上につながります。

実際の仕事でも、Vue.jsのコンポーネントを使いこなすと開発効率が高まりやすいです。これを機に、皆さんもぜひコンポーネントの考え方に親しんでみてはいかがでしょうか。