会社のサービス*1 で使っていることもあって動向を注目しているVue.jsについて、国内最大のコミュニティの第四回ミートアップが開催されました。
会場はLINE株式会社提供のセミナールーム「オーディトリウム」で100名以上の参加者がおりたいへん盛況なイベントになりました。今回ブログ枠で参加させていただいたのでレポートを書きます。
Weex ではじめる Native App 開発 @KaraMisoRamen
LTのトップバッターはKaraMisoRamenさんによるVue.js版React NativeというべきWeex の紹介でした。
Weexプロジェクトの成り立ちやアーキテクチャの概要、React Nativeとの比較。などのお話でした。
僕はフレームワークおたくなので中国語ドキュメントしかない時期にWeexでネイティブアプリをビルドしてみたり挑戦していて最初は動かすだけでひと苦労でしたが、最近は Alibabaのデベロッパーの1プロジェクトから Apache Incubator 管理下に移されたり開発がどんどん活発になっていっている印象です。
アーキテクチャについては「React Nativeとだいたい同じ」といえると思います。後発なのでよく研究されて作られており、Objective-CやJavaでのネイティブコード拡張の仕組みやFlexboxシステム、ブラウザ向けのrouterとの統合などReact Nativeで実現されている機能はひととうりあります。
特徴的な違いをあげると「HTML 5 Web App が第一級サポートされている」という点かと思います。これによってWeexプロジェクト側としてはWebブラウザ向けの開発環境でコーディングしたVue appをiOS/Androidにそのままポーティングできるというスタイルを意図しているのだと思います(この性質には懸念点もありますが)。
プロダクトへの投入という視点だと現時点ではReact Nativeより1年は遅れを取っているので、エコシステムの充実や周辺ツールなどまだまだな印象ですがVue.jsコミュニティ自体の拡大とともに今後も要注目のプロジェクトだと思います。
「Vue.jsでモバイルapp」という話なら、こちらは Cordova のWebViewを基礎技術にしたフレームワークですが、Vue with Ionic な Vonic や Onsen UI for Vue のプロジェクトなども気になるところです。
お仕事で Nuxt.js を使うか検討した話 @inouetakuya
Nuxt.js 公式ドキュメント翻訳*2 などで知られるinouetakuyaさんのLTは、所属するGMOペパボEC事業部の新規プロジェクトの技術選定をどのように行ったのか? という知見を共有していただきました。
対象となるWebサービスの要件から、そもそもSSR(サーバーサイドレンダリング)は必要か? リクエスト時に動的生成するのか、それともプリレンダリングで事前に生成したHTMLを利用するのか。と段階的に議論を進めて、全部入りなNuxt.js を採用するのか Vue.js Server-Side Rendering Guide にも載っている vue-server-renderer を直接使うのか→そ0の理由は?、などアーキテクチャの構成を一般的な問題解決の手法で行っていく具体的な事例のお話が聞けました。
とくに検討の最終段階としてNuxt.jsの動作を理解して、得られるメリットと導入後のリスクを考える過程は現場の実践感があって良かったと思います。
Vue.jsのTransitionでいい感じのアプリにする @tomato360
仕事ではRails+Reactな環境で、プラベートでVue.jsを愛用しているnasumさんが、自作のTwitterクライアントアプリを題材にVueのTransition APIを使って開発した実例の紹介でした。
Vueのトランジション(UI遷移の効果) は <transition name="fade"> などで宣言した名前をキーに開始→終了のCSS-classのエントリーポイントに状態を記述していくだけで各点を繋ぐアニメーションなどが実現できるというとてもシンプルでパワフルな仕組みでした。
LTでは投稿のためのモーダルダイアログの出現やタイムラインリストへの要素挿入の連続的なトランジション(transition group)などを実アプリの画面でDemoされて盛り上っていました。
Vueコンポーネントのユニットテスト @hypermkt
GMOペパボアニメ部部長のバーチーさんによるLTです。業務でバリバリVue.jsコードを書いているらしくかなり実践的な内容でした。
Vueのテストツールは最近になってたくさんのプロジェクトが登場していて、その中の1つの avoriaz 開発者を中心に現在 vue-test-utils という公式のライブラリの開発が進んでいるようです。
vue-test-utilsはまだ絶賛開発中(未リリース)なこともあり、LTではvue-test-utilsの前身となるavoriazの使い方を例に、Vueコンポーネントベースでのユニットテストの方法が紹介されました。
依存コンポーネントを動的に分離するShallow Testing(自動でコメントアウトしてしまうそうです!) や DOMイベントをコンポーネントへ伝え状態変化させテストする手法などなかなか他のUI開発のプラットフォームでは見られない仕組みが新鮮でした。
Vue.jsとFirebase Hostingでサーバサイドレンダリング @k2wanko
GAE/Goでサーバーサイドレンダリング などの苦行に挑戦されているセキュリティエンジニアのコキチーズさんのLTです。
Firebaseのサーバレスアーキテクチャ分野の進出である(!) Cloud Functions を使ったサーバサイドレンダリングの話でした。
Google Developers Japan: Cloud Functions for Firebase のご紹介
サーバサイドレンダリングとクライアントサイドの初期化双方の表示を並べて表示の速さなどをデモしてくれました。
これらのサーバーを自前で構成するのも一苦労だしFirebase圧倒的便利感あるなーという感想でした。しかし新たなアーキテクチャだけにFunctionで生成したデータのキャッシュをどこに保持するのか? など新規の課題もあるようです。
Vueでデザインツールを作った話 @KeimaKai
STUDIOというウェブベースのデザインツールを開発されている甲斐さんのお話でした。
STUDIO | 誰でも簡単にプロトタイプが作れるUXデザインツール
このLTでもFirebaseが登場し、Style Object内部データの同期の仕組みやVueコンポーネントへ適用してリアルタイムにプレビューしている様子が紹介されました。
本格的なSPAのJavaScript自体の経験も充分でない中コードを書きはじめたらしいのですが、Vueは柔軟で使いやすく高評価とのことでした。jQuery UIベースで構成された既存UI資産の統合なども見られて、デザイナーのコーディング視点でのVueといった感じで参考になりました。
kintoneアプリを Vue.jsを使ってカスタマイズする @naruohama
ビジネスアプリ作成プラットフォームのkintoneを使ったシステム導入などを手掛けている大阪からいらっしゃったnaruohamaさんのLTです。
kintone - サイボウズのビジネスアプリ作成プラットフォーム
僕の知識でいうとkintoneアプリのカスタマイズは Force.comプラットフォームでのアプリケーション開発 に近いのかなーという印象でした。
kintone本体ではReactが使われているらしく、そこにさらにVueを使ってUIを構成されていました。
VueConf 2017 参加レポート @ktsn
Vue.js coreチームのkatashinさんによるポーランドで開催された初の公式な世界的カンファレンスであるVueConf 2017の参加レポートです。
上記ブログ内容を肴に気になったトーク、ESLint やVSCodel(vetur)、セミコロン論争などのこぼれ話を聞くことができました。
推されていたトーク: Animating Vue by sdrasner
総括
爆発的に成長する中国の開発者コミュニティの勢いを背景に2016年-2017年と普及期に来たVue.jsですがReactやAngularのコミュニティでも見覚えのある話題が増えてきました。これはコミュニティが成熟してきた証だと思います。
いろいろな言語やフレームワークのコミュニティをウォッチしてたりすると各コミュニティの違いが共通点が分っておもしろいのですが、Vue.jsコミュニティは「PHPコミュニティと共通する良さを持っている」というのが個人的な見解です。
まず開発者コミュニティにユーザーに対する献身さがあります。公式ドキュメントの日本語訳も即時に手厚くサポートされていますし、マークアップの延長線でコーディングでき、ビルドツール環境の複雑性も露呈させず、デザイナーやSPA開発の専門家でもない人達にも入門しやすくチュートリアルが書かれています。
Vue.jsのユーザーはPHPと同じく自分のアプリケーションを構成するためのシンプルで本質的な問題解決法を求めているのだと思います。PHPで今一番勢いのあるフレームワークであるLaravelがデフォルトでVue.jsを採用しているのは象徴的です。今回のミートアップでも「実際に何か作っていて、そこでVue.jsを使っている」という話題がほとんどを占めていました。
ReactでもAngularでもなく第三の勢力であるVue.jsが選ばれているのは Evan You の個人的なViewレイヤーのプログラミングをうまくやる自作ツールからスタートして、企業が牽引する2大フレームワークの成長を他所にVue.jsが「アプリケーション開発のためのツール」であり続けていることが大きいのだと感じます。これは以下の「シンプルさの必要性」に出てくるような哲学や概念の設計がうまく機能しているためでしょう*3
今回のミートアップではサーバサイドレンダリングの実践やFirebase(BaaS)の活用の話題が熱かったです。JSXサポートやTypeScript連携、GraphQL統合などの先の話題も気になりますし、次回開催も楽しみです。 開催情報は Vue.js Meetup connpassグループに参加して購読しましょう！
実は我々のプロジェクト内の1万行のVue 1.x 系のコード資産があるのですが 、これをドーンと2.xに移行して何かしゃべりたいなーとか思っていました *4
関連エントリ
- 予習として #1 Awesome Vue - genba.fm を聴きました
- 関西から Vue.js Tokyo v-meetup #4 に参加する為だけに東京に来ました！ - ht: もチェック!
- “Vue.js Tokyo v-meetup #4” の Tweet まとめ - Togetterまとめ
*2:http://blog.inouetakuya.info/entry/2017/03/26/203925
*3:でも個人的には Ember もいい感じにレールに乗った開発ができると感じているのでもっと使われてもいいなーと思っています
*4:参加したい人も募集しています https://www.wantedly.com/projects/93638
