vue.js + webpack の紹介(その1) #Vue.js

最近少しずつvue.jsを触っています。vue.js + webpack という組み合わせが個人的に好きなので、会社を休んだ償いに紹介します。
しっかり作るならAngularJS + TypeScript, 適当に作るならvue.js + webpackというのが、悪くない選択肢なのではと思っています。

vue.jsはどんなもの？

Angularさんで言う、Directiveの作成に特化したライブラリです(たぶん)。
<span v-show=“isMobileDevice”>みたいなオレオレ属性や、<im-sp-tag></im-sp-tag>のようなオレオレタグが簡単に作れます。むしろ、それだけの機能しかありません(*)。Angularさんでは、属性とタグ、どちらもDirectiveと呼びますが、vue.jsでは、

属性 => Directive
タグ => Component

と別々の名前が付けられています。
AngularさんのDirectiveが無駄に取っ付きにくい原因の1つが、Directiveという名前に複数の概念を押し込んだことだと思うので、ここは素晴らしい改善だと思います。名前が違うので、それぞれの役割も明確に分かれています。

*属性とタグの他に、filter機能もあるのですが、簡潔に紹介するために省略します。

Directive(属性)の役割

各タグに共通(*)の超汎用的機能？を提供することです。

例1: “v-repeat”: <li v-repeat="user : users">
例2: “v-on”: <a v-on="click: showMessage>Click Me!</a>

vue.jsにバンドルされているDirective以外にも、”v-t”(i18n用)や、”v-touch”(touch対応)などがpluginとして開発されています。バンドルされているDirectiveの一覧です。=> http://vuejs.org/api/directives.html

*特定のタグにしか使えないDirectiveもあります。input系専用の"v-model"など。

Component(タグ)の役割

カスタムビューを作ることです。Componentを使うことで、あれほど醜かったindex.htmlも

index.html

<body>
  <im-header></im-header>               <!-- Componentその1 -->
  <im-top-contents></im-top-contents>   <!-- Componentその2 -->
  <im-footer></im-footer>               <!-- Componentその3 -->
</body>

と書けます。なんということでしょう。
更に、Componentは入れ子にできるので、

index.html

<body>
  <im-top-view></im-top-view>   <!-- Componentその1,2,3を中に持っている -->
</body>

とすることもできます。なお、様々な理由で、

index.html

<body>
  <div v-component="im-top-view"></div>
</body>

と書くことも多いみたいです。

まとめ

日本語の資料も徐々に増えてきましたし、何より見通しの良いライブラリになっているので、是非触ってみてください。なお、Angularさんとは違いフルスタックではないので、Router機能やサーバとの通信には、別のライブラリと連携する必要があります。以下参考リンクなどです。その2で、vue.jsとwebpackの連携について書きます。=> 書きました

http://qiita.com/icoxfog417/items/49f7301be502bc2ad897 (はじめてのvue.jsとしておすすめです)
http://vuejs.org/examples/ (公式のサンプル。コードも見られます)
http://vuejs.org/guide/application.html (大きなアプリを作りたくなったら)