Question 1

Vue 3 における provide/inject の主な目的は何ですか？

Accepted Answer

provide/inject を使うと、親コンポーネントから任意の子孫コンポーネントへ、中間のすべての階層で props を渡すことなくデータを渡せます。これにより、それを必要としない複数のコンポーネント階層を通して props を渡さなければならない「props drilling」を回避できます。テーマ設定や認証状態といったグローバルなデータを共有する場合に特に便利です。

Question 2

Composition API を使うコンポーネントで provide を使って値を宣言するにはどうしますか？

Accepted Answer

Composition API では、provide 関数を 2 つの引数で使用します。キー（string または Symbol）と提供する値です。たとえば setup 内で使います。この値は inject を通じて子孫コンポーネントからアクセスできます。キーに Symbol を使うと一意性が保証され、名前の衝突を避けられます。

Question 3

Vue 3 における Teleport ディレクティブの主な機能は何ですか？

Accepted Answer

Teleport を使うと、コンポーネントのコンテンツを Vue のコンポーネントツリー上の位置とは異なる DOM ノードにレンダリングできます。一般的に、z-index や CSS のポジショニングの問題を避けるためにドキュメントのルートにレンダリングする必要があるモーダル、ツールチップ、通知などに使われます。コンポーネントは Vue のコンテキストを保持し、親のデータにアクセスできます。

Vue の高度なパターン

Vue 3 における provide/inject の主な目的は何ですか？

回答

Composition API を使うコンポーネントで provide を使って値を宣言するにはどうしますか？

回答

Vue 3 における Teleport ディレクティブの主な機能は何ですか？

回答

Vue 3 で Teleport を使うために必須の属性はどれですか？

Vue におけるカスタムディレクティブ（custom directive）とは何ですか？

その他のVue.js / Nuxt.js面接トピック

JavaScript の基礎

モダンな JavaScript (ES6+)

Vue の基礎

Vue コンポーネント

Vue Router

Pinia State Management

Vuex (Legacy)

Composition API

Vue のリアクティビティ

Nuxt の基礎

Nuxt のデータフェッチング

Nuxt の SSR と SSG

Nuxt サーバールート

Nuxt モジュール

Vue のコンポーザブル

Vue フォームとバリデーション

Nuxt の状態管理

Vue のテスト

Nuxt のデプロイと CI/CD

Vue のパフォーマンス

VueでのTypeScript

Nuxt認証

Nuxt での SEO

Nuxt の国際化

Vue アーキテクチャ

Nuxt セキュリティ

Vue エコシステム

Vue 2→3 & Nuxt 2→3 の移行

次の面接に向けてVue.js / Nuxt.jsをマスター