こんにちは！ぬぁるです。
今回のこの記事では、javascriptのフレームワークである「vue.js」の用語について説明していこうと思います。
他のjsフレームワークと比較して学習コストが低いということで、最近学習を始めたのですが、そうは言っても、少し理解しにくいところもあって、現在進行形で試行錯誤しながら進めています。
そんな中で自分なりにvue.jsの用語が理解できてきたので、自らの知識定着も図りつつ、わかりやすく説明できたらと思います！
Vue.jsの基本的な用語は知ってるけど、まだいまいちよく分かっていない部分もあるというような方は1度目を通してみてください！
ディレクティブ
「v-」で始まる、vue.js特有の記述。htmlタグの属性と同じように記述する。
公式曰く、「DOM 要素に対して何かを実行することをライブラリに伝達する、マークアップ中の特別なトークン」
主にデータバインディングに利用される。
カスタムディレクティブ
自分でディレクティブを作成・利用できる機能。
カスタムタグ
Vueコンポーネントで定義したコンポーネントを、html内で利用するとき、定義時に指定した名称のタグを使う。これをカスタムタグと呼んでいる。
Vueインスタンス
ルートのVueインスタンス
こいつを任意のdiv要素とかにマウントしておくことで、そのdiv内でVueアプリケーションを構築することができる。
そしてこのルートのVueインスタンスの中で、コンポーネントを構成し、Webページを作っていくイメージ。
※サンプルコード等でルートのVueインスタンスを変数に代入している場合があるが、この理由は変数化しておくことでコンソールからアクセスでき、デバッグで利用できるからであり、必須ではない。
コンポーネント
コンポーネントの制約条件
コンポーネントには以下の2つの制約がある
- dataは関数でなければならない
- ルート要素は単一でなければならない
単一ファイルコンポーネント
「.vue」拡張子のファイルにjs, html, cssすべてを書いてしまう構造のコンポーネント。
vue独自のフォーマットで構成されており、プリコンパイルしないと利用できないためビルド環境が必要。
テンプレート
vue.jsでDOMを構築する方法。
htmlベースで記述し、コンポーネントとして利用可能。
Vue CLI
Vue.jsを使ったアプリケーション開発を支援するための、コマンドラインインターフェース。
これを利用することで、ツールやライブラリといったアプリケーション開発に必要な開発環境を簡単に構築できる。
Vue.jsでは、保守性を向上させる手段として単一ファイルコンポーネントを採用している。
これらを合体することで、ページを構成したりするのだが、この単一ファイルコンポーネントは、独自のフォーマットを持っていて、単純に結合するだけではブラウザで配信することができない。
これらのモジュール化されたファイルを特別な方法で結合するのが「webpack」を代表とするバンドルツールとなる。
このwebpackを使った開発環境の構築は複雑で大変。そこを手助けするのがこの「Vue CLI」である。
Vuex
データとその状態に関するすべてを一元管理する「状態管理」のための拡張ライブラリ。
深くネストされたコンポーネントの構造でデータを共有するためには、propsと$emitを繰り返してバケツリレーのようにデータを渡していく必要があり、これは手間でかつデータ間の整合性が保ちにくい。
これを解消できるのがVuex。
最後に
まだまだ勉強中の身ですので、随時更新していきたいと思います！
