Vue.js v3
Vue.jsとは?
Vue.jsはUIを構築するためのプログレッシブフレームワークである。 プログレッシブフレームワークとは、Evan Youが提唱した、あらゆる規模や段階のWebアプリに対応できるフレームワークの考え方を指す。 Vue.jsを使うと開発効率が向上し、重複した記述を減らせる。また、他のフレームワークより独自の規則が少なく、自由度が高い。
特徴と利点
Vue.jsの主な特徴と利点について説明する。
Directive
DirectiveはVue.js固有の属性であるv-*を使い、それによってDOM操作を行える仕組みである。
これによりDOM操作の記述を減らせるため、開発速度が向上する。
双方向データバインディング
双方向データバインディングとは、JavaScriptデータとViewの両方向を監視し、常に同期する機能である。 つまり、データが変更されればViewを更新し、Viewが変更されればデータを更新する機能である。
コンポーネント
コンポーネントは、アプリケーションのさまざまな機能を役割ごとに分割したものである。 コンポーネントとして部品化することで、再利用性やデザインの一貫性が高まり、開発や保守も効率的に行える。
拡張性
Vue.jsはシンプルな設計で、非常に拡張しやすいフレームワークである。 他のライブラリと組み合わせることができ、段階的に規模を拡大することも可能なため、さまざまな規模の開発で利用できる。
SPA(Single Page Application)
Vue.jsはSPAの開発がしやすい。 SPAとは、ページ遷移なしに単一ページ内でコンテンツが切り替わるアプリケーションである。
学習コスト
Vue.jsはシンプルに設計されているため、他のフレームワークより学習コストが低い。 また、フレームワークとして人気が高いため、技術情報も多い。
ディレクティブ(Directive)
HTMLタグ内でv-プレフィックスを持つすべての属性を意味する。
主なディレクティブ
| ディレクティブ名 | 役割 |
|---|---|
v-if |
指定したビューのデータ値が真か偽かに応じて、該当するHTMLタグを画面に表示したり非表示にしたりする。 |
v-for |
指定したビューのデータ数だけ、該当するHTMLタグを繰り返し出力する。 |
v-show |
v-ifと同様に、データの真偽に応じて該当するHTMLタグを画面に表示したり非表示にしたりする。ただし、 v-ifは該当タグを完全に削除するが、v-showはCSS効果としてdisplay:none;を与えるだけなので、実際のタグは残り、画面上でのみ見えなくなる。 |
v-bind |
HTMLタグの基本属性とVueのデータ属性を結び付ける。 |
v-on |
画面要素のイベントを検知して処理するときに使う。たとえばv-on:clickは、そのタグのクリックイベントを検知して特定のメソッドを実行できる。 |
v-model |
主にフォームで使われる属性である。フォームに入力した値をVueインスタンスのデータと即時に同期する。画面に入力された値を保存してサーバーへ送ったり、watchのような高度な属性を使って追加ロジックを実行したりできる。<input>、<select>、<textarea>タグでのみ使用できる。 |
created vs mounted
created
インスタンスが作成された後に同期的に呼び出される。この段階で、インスタンスはデータ処理、算出プロパティ、メソッド、監視、イベントコールバックなどのオプション処理を完了している。しかし、マウントは開始されていないため、$elプロパティはまだ使用できない。
mounted
elが新しく作成されたvm.$elに置き換えられ、インスタンスがマウントされた直後に呼び出される。ルートインスタンスがドキュメント内の要素にマウントされている場合、mountedが呼び出される時点でvm.$elもドキュメント内に存在する。