[Vue.js]Vue.jsコンポーネントのHTMLテンプレートを定義する際は、templateプロパティオプションを利用するのが基本です。String}}しかし、アプリケーションが管理している状態(条件)によって生成される要素や属性が激しく変動する場合は、templateオプションに記述するHTMLが複雑になってしまう場合があります。条件によって生成する要素と属性の組み合わせが100種類以上になってしまう場合などです。そのような場合は、HTMLテンプレートをそのまま記述しようとすると、テンプレートのHTMLが肥大化、複雑化してコードの見通しが悪くなり、メンテナンスやカスタマイズが困難になることがあります。動的に要素を追加したり、削除したりを条件によって頻繁に切り替えるアプリケーションでは、テンプレートにHTMLを記述するのは実装コストも大きくなる場合があります。そのような場合には、コンポーネントのHTML出力の部分を、テンプレート(templateオプション)ではなく、コード(スクリプト)から生成する方法をとることができます。今回の記事では、Vue.jsのコンポーネントのテンプレートをコードから生成(描画)する仕組みのrenderオプションについて紹介します。render関数で出力されるHTMLrenderオプションrenderオプションはコンポーネントのプロパティとして定義することができます。String}}renderオプションは、propsやdataオプションと同様に定義します。{})を指定して要素をレンダリング(描画)する処理を記述します。以下にrenderオプションの実装例として簡単なサンプルコードを示します。ここでは、コンポーネントのpropsで指定された状態(state)によって、描画する要素や属性を切り替えて設定します。'ボタンをクリックして処理を実行してください。'処理が完了しました。console.error('stateの指定が正しくありません。'ボタンをクリックして処理を実行してください。'処理が完了しました。');default:console.error('stateの指定が正しくありません。ここにボタンクリック時の処理を記述する...}}}).mount('#app')上記の例は、ボタンクリックによって何らかの処理を行う機能に表示するメッセージを操作するコンポーネントです。コンポーネントのpropsに定義されているstateプロパティに「before」を指定している時には「ボタンをクリックして処理を実行してください。」というメッセージが表示され、「after」を指定している時には「処理が完了しました。」というメッセージが表示され、「processing」を指定している時には処理中を表す画像(アニメーションGIF)を表示しています。renderオプションで行う要素の描画では、Vueのhメソッド(createElement)を利用します。オプション)」の形式で定義します。オプションには、テキスト、属性、クラス、スタイルなどが指定できます。render関数で出力されるHTML上記のサンプルコードを実行するとブラウザーには以下のHTMLが出力されます。「before」が指定さている時XHTML<p>ボタンをクリックして処理を実行してください。</p>1<p>ボタンをクリックして処理を実行してください。alt="...処理中です...">「after」が指定さている時XHTML<p>処理が完了しました。</p>1<p>処理が完了しました。一覧リンクシェアするLINE!関連記事Vue.jsのインストール(ダウンロード・NPM・CDN)Vue.js(ヴュー・ジェイエス)は、Webアプリケーション(ネットワークアプリケーション)のUI(ユーザーインターフェース)を構築...記事を読むVue.jsのディレクティブ(v-xxxx)で属性やイベントなどを設定するここでは、Vue.jsのディレクティブについて紹介します。V...記事を読むVue.jsのオプション構成(インスタンスのプロパティ)ここでは、Vue.jsのオプション構成(インスタンスのプロパティ)について紹介します。[Vue.js]今回は、コンポーネントに定義できるemitsオプションについて紹介します。[Vue.js]Vue.jsではHTML要素の属性を指定する際にv-bindディレクティブを使用します。[Vue.js]前回の記事では.self修飾子を使用して、イベントが発生した要素だけでイベントが処理されるようにする方法について紹介しました。[Vue.js]本記事では、Vue.jsで作成するアプリケーションの算出プロパティを定義するcomputedプロパティオプションについて紹介します。[Vue.js]本記事では、Vue.jsで作成するアプリケーションの状態を定義するdataプロパティオプションについて紹介します。