【Vue.js】単一ファイルコンポーネント〜機能解説からビルド〜 #JavaScript

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

【コンポーネント】
コンポーネントとはそれ自体がインスタンスで再利用可能という性質を持っています。
javascriptのtemplateオプションなどを利用してHTMLのデータを作り、それを部品化できます。

【単一ファイルコンポーネント】
コンポーネントが上記のように主にHTMLのデータを一括りにしたものに対し、単一ファイルコンポーネントはHTMLに加えjavascript、cssも一括りに設定したファイルごと部品化できます。

コードを修正するために、関連したファイル間を行ったり来たりする必要が少なくなるので、保守性に優れ、グローバル変数による名前空間の汚染問題を解消できたりします。
（拡張子：ファイル名.vue）

単一ファイルコンポーネントの仕様

template、script、styleの３つのブロックから構成されています。

<template>
  <!-- 主にhtmlで記述 -->
</template>

<script>
export default {
  // 主にjavascriptで記述
}
</script>

<style>
/* 主にcssで記述 */
</style>

template

templateオプションに対応するブロック

【主な仕様言語】
HTML

コンポーネントのtemplateオプションと同様、マスタッシュ記法やディレクティブなどの文法がそのまま使えます。

script

UIの振る舞いを制御するブロック
【主な仕様言語】
script

scriptタグはファイル内に最大で１つです。
他のコンポーネントをインポートするにはimport構文を利用できます。

<script>
import MyModal from 'my-modal'
export default {
  ...
}
</script>

css

UIの見た目を制御するブロック
【主な仕様言語】
css

１つのファイルに複数のタグを仕様でき、ファイル毎にスタイルをカプセル化できます。
これによりスタイル定義の干渉を回避できます。

<!-- カプセル化 -->
<style scoped>
  .message {
    color: red;
  }
</style>

<!-- グローバル化 -->
<style>
  .theme {
    color: blue;
  }
</style>

単一ファイルコンポーネントのビルド

例として下記のコードをビルドします。

sample.vue

<template>
  <div class="theme">
    <h1>グローバル</h1>
    <h2 class="message">{{ message }}</h2>
    <p>グローバル</p>
  </div>
</template>

<script>
export default {
  // dataは関数で定義
  data() {
    return {
      message: 'カプセル'
    }
  }
}
</script>

<!-- カプセル化 -->
<style scoped>
  .message {
    color: red;
  }
</style>

<!-- グローバル化 -->
<style>
  .theme {
    color: blue;
    text-align: center;
  }
</style>

適当なディレクトリに保存し、ターミナルで保存した場所に移動。
ビルドして表示するコマンドを入力します。

$ cd ディレクトリの場所
$ vue serve sample.vue --open

Local: http://localhost:8080/が表示されるのでブラウザに立ち上げます。
下の画面になっていれば成功です。

外部ファイルのインポート

単一ファイルコンポーネントでは、各ブロックに置いてscr属性でファイルをインポートできます。
既存のアプリケーションのファイルを流用できるので便利です。
先ほど例に出したコードは、このように書き換えられます。

<!-- template部分をtemplate.htmlに記述し読み込み -->
<template src="./template.html"></template>

<!-- script部分をscript.jsに記述し読み込み -->
<script src="./script.js"></script>

<!-- style部分をstyle.cssに記述し読み込み -->
<style src="./style.css"></style>

今回は以上です。
まだ紹介できていない機能などあるので、今度また書こうと思います。
ここまでで補足や訂正などありましたら是非ご教授いただけると嬉しいです。
最後まで読んでいただきありがとうございます。