ウェブエンジニア問題集

Vue.js基礎・実践 問題集

Vue 2/3の基本概念、Options/Composition API、ディレクティブ、ライフサイクルに関する問題です。

32 ・ 11 タグ

Vue.js基礎・実践 ランダムクイズ

問題数を選んでランダムに出題

Vue.js基礎・実践の問題一覧

すべてcssflexboxjavascriptv-bindv-ifv-modelv-showv-slotVuetifyエラー基礎

該当件数32

1

「v-if」と「v-show」の決定的な違いは?

#v-if#v-show
2

テキスト補間(Interpolation)に使用される構文は?

3

Vue 3のComposition APIにおいて、コンポーネントのロジックを記述するエントリーポイントとなる関数は?

4

Vue 3でプリミティブな値(数値や文字列)をリアクティブにするために推奨される関数はどれか?

#javascript
5

DOM要素にアクセス可能になるライフサイクルフックは?

6

算出プロパティ(computed)とメソッド(methods)の主な違いは?

7

v-forディレクティブを使用する際、必須で指定すべき属性は?

8

イベントの伝播(バブリング)を止めるためのイベント修飾子は?

9

フォーム入力とデータを双方向バインディングするためのディレクティブは?

#v-bind#v-model
10

Vue 3で導入された、コンポーネントが複数のルートノードを持つことができる機能は?

11

親コンポーネントから子コンポーネントへデータを受け渡す仕組みは?

12

コンポーネントのHTMLを、DOMツリーの別の場所(body直下など)にレンダリングするVue 3の機能は?

13

Vue 2の「destroyed」ライフサイクルは、Vue 3で何という名前に変更されたか?

14

Vueの公式状態管理ライブラリとして、Vuexの後継として推奨されているものは?

15

データの変更後、DOMの更新が完了するのを待ってから処理を実行するメソッドは?

16

コンポーネント内のCSSをそのコンポーネントだけに適用させるための属性は?

17

Vue Routerにおいて、ページ遷移のためのリンクを作成するコンポーネントは?

18

Vue 3において、特定のデータの変更を監視する「watch」と、依存関係を自動収集する「watchEffect」の違いは?

19

Options APIと比較した際のComposition APIの主なメリットは?

20

Cannot read properties of undefined (reading 'xxx') をVueで頻繁に見る場合

#エラー
21

Vuetifyアプリケーションを正しく動作させるために、テンプレートの一番外側(ルート)に配置しなければならない必須コンポーネントは?

#Vuetify
22

Vuetifyのグリッドシステム(v-row, v-col)において、画面の横幅全体は何分割のカラムとして扱われるか?

#Vuetify
23

マージンやパディングを設定するユーティリティクラス「ma-4」において、「a」が意味する方向は?

#Vuetify
24

Vue.jsで要素を表示・非表示にする際、条件が false の場合に要素をDOMから完全に削除するディレクティブはどれか?

#v-if#v-show#v-bind#v-model
25

<input> 要素などで、データの「表示」と「入力による更新」を自動的に同期させる(双方向バインディングを行う)ディレクティブは?

#v-bind#v-model
26

Vue.jsにおいて、v-bind ディレクティブを使って src 属性に動的な値を設定する記述 v-bind:src="imageSrc" を、省略記法(シンタックスシュガー)を使って書き換えたものはどれですか?

#v-bind
27

Vue.jsのコード例や慣例において、new Vue({...}) で作成したインスタンスを格納する変数名としてよく使われる vm は、何の略称ですか?

28

Vueのコンポーネントにおいて、data オプションを単なるオブジェクトではなく、関数(オブジェクトを返す関数) として定義しなければならない主な理由はどれですか?

#基礎
29

Vue.jsで v-bind ディレクティブを使用する際、「v-bind' directives require an attribute value」エラーが発生する原因として最も適切なものはどれですか?

#エラー#v-bind
30

Vuetifyコンポーネントにおける v-slot の主な役割として正しいものはどれか?

#Vuetify#v-slot
31

Vue.jsにおいて、リアクティブなデータ(例:`isVisible = true`)を変更し、新しく表示されたDOM要素(`<input>`など)に対して即座にフォーカスを当てたいと考えています。このとき、意図した通りに動作する実装方針とその理由として正しいものはどれですか?

#javascript
32

Vuetify 3 で次のような横並びレイアウトを作っています。子要素同士の間に均等な余白を空けたいとき、最も適切なクラスはどれですか? <div class='d-flex ___'> <v-btn>A</v-btn> <v-btn>B</v-btn> <v-btn>C</v-btn> </div>

#Vuetify#css#flexbox

Vue.js基礎・実践とは

Vue.jsは、Evan You氏が開発したプログレッシブJavaScriptフレームワークです。段階的に導入できる設計思想が特徴で、小規模なプロジェクトから大規模なSPA(Single Page Application)まで幅広く対応できます。Vue 3ではComposition APIが導入され、TypeScriptとの親和性やロジックの再利用性が大幅に向上しました。

なぜVue.js基礎・実践を学ぶべきか

Vue.jsは学習コストが低く、公式ドキュメントが充実しており、日本語ドキュメントも整備されています。日本の開発現場でも採用事例が多く、特にスタートアップや中小規模のプロジェクトで人気があります。ReactやAngularと並ぶ三大フレームワークの一つとして、求人市場でも需要があります。

出題トピック

Options API と Composition API

Vue 2のOptions APIとVue 3のComposition API(setup関数、ref、reactive等)の違いと使い分けを出題します。

テンプレート構文とディレクティブ

v-bind、v-model、v-if/v-show、v-for、v-onなどのディレクティブとテンプレート構文について扱います。

コンポーネント設計

props、emit、slot、provide/injectを使ったコンポーネント間のデータ受け渡しパターンを問います。

リアクティブシステム

Vueのリアクティブシステムの仕組み、computed、watch、watchEffectの使い分けについて学びます。

こんな方におすすめ

  • フロントエンド開発をこれから学び始める方
  • Vue 2からVue 3への移行を検討しているエンジニア
  • Composition APIの使い方を習得したい方
  • NuxtやVuetifyなどのVueエコシステムを活用したい方

Vue.js基礎・実践に関するよくある質問

Vue 2とVue 3のどちらを学ぶべきですか?
新規プロジェクトではVue 3が推奨されています。Vue 2は2023年末にサポートが終了したため、これから学ぶ方はVue 3のComposition APIを中心に学習しましょう。ただし、既存プロジェクトの保守のためにOptions APIの理解も重要です。
NuxtとVue CLIの違いは何ですか?
Vue CLIはVue.jsのSPAを構築するためのツールです。NuxtはVue.jsベースのフルスタックフレームワークで、SSR(サーバーサイドレンダリング)、SSG(静的サイト生成)、ファイルベースルーティングなどの機能を提供します。SEOが重要なサイトにはNuxtが適しています。
Vue.jsでの状態管理はどうすればよいですか?
小〜中規模ではComposition APIのcomposablesやprovide/injectで十分対応できます。大規模アプリケーションではPinia(Vue公式推奨の状態管理ライブラリ)を利用するのがベストプラクティスです。

関連する問題集