Question 1

JavaScript における var と let の主な違いは何ですか?

Accepted Answer

根本的な違いは変数の scope にあります。let は block scope を持ち、let で宣言された変数はそれが定義されたブロック(波括弧の中)の中だけに存在します。var は function scope を持つため、変数がブロックの外からもアクセスできてしまい、予期しない動作を引き起こすことがあります。この scope の違いにより、hoisting や scope に関連するバグを避けるために let が推奨される選択肢となっています。

Question 2

JavaScript における Promise とは何ですか？

Accepted Answer

Promise は、非同期操作の最終的な完了または失敗を表すオブジェクトです。時間のかかる操作（HTTP リクエスト、ファイルの読み込み）を、コードの実行をブロックせずに扱うことができます。Promise には pending（待機中）、fulfilled（正常に解決）、rejected（エラーで失敗）の 3 つの状態があります。

Question 3

Vue インスタンスとは何ですか？

Accepted Answer

Vue インスタンスとは、createApp() を呼び出して作成される、アプリケーションを表すオブジェクトです。このルートオブジェクトには、すべてのリアクティブなデータ、メソッド、設定オプションが含まれます。アプリケーションを DOM 要素にマウントし、Vue のリアクティビティシステムを初期化するためのエントリーポイントとして機能します。

Question 4

Vue コンポーネントとは何ですか？

Accepted Answer

Vue コンポーネントは、名前を持つ再利用可能な Vue インスタンスです。HTML、CSS、JavaScript を独立した論理単位にカプセル化します。コンポーネントを使うことで、ユーザーインターフェースを再利用可能で保守しやすい部品に分割できます。各コンポーネントは独自の template、ロジック、スタイルを持ち、コードの整理と再利用性を促進します。

Question 5

Nuxt 3 アプリケーションに必要な最小構成は何ですか？

Accepted Answer

Nuxt 3 アプリケーションは、プロジェクトのルートに app.vue ファイルまたは pages/ ディレクトリのみを必要とします。pages/ フォルダーなしで app.vue が存在する場合、Nuxt は Vue Router なしのアプリケーションを作成します。pages/ が存在する場合、Nuxt は file-based routing を自動的に有効にし、ルートを表示するために app.vue 内に <NuxtPage /> が必要です。

Question 6

Nuxt における useFetch と useAsyncData の主な違いは何ですか？

Accepted Answer

useFetch は useAsyncData と $fetch をラップしたもので、一般的な API 呼び出しを簡略化します。URL の構築を自動的に処理し、第一引数として URL を直接受け取れます。一方 useAsyncData は一意のキーとカスタムの fetcher 関数を必要とします。シンプルな API 呼び出しには useFetch を、複雑なフェッチングロジックには useAsyncData を使用します。

Question 7

Nuxt における Server-Side Rendering（SSR）とは何ですか？

Accepted Answer

SSR はリクエストごとにサーバー上で完全な HTML を生成し、それをクライアントに送信します。検索エンジンがすぐにアクセス可能な HTML コンテンツを受け取るため SEO が向上し、また first paint までの時間も改善されます。SSR は Nuxt 3 のデフォルトのレンダリングモードであり、JavaScript がブラウザ内でコンテンツを生成するクライアントサイドレンダリングとは異なります。

Question 8

Vue における Virtual DOM とは何ですか？

Accepted Answer

Virtual DOM は、実際の DOM ツリーの軽量な JavaScript 表現です。Vue は Virtual DOM を使用して、パフォーマンス面でコストの高い直接的な DOM 操作を最小限に抑えます。状態が変化すると、Vue は新しい Virtual DOM を作成し、それを古いものと比較し（差分アルゴリズム）、その後実際の DOM に必要な変更だけを適用します。このアプローチは DOM 操作の回数を大幅に削減し、特に更新が多い複雑なアプリケーションでパフォーマンスを向上させます。

Question 9

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

Accepted Answer

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

Question 10

Vue 3でTypeScriptを使う際、defineComponentの主な役割は何ですか？

Accepted Answer

defineComponentはコンポーネントオプションに対するTypeScriptのtype inferenceを有効にします。この関数がないと、Options APIではthisコンテキストがanyとして扱われてしまいます。これによりprops、data、computed、メソッドが自動的に正しく型付けされることが保証されます。

Vue.js / Nuxt.js面接の質問

Vue.js / Nuxt.jsの面接準備はできていますか？

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 の高度なパターン

VueでのTypeScript

Nuxt認証

Nuxt での SEO

Nuxt の国際化

Vue アーキテクチャ

Nuxt セキュリティ

Vue エコシステム

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

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