2018.04.19

Vue.jsコンポーネント入門 (2) コンポーネントとは何か？

目次

  1. 前提
  2. Vue コンポーネント＝独自 HTML 要素
  3. 部品化すると使いまわせる
  4. コード分割の単位としていい感じ
  5. Vue コンポーネントの見た目
  6. 関連記事
  7. Vue.js コンポーネント入門（全7回）
  8. Vue.js 入門（全7回）
Open

本記事では Vue.js コンポーネント入門の第2回として「コンポーネント」という概念について説明します。

前提

「そもそもコンポーネントってなに？」という入門者を対象に想定していますので、難しい話はしません（できません）し、あくまで私なりの理解であるという前提で読んでください。

📦 Vue コンポーネント＝独自 HTML 要素

コンポーネントは日本語にすると「部品」です。Vue.js は JavaScript で書かれた Web フロントエンドフレームワークですから、Vue コンポーネントというと、Web フロントエンドの部品なわけです。

Web フロントエンドの部品とはこの場合なにを指すかというと「HTML 要素」です。

Vue コンポーネントを使ってなにができるかというとつまり「独自の HTML 要素を定義できる」のです。

Vue コンポーネントを使った開発とは「既存の HTML 要素や独自の HTML 要素（Vue コンポーネント）を組み合わせて新たな HTML 要素（Vue コンポーネント）を作成し、それらを組み合わせてアプリケーションを構築する開発スタイル」と言い換えられるでしょう。

（ちなみにこのような開発スタイルを「コンポーネント指向」と呼ぶらしいです。）

以下は単純な Vue コンポーネントの例です。

Hello.vue 
<template>
  <p>Hello, {{ name }}</p>
</template>

<script>
export default {
  props: ['name']
}
</script>
index.html 
<hello name="world"></hello>

見ての通り、hello という独自の HTML 要素を定義しています。

🔄 部品化すると使いまわせる

さて、コンポーネント指向開発の良さはどんなところなのでしょうか。

独自のHTML要素を部品として定義する開発スタイルの有効性はまず「部品化すると使いまわせる」という点にあります。

この点については実のところ説明の必要はないでしょう。なぜなら、普段 Web アプリケーションを構築する際に既存の HTML 要素を使いまわしまくってますよね。<a> や <table> や <dl> や <input> などなど、それぞれ固有の見た目や機能、役割を持った HTML 要素（＝コンポーネント）を組み合わせて Web 画面を構築しているはずです。

使いまわし可能な HTML 要素（＝部品＝コンポーネント）を組み合わせてアプリケーションを構築することは、Web の世界ではいたって自然な開発スタイルと言えるでしょう ☘

✂ コード分割の単位としていい感じ

コンポーネント指向の開発スタイルの良いところとしてもうひとつ、「コンポーネントはコード分割の単位としてちょうどいい」という点が挙げられると思っています。

どのようにコードをファイル分けするかというのはプログラミングの基本的な課題ですね。画面ごとにファイルを分けたり、特定の機能を持つオブジェクトをファイルとして切り出したり……色々と工夫することと思いますが、なかなか合理的な解を導くのに苦労します。

その点、Vue のコンポーネント機能を利用した開発であれば結構うまくいきます。ひとつのコンポーネントはひとつのファイルで表現されるので、基本的に分割の単位に迷いません。

コンポーネントを利用した開発に慣れると自然で合理的なフロントエンドの構築スタイルだと感じられるでしょう 😇

🔎 Vue コンポーネントの見た目

以上、コンポーネントについて説明しました。何となく雰囲気を掴んでいただけると幸いです。

最後に、Vue コンポーネントファイルの概要を紹介しておきます。

下記のコード例は <a> 要素を模したコンポーネントです。いまは詳細ではなくファイルの記述構造に注目してください。

Anchor.vue 
<template>
  <span class="anchor" @click="onClick">
    <slot></slot>
  </span>
</template>

<script>
export default {
  props: ['href'],
  methods: {
    onClick () {
      location.href = this.href
    }
  }
}
</script>

<style scoped>
.anchor {
  color: blue;
  text-decoration: underline;
}
</style>
HTML 
<anchor href="https://qiita.com">Qiitaのページ</anchor>

まず Vue コンポーネントは .vue という拡張子を持つファイルに記述されます。

そして、先ほど少し触れましたが、Vue コンポーネントはひとつのファイルでマークアップ（HTML）と動き（JavaScript）と見た目（CSS）を持ちます。

役割 .vue ファイル中の記述箇所
マークアップ（HTML） <template> 要素
動き（JavaScript） <script> 要素
見た目（CSS） <style> 要素

初めて見るとヘンな感じかもしれませんが、考えてみると割と合理的です。

例えば <a> 要素であれば、内部にそれ以上のマークアップは持っていませんが、固有の動きと見た目はセットで持っています。動きというのは画面遷移であり、見た目は青文字で下線が引いてあります。

コンポーネント（HTML 要素）は本質的に固有の動きと見た目をセットで持っているということなのでしょう。さらに Vue コンポーネントの場合は既存の HTML 要素を組み合わせて作成するので、<template> で表現されるマークアップ（HTML）も必要になるというわけです。


本記事では Vue.js コンポーネント入門の第2回として「コンポーネント」という概念について説明しました。

次の記事以降で一つずつ機能や使い方を紹介します。

関連記事

Vue.js コンポーネント入門（全7回）

Vue.js 入門（全7回）