render レンダー関数
最終更新：2026-10-22
render レンダー関数
render オプションはテンプレートの代わりに仮想ノードを返す関数です。構造を完全に JS で表現したい場合（動的な階層が深い場合など）に使います。
| グループ | オプション: 描画とライフサイクル |
|---|---|
| 種類 | オプション |
| スコープ | コンポーネント内 |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
import { h } from "vue"
export default {
render() { return h("p", this.msg) }
}⚙️ 引数
| value | 関数：h() で作った仮想ノード（またはその配列）を返します |
|---|
戻り値：仮想 DOM ノード（VNode）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Renders three list items: Item 1, Item 2, Item 3.💡 ポイント
ℹ️ 補足 テンプレートはコンパイル後、render 関数になります。両者は等価で、テンプレートは読みやすく、render はより柔軟です。
💡 ヒント 動的なタグ、深いネスト、プログラム的に構造を組み立てる場合に便利です。
⚠️ 注意 render 関数内にはディレクティブがありません。v-if / v-for は素の JavaScript 式で表現します。
🏷️ 関連描画とライフサイクル
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q render が必要になるのはいつですか？
A タグ名やネストがデータに依存するときです。テンプレートでは冗長になってしまいます。
Q JSX との関係は？
A JSX は h() 呼び出しにコンパイルされます。本質は同じで、書き方が HTML に近いだけです。
Q リアクティブなデータは使えますか？
A 使えます。render が this.xxx にアクセスすると依存が自動収集され、変化時に再レンダリングされます。
