Vue.js Tokyo v-meetup="#3" に参加してきました
申し込んだ時点で213/80人と絶望的だったのですが、たまたまブログ書く枠が空いたので勢いでポチってしまいました。ただ、私はVue.js初心者（※）なのでブログを書けるほど内容が理解できるのかかなり不安でしたが、結果的にどのトークも楽しめました（理解したとは言ってない）。なので、同じような初心者の方でも、興味があれば参加してみるとよいのではと思います。
（※）人がつくったアプリ（Vue 1.x）の改修をしたり、開発合宿でミニマムな評価アプリ（Vue 2.x）をギリギリつくった程度のレベルです。
以下、それぞれのトークの内容のメモです。
Vue.js の中身 - 算出プロパティはどうやって動いているか @kitak
https://kitak.github.io/slides/170316-vue-meetup/
Vue.jsのようなライブラリは生産性を高めてくれるけど、内部実装を理解しないで誤った使い方をすると、バグの原因やパフォーマンスの低下に繋がるからちゃんと理解しようねという話でした。私のことか。
算出プロパティ（computed）は普通のメソッドと違って、依存プロパティの値が変わらない間はキャッシュしてくれるそう（知らなかった）。依存関係の追跡や状態変更の通知と再計算を実現するために、内部ではリアクティブプロパティやWatcherインスタンスが使われていること、またそれらはJavaScriptでどのように実装されているかを、温かみのある絵とともに解説してくれました。
Vuexを使ってみなかった話 @atsushiss15
Vuexを使わずに自前で簡易Fluxをつくる方法とかの話でした。
自前簡易Fluxをつくることになった経緯は、当初、状態管理やロジックを各コンポーネント内で書いていたけど、だんだんコンポーネント間で状態を共有する必要が出てきて、propsなどでがんばったけど、密結合や複雑化していってしまい、何によって状態が変更したか分からない状況になってしまった。そこから、storeパターンを取り入れようということになったそう。
Vuexには「State」「Mutation」「Actions」があって、このうちの「State」「Actions」を自前実装して、Fluxアーキテクチャの「複数コンポーネントで状態共有」「Viewとデータロジックを分離」を実現。新しくつくるならVuexをつかう方がいいけど、学習コストを割かずにミニマムに実装するならこんな感じで自前実装もできる。ただし、自前の場合はVue.js devtoolsが使えないのがつらみ。
E2D3 の Vue.js 活用 @chimerast
E2D3はExcelのアドインで、Excel上でインタラクティブなチャートを生成したり、SVGに保存したりWebにシェアしたりできるそう。MacOffice 2016でもブラウザ上のOffice 365でも使えるらしい。
当初は、D3.jsとjQueryでがんばっていたのでしんどみがあったけど、Vue.jsで実装するようになってHTML上に構造ができるようになったので、拡張性が担保された。
Vue.jsはカジュアルにもガチにもつかえて便利なのでもっと使っていこうという話でした。
型付きテンプレートがほしい @ktsn
テンプレート内の変数名やコンポーネント名が間違っていたら、コンパイル時にターミナルにエラーが出るツールをつくったよという話でした。
実装は、VDOMにコンパイルしたテンプレートをTypeScriptにしてコンパイルして実現しているけれど、細々した調整が必要でその解説が主な内容でした。
まだ完成形ではなくて、現状の問題点としては、ソースコードが書き換わるのでエラーの箇所と行数がズレてしまうということと、vue-class-componentしか対応できないので、TypeScript 2.3を待ってるとのことでした。
VueでComponentをはじめました @kawakami_kazuyoshi
メトロノームのデモの解説と、使用したライブラリなどの紹介でした。
コンポーネントの単位は細かく分ける派だそう。たとえばボタンコンポーネントをひとつつくれば、色とアイコンを渡せばどこでも使いまわしができるから。
Vue.js with Go @k2wanko
ToDoのJavaScript部分をGoで書くデモとそのためのライブラリなどの話でした。Goへの愛を感じました。
- GopherJS
- GoをJSに変換するトランスパイラ
- GUIアプリケーションをブラウザにもってこれる
- go-vue
- GopherJSでVue.jsを書くためのバインディング
- go-loader
- WebpackのGoファイルローダー
結論として、VueをGoで書くのはつらい。
Vue.jsとFirebaseでSPA @buddy7
会社で超短期間で機能てんこ盛りのサービスをリリースすることになったけど、人員も足りないのでサーバーサイドはFirebaseにしてVue.jsで実装したという話でした。
でもサーバーからのメールが英語になってしまったり、Vuexを使わなかったのでデータフローがぐちゃぐちゃになってしまったなどの問題もまだ残っているそう。
その話と平行して、vue-cliでのプロジェクト作成から、Firebaseのデータを画面上に表示するところまでを、その場で5分くらいで実演していました。私も合宿で同じ構成でやったのですが、簡単で便利ですよね。
Nuxt.js @inouetakuya
SSRが必要なときに、Nuxt.jsのレールに乗るだけで、簡単にユニバーサルなVue.jsアプリを構築できるらしい。具体的には、Nuxt.jsには以下の機能が備わっているそう。
- サーバーサイドレンダリング
- ルーティング（vue-router）
- Vuex store
- 非同期データの取り扱い
- head要素の管理（vue-meta）
- Webpackと組み合わせてやることアレコレ
使い方も、vue init nuxt/starterするだけ。あとは、pagesディレクトリに*.vueを置くだけでそれがそのままルーティングされる。すごい。
nuxt generateというのは*.vueを使った静的ファイルジェネレータで、静的ファイルができるのでGitHub Pagesなども利用できるようになる。
Nuxt.jsすごそう！
まとめ
全体を通しての感想は、「vue-cli便利」「Vuex使おう」でした。
ちなみに、参加者はほぼ男性で、女性は5人くらいだった気がしました。 それにヒヨって懇親会には参加できなかったのだけが心残りですが、Vue.jsへの愛も深まったし参加してよかったです。
スピーカーや運営のみなさまありがとうございました。
