Vue.jsに入門してみた[JavaScript][Vue.js]
ちょっときっかけがあってVue.jsを初めてお勉強してみたので勉強メモ。 JS界隈、全体的に疎さがあるので、関連用語の説明も加えつつ書いてみます。
Vue.jsとは
Vue.js はインタラクティブな Web インターフェイスを作るためのライブラリ。 MVVMパターンのViewModelレイヤに注目していて、ViewとModelを双方向バインディングによって接続しています。
特徴
Vue.jsはざっと以下のような特徴があります。
公式ドキュメントも全て日本語化されていて、ありがたやといったところでした。 公式ドキュメントの物量としてもざっと読むだけなら全然1日かからないくらいだったので本当学習コストは低めだなぁと感じました。
MVVMパターンとは
MVVMパターンとは、Model／View／ViewModelの3つの責務にGUIアプリケーションを分割するパターンのことです。
その中でVue.jsはViewModelレイヤを担っていますよっていうところですね。
Vue.js公式からもってきている画像ですが、すごい関係がスッキリまとまっていて良いです。
双方向バインディングとは
双方向データバインディングとは、データの変更があったらUIの表示を更新し、UIの変更があったらデータの更新する、といった処理を自動的に行う機能を指します。
これができているとViewで表示される内容とModel内で処理されている内容が同期がとれて良いですね。
Vue.jsはこの双方向データバインディングをシンプルに行うことに重点を置いています。
インストール
インストール方法は公式ドキュメントにお任せしますmm
Vue.jsの提供する機能
Vue.jsとしてのまず押さえる必要のある機能は大まかには以下に並べるくらいです。
以下のサンプルに沿って必要知識をまとめようかと思います。
インスタンスプロパティ
基本中の基本としてはelとdataが挙げられます。
el
Vueインスタンスが管理する対象のDOM要素です。 View部分の担当です。
data
Vue インスタンスが監視しているデータオブジェクトです。 Model部分の担当です。
ざっくりとした図ですが、赤枠がel関連、青枠がdata関連です。
elで監視対象を指定して、その監視範囲に対してdataを用いてほげほげする感じですね。
このようにhtmlはあくまでフレームとして用いて、実データの方はjsの方に持たせるといった分担が綺麗にできるようになりスッキリしますね。
他にも何種類かインスタンスプロパティは用意されているのでご参考くださいmm
ディレクティブ
ディレクティブとは、DOM 要素に対して何かを実行することをライブラリに伝達する、マークアップ中の特別なトークンです。
Vue.jsを触るようになるとよくよく目にするようになります。
赤枠がディレクティブ、青枠がそのディレクティブが対象とするdata等が入ってきます。
青枠のところは用いるディレクティブによって色々変わってきます。
例えば、 v-onディレクティブはclick:から始まりますが、これはv-onディレクトリ固有のものになっていたりします。
APIリファレンスをよく読んで正しく使うようにしましょう。
ディレクティブは、大きく以下の4種類に分類されます。
- リアクティブディレクティブ
- リテラルディレクティブ
- エンプティディレクティブ
- カスタムディレクティブ
リアクティブディレクティブ
リアクティブディレクティブは、それ自身を Vue インスタンスのプロパティやインスタンスの文脈の中で評価される表現にバインドすることができます。 配下のプロパティや表現の値が変更されたら、それらのディレクティブの update() 関数が同期的に呼ばれます。
リテラルディレクティブ
リテラルディレクティブは、データバインディングを生成せず、単に文字列リテラルを属性値として取ります。 その要素の値を素の文字列として取り扱い、何ともバインドしようとしません。 このディレクティブが行うのは、文字列の値を bind() 関数に渡して実行することだけです。 リテラルディレクティブはその値の中で Mustache 表現を使用できますが、それらの表現は最初のコンパイルの際に一度だけ評価され、データの変更に対して反応しません。
エンプティディレクティブ
エンプティディレクティブは、属性値すら期待せず、単純にその要素に何かを一度きり行います。
このように色々なディレクティブがあるので、詳細は以下のAPIリファレンスをご参照の事。 恐らくこのリファレンスに頻繁にお世話になりながらコードを書いていく感じになるのかなと思います。
カスタムディレクティブ
カスタムディレクティブは、データの変更に伴い DOM がどのように変更されるかを定義することができる仕組みです。 有り物だけではちょっとつらいみたいな状態になった時に拡張出来る仕組みです。
Mustacheスタイルのバインディング
{{ }} これですw
mustache は口ひげの意で、{が口ひげっぽいかららしいですね。
mustache.jsというテンプレートエンジンと同様の構文ですね。
ざっくりいうと変数展開ができます。
フィルタ
フィルタは、本質的には「値を取り、加工し、加工した値を返す」関数です。マークアップ内ではパイプ(|)で表され 、一つ以上の引数を続けることができます。
View を更新する前の生の値を処理するために使われる関数です。
変数に対してある処理を行ってから反映をさせることができるようになります。
デフォルトでは以下のフィルタが用意されています。
- capitalize
- 先頭文字を大文字にする
- uppercase
- 全部大文字にする
- lowercase
- 全部小文字にする
- currency
- 引数に好きな通貨単位を取る(ex. $)
- pluralize
- 引数に取った値を複数表記にする(ex. item => items)
- json
- 引数にインデント幅を取ってjson表記にする
- key
v-onディレクティブとセットで使える- 「エンターキーが押されたとき」みたいなのを表現できる
- filterBy
v-repeatディレクティブとセットで使える- 引数にフィルタリング条件を取って元配列の内容をフィルタリング出来る
- orderBy
v-repeatディレクティブとセットで使える- 引数にソート条件を取って元配列の内容をソート出来る
カスタムフィルタ
コレ以外にもフィルタ欲しい...ってなった時にはカスタムフィルタを定義することも可能です。
Vue.filter('reverse', function (value) { return value.split('').reverse().join('') })
のような感じで定義可能です。
その他
他にも色々用意されてます！
本当に最小限といった形で入門記事を書いてみましたが、今回出した例の範疇を越えて行くと色々な機能も他にもあります。
あたりは今回は触れなかったので追々触れられたらいいな〜と思ってます。
でもこの辺りまでしっかり見ていったとしても、大して学習は時間はかからなさそうだなぁという感想なので、本当に軽めな良いフレームワークだなぁというのが所感です。
良い感じの例も公式で準備してくれてます:)
ここに置いてあるソースとかを眺めてみても勉強になるかなと思います！
基本は公式をみてれば良さそう
公式ドキュメントがしっかりしているので、公式ドキュメントと仲良くなればおおかた作っていけるかなぁという感触があります。
自分もしっかり読んで使っていこうと思います！
第一印象としてはすごく使い始めやすそうだなぁという感じだったので、引き続きちょっと触って行きたいと思います！
