コンポーネントの要素をコードから生成するrenderオプション（関数） [Vue.js]

コンポーネントのHTMLテンプレートを定義する際は、templateプロパティオプションを利用するのが基本です。

const comp = {
  template: '<div>{{message}}</div>',
  props: {
    message: String
  }
}

const comp = {

template: '<div>{{message}}</div>',

props: {

message: String

}

しかし、アプリケーションが管理している状態（条件）によって生成される要素や属性が激しく変動する場合は、templateオプションに記述するHTMLが複雑になってしまう場合があります。

例えば、条件によって生成する要素と属性の組み合わせが100種類以上になってしまう場合などです。
そのような場合は、HTMLテンプレートをそのまま記述しようとすると、テンプレートのHTMLが肥大化、複雑化してコードの見通しが悪くなり、メンテナンスやカスタマイズが困難になることがあります。

動的に要素を追加したり、削除したりを条件によって頻繁に切り替えるアプリケーションでは、テンプレートにHTMLを記述するのは実装コストも大きくなる場合があります。

そのような場合には、コンポーネントのHTML出力の部分を、テンプレート（templateオプション）ではなく、コード（スクリプト）から生成する方法をとることができます。

今回の記事では、Vue.jsのコンポーネントのテンプレートをコードから生成（描画）する仕組みのrenderオプションについて紹介します。

1 renderオプション
2 renderオプションの実装例
3 render関数で出力されるHTML

renderオプション

renderオプションはコンポーネントのプロパティとして定義することができます。

const comp = {
  render: function() {
    // ...ここに描画処理を記述する...
  },
  props: {
    message: String
  }
}

const comp = {

render: function() {

// ...ここに描画処理を記述する...

props: {

message: String

}

renderオプションは、propsやdataオプションと同様に定義します。
値には関数（function() {}）を指定して要素をレンダリング（描画）する処理を記述します。

renderオプションの実装例

以下にrenderオプションの実装例として簡単なサンプルコードを示します。
ここでは、コンポーネントのpropsで指定された状態（state）によって、描画する要素や属性を切り替えて設定します。

HTML

<div id="app">
  <processing-message state="before"></processing-message>
  <button v-on:click="onClick">
    処理実行
  </button>
</div>

<processing-message state="before"></processing-message>

処理実行

</button>

</div>

JavaScript

Vue.createApp({
  components: {
    'processing-message': {
      props: {
        state: String
      },
      render: function() {
      switch (this.state) {
        case 'before':
          return Vue.h('p', 'ボタンをクリックして処理を実行してください。');
        case 'processing':
          return Vue.h('img', {
            src: 'processing.gif',
            alt: '...処理中です...'
          })
        case 'after':
          return Vue.h('p', '処理が完了しました。');
        default:
          console.error('stateの指定が正しくありません。');
          return null;
        }
      }
    }
  },
  methods: {
    onClick: function() {
      // ここにボタンクリック時の処理を記述する...
    }
  }
}).mount('#app')

Vue.createApp({

components: {

'processing-message': {

props: {

state: String

render: function() {

switch (this.state) {

case 'before':

return Vue.h('p', 'ボタンをクリックして処理を実行してください。');

case 'processing':

return Vue.h('img', {

src: 'processing.gif',

alt: '...処理中です...'

})

case 'after':

return Vue.h('p', '処理が完了しました。');

default:

console.error('stateの指定が正しくありません。');

return null;

}

methods: {

onClick: function() {

// ここにボタンクリック時の処理を記述する...

}

}).mount('#app')

上記の例は、ボタンクリックによって何らかの処理を行う機能に表示するメッセージを操作するコンポーネントです。
コンポーネントのpropsに定義されているstateプロパティに「before」を指定している時には「ボタンをクリックして処理を実行してください。」というメッセージが表示され、「after」を指定している時には「処理が完了しました。」というメッセージが表示され、「processing」を指定している時には処理中を表す画像（アニメーションGIF）を表示しています。

renderオプションで行う要素の描画では、Vueのhメソッド（createElement）を利用します。
hメソッドは「Vue.h(‘要素名’, オプション）」の形式で定義します。
オプションには、テキスト、属性、クラス、スタイルなどが指定できます。

render関数で出力されるHTML

上記のサンプルコードを実行するとブラウザーには以下のHTMLが出力されます。

「before」が指定さている時

<p>ボタンをクリックして処理を実行してください。</p>

1	<p>ボタンをクリックして処理を実行してください。</p>

「processing」が指定さている時

<img src="processing.gif" alt="...処理中です...">

1	<img src="processing.gif" alt="...処理中です...">

「after」が指定さている時

<p>処理が完了しました。</p>

1	<p>処理が完了しました。</p>

Vue.js 入門 Tips 一覧

リンク