【Vue.js】コンポーネントとは何か?

Web

コンポーネントとは?

突然ですが、皆さんはプラモデルを作ったことがあるでしょうか。私は子供のころによくゾ●ドとか作ってました。(懐かしい…

作ったことが無くても、プラモデルがどのようなものかは想像がつくと思います。では人型ロボットの(ガ●ンダム)的な)プラモデルを作ることを考えてみましょう。

箱の中には様々なパーツがあります。まずはパーツを切り分け、頭・胴体・腕・足といった部分的なパーツを組み立てます。そして組み立てたパーツをさらに組み合わせることでロボットのプラモデルが完成します。

さて、本題のコンポーネントとはいったい何なのでしょうか。

コンポーネントは、直訳すると構成要素を意味します

先程のプラモデルの構成要素は、大きく分けて、頭・胴体・両腕・両足の6つです。つまりこれらはコンポーネントになります。

そして頭などを構成するパーツもコンポーネントになります。

Webページにおけるコンポーネント指向

さて、Webページについて考えてみましょう。Webページは、ヘッダー、サイドバー、ボディ、フッターなど様々な要素で構成されています。つまり、これらをコンポーネントとして考えることができます。

そして、ヘッダーにはロゴ、サイドバーにはナビゲーションというように、それぞれでまた別の要素、つまりコンポーネントを持ちます。

このように要素を分割し、コンポーネント化することでWebページを構成していくことをコンポーネント指向といいます。

なぜコンポーネント化するのか

コンポーネント化することによるメリットはいくつか考えられます。

1つは、設計・開発・テストがコンポーネント単位で行えるようになることです。プロジェクトメンバーへの作業分担が容易になること、テストによりコンポーネント単位で品質が担保できることなどのメリットが考えられます。

もう1つあげると、共通化できるようになることです。コンポーネントにより共通化できるものは、HTMLによる構造、CSSによる見た目、javascriptによる動作です。これら3つすべてが同じである必要はありません。構造、動作は同じで、見た目は外部から受け取った値により変化する。このようなものもコンポーネントとして扱います。

どのような単位でコンポーネント化すればいいのか、明確な正解はありません。しかし、上記のメリットを考えながらコンポーネント化することは、非常に大切なことです。

Vue CLIにおけるコンポーネント

Vue CLIでは、単一ファイルコンポーネント(vueファイル)としてコンポーネントを作成します。

1つの単一コンポーネントは、HTMLにより構造を定義するtemplate、javascriptにより定義を記述するscript、CSSにより見た目を定義するstyleの3つの要素を持ちます。これら3つの要素によって1つのコンポーネントを作ります。

<template>
  <!-- HTML要素 -->
</template>

<script>
  //javascript要素
</script>

<style>
  //CSS要素
</style>

デジタル時計の作成

試しに、デジタル時計の表示部分(時分秒まで)をコンポーネント指向によって作っていきたいと思います。

まずは時計がどのような要素で構成されているかを考えます。私的には次のように要素を分割でき、コンポーネント化できると考えました。

Light Component

Light Componentは、外部から受け取った値(0, 1)により自信を光らせるかを制御します。イメージとしては豆電球みたいなものです。

コンポーネントが外部から値を受け取る場合には、propsプロパティを使用します。

<template lang="pug">
  .light(:class="{'on' : light === 1}")
</template>
<script>
export default {
  props: {
    light: 0
  }
};
</script>

この場合、次のようにすることで外部から値を渡すことができます。

<template lang="pug">
  Light (v-bind:light="value")
</template>
<script>
export default {
  data() {
    return {
      value: 0
    }
  }
}
</script>

Digit Component

Digit Componentは、Light Componentを数字の形になるように並べ、外部から受け取った数字によってどのLight Componentを光らせるのかを制御しています。

Clock Component

Clock Componentは、デジタル時計の本体となるコンポーネントです。Digit Componentを6つ並べ、時分秒それぞれの役割にあった数字を与えることで、時計の表示を制御します。

完成品

実際に作ったものが以下になります。ソースも見ることができるため、参考にしてみてください。

コンポーネントを学ぶには?

コンポーネントを学ぶ上で参考になるのが、コンポーネントフレームワークです。

コンポーネントフレームワークは、あらかじめコンポーネントがいくつか用意されており、それらを使ってWebページを構成することができます。

実際に使ってみて、どのような単位でコンポーネント化されているのか、などを考え出すととても参考になります。

いくつか有名なコンポーネントフレームワークを紹介しますので、参考にしてみてください。

Vuetify

Vue Material Design Component Framework — Vuetify.js
VuetifyはVue.jsのマテリアルデザインコンポーネントフレームワークです。美しいコンテンツを持つリッチアプリケーションを作成するのに必要不可欠なツールを提供することを目的としています。

Bootstrap Vue

BootstrapVue
Quickly integrate Bootstrap v4 components with Vue.js

Buefy

Buefy: lightweight UI components for Vue.js based on Bulma
Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

Element UI

Element - The world's most popular Vue UI framework
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

Vue Material

Vue Material
Build well-crafted apps with Material Design and Vue.js

Ant Design Vue

Ant Design Vue
An enterprise-class UI components based on Ant Design and Vue

 

- Vue.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました