VueConf.US 第2日目のセッション

第1回のVueConf.USが3月26～28日、ニューオリンズで開催され、VueJSコアチームと数百名のVue開発者が世界中から集結した。カンファレンスでは、VueJSコアチームのメンバが指導する1日のワークショップに続いて、2日間の講演が行われた。InfoQではこれまでにも、3月27日の午前のセッションの概要と午後のセッションの概要、Vue MasteryのGregg Pollack氏のインタビューを伝えている。

今回は3月28日のセッションの要約をお伝えする。プレゼンテーションでは、高度なVueパターン、Vueを使ったデザインシステム、VueでのTypeScriptの利用、VueとReactとの比較、Vueとサーバサイドレンダリング、Vueストーリブック、Vueシングルファイルコンポーネントによるラピッドプロトタイピングなどが取り上げられた。

Vueコンサルタントが知られたくない7つのシークレットパターン

VueコンサルタントでコアチームメンバのChris Fritz氏が当日最初の講演者として、Vueコードの記述方法を改善する7つの方法を、“生産性向上”、“過激なツィーク(Tweak)”、“可能性の解放”という３つのカテゴリに分けて講演した。

即座に生産性を向上させる方法として紹介されたのは、オブジェクトをウォッチャに渡す機能である。ページロード後、直ちにこれを実行するように設定することで、ウォッチャとマウントされたフックに重複する共通パターンの排除が可能になる。

watch: { 
  searchText: { 
    handler: 'fetchUserList', 
    immediate: true, 
  }, 
} 

生産性向上の手段としてはこの他に、自動コンポーネントやモジュール登録などがあった。過激なツィークの分類に入るのは、ルーティングのレイジーロードやトランスペアレントなラッパ構築といった機能だ。最後の“可能性の解放”としてFritz氏が紹介したのは、機能コンポーネントを使ったマルチルートコンポーネントの構築や、nullを返すレンダリング関数を使ってマップレイヤのような非HTMLコンポーネントをレンダリングする方法だ。

Vueのアジャイルデザインシステム

２番目の講演は、Webコンサルタント、執筆者、Suzyグリッドシステムの開発者でもあるMiriam Suzanne氏によるものだった。氏はデザインシステムと、それを開発システムに組み込む方法について講演した。デザインのコンセプトを設計から分離したものとする氏は、その理由を次のように述べた。

デザインシステムは常に、デザインとコードを統合したものになります。どちらか一方になることは決してありません。単に文字’m’がどのような動作をするのかではなく、’m’にどのような意味をもたせるのか、ということなのです。

APIのドキュメントを作成するのと同じように、デザインパターンに関するコミュニケーションと共有の手段として、スタイルガイドを作成することを氏は提唱した。

アプリケーションにパターンがあったとしても、その存在について説明をしておかなければ、２時間後には存在しなくなっているでしょう。

スタイルガイドが古くなるのを防ぐ方法として、氏は、スタイルシートへの追加が自動的にスタイルガイドに追加されるような、スタイルガイドジェネレータをツールに埋込んでおくことの重要性を強調した。

VueとTypeScript: 起動と実行

MicrosoftのプログラムマネージャであるDaniel Rosenwasser氏は、特にVueを用いたJavaScript開発において、TypeScriptを使うことのメリットを説明した。氏によれば、

型システムが可能なのは、何をしてはいけないのかを教えるだけではありません。場合によっては、何をしたいのかを予測することも可能なのです。

次にRosenwaser氏は、Vueに型を持たせるために必要な作業を挙げた上で、関連するメタプログラミングのレベルの高さから、それが非常に難しいことである点を指摘した。TypeScriptとVueの開発チームはこれまで、共同でいくつかのリリースを通じてTypeScriptとVue双方に複数の変更を加えてきたが、現在では単にvue-cliを使用し、計算プロパティに型を追加するだけで、TypeScriptでVueを使用できるようになる。

既存プロジェクトに型を導入するのはまだ難しいが、チームは現在、これをより使いやすくするためのガイドを作成中である。詳しい情報については、TypeScriptに関するVueの資料で確認することができる。

VueにおけるReact

次の講演者は、Lucro Global LCCのWeb開発者であるDivya Sasidharan氏だ。氏は、自身がReactからVueにスイッチする時に発見した、両者の思想的な違いについて語った。

Vueでは、極めて宣言的にコードを記述します。ReactとJSXではロジックをマークアップで記述するため、若干の読み難さはありますが、明確な関心の分離が存在します。

講演を通して氏は、ReactからのアプローチをVueと対比して提示しながら、Vueが採用する宣言的アプローチについて強調した。単一のキャンバス要素を使用するWebマップなど、このパラダイムには自然に当てはまらない機能に対しても、nullを返してレイヤを共有キャンバスにレイヤを適用するレンダリング関数を使用することで、宣言的な“Vue風”アプローチを構築可能であることを紹介して、氏は自身の講演を締め括った。

VueとSSR: ベストプラクティス

一連のライトニングトークが終わった後、午後のセッションのオープニングは、Nuxt.js作者のSebastien Chopin氏だった。氏が強調したのは、“サーバサイドレンダリング”というフレーズはやや的外れ – Webアプリケーションは元からサーバでレンダリングされるものだ – であるという点だ。本当に新しい機能はサーバとクライアント間のコードの共有であり、サーバ側でレンダリングされたコンテント上に配置された透過的なクライアント側シングルページアプリケーションという構成なのだ。

氏はこのアプローチを“Universal ”JavaScriptと呼び、そのメリットとして、SEOやソーシャルシェアの容易性、シングルページアプリケーションに比較した場合の初期ロード時間の速さを挙げた。それと同時に、レンダリング後のシングルページアプリケーションを半透明とすることで、Universal JavaScriptアプリでは、クライアント側での完全なコントロール、軽快なページ遷移、データ要件の低さといったSPAのメリットも引き続き享受することができる。

講演の以降の部分では、Vueのサーバサイドレンダリング能力のメリットを活用してUniversal JavaScriptアプリケーションを作成するために必要な選択とステップを示しながら、一連の例を聴衆に紹介した。最後に氏は自身のNuxt.jsフレームワークを紹介し、“vue init nuxt-community/starter-template”でスタータテンプレートをインストールするだけで、あらゆるベストプラクティスが適用可能であることを示した。

Vue Storybookの簡単な概要

次の議題は、SalesLoftのPeter Finn氏によるVue Storybookの紹介だ。Storybookは、インタラクティブなスタイルガイドに準拠したコンポーネント構築の可能なUI開発環境である。元々はReactの普及によって人気を博したライブラリだが、Finn氏はそのVue移植を開発したことで、Vue.jsで簡単に利用できるようにした点を強調した。

講演では、UIテストの分離やUIコンポーネントのドキュメント作成が容易になるなど、Storybookの機能が一通り紹介された。その上でFinn氏は、Storybookを企業内で利用するための変更点として、テスト駆動開発などのプロセスへの代替案としての“UI駆動開発”の可能性を提案した。

Vueファイルコンポーネントによるプロトタイピング

カンファレンスの最後は、MicrosoftのVS CodeチームからPine Wu氏が講演した。Twitterのコメントによると、最も人気のあった講演のひとつであった氏の講演では、Prounという名称の、新たに開発中のプロトタイピングツールが紹介された。

Wu氏が“アートとアーキテクチャの中間”という芸術的スタイルから命名したProunは、VS Codeに統合されたエディタ内プロトタイピングツールである。まだ一般には公開されていないが、氏は講演で、Vuのシングルファイルコンポーネントのイテレーションが極めて短時間で可能であること、コード修正による変化をエディタやブラウザ、開発ツールを行き来することなく即座に確認できること、などを示した。そのプロセスの簡潔さと効率性は、聴衆の自然発生的な喝采を呼び起こしていた。Wu氏は言う。

私が使っているツールは、物事の考え方を根本的に変えるものです。 開発をより簡単にするための役に立つツールを作りたいと心から願っていますし、これらのツールを使うことで、よりシンプルなものを作ることができます。