2017年6月21日から23日まで、世界初の公式な Vue.js のカンファレンス VueConf 2017 が開催されました。開催地はポーランドの都市ヴロツワフで、会場は New Horizons Cinema という大きなカンファレンスルームのある建物でした。VueConf 2017 はワークショップパート（6月21日）とカンファレンスパート（6月22日、23日）に分かれており、筆者はカンファレンスパートに参加していました。ワークショップパートは 60 人以上、カンファレンスパートは 300 人以上の参加があったようです。
会場の New Horizons Cinema（VueConf 2017 公式サイトより）
プレゼンテーション
カンファレンスのメインコンテンツとして、17人の発表者によるプレゼンテーションが行われました。発表者には Vue.js の作者である Evan You 氏をはじめ、Vue.js のコアチームメンバーや OSS コミュニティで活躍されている方々が集まっていました。プレゼンテーションの内容は様々な分野に渡っていましたが、全体の傾向として基礎的な部分の説明から丁寧に行われていたので、理解は比較的容易でした。
発表全体を通して、Vue.js のエコシステムがとても幅広く育っていることを感じました。Vue.js は元々 View レイヤーのライブラリとして作られたものですが、現在は The Progressive Framework とうたわれているように、アプリの規模や要求に応じて、柔軟に追加の機能を利用できるというコンセプトで開発されています。その流れを受けてか、GraphQL、サーバーレスアーキテクチャ、ハイブリッドアプリなどの技術と Vue.js をどのように組み合わせるのかという発表もありました。
以下では筆者の印象に残った3つの発表を紹介します。発表はすべて録画されており、後日公開されるとのことなので、興味のある方はぜひ見てみると良いでしょう。（7月5日現在、Evan 氏の Keynote の動画が公開されています）
Accessibility in Single Page Apps
Callum Macrae 氏による、SPA においてよく使われる UI コンポーネントにまつわる、アクセシビリティの問題点を解説する発表です。発表は終始デモを見せながら解説するスタイルで行われ、アクセシビリティを考慮せずに実装を行うことで、どのような問題が発生するか、という点をとてもわかりやすく説明していました。発表ではスクリーンリーダーを用いながらキーボード操作で Web ブラウジングをするユーザーを想定し、実際に公開されている Vue.js の UI コンポーネントをデモしていました。
Very impressive speech from @callumacrae about web accessibility. #vueconf2017 pic.twitter.com/T2g2GMQssP
— VueConf (@VueConf) June 22, 2017
Vue.js のエコシステムにはトグルボタン、セレクトボックス、ドロップダウンメニューなど、多くの UI コンポーネントが公開されていますが、アクセシビリティを考慮して実装されているものはそれほど多くないようです。例えば、ネイティブのチェックボックス（<input type="check">）はフォーカスを当てた際に、チェックされているか否か、チェックを変えるにはどのような操作をすれば良いかがスクリーンリーダーで案内されます。しかし、独自のデザインを提供する UI コンポーネントは <input type="check"> 以外の要素を組み合わせて作られるため、そのような案内がされず、ユーザーからはそれがなんの要素なのか、どのように操作すれば良いのかがわからない、といったことが起こり得ます。
もちろん、このアクセシビリティの問題は、他人のコンポーネントを利用するときだけではなく自分で UI を作る際も留意することが重要です。要素をアクセシブルにするために、role 属性、aria-* 属性をコンポーネントに付与し、見た目だけではなく、HTML の意味上もその要素がチェックボックスであるということを表す必要があります。発表ではこのようなアクセシビリティの問題をチェックするためのツールである a11y が紹介されていました。普段 UI を組み立てるときはつい自分が使えるかどうかを基準にして作ってしまいがちですが、この発表を見てアクセシビリティに気をつけてみてはどうでしょうか。
var vetur = vscode + vue;
Pine Wu 氏による、Visual Studio Code (VSCode) の拡張機能 Vetur のデモとその実装の解説、ロードマップに関する発表です（スライド）。Vetur は .vue ファイルのシンタックスハイライトの他、テンプレートの Linting、オートコンプリート、フォーマッター、Emmet のサポートなど、数々の開発の助けになる機能を提供しています。また、現在は VSCode 専用の拡張機能ですが、将来は Language Server を独立させ、様々なエディタでその機能を使用できるようにする予定だそうです。
Great talk by @octref on Vetur
— Vue.js Feed (@vuejsfeed) June 22, 2017
v0.8.2 released today
prettier integration coming soon 🎉 #vueconf2017 pic.twitter.com/HIbDyjvwuq
Vetur は TypeScript の型定義を利用したオートコンプリートや型チェックなどの強力な機能を提供している点が特徴的です。例えば、コンポーネントのメソッド内で this を参照するときに、利用可能なメソッドの一覧が表示されますが、これは Vue.js の TypeScript の型定義を利用しているとのことです。特筆すべきなのは、この機能は JavaScript でコンポーネントを書いているときにも使用可能である点です。
.vue ファイルに関してはエディタ対応が問題点の1つとしてありましたが、Vetur を見るとその問題点も解消されつつあるように思います。特に、以前はエディタ上で .vue ファイル内の TypeScript コードの型チェックが動かないということから、TypeScript ユーザーは .html, .css, .ts とファイルを分けて開発している人が多くいました。しかし、その問題も Vetur によって解決されていますし、シンタックスハイライトをはじめ、様々な開発に役立つ機能も利用可能となっています。さらに、Vetur は任意のエディタにその機能を提供するために、内部の Language Server を独立させることを予定しています。そうなると、.vue ファイルをエディタで編集するために必要な機能はすべて Vetur で実装されていて、各エディタのプラグインの作者はそのアダプタを書くだけでエディタの対応が完了するということになります。VueConf の後、Vetur は Github の vuejs organization 配下に移管され、今後さらに活発な開発が期待されるプロジェクトだと思います。
Animating Vue
Sarah Drasner 氏による、各種アニメーションのデモとその実装を解説した発表です（スライド）。また、単に実装を見せるだけではなく、考え方の方針に焦点を当てて説明していたので、自分で実装する際に多くのケースで役に立つ発表だったと思います。また、発表の最初の方では、なぜアニメーションが必要なのかという点に関しても、実際のデータを示しながら説明しており、説得力がありました。
.@sarah_edo is simply the best! 🎉 Last talk of #vueconf2017 about animations in @vuejs! 🔥Just wow! pic.twitter.com/LJ08fGKJIu
— VueConf (@VueConf) June 23, 2017
発表は具体的なアニメーションを先に見せ、それを実装するにはどのようなコードを書けば良いかという流れで解説しており、とてもわかりやすかったです。キーフレームアニメーションの考え方の解説から、それをどのように SVG アニメーションや、Vue コンポーネントのアニメーションに応用するかを順序立てて解説していました。Vue のアニメーションについては、事例に応じて、CSS アニメーション、JavaScript フック、状態駆動アニメーションや、カスタムディレクティブを使ったアニメーションなど、多くの実装例を示していました。
アニメーションは凝ったことをしようとすると Vue などが提供するデータバインディングから離れて DOM を操作しなければならないイメージがありますが、この発表のコードはデータで表現できる部分と DOM 操作の部分のバランスが上手く取れており、読みやすいコードでした。大きめの SPA を実装するときはロジックの方に集中してしまい、アニメーションは蔑ろになりがちですが、この発表のようにうまく書くことができれば、強調したい部分にアニメーションを組み込むことも十分できそうだと感じました。逆に、LP のように表現力を求められる場合でも Vue で十分書けるほどのポテンシャルを持っていることも感じ取ることができました。
その他のセッションなど
カンファレンスではプレゼンテーションセッションの他にも、Evan 氏と、カンファレンスの3人の発表者 (Pine 氏, Sean 氏, Sarah 氏) をパネリストとした、パネルディスカッションや、希望者がライトニングトーク (LT) をする LT セッションもありました。また、22日、23日の終わりには開催地の近くのバーで After Party が行われました。
個人的にカンファレンスルームをもう1つ貸し切って作られていたレトロゲームコーナーが好きでした。広い部屋の前の方に何台かレトロゲームが並べられていて、それを遊んでる人をみんながイスに座って見ているという何とも言えない空間でした。
おわりに
VueConf 2017 は発表の内容も興味深いものが多かったのですが、開催地のヴロツワフがとても良い場所でカンファレンス後は観光を楽しむことができました。海外のカンファレンスに参加するのは初めてで、開催地に行くこと自体に苦労したりしましたが、旅行も兼ねて行くのも良いなと感じました。今回、日本人の参加者が（おそらく）筆者と発表者の田中さん以外にいなかったので、次回はぜひもっと多くの日本人の方が参加すると良いなーと思います！