「Vue.js Tokyo v-meetup ＃6」参加レポート

12月13日に開催された「Vue.js Tokyo v-meetup #6」に参加してきました。前回のMeetupがVue.jsを用いたサーバーサイドレンダリングの魅力を見せてくれたと言えるなら、今回のMeetupは2017年、Vue.jsのエコシステムがますます繁栄してきたアピールになった年と言えるのではないでしょうか。開発環境、テストツール、コーディング規約、UIフレームワーク、強力な公式サポートのおかげでWebのフロントエンド開発における欠かせないものを全部用意してくれています。一年前と比べて、今のVue.jsはすでにフロントエンドのギークたちのオモチャから、プロダクションレディで成熟したフレームワークになってきていると実感しています。

TypeScriptサポート

Vue.jsのバージョン2.4まで、Vue.jsにおけるTypeScriptのサポートは不足していました。TypeScriptでVue.jsプロジェクトを作成すること自体は問題ないですが、型定義の恩恵は受けにくい状況だったように感じます。@maeharinさんが発表の中で紹介して頂いたように、Vue.js2.5以前、object型構文の内ではthisの型推論はできませんでした。そもそも、TypeScriptはこのような推論をサポートしていませんでしたので、Vue.js側のサポートも厳しかったでしょう。とは言え、Vue.jsの場合、「vue-class-component」を利用しない限り、object型構文は基本なので、かなり致命的な問題だったと考えられます。めでたいことに、TypeScriptのプルリクエスト#14141によって、objectリテラル内のthisの型推論が可能になりました。そして、Vue.jsのプルリクエスト#6391において、型定義の追加を含み、TypeScript向けの改善が行われた為、バージョン2.5以降、Vue.js+TypeScript開発が一気に便利になってきました。例えば、プロパティの補完とタイプミスを避けるために、@maeharinさんがプロジェクトの中にAPIの型定義を入れました。swagger-codegenというツールを使い、RubyクライアントとTypeScriptの定義を自動生成できました。自動生成されたTypeScriptの型定義はフロントの開発で利用されていますので、非常に効率の良い開発を行ったようです。ちなみに、swagger-codegenで使用されるAPI定義ファイルもSpringFoxによって自動生成されているため、無駄な重複作業がかなり排除できたんじゃないかと思います。

Visual Studio Code + Vetur

Web開発を行う際に、使いやすい開発環境は非常に大事な要素になっています。Vue.js0.1Xの時代からAtomやSublime Text上のプラグインがすでに提供されて来ましたが、自動補完が足りなかったり、Lintができなかったり、とても使いやすいとは言えないでしょう。しかし、これらの問題はVSCodeの素早い進化とプラグインVeturの登場によって解消されました。今回の会場提供者でもある、マイクロソフトの井上さんがデモの中に見せて頂いたように、VSCode+VeturコンビでVue.jsの開発を行えば、デバッグを含み、IDE並の開発体験ができるはずです。VSCodeがデフォルトでサポートしているEmmetと前述のTypeScript（実は、マイクロソフトはTypeScript-Vue-Starterというテンプレートを提供していますよ）を使えば、さらにスムーズな開発が期待できますね。

UIフレームワーク

TypeScriptの話と別に、@maeharinさんがスライドの中で、UIフレームワークであるElementを絶賛していました。Elementは中国のウェブベンチャーElemeが主導して開発したVue.jsのUIフレームワークです。デザインがシンプルで、多くのUIコンポーネントが提供されているため、人気を博し、Vue.jsのUIフレームワークの中で、もっとも人気があるフレームワークのひとつです。Vue.useの中にロケールの設定と一緒に入れるだけで日本語がサポートされるし、Veturの自動補完にも対応しています。さらに、各コンポーネントの設定項目が豊富で、バリデーションもかなりやりやすいそうです。Vue.jsのプロジェクトを試しに作りたい場合、Elementと組み合わせれば、素早く開発できそうな予感がしますね。当然ながら、Vue.jsのUIフレームワークはこの一つだけではありません。例えばスライドの中に挙げて頂いた、グーグルのマテリアルデザインに従っているvuetifyや、Bootstrapスタイルのbootstrap-vueなどもそれなりに成熟できているので、迷ってしまうほど多くの選択肢があると思います。

コーディング規約とリンター

複数人による大規模な開発の場合、可読性やメンテナンスのしやすさは重要なポイントです。そのため、ソフトウェア開発工程の中で、コーディング規約は欠かせないものです。当然ながら、プロントエンドのプロジェクトも例外ではありません。純粋なJavaScriptなら、AirbnbとStandard JSは最も高い人気を誇っていますが、フレームワークの場合、Reactが圧倒的な優位に立っています。AirbnbがReactを採用しているため、2015年に「Airbnb React/JSX Style Guide」を公開し、すでに多くの開発現場で使用されているそうです。また、ESlintのプラグインである「eslint-plugin-react」も同時期に登場したため、「eslint-config-airbnb」と合わせて利用すれば、コーディング規約とリンターの設定を心配する必要がありません。それに対し、Vue.js界ではそれほど優れたプラグインや普及できている規約がなく、羨むしかできませんでした。しかし、こんな状況は改善されつつあります。まず、公式スタイルガイドがつい最近リリースしました（まだBeta版ですが・・）。必須、強く推奨、推奨、使用注意、四段階に分けて様々なルールが盛り込まれています。それに、わざわざ静岡からお越しになった@mysticateaさんが自ら開発している「eslint-plugin-vue」も公開になりました。ルールはまだ追加中ではありますが、すでに数十種類を備えているため、十分に使えると思います。例えば、「no-parsing-error」というルールはHTMLやテンプレートの埋込式に構文エラーが無いかチェックしてくれますので、JavaScriptじゃなくてもeslintの恩恵が受けられます。公式スタイルガイド内のルールをサポートする予定なので、かなり期待できますね。ちなみに、現在開発リソースがまだ足りていない状況のようですので、興味ある方ぜひ参加してみてください。

ユニットテスト

実はVue.jsのユニットテストに関して、「v-meetup #4」の時、@hypermktさんが一回発表を行っていました。しかし、公式テストツールはまだ開発段階だった為、@hypermktさんはavoiazの紹介をしていました。約半年後の今、公式テストツールであるvue-test-utilsはすでにv1.0.0-beta.8になり、だいぶ安定して来ました。@lmiller1990さんが発表の中で、コンポーネントの分離（shallow機能）、イベントのシミュレーション（trigger機能）、データの設定（setData機能）およびvuexのサポートを実演しながら紹介して頂きました。開発の中で、コンポーネント間の依存が複雑になるケースが多々あると思いますので、コンポーネントを切り離すことはユニットテストを行う際に不可欠な一歩だと考えています。これらの機能を使えば、その作業がある程度便利になります。vue-test-utilsの開発はavoiazの作者が主導している為、avoiazの良いところを継承しています。今Vue.jsのユニットテストツールを検討しているのであれば、vue-test-utilsは恐らく一番妥当な選択だと思います。

その他

Vue.jsのエコーシステムはこれだけではありません。上記のプロジェクト以外にも、注目すべきなプロジェクトがたくさんあります。例えば、私が気になっている「vue-component-compiler」はもうすぐ世に出るそうです。今までVue.jsシングルファイルコンポーネントのコンパイルロジックはプロジェクト依存でした。その為、単独利用が難しく、コンパイルロジックを使ったちょっとした拡張がやりにくかったです。「vue-component-compiler」が使えるようになれば、バンドルツールに依存せずコンポーネントのコンパイラの使用が可能になり、Parcelのような新しいバンドルツールにも迅速に対応できるようになるでしょう。また、@kazuponさんの発表の中にもあったように、公式クックブックとvue-cliの刷新プロジェクトもすでに動き出したそうで、Vue.js本体のメインバージョンアップも予定されているようです。Vue.jsのさらなる進歩が楽しみですね。

まとめ

2017年のウェブ開発において、JSフレームワークの利用はようやく定着化してきたと思います。特に、Vue.jsは直感的で理解しやすいというメリットを持ち、多くの支持を得ることができました。今回のMeetupの中で、@lovalottaplusさんがデザイナーさんにVue.jsを使用してもらう事例を紹介して頂きました。コンポーネントを活用し、内部ロジックをうまく隠蔽すれば、プログラミング知識がそれほど豊富じゃないデザイナーでも開発できることはとても印象的でした。これはまさにVue.jsがずっと提唱して来たプログレッシブの好例だと思います。触りくらいなら、既存コンポーネントを使用すればすぐ開発できる、遠くまで行きたければ、TSなりRxJSなり使ってもよし・・・多種多様なケースに対応できることはVue.jsの長所であり、それに加え、エコシステムのより一層の充実により、2018年のVue.jsには更に期待できそうですね。
今回のMeetupは本当に有益でした、次回のMeetupも楽しみにしています。頑張ってLT枠を取りたいですね（笑）

今回の記事は同僚のこうめいさんに査読して下さいました。本当にありがとうございました。