JavaScript Vue.js入門講座 プログラミング

【Vue.jsプログラミング入門講座】Vue.jsのテンプレートの記述方法いろいろ

Vue.jsキービジュアル

JavaScriptの三大フレームワークの一つであるVue.jsのテンプレートの記述方法は複数あり、初心者の人は混乱すると思いますのでまとめてみました。

Vueテンプレート化していない普通のHTML

Vue.jsを使ったサンプルソースコードを掲載する前に、Vue.jsを使わない普通のHTMLを掲載します。
次以降では、このHTMLをVue.jsで書いた場合ののサンプルコードを掲載します。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>画面表示 (Vue未使用)</title>
</head>
<body>

  <div id="content">
    <h1>画面表示 (Vue未使用)</h1>
    <p>これはサンプル0です。</p>
  </div>

</body>
</html>

その１：コンテンツ内の指定idエリアをテンプレート化する方法

Vueのel項目にid属性をすることで、HTML内のそのid属性のタグで囲まれた部分をVueテンプレート化することができます。
サンプルコードは以下の通りです。
表示結果を確認する際に、この部分がテンプレート化されていることが分かるように、テンプレート変数(「{{」と「}}」で囲んだ変数。Mustache記法といいます)を記述し、
その変数部分に組み込む値をVueのdata項目に設定しました。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>画面表示 (コンテンツ内の指定idエリアをテンプレート化)</title>
</head>
<body>

  <div id="app">
    <div id="content">
        <h1>画面表示 (コンテンツ内の指定idエリアをテンプレート化)</h1>
        <p>これは{{ param1 }}です。</p>
      </div>
  </div>

  <script src="https://unpkg.com/vue@2.5.17"></script>
  <script>
  new Vue({
    el: '#app',
    data: {
      param1: 'サンプル1'
    }
  })
  </script>

</body>
</html>

このサンプルソースの表示結果はコチラで確認できます。

その２：Vueのtemplateの値にテンプレートを直接記述する方法

前述の「その１」の書き方では、HTMLを描画した後に、new Vue(); が実行されるため、テンプレートとなる<div id="app"> 〜 </div> の内容が最初に描画され、一瞬テンプレート変数 {{ param1 }} などがそのまま画面に表示されてしまうため、あまり良くありません。
そこで、テンプレートのソースをnew Vue(); の中のtemplateに記述することで、テンプレートが解析されて変数も組み込まれた後に描画されるようにできます。
次がそのサンプルコードです。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>画面表示 (Vueのtemplateの値にテンプレートを直接記述)</title>
</head>
<body>

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

  <script src="https://unpkg.com/vue@2.5.17"></script>
  <script>
  new Vue({
    el: '#app',
    data: {
      param1: 'サンプル2'
    },
    template: `<div id="content">
        <h1>画面表示 (Vueのtemplateの値にテンプレートを直接記述)</h1>
        <p>これは{{ param1 }}です。</p>
      </div>`
  })
  </script>

</body>
</html>

templateにテンプレートソースを記述する場合は、シングルクォーテーション(')で囲んでも動作しますが、ES5で追加されたテンプレートリテラル(グレイヴ・アクセント(`)を使う)で囲むようにしましょう。
このサンプルソースの表示結果はコチラで確認できます。

その３：x-templateを使う方法

Vue内のtemplate項目の値に直接テンプレートソース(HTML)を記述する場合、テンプレートが短ければ良いですが、長い場合はnew Vue(); の外にテンプレートを出したいという人も多いでしょう。
Vue.jsでは、そのような場合にx-templateという特別な記述方法を提供しています。
HTML内に <script src="text/x-template" id="****"> 〜 </script> で、Vueテンプレートを記述し、Vueのtemplateの値に <script src="text/x-template" id="****"> のid値を設定します。
<script src="text/x-template" id="****"> 〜 </script> のエリアは、ブラウザは認識せず描画しません。Vueのみが認識します。
サンプルコードは、以下のようになります。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>画面表示 (text/x-templateを使用)</title>
</head>
<body>

  <script src="text/x-template" id="my-template">
    <div id="content">
      <h1>画面表示 (text/x-templateを使用)</h1>
      <p>これは{{ param1 }}です。</p>
    </div>
  </script>

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

  <script src="https://unpkg.com/vue@2.5.17"></script>
  <script>
  new Vue({
    el: '#app',
    data: {
      param1: 'サンプル3'
    },
    template:'#my-template'
  })
  </script>
</body>
</html>

このサンプルソースの表示結果はコチラで確認できます。

その４：描画関数を使う方法

滅多にありませんが、Vueのテンプレート記法で記述することが難しい場合、描画関数を使ってJavaScriptのプログラムとして記述することができます。
難易度が高い上に、利用することがまず無いため、特に理解する必要はないと思いますが、ご参考まで紹介します。
サンプルコードは以下のようになります。

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>画面表示 (描画関数)</title>
</head>
<body>

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

  <script src="https://unpkg.com/vue@2.5.17"></script>
  <script>
  new Vue({
    el: '#app',
    data: {
      param1: 'サンプル4'
    },
    render: function(createElement) {
      return createElement(
        'div',
        {attrs: {'id': 'content'}},
        [
          createElement('h1', '画面表示 (描画関数)'),
          createElement('p', 'これは' + this.param1 + 'です。')
        ]
      )
    }
  })
  </script>

</body>
</html>

このサンプルコードの表示結果はコチラで確認できます。

その５：単一ファイルコンポーネントを使う方法

大規模システムの場合は、SPA (Single Page Application)を開発します。その場合はSPAの各部品をコンポーネントに分離します。
Vue.jsのエコシステムであるVue CLIでは、「単一ファイルコンポーネント」という仕組みで、コンポーネントごとにファイルを分けることができます。
これを単一ファイルコンポーネントと呼びます。
単一ファイルコンポーネント内のテンプレートは次のように <template> 〜 </template> の間に記述します。

<template>
  <div id="content">
    <h1>画面表示 (単一ファイルコンポーネント)</h1>
    <p>これは{{ param1 }}です。</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      param1: 'サンプル5'
    }
  }
}
</script>

<style scoped>
</style>

このサンプルコードは、Vue CLIをインストールし動作環境を構築する必要がありますので、ここでは割愛します。

その６：JSXを使う方法

Reactで使われているテンプレート構文「JSX」も使うことができます。

<script>
  export default {
    data() {
      return {
        param1: 'サンプル5'
      }

    },
    render() {
      return (
        <div id="content">
          <h1>画面表示 (JSX)</h1>
          <p>これは{ this.param1 }です。</p>
        </div>
      )
    }
  }
</script>

<style scoped>
</style>

このサンプルコードは、Vue CLI(Babelなど)をインストールし動作環境を構築する必要がありますので、ここでは割愛します。

以上、いろいろなVue.jsのテンプレートの記述方法の紹介でした。

Vue.jsプログラミング入門講座 〜 全記事一覧 〜

-JavaScript, Vue.js入門講座, プログラミング
-, , ,

Copyright© ハッピー・プログラミング・ライフ , 2024 All Rights Reserved.