Vue テンプレート

1. Vue テンプレートとは

Vue における テンプレート（Template） とは、アプリケーションの HTML 部分を指します。

後ほど学習する .vue ファイルでは、<template> タグを使用してコードをより適切に構造化することになります。また、Vue インスタンスの設定オプションとして template を使用し、その中に HTML コードを直接記述することも可能です。

2. Vue 設定オプションとしてのテンプレート

設定オプションとして template を使用する例を見てみましょう。以下のシンプルな例では、本来 HTML 側にあった記述を Vue インスタンスの設定オプション内へ移動させています。

2.1 実装例：インラインテンプレート

<div id="app"> の内部にあった HTML コンテンツを template オプションに移動し、バッククォート（`...`）で囲んでいます。バッククォートを使用することで、複数行にわたる HTML を記述できるようになります。

<div id="app"></div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    // HTML構造をJavaScript側に定義
    template:
      `<h1>{{ message }}</h1>
      <p>これはバッククォート内に記述された、複数行のHTMLコードです</p>`,
    data() {
      return {
        message: "Hello World!（こんにちは、世界！）"
      }
    }
  })
app.mount('#app')
</script>

3. 単一ファイルコンポーネント (SFCs)

上記の例のように、Vue アプリケーションの HTML 部分を Vue インスタンス内にまとめることは可能ですが、これだけでは HTML ファイルの見通しが劇的に良くなるわけではありません。

よりプロジェクトの見通しを良くし、大規模な開発を円滑に進め、優れた 開発環境（Development Environment） の恩恵を受けるために、ここからはコードを SFC（Single File Component）、つまり *.vue ファイルに記述する方法へと切り替えていきます。

4. *.vue ファイルの構成要素

すべての *.vue ファイルは、論理的に関心事が分離された以下の3つのパートのみで構成されています。

• <template>: HTML コンテンツを記述するエリアです。
• <script>: Vue のロジック（JavaScript/TypeScript）を記述するエリアです。
• <style>: CSS のスタイリングを記述するエリアです。

ただし、*.vue ファイルを実際のプロジェクトで使用するためには、コンピュータに適切なビルド環境を構築する必要があります。これについては、本チュートリアルの次のページで詳しく解説します。