- [@nakajmg](https://twitter.com/nakajmg)（じまぐ）
- [株式会社ピクセルグリッド](https://www.pxgrid.com/)
- フロントエンド・エンジニア
---
どうもはじめまして、じまぐです。ピクセルグリッドという会社からやってまいりました。
フロントエンド・エンジニアという肩書きで、JavaScriptを書いて生計をたてています。
nakajmgというidで活動しています。
# はなします
- Vue.jsについて
- プログレッシブ・フレームワーク
- ライブラリ/ツール紹介
---
今日はとにかくJavaScriptフレームワークのVue.jsについて話します。
# Vue.jsとは
- Viewに特化
- コンポーネントシステム
- リアクティブなレンダリング
---
まずはじめに、Vue.jsの特徴について軽くふれておきます。
Vue.jsはUIを組み立てるようなViewの部分に特化したライブラリです。
アプリケーションをコンポーネントの単位でわけて定義して、そのコンポーネントを組み合わせることでアプリケーションが作れます。
Vue.jsはデータの変更に合わせて、表示も更新されるような、リアクティブなレンダリング機能を持っています。これによってデータの変更を監視して、表示を更新する、みたいなめんどくさい処理を書く必要がありません。
# 💓Vue.jsのいいところ
---
さて、それではここから、ひたすらVue.jsのいいところを紹介していきますので、おつきあいください。
# 💓とにかくシンプル
- 🔰 APIが理解しやすい
- 😆 直感的に書ける（__気持ちいい__）
- ✨ コードがきれいな状態を保ちやすい ✨
---
まずVue.jsはとにかくシンプルです。APIが理解しやすくて直感的に書けるんですね。
直感的に使えるフレームワークって使っててなんか気持ちいいですよね。
記述がシンプルなので、自然とコードが綺麗な状態っていうのが保てるようになります。
自分や他人が書いたコードが、あとから読んだときに理解しやすい状態にしておけるってのは大事ですよね。
[demo/hello](./demo/hello/index.html)
---
このデモは、Vue.jsの解説とかでよくでてくるデータバインディングのデモです。
インプットの要素と、その内容を出力する要素の２つがあります。
インプットボックスを編集すると、出力のほうも同時に変わります。
```html
```
---
このコードが、今のデモのコードです。この十数行でさっきのようなリアクティブな処理が実装できちゃいます。
このコードなんか目を通したら何が何をやっているか、なんとなく理解できちゃう気がしませんか？
それって正にVue.jsのシンプルさとわかりやすさを表していて、ちょっとの学習ですぐにだれでも使えるようなフレームワークなのかなと思ってます。
## 💓覚えやすく便利
- 宣言的なテンプレート
- リアクティブなレンダリング
- 純粋なJavaScriptオブジェクトモデル
---
さっきのコードのように、テンプレートの部分をあらかじめ宣言しておきます。
そしてデータの追加や更新をもとに、リアクティブなレンダリングをしてくれます。
Vue.jsって純粋なJavaScriptのオブジェクトモデルで書ける、っていうのもわかりやすさ、覚えやすさのひとつです。
## 学習コストは低いほうがいい
ときとして軽視されがちだが、走る前の/走ってる
プロジェクトにアサインされる人の負担が小さいことに越したことはない
---
学習コストは低いほうがいい、って何を当たり前のことを言ってるんだ、という感じですが
たまーにこの学習コストを軽視するマッチョな人がいたりするんですよね。
プロジェクトとかに関わる人たちの負担って小さいほうがいいですよね。
## 少ない学習で大きなパワー💪
---
Vue.jsはフレームワークの中でもかなり学習コストが低い方です。jQueryが書けるくらいのJS力があれば、Vue.js使い始めるのは難しくないと思います。
すごい簡単に使えるんですが、それでも他のフレームワークに比べて劣ってる、というわけではないんです。
# 💓軽くて速い
参考：[ほかのフレームワークとの比較](https://vuejs.org/v2/guide/comparison.html)
---
Vue.js、軽くて速いんです。
# 軽い
Name | Size (min+gzip)
-------------------------- | -------------
Vue 2.0 | **23kb**
React 15.3.0 + React DOM | 43kb
Angular 1.4.5 | 51kb
Angular 2 | 111kb
Angular 2 + Rx | **143kb**
Restuta/framework-sizes.md , Vue 2.0 is Here!#Perfomance--- この表はVueとReactとAngularのファイルサイズを比較したものです。この数値はminifyととgzip圧縮を書けた数値です。 どうでしょう、Vue.js軽いですよね。 # 速い 
Vue 2.0 is Here!#Perfomance , Results for js web frameworks benchmark--- 軽いだけじゃなくて、速いんです。 このグラフは、レンダリングのベンチマークのスコアを比較したもので、数値が低いほどパフォーマンスが優れていることを示しています。グラフを見るとAngularよりもReactよりも速い、という結果がでています。 # 強い --- 軽くて速いって、それだけでも結構強くないですか？ ## 本当に強いの❓ 🤔「他のフレームワークより軽くて速いのはわかった けどAngularとVueじゃ対処できる領域の広さが違うぞ。Vue.jsは同じ土俵に立てるの？」 --- でもVue.jsが軽くて速いのってViewの部分に特化したライブラリだからであって、Angularみたいなフルスタックなフレームワークと比較するのってなんかフェアじゃないような印象もありますよね。 これはまぁその通りという感じで、Vue.jsだけだとAngularが解決できるような領域っていうのは解決できないです。アプリケーションの規模っていうのが大きくなるとVue.jsだけでは立ち向かえないです。 そうなると結局Vue.jsってそんなに強くないのでは、と思うかもしれないんですけど、そうではないんですね。 ## 💓Vue.jsはどんな規模にも
https://docs.google.com/presentation/d/1zQ3Frm3DxSw_qY-KEuykkIUREO-ueFbOyMd1Kd8nqKE/edit#slide=id.g5fc474681_041--- Vue.jsの作者のEvan氏はアプリケーションの段階っていうのを、この図のように６つの領域にわけています。 ## ６つの領域 - Declarative Rendering - Component System - Client-Side Routing - Large Scale State Management - Build System - Clinet-Server Data Persistence --- 宣言的なレンダリング、コンポーネントシステム、クライアントサイドルーティング、状態管理、ビルドシステム、クライアントとサーバのデータ永続化と。 Vue.jsだけを使った場合だと、この図でいうコンポーネントシステムのところまでをカバーしてます。 ## あらゆる規模に対応？
Vue 2.0 is Here!#Performance--- 最初の方にVue.jsは軽い、という話をしましたが、色々いれたら結局重くなるのでは、と思うかもしれません。これはVue本体とvue-routerとvuexを足したファイルサイズなんですが、それでもとっても軽いですね。 ## Reactも同じような
](https://twitter.com/kazu_pon)[
](https://twitter.com/ktsn)[
](https://twitter.com/tejitak)
- [日本語翻訳プロジェクト](https://github.com/vuejs/jp.vuejs.org)がある
- [日本ユーザー向けグループ](https://vuejs-jp-slackin.herokuapp.com/)（Slack）がある
---
自分が知る限りですが、Vue.jsのコアチームには日本人の方が3人います。おかげで最新の情報も得やすいですし、フィードバックも伝えやすいと思います。
日本語翻訳のプロジェクトがあって、これには誰でも参加できます。自分もVue.jsの2.0のドキュメントの翻訳に少し参加しました。ライブラリ本体へのコントリビュートが難しくても、こういった部分でコントリビュートしやすいというのもよい点ですね。
# まとめ
---
さてこのへんで一旦、ここまでをまとめてみましょう。
# Vue.jsは強い
- 💪 少ない学習で大きなパワー
- 💨 軽くて速い
- 👐 ライブラリ/ツールでどんな規模にも対応
- 📖 ドキュメントがすごい
- 🇯🇵 日本語コミュニティの存在
---
Vue.jsがなんか強そうというのは感じてもらえたかなーと思います。
軽くて速くて、どんな規模にも対応できる、そんなパワーを少ない学習でも得ることができます。
ドキュメントもしっかりしてますし、日本語のコミュニティがあるので、リソースに困ることはあまりないかと思います。
## ❓🤔❓
if (🕒) {
location.hash = [#ライブラリ/ツールの紹介](#46)
}
else {
location.hash = [#その他のリソース](#65)
}
## ライブラリ/ツールの紹介
---
さて、ここからはさきほど紹介した公式ライブラリとツールの特徴や使い方を解説します。
## [Vuex](https://github.com/vuejs/vuex)
- FluxとかRedux for Vue.js
- アプリケーションの状態を一元的に管理
- アプリケーションの複雑性を解消するため
---
まずはVuexです。VuexはFluxのような状態管理パターンをVue.jsで行うためのライブラリです。
ReduxなどのFlux系ライブラリとVue.jsを組み合わせることもできますが、Vue.jsに最適化されていて、とてもよく機能します。
https://github.com/vuejs/vuex/--- これはVuexのデータフローを表した図です。 アプリケーションはStateという単一の状態をもっていて、この状態はMutationsによってのみ変更されます。 ほかの経路では状態が変更できないようになっています。 状態に変更があると自動的にコンポーネントがレンダリングされ直します。 ## Vuexの効能 - データフローが一方向に - コンポーネント同士のやりとりが不要に - 信頼できる唯一の情報源 (single source of truth) - 状態変更が明示的かつ追跡可能に 👉 ✨vue-devtools✨ --- Vuexを導入すると、先ほどのようにデータフローが一方向になって、アプリケーション全体の見通しがよくなります。 アプリケーションの状態は単一のStateとして持つことになるので、Stateの信頼性が保証されるようになります。Stateを参照すれば常に最新の状態が得られることになります。 Vuexを導入すると状態変化が明示的になることで、このあと紹介するvue-devtoolsでの状態監視が行えるようなるという利点があります。 ## 中規模以上のSPAで使おう 規模の小さなアプリケーションにVuexを導入すると冗長であまり効果のない制約を生み出すことに。 [シンプルなイベントバスの仕組み](https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication)でも十分機能する☝🏻 --- Vuexが有用なライブラリであることは間違いないと思いますが、規模の小さなシンプルなアプリケーションであれば使う必要はないでしょう。 Vuexを導入することでコードが冗長になって、あまり効果のない制約だけが生まれることになります。 小さなアプリケーションであれば、メディエーターパターンのような、イベントバスを介したやり取りで十分かと思います。 ## [vue-devtools](https://github.com/vuejs/vue-devtools) - コンポーネントの状態確認 - ルーティングの状態確認（vue-router） - 状態変化の追跡とタイムトラベル（vuex） --- vue-devtoolsはVue.jsアプリのデバッグ用のChrome拡張です。Chromeにインストールすると、 ### コンポーネントの状態確認  --- コンポーネントの状態を確認したり、 ### 状態変化の追跡とタイムトラベル  --- また、さきほど言ったようなVuexによる状態変化を追跡して状態のタイムトラベル機能が実現できます。 [demo/vuex](./demo/vuex/index.html) --- これはボタンを押すとカウントが増減するアプリです。Vuexが使われてます。 vue-devtoolsで確認してみましょう。incrementとdecrementをするとMutationが増え、状態が変化してるのが確認できます。 この状態変化のリストをクリックすると、好きな地点に行ったり来たりできます。これがタイムトラベルです。 便利そうですよね。デバッグが捗ります。 ## [vue-loader](https://github.com/vuejs/vue-loader)/[vueify](https://github.com/vuejs/vueify) - webpack/Browserifyでバンドル - 1コンポーネント1ファイル（.vue） --- 次にvue-loaderとvueifyです。この２つは、アプリケーションのJavaScriptをバンドルをするためのツールです。また、これを導入するとVue.jsでのコンポーネント開発がより便利に簡単ににできるようになります。 具体的に言うと、コンポーネントを.vueという拡張子のファイルで作っていくことになります。 .vue ```html
This should be red
``` --- これはCSS Modulesの例です。styleの属性としてmoduleというのを指定します。 すると$styleという特別な変数にクラスなどが格納されます。 templateでは$style.redのように、定義したクラスを参照します。このコードがコンパイルされると、$styleという変数名がアプリケーションの中でユニークな値と置き換えられ、ほかのクラスと衝突しなくなります。 ### 💓CSSのクラス名で悩まなくてもいい Scoped CSSやCSS Modulesを使うことによって、 コンポーネントのスタイルがほかのスタイルに影響を 与えなくなる --- Scoped CSSやCSS Modulesを使うと何が嬉しいかというと、 コンポーネントのスタイルがほかのスタイルに影響を与えなくなるんですね。 つまりもうCSSのクラス名で悩まなくてもいいってことなんです。すごくないですか？ ## [vue-cli](https://github.com/vue-cli) - スキャフォールド用のコマンドラインツール - vue-loader/vueifyの環境構築 - 開発用のローカルサーバの構築 --- 最後にvue-cliです。これはコマンドラインツールで、Vue.jsを使ったアプリケーションの環境構築を簡単にしてくれます。 ### webpackのテンプレートを使ってみる `$ vue init webpack awesome-project` - A full-featured Webpack - vue-loader setup with hot reload - linting - testing & css extraction. --- 例えばwebpackを使ったプロジェクトを作るときはこんなコマンドを実行します。 Y/nで必要な環境をセットアップ ```bash $ vue init webpack awesome-project ? Project name awesome-project ? Vue build standalone ? Use ESLint to lint your code? Yes ? Pick an ESLint preset AirBNB ? Setup unit tests with Karma + Mocha? Yes ? Setup e2e tests with Nightwatch? No vue-cli · Generated "awesome-project". To get started: cd awesome-project npm install npm run dev ``` --- するとこんな感じにコマンドラインで何を使うか質問されます。質問にYesかNoで答えると、Yesと答えたやつをセットアップしてくれます。 セットアップが終わったら、npm installしてnpm run devを実行すると開発用のローカルサーバを立ち上げることができます。 （時間があればあらかじめインストールしといたやつでrun devする） - めんどくさい環境構築をスキップできる - 公式のテンプレートがいい感じ（カスタマイズも可能） - ESLint/ユニットテスト/E2Eテストの環境構築もしてくれる --- このようにvue-cliを使うとめんどくさい環境構築がスキップできます。公式で用意しているテンプレートもいい感じです。 Lintやテストの環境も作ってくれて至れり尽くせりですね。公式のテンプレートをForkすればテンプレートのカスタマイズもできます。 # 手を抜こう めんどくさいやつはツールに任せて もっと本質的な部分に集中する💪 --- フロントエンドのツール、なんか色々あるしどんどん難しくなってる感じありますよね。 設定とかって、やりたくてやってるわけじゃないことですし、手を抜けるとこは抜いていきましょう。 さて、これでライブラリとツールの紹介はおしまいです。 ## その他のリソース [awesome-vue](https://github.com/vuejs/awesome-vue/) --- 紹介した以外にも、いろいろなライブラリやツールがあります。 Vue.jsに関するリソースは公式非公式に関わらず、このawesome-vueというリポジトリにまとまってます。 ここにはプラグインもあれば、誰かが作った便利そうなコンポーネントなんかもあります。 なにか作る前に、ちょっとここを探してみるとぴったりなものが見つかるかもしれません。 --- さて、ここまでVue.jsについて色々と紹介してきましたがどうでしょう？なんかヨサソウなフレームワークだなーと思ってくれたなら幸いです。 ところで、フロントエンドのフレームワークって移り変わりがとても激しいですよね。 ## 使い続けられる？ 🤔「AngularはGoogle、ReactはFacebook、うしろに大企業がいてなんか大丈夫そう。Vueは個人が作ってるみたいだけどどうなの？」 --- 少し前まで「これはずっと使えそう」と思ってたものが、今はもう誰も使ってないなんて状況がありがちなのがフロントエンドのフレームワークです。 AngularであればGoogle、ReactであればFacebookといった大企業がそれぞれうしろについているので、なんとなく使い続けられそうなイメージを持てますよね。 Vue.jsはどこかの企業が作ったわけではなく、個人によって作られたOSSです。 そういった点でフレームワークの継続性みたいなのが心配になる人もいるかと思います。 ## 💰スポンサーがついてる💰 - [👆9000＄/month](https://www.patreon.com/evanyou) - フルタイムOSS - [Laravel](https://laravel.com/)のデフォルトにもなった --- ですがそういった心配はあまり必要ないのかなと、個人的には思っています。 というのも、Vue.jsの作者はいろいろな企業や個人に金銭的な支援をされていて、フルタイムでOSSの開発にあたっているそうです。 あとは少し前の話になりますが、PHPフレームワークのLaravelのデフォルトのJSフレームワークになったことも話題になりましたね。 ## コミュニティが強いOSSは強い --- Vue.jsは特定の一企業ではなく、Vue.jsを使っている企業や個人の支持によって支えられています。 日本でも翻訳プロジェクトに色々な人が参加してますし、実際に案件に投入している例も見かけられるようになってきました。 コミュニティが強いOSSって強いものだと個人的には思います。ですので、保証は全くできませんが、長く使い続けられるフレームワークだと思います。 # 使ってみよう [https://vuejs.org/](https://vuejs.org/) --- ここまで話を聞いて、ちょっと使ってみようかなと思った人はすぐに公式サイトにアクセスしましょう。Vue.jsの始め方はとても簡単です。 ### あなたの人生を変えるかもしれない一行 ```html ``` --- HTMLにこのscriptを一行追加してください。 もしかしたら、あなたの人生が変わるほどの何かを得られるかもしれません。 # 👍Thanks [@nakajmg](https://twitter.com/nakajmg) --- ご清聴ありがとうございました。 ## Vue.jsの連載やってます ## 👉 [CodeGrid](http://www.codegrid.net/) 👈 --- 弊社がやってるCodeGridというサービスでVue.jsの連載やってます。