今回のブログのテーマはVue.jsについて扱おうと思います。とは言っても、ごくごく基本の触りの部分で、それでも知っておくべき内容は結構たくさんあるので、3回に分けて記事にしていきます。 後、ver1とver2では結構変更点があるので、今回は両方に共通することを中心に扱います。 # 1. Vue.jsとは何か Vue.jsとは何かというと、一言で言うと「Javascriptによる処理とhtmlの表示部とのやりとりをスムーズに行うようにするためのフレームワーク」です。もう少し具体的に言うと、JavaScriptによるMVVM(Model-View-ViewModel)を実現するフレームワークといったところです。 MVVMは何かと言いますと、サーバーサイドのMVC(Model-View-Controller)に考え方としては近いかもしれません。ただ、MVVMでは画面(View)かデータ(Model)のどちらかが更新されるともう一方も自動的に更新されるようになります。この部分がViewModelになります。 # 2. Vue.jsのインストール 次に、どうやってVue.jsを使うかですが、方法は主に以下の3つあります。 ## 2.1 パッケージマネージャを使ってインストール 　npmとかBowerといったパッケージマネージャを使ってインストールします。自分はnpmしか使ったことがないので、npmの場合について簡単に説明すると、 ``` npn install vue ``` を実行するとインストールされます。 ## 2.2 ファイルをダウンロード 　例えばver2なら、[こちら](https://npmcdn.com/vue/dist/vue.min.js)からファイルをダウンロードできるので、ダウンロードしたファイルを適切な場所において、そのファイルを↓のようにscriptタグで読み込むと使えるようになります。 ``` <script src="vue.min.js"></script> ``` 開発中は開発バージョンを、実運用のときは本番バージョンを使用してください。 ## 2.3 CDN(Content Delivery Network)をリンクする 　scriptタグのsrc要素にネットワーク上のvue.jsのソースコードをリンクして読み込む方法です。一番手っ取り早いやり方ではありますが、ネットにつながっていないと動作しないという欠点があります。 ``` <script src="https://unpkg.com/vue/dist/vue.min.js"></script> ``` これで最新バージョンを使うことができます。 # 3. 簡単な例 ここまで来たら、Vue.jsを使った一番簡単なサンプルを紹介しようと思います。 html ``` <div id="app1"> {{ message }} </div> ``` js ```JavaScript var app1 = new Vue({ el:'#app1', data: { message: 'Hello Vue World!' } }); ``` これでブラウザに"Hello Vue World!"と表示されていればVue.jsが使えているということになります。 # 4. Vueオブジェクト 先程の例で出てきたnew Vue()で生成したVueオブジェクトがVue.jsの基本的なものになります。 Vueオブジェクトの登場人物はたくさんいるのですが、とりあえず絶対必要なのは上にも出てきているelとdataです。 ここでは比較的よく使うものをざくっと紹介してみます。 **el** : Vue.jsの適用対象を指定するプロパティ。例えば、el:'#msg'などと指定するとid=msgのタグ内で効力を持つようになる。 **data** : html側に渡す値。json形式で記述される。 **methods** : html側で使われるメソッド。 **created** : Vueオブジェクトが生成されてすぐ実行される処理。 **computed** : メソッドで計算された結果を使えるようにするプロパティ。 **watch** : あるデータに変更が生じたときに処理が発動するようにするもの。 # 5. テンプレート構文 次はhtml側での記述の仕方についてさらっと説明してみます。 一番基本的な書き方は**Mustashe記法**です。Mustashe記法とは、{{ }}で中身を囲う、Mustasheというテンプレートエンジンで使われる書き方です。 これを使うことで中身をVue.jsの値に置き換える事ができます。 ``` {{ message }} ``` と記述することで、Vueオブジェクトのdataのmessageの値が表示されます。 なお、この中ではJavaScriptのメソッドなどを使うこともできます。例えば、 ``` {{ message.substr(2,4) }} ``` とすると、messageの3文字目から6文字目までが表示されます。 他にも、フィルターという機能があって、これによって値に少し加工して表示することもできます。 例えば、uppercaseというフィルターを使うには以下のようにします。 ``` {{ message | uppercase }} ``` という書き方をすると、単語の全ての文字を大文字にして表示されます。 フィルターには他にも色々あるので、興味のある方は調べてみてください。 Mustashe記法の他にも、v-textタグを使う方法もあります。 ``` <div v-text="message"></div> ``` Mustashe記法やv-textではテキストの内容そのまま表示されますが、htmlとして展開したいときはv-htmlを使います。 ``` <div v-html="html_data"></div> ``` とすると、divの中にhtml_dataがhtmlとして表示されます。 ただ、言うまでもないですが、これを使うときは[XSS](https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%AD%E3%82%B9%E3%82%B5%E3%82%A4%E3%83%88%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0)に気をつけて、安全に使うようにしてください。 # 終わりに（簡単なまとめ） 今回書いたのはごくごく基本的な部分だけなので、これだけだとVue.jsを使うことで何が嬉しいのかわかりにくいと思うので、次回はもう少し掘り下げていこうと思います。 具体的にはv-on、v-model、v-bind、v-if、v-forあたりと、何か１つ簡単なちょっとした応用例、それと出来ればpropsとかコンポーネントあたりまでというところですかね。 Vue.jsの詳細な情報は[公式サイト](https://jp.vuejs.org/)がわかりやすいので、何かわからないことがあったらまずはそちらに当たるといいでしょう。