今回から何回かに分けて、「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');
    

以上です。
説明するほどコードが無いのですが(笑)、簡単に触れます。

  1. `script`タグでVue.jsのライブラリを読み込む
  2. `new Vue()`でインスタンス生成
  3. `data`の内部で変数を宣言
  4. `$mount`でマウント対象要素をセレクタで定義
  5. `v-text`で指定した変数を出力

ちなみに、変数の内容を出力するのは{{message}}でも可能ですが(他フレームワークにも同等の機能がありますね)、これだとページ表示時に一瞬{{message}}という文字が見えてしまうので、v-textで指定しています。
他フレームワークだとマウントした要素の下はすべて書き換えてしまうケースが多く、これが既存DOMと共存しにくいと感じていたので、Vueのこの仕組みはありがたいです。

次回はトランスパイル(webpack、babel)とvueファイルを利用したコンポーネントについて触れます。