Vueインスタンスで使うオプションと単一ファイルコンポーネントについて（単一ファイルコンポーネント編）

Vue.js2019.3.28

最終更新日：2019.3.28 Update!!

前回記事「Vueインスタンスで使うオプションと単一ファイルコンポーネントについて（オプション編）」に引き続き、今回もVue.jsに関する記事をまとめていきたいと思います。今回のテーマはVue.jsの大きな特徴でもある単一ファイルコンポーネントについてです。Vue.jsでアプリケーションを作成する時にはとても重要になるものです。

Vue.jsで扱う単一ファイルコンポーネント

このようにVue.jsではVueインスタンスと呼ばれるものを定義して、その中に意図する動きになるよういろんな処理や実行される関数などのプログラムをオプションとして入れていく形になり、基本的にはjavascriptとして書かれているので、HTMLや外部のjsファイルにまとめられるのですが、開発するアプリケーションが複雑かつ大規模になった場合に、修正範囲が多岐にわたる場合にはかなり改修コストがかかったり、そもそもコードが増えていくとわかりにくくバグが発生しやすい状況にあります。そんなときに解決してくれるのが「単一ファイルコンポーネント」というものです。これは1つのファイルを1つのコンポーネントとして扱うこともので、コンポーネントとして描画されるHTMLや、そのコンポーネントで行う処理をまとめたjavascript、コンポーネントのデザインを調整するためのCSS、これら3つが一つのファイルにまとめられたものになります。また、この単一ファイルコンポーネントでは拡張子が「.vue」になるので注意が必要です。単一ファイルコンポーネントの中身はこのような構成になっています。【sample.vue】

<template>
// コンポーネントになるHTMLが記述される
</template>

<script>
// コンポーネント内で使われるjavascriptが記述される
</script>

<style lang="scss">
// コンポーネントに適用するCSSが記述される
</style>

これまでのHTMLと同じような形でコードは記述できるので、比較的イメージしやすいのではないでしょうか。コンポーネント化することで、要素に対して固有のスタイルやスクリプトを適用する形になり、メンテナンス性も向上します。HTMLを記述する部分はVue独自のtemplateというタグで囲う形になるので注意が必要です。また、コンポーネント内のscriptやstyleはこのコンポーネント専用のものになります。

単一ファイルコンポーネントをベースのHTMLに出力する

実際のコンポーネント使用を見てみるとこのような形になります。まずはベースのHTMLをこのような形で用意します。【index.html】

<!doctype html>
<html lang="ja">
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>PAGE TITLE</title>
 </head>
 <body>
  <div id="app">
  </div>
 </body>
</html>

注目すべきはidがappの要素ですが、このような形でベースコンポーネントの出力先となる要素を用意しておきます。これでビルドをすると上記でいうところのidがappの要素内に、Vue.jsで作成されたコンポーネントが描画される仕組みになります。もちろん現状のままですとbody要素内には空っぽになるので引き続きコンポーネントの作成と設定を行います。まずはベースとなるコンポーネントを作成していきます。ここでは「App.vue」というファイルで作成しています。【App.vue】※一部省略

<template>
 <div id="app">
  <header></header>
  <main></main>
  <footer></footer>
 </div>
</template>

<script>
 export default { 
  alert('hello vue!!');
 }
</script>

<style lang="scss">
 body {
  margin: 0;
  padding: 0;
   header,main,footer {
    width: 100%;
   }
 }
</style>

上記サンプルは最小限でシンプルなものになりますが、サンプルではヘッダー要素とメイン要素、フッター要素を入れる想定をしています。ちなみにtemplateタグにはルートとなる要素を入れないとビルド時にエラーとなるので、コンポーネントにはそれぞれルート要素を必ず入れるようにします。ここではindex.htmlの時に指定したidがappの要素をルートにします。スクリプトも適宜追記することができます。またスタイルもCSSの形で指定できますが、ビルド時にコンパイルされるようにモジュールを準備しておけば、Sassなども利用することができます。引き続き、ベースコンポーネントの設定をしていきます。これは「main.js」というファイルに記述していく形になります。Vue CLIを使う場合ですと、あらかじめフォーマットが用意されていますので、そのままで流用が可能です。【main.js】

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
 el: '#app',
 render: h => h(App)
}).$mount('#app')

上から順に見ていきますと、まずはVue.js本体のモジュールを読み込みます。そしてベースのコンポーネントになる「App.vue」も読み込んでいきます。そして最後にVueのインスタンスを作成し、要素にはidがappのものを指定し、そこにコンポーネントを描画していく指定を上記のように設定します。上記は最小限の記述になっていますが、いろんな拡張機能を足していく場合にはこちらにまとめて記述していく形になります。これでビルドすると作成したApp.vueのコンポーネントが、index.htmlにあるmain.jsで指定した要素であるidがappの中へ、出力・描画されるようになります。このような形で、Vue.jsではアプリケーションを構成するいろんな要素をコンポーネント化することでができます。また、この単一ファイルコンポーネントですが、下記の例のように前回記事「Vueインスタンスで使うオプションと単一ファイルコンポーネントについて（オプション編）」で紹介したVueインスタンスと同じオプションが使えるようになります。【App.vue】※一部省略

<template>
</template>

<script>
 export default {
  name: 'App',
  mounted() {
   alert('hello vue!!');
  }
 }
</script>

<style lang="scss">
</style>

今回は、Vueの単一ファイルコンポーネントを使って、ベースのhtmlファイルにコンポーネントを出力してみました。ここではベースコンポーネントだけでしたが、次回は様々なコンポーネントに分けて階層構造のコンポーネントを読み込むケースについてまとめていきたいと思います。