今回から何回かに分けて、「Vue.js」を取り上げます。
Vue.js
昨今、群雄割拠で情報が溢れかえっているJavaScriptフレームワークのひとつです。
JavaScript界隈だと他にAngular (from Google)とかReact (Facebook)などが有名ですが、Vue.jsも最近一気に注目されるようになりました。
「結局何が違うんよ？」というせっかちな方のために結論から言います。
とにかく既存のアプリに組み込み易いんです。
私が2003年から運用しているGo to Everyone!についても、今年に入って徐々に適用しています。
HTML・CSS→jQuery（Ajax）導入→PHPに移行→Sass・Vue.js導入といった流れで今に至ります。
で、この際jQueryからの移行がかなりスムーズに進められました。
先に挙げたようなJavaScriptフレームワークだと、基本的に「フロントの描画は俺らに任せろ！」というスタンスです。
新規開発だと「フロントはJavaScriptフレームワーク」「サーバサイドはAPI」という分業で開発しやすいとは思います。
ただ、既存のサーバサイドでビューを処理するようなシステムだと、フロントはjQueryのようにちょっとイベントを付与したいだけの場合が多いので、かえってコストが高いです。
…そこでVue.jsの出番ですよ！！！
既存のDOMの中で、特定のイベントを発生させたい・状態を管理したい・いくつかのイベントを紐づけたいケースは多いですが、jQueryだとちょっと入り組んでくると途端に影響が読めなくなります。
昨今のJavaScriptフレームワークは、「コンポーネント」という小さな塊に分割することで、閉じたスコープで状態を管理することができます。
もちろん、親（または子）へのイベントの伝播も可能ですので、コンポーネント間の連携も問題ありません。
細かいコードは次回以降にするとして、今回は簡単に「Hello world!」しましょう。
Test
Hello
new Vue({
data: {
message: 'World!',
},
}).$mount('#app');
以上です。
説明するほどコードが無いのですが(笑)、簡単に触れます。
`script`タグでVue.jsのライブラリを読み込む`new Vue()`でインスタンス生成`data`の内部で変数を宣言`$mount`でマウント対象要素をセレクタで定義`v-text`で指定した変数を出力
ちなみに、変数の内容を出力するのは{{message}}でも可能ですが（他フレームワークにも同等の機能がありますね）、これだとページ表示時に一瞬{{message}}という文字が見えてしまうので、v-textで指定しています。
他フレームワークだとマウントした要素の下はすべて書き換えてしまうケースが多く、これが既存DOMと共存しにくいと感じていたので、Vueのこの仕組みはありがたいです。
次回はトランスパイル（webpack、babel）とvueファイルを利用したコンポーネントについて触れます。