コンポーネントとは何か

Vue.jsを使っているとよく聞くことになる単語のひとつに、コンポーネントというものがあります。

コンポーネントとは、部品、成分、構成要素などの意味を持つ英単語。ITの分野では機器やソフトウェア、システムの構成する部品や要素などのことを意味する。
引用元: http://e-words.jp/w/コンポーネント.html

文字通り、ソフトウェアやシステムを構成する部品を意味するのですが、Web開発におけるコンポーネントはどういった役割を果たすものなのでしょうか。

全てはUIを構成する部品

アプリケーションのUIは、それを構成する部品の組み合わせだと考えることができます。

実際に、ボタンなどの小さな部品からテンプレートやページの大枠まで、全てはコンポーネントの組み合わせで構成されています。

アトミックデザイン

アトミックデザインのロゴ
近年、Web開発の現場では、Atomic Designというデザイン手法がよく用いられています。

Atomicデザインとは、WebのUIをAtom、Molcule、Organisms、Template、Paggeといった5つのサイズのコンポーネントに分けて、UIをデザイン・開発していく手法のことです。

Webフロントエンドの現場では、開発・保守の効率化といった点から、こういったデザイン手法などを用いて、UIコンポーネントをどれだけ効率的に書けるかが重要になってきます。

コンポーネント化で良くなること

再利用で開発効率アップ

開発したコンポーネントは再利用することができます。

ボタンなどの小さなコンポーネントはもちろんのこと、Webアプリケーションのフォームナビゲーションヘッダーなども、コンポーネントとして再利用することで開発効率が上がります。

カプセル化で保守性が高まる

CSSやjQueryのイベントなど、名前衝突でUIが崩れてしまう経験をしたことがある方も多いのではないでしょうか。

コンポーネント化を徹底することで、こういった問題を解決することができます。

例えばVue.jsの単一ファイルコンポーネントで構築したCSSファイルには、スコープ付きCSSという機能があります。

これを使うことで、Vueファイルをjsファイルにバンドルする際、クラス名にカスタムデータ属性(一意なID)を渡すことで、他のCSSファイルからの干渉を防ぐことができます。

単一ファイルコンポーネントとは

単一ファイルコンポーネント(Single File Components)とは、Vue.jsのコンポーネントをひとつのファイルとして作成・管理する機能です。

.vue拡張子ファイル内に定義したコンポーネントで、HTMLベースのコンポーネント開発を行うことができます。

例えばこのようなWebページ(index.vue)をVue.jsの単一ファイルコンポーネントで作成すると、このようなコードになります。

Webページのスクリーンショット

index.vue

<template>
  <div class="parent">
    <h1>{{ message }}</h1>
    <p>{{ detail }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'Hello World!',
      detail: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget pharetra velit. Nullam scelerisque felis nec diam ultrices pellentesque.
      Praesent lobortis enim facilisis ligula suscipit, ut sodales erat pharetra. Donec ac nisl mi. Nulla eu ultricies tellus. Nulla facilisi. Ut sed lectus vitae eros imperdiet maximus.
      Nulla id mauris tortor. Mauris convallis hendrerit consequat. Duis tincidunt, eros faucibus dapibus laoreet, sapien dolor scelerisque neque, at hendrerit nibh dui vel metus.'
    }
  }
}
</script>

<style scoped>
.parent{
  height: 100%;
  width: 50%;
  text-align: center;
  margin: 0 auto;
}
</style>

ひとつのファイルでHTML、CSS、Javascriptを記述して、バンドル時にひとつのJavascriptファイルへとコンパイルされて出力されます。

Webページとして表示させるために必要なリソースをすべてJavascriptファイルに束ねられるのです。

まとめ

このように、ひとつのファイルでひとつのコンポーネントを管理できるのは強力です。ぼくの好きな本に、「UNIXという考え方」というUNIXの設計哲学に関して書かれた本があります。

その中でもかなり強めに主張されているのが「Small is beautiful」という考え方です。

「ひとつのプログラムは、ひとつの機能しか持たない」という設計手法は、プログラムの開発や保守の観点から、非常に重要であることは納得しやすいことでしょう。

小さいものは、大きい物にない利点がいくつもある。小さいもの同士なら簡単に独特の便利な方法で組み合わせることができるのだ。

Vue.jsの単一ファイルコンポーネントは、この「Small is Beautiful」にピッタリの設計手法だと思います。

ソフトウェア、アプリケーションが巨大になればなるほど、単一ファイルコンポーネントから受ける恩恵も大きなものになっていくでしょう。

PROFILE

はじめまして、大阪のWeb制作会社Yuapです。「Yuap(ユアプ)」とは英語で「あなたのプランナー」という、Your Plannerの頭文字をとった社名です。 ホームページ制作|Webシステム開発|Webコンサルティングなどの業務を通じて、みなさまの事業の成長に貢献できるようなプランナーになれるよう、日々チャレンジしております。

※お問い合わせ・お見積りは無料です。 IT|ホームページ|Webシステムのことならなんでもお気軽にご相談ください。お問い合わせはこちらから。