is タグ / コンポーネントの動的切り替え

最終更新：2026-10-22

is 属性はにどのコンポーネントやネイティブタグを描画するかを指定します。ネイティブ要素の切り替え（table 内の tr / td など）にも使われます。

📝 構文

<component :is="current"></component>
<component is="strong">太字テキスト</component>

props	コンポーネント名、コンポーネント定義オブジェクト、またはネイティブタグ名の文字列

以下のコードを編集して結果を確認しましょう：

出力：

The second line toggles between em and strong tags.

ℹ️ 補足 is はとセットで使います。普通の要素に単独で書いても無視されます。

💡 ヒント 動的なフォームフィールドやリッチテキストノードの描画に、これが最も自然に合います。

⚠️ 注意 is にネイティブタグの文字列を渡してもコンポーネントは作られません。コンポーネントのロジックが動くことは期待しないでください。

Q <component> との関係は？

A is はその属性です。両者が合わさって描画対象を決めます。

Q 文字列のタグを描画できますか？

A 描画できます。is="span" / "h3" のようなネイティブタグ名がそのまま効きます。

Q v-html とはどちらを使うべきですか？

A is は構造の切り替え（テンプレート体系の内側）に使い、v-html は HTML のまとまった注入（XSS のリスクあり）に使います。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。