Question 1

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

Accepted Answer

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

Question 2

script setup を使った Vue 3 コンポーネントで props を宣言するにはどうすればよいですか？

Accepted Answer

script setup を使った Vue 3 では、defineProps() は明示的な import なしで props を宣言できるコンパイラマクロです。このマクロは必要なコードを自動的に生成し、props を template に公開します。TypeScript と JavaScript の型検証をサポートしており、Options API のアプローチよりもコードを簡潔で型安全にします。

Question 3

コンポーネントのライフサイクルにおける onMounted() フックの役割は何ですか？

Accepted Answer

onMounted() フックは、コンポーネントが DOM にマウントされた後に実行されます。サードパーティライブラリの初期化、API によるデータの取得、DOM 要素の直接操作など、DOM へのアクセスを必要とする処理を行うのに最適なタイミングです。この段階では template がレンダリングされ、refs にアクセスできます。

Vue コンポーネント