レンダー関数またはJSXをテンプレートの代わりに使う場合はいつですか？

Question

Accepted Answer

Vueテンプレートは仮想DOMを返す**レンダー関数**にコンパイルされます。通常はテンプレートを書きますが、UIをプログラムで生成するために**JavaScriptの全機能**が必要な場合は、レンダー関数（またはJSX）を直接書くことができます。 ## レンダー関数 ```js import { h } from "vue"; // h = hyperscript: creates a virtual DOM node export default { props: ["level"], setup(props, { slots }) { // dynamically choose the tag — hard to express in a template return () => h(`h${props.level}`, slots.default()); // → renders an

}, }; ``` `h(tag, props, children)`は命令型でvnodesを構築します。ここでは見出しレベルが実行時に計算され、`h1`～`h6`を選択します。テンプレート構文では不便です。 ## JSX（Vue JSXプラグイン付き） ```jsx export default { props: ["items"], setup(props) { return () => (
{props.items.map((item) => item.visible ?
{item.name}
: null )}
); }, }; ``` JSXは通常のJS（`.map`、条件分岐、変数）を使ってツリーを構築できるため、Reactデベロッパーにとって親しみやすく、動的な構造に対してより柔軟です。 ## レンダー関数/JSXが価値のある場合 ```text ✓ Programmatic structure: a tag/component decided at runtime (dynamic headings, schema-driven UI) ✓ Highly conditional or recursive rendering hard to express with v-if/v-for ✓ Building reusable component libraries / higher-order components ✓ Rendering based on complex JS logic where template directives feel clumsy ``` ## テンプレートを使い続けるべき場合（デフォルト） ```text ✓ Almost all app UI — templates are more readable, optimized by the compiler, and benefit from compile-time hints (static hoisting, patch flags) for performance ✓ Better tooling: IDE highlighting, type-checking, easier for the whole team ``` 特に注目すべき点として、テンプレートコンパイラはパフォーマンス最適化（静的と動的の区別）を追加しており、手書きのレンダー関数では自動的に得られません。 ## なぜ重要なのかテンプレートが正しいデフォルトです。読みやすく、ツーリングが充実しており、コンパイラで最適化されています。しかし、UIをプログラムで生成する必要がある場合（動的なタグ、再帰的なツリー、ライブラリコンポーネント）には、レンダー関数/JSXが脱出口となります。テンプレート構文が複雑になりすぎます。両者が存在すること、そしてテンプレートは一般的なアプリケーションコードで推奨され、レンダー関数は動的/ライブラリシナリオに適していることを理解することで、一つのアプローチを強制せずに正しいツールを選択できます。