コンポーネントのHTMLテンプレートを定義する際は、templateプロパティオプションを利用するのが基本です。
しかし、アプリケーションが管理している状態（条件）によって生成される要素や属性が激しく変動する場合は、templateオプションに記述するHTMLが複雑になってしまう場合があります。
例えば、条件によって生成する要素と属性の組み合わせが100種類以上になってしまう場合などです。
そのような場合は、HTMLテンプレートをそのまま記述しようとすると、テンプレートのHTMLが肥大化、複雑化してコードの見通しが悪くなり、メンテナンスやカスタマイズが困難になることがあります。
動的に要素を追加したり、削除したりを条件によって頻繁に切り替えるアプリケーションでは、テンプレートにHTMLを記述するのは実装コストも大きくなる場合があります。
そのような場合には、コンポーネントのHTML出力の部分を、テンプレート（templateオプション）ではなく、コード（スクリプト）から生成する方法をとることができます。
今回の記事では、Vue.jsのコンポーネントのテンプレートをコードから生成（描画）する仕組みのrenderオプションについて紹介します。
renderオプション
renderオプションはコンポーネントのプロパティとして定義することができます。
renderオプションは、propsやdataオプションと同様に定義します。
値には関数（function() {}）を指定して要素をレンダリング（描画）する処理を記述します。
renderオプションの実装例
以下にrenderオプションの実装例として簡単なサンプルコードを示します。
ここでは、コンポーネントのpropsで指定された状態（state）によって、描画する要素や属性を切り替えて設定します。
HTML
JavaScript
上記の例は、ボタンクリックによって何らかの処理を行う機能に表示するメッセージを操作するコンポーネントです。
コンポーネントのpropsに定義されているstateプロパティに「before」を指定している時には「ボタンをクリックして処理を実行してください。」というメッセージが表示され、「after」を指定している時には「処理が完了しました。」というメッセージが表示され、「processing」を指定している時には処理中を表す画像（アニメーションGIF）を表示しています。
renderオプションで行う要素の描画では、Vueのhメソッド（createElement）を利用します。
hメソッドは「Vue.h(‘要素名’, オプション）」の形式で定義します。
オプションには、テキスト、属性、クラス、スタイルなどが指定できます。
render関数で出力されるHTML
上記のサンプルコードを実行するとブラウザーには以下のHTMLが出力されます。
「before」が指定さている時
「processing」が指定さている時
「after」が指定さている時
