【Vue.js 】 単一ファイルコンポーネント

はじめに

開発規模が大きければ大きいほど、ソースコードも煩雑になっていく。そのため、機能ごとにファイルを切り分け、モジュール化することで保守性や再利用性を高めていく。

モジュール・・・機能ごとにクラスや関数を１つのファイルにまとめたもの

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

単一ファイルコンポーネントとは、Vue独自のフォーマットでコンポーネントの定義方法の１つ。アプリケーションのコンポーネント構築に特化したモジュール管理を行うことができる。
Vueのコンポーネント（モジュール）を単独のファイル（拡張子が.vueとなる）として作成する機能。この単一ファイルコンポーネントは<template> <script> <style>の3つのブロックで構成される。

component.vue

<template>
<!-- テンプレートブロック -->
</template>
<script>
// scriptブロック
</script>
<style>
// styleブロック
</style>

ビルド

単一ファイルコンポーネントはVue独自のものなので、そのままブラウザに反映させても動作しない。ブラウザが解釈できるようにファイルをビルド（変換）してあげる必要がある。
Vue CLIを利用することで、単一ファイルコンポーネントを使用するためのビルド環境を楽に構築することができる。
※Vue CLIを使用するにはNode.jsのダウンロードが必要になる。

→ Vue CLI 公式ドキュメント
→ Node.js 公式サイト

template

templateタグ内にはHTMLでテンプレートを記述していく。
ルート要素が１つになるように記述していく。

sample.vue

<template>
  <div>
    <h1>タイトル</h1>
    <p>テキストテキストテキスト</p>
  </div>
</template>

script

scriptタグ内にはjavascriptを記述していく。（設定次第でtypescriptも使用可能）
Vueのtemplateオプション以外のオプションオブジェクトをここに記述することができる。
コンポーネントを必要な場所でimport（読み込み）できるようにexportしておく。

→ importとexportについてはこちら

sample.vue

<script>
export default {
// オプションオブジェクトを記述
}
</script>

style

styleタグ内にはコンポーネントのCSSを記述していく。（設定次第でsassなどのスタイル言語も使用可能）
スタイルにスコープをつけて記述することもできる。
→ スコープ付きCSSについてはこちら

sample.vue

<style>
// ここにCSSを記述していく
</style>