Vue.jsをはじめよう・その1

今回から何回かに分けて、「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!」しましょう。

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

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

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

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

↓当サイトのドメインは以下で取得しました。

コメントを残す