Vue.jsの単一ファイルコンポーネントを理解する。

Vue.jsをある程度勉強したところで「コンポーネント」という言葉が出てきます。コンポーネントとは要は再利用可能なVueインスタンスの事を言い、使いまわすことが出来る部品のことです。これがかなり便利。

Vue.jsのコンポーネントは様々な記述方法があり、コンポーネント設計も奥が深いのでなかなか難しい部分ではあります。

今回はその中でも「.vueファイルを用いた単一ファイルコンポーネント」についての理解が浅かったので、理解すると同時にまとめておこうと思います。

スポンサードリンク

まずはコンポーネントについて

単一ファイルコンポーネントの説明に入る前に一度Vue.jsのコンポーネントについて軽く復習しておこうと思います。

Vue.js公式よりコードを拝借してきました。「button-counter」と呼ばれる新しいコンポーネントを定義しているコードです。

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

コンポーネントは名前付きの再利用可能な Vue インスタンスです。この例の場合、<button-counter>です。このコンポーネントを new Vue で作成されたルート Vue インスタンス内でカスタム要素として使用することができます。

コンポーネントそれ自体がインスタンスであり、それを指すのが<button-counter>であるという事です。これを何度も再利用する事が出来ます。

<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: ‘#components-demo’ })でVueインスタンスを作成します。すると、以下の様なビジュアルでコンポーネントが作成されました。

5回クリックした後のものですが、コンポーネントを使ってインスタンスを簡単に生成することができるのが確認できたと思います。コンポーネントは基本的にこのような使い方をします。コンポーネントは利用可能なVueインスタンスなので、ライフサイクルフックも受け付けます。
1つ異なるのが、コンポーネントではdataオプションが関数でないといけないという事です。

コンポーネントはそれぞれのインスタンスとして生成されるので、それぞれのデータに対して独立したデータ状態を保持する必要があるからです。関数でなければ全てのコンポーネントでデータ状態が共有されるため、同じオプションに対して同じ値を返してしまいます。

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

Vue.jsの単一ファイルコンポーネントとは、仕組みは上で紹介したコンポーネントの作り方と同様です。しかし、上の例ではHTMLをひとまとめにしていたのに対して単一ファイルコンポーネントではHTMLに加えてCSS, JavaScriptまでひとまとめにした独立したファイルを作成できる部分に違いがあります。

全て関連するコードを1つのファイルにまとめることができるので独立性があり非常に強力な機能です。コードを修正するために、関連したファイル間を行ったり来たりする必要が一切無くなります。保守性に優れ、グローバル変数による名前空間の汚染問題を解消できたりします。

公式の単一ファイルコンポーネントについてはこちら。一度目を通しておくと良いかもしれません。

単一ファイルコンポーネントを作成する

単一ファイルコンポーネントを作成するときは非常に直感的で案外簡単です。.vueファイルに対して表示したいテンプレートを登録します。

<template>
　　<div>This is a component!</div>
</template>

HTMLを<template>タグの中に書くだけです。

単一ファイルコンポーネントを作成したらrootインスタンスを作成するためのjsファイルを作成します。

import component from './component.vue'

new Vue({
  el: '#app',
  components: { component },
  template: '<my-comp></my-comp>'
})

elの要素指定はこれまで通り、そしてcomponentsでimportしたコンポーネントオブジェクトを指定して、templateにカスタムタグを記述します。importする際にはfromを用いて.vueファイルまでのパスを記述します。

これでコンポーネントを使える準備が整いました。elで指定したidを記述して、その中にカスタムタグを記述します。

<div id="app">
  <my-comp></my-comp>
</div>

このようにして上と同様の方法でコンポーネントを扱うことが可能になります。勿論、.jsファイルを<script>で読み込むのを忘れずに。

単一ファイルコンポーネントの本領を発揮する

上で説明した様に、単一ファイルコンポーネントにはCSSやJavaScriptの記述も可能です。

その際は、<template>タグの後に<style>タグや<script>タグを使用して思いのままにコードを記述するだけです。リソースの読み込みはそのファイル内で完結するので、書かなくても良いです。

まとめ

以上、Vue.jsの単一ファイルコンポーネントについてでした。今回は簡単に基本を説明しただけなので、時間があるときにサンプルプログラムでも組んでみようかなと思います。

スポンサードリンク