BT

InfoQ ホームページ ニュース VueConf.USのオープニングセッション

VueConf.USのオープニングセッション

ブックマーク

原文(投稿日:2018/04/02)へのリンク

読者の皆様へ: 皆様のご要望にお応えするべく、ノイズを削減する機能セットを開発しました。皆様が関心をお持ちのトピックを、EメールとWeb通知で受け取ることができます。新機能をぜひお試しください。

始めてのVueConf.USが3月26~28日、ニューオリンズで開催され、VueJSコアチームと数百名のVue開発者が世界中から集結した。カンファレンスでは、VueJSコアチームのメンバが指導する1日のワークショップに続いて、2日間の講演が行われ、新リリースとプロジェクトのプロセス、Vue内部の詳細、ベストプラクティスが発表された。

ここでは初日の講演の様子を紹介する。

基調講演 — プロジェクトプロセスの成熟化

カンファレンスは、Vueの開発者であるEvan You氏による基調講演で始まった。講演では、2016年以降のVueの成長について述べるとともに、間もなく始まる新しい開発と新たなプロジェクトプロセスが発表された。You氏はVueの成長について、次のように述べている。

2017年には指数級数的な成長が見られました。2016年に比較しても、さらに速くなっています。2016年は爆発的な成長であったと思っていましたが、2017年はそれを上回りました。

私たちは、2017年にgithubでstarを受けた唯一のプロジェクトです。

成長に続くのはプロセスの成熟化だ。標準的なwebpack設定での動作性向上を目的としたvue-loaderの書き直し、vue-cliのアップグレード性改善といったツールのアップデートとともに、大きな発表となったのが、新たなプロセスの採用だ。

Vueは今後、3ヶ月毎の新たなマイナーリリース、メジャーリリースの最低6ヶ月前の通知という、標準化されたリリースサイクルに移行する。この変更に合わせて、単一のリリースチャネルから4つに分離したリリースチャネルへの移行も行う。さらに、RustやEmber、あるいはそれ以降のベストプラクティスの例に倣って、公式のRFCプロセスを制定する。

VueJS内部 — Vueリアクティブシステムの内側

VueMastery.com創設者のGregg Pollack氏が“Deciphering You”と題して講演し、Vue.jsのリアクティブシステムの内側を解説した。最初に氏は、単純な依存性追跡クラスを実装し、Object.definePropertyを使ってその依存性追跡にフックするゲッタとセッタをセットアップすることで、シンプルなリアクティブシステムを構築する方法を聴衆に説明した。

続いて氏は、聴衆とともにVueJSのソースコードをウォークスルーし、コールスタックを掘り進み、Vueがリアクティブを実装している部分で氏が説明したものとまったく同じパターンが使われていることを確認した。これによってVueは、関数のデータ依存関係をすべて追跡し、データ変更に対して自動的に従属値を再計算することが可能になる。

最後にPollack氏は、Vueがテンプレートをレンダリングする方法について説明した。この処理は、テンプレートをレンダリングメソッドにコンパイルする2ステップの単純なプロセスで実行される。その後、そのレンダリングメソッドを使って仮想DOMノードが生成され、フレームワークがそれをブラウザに変換する。レンダリングが関数に帰着するという事実は、前に説明したものとまったく同じ依存性の追跡が可能であることと同時に、テンプレートのリアクティブ性がコアリアクティブシステムの自然な結果であることを示している。

GitlabにおけるVue

GitlabのフロントエンドのリーダであるJacob Schatz氏は“How We Do Vue at Gitlab”という題で講演を行ない、GitlabがVueを採用して実際のプロジェクトに取り入れた状況について説明した。多くの講演者が、開発者はスクラッチからの開発プロジェクトに従事しているものと仮定しているのに対して、Schatz氏は、jQuery中心に記述された大規模な既存アプリケーションという状況を想定した上で、意思決定と移行プロセスについて詳説した。氏の説明によると、推奨を決定する前に、チームは複数のフレームワークを評価していた。Vueを選択した理由について、氏は次のように述べている。

Vueは最大の機能に対して、最小の学習曲線を持っています。
これらのフレームワークはいずれも機能しますが、作業対象とするアプリケーションのスケールアップという点に関しても、十分に効果的でしょうか?Vueならば、すべて簡単です。

大規模な既存プロジェクトでの作業では、複雑なフロントエンドビルドプロセスという贅沢は望むべくもないが、単にVueをページに追加するだけで、新機能の開発を止めることなく、Vueを使うためのアプリケーションのステップ単位、コンポーネント単位でのリライトが可能になった、と氏は説明した。

動きのあるVue (Vue in Motion)

“Animation at Work”の著者であるRachel Nabors氏は、Vueを使ったアニメーションとトランジションの実装を取り上げて、“Vue in Motion”と題した講演を行った。CSSプロパティのイベントウォッチャとしてのCSSトランジションの説明から始まった講演で、Nabor氏は、Vueエレメントがクラスセットを生成し、それらがプログレッシブに適用される様子について説明した。これによってエレメントの追加、削除、表示、非表示に対するフックが可能になり、アニメーションをシンプルに作成することができる。例えば、“uncloak”という名前のトランジションには、unlcloak-enter、uncloak-enter-to、uncloak-enter-activeという転入(transition in)クラス、およびuncloak-leave、uncloak-leave-to、uncloak-leave-activeという転出(transition out)クラスが適用される。

続いて氏は、複数のエレメントが関与する動作をコーディネートするためにトランジショングループを使用する方法、あるエレメントを別のエレメントに置き換える場合のオーダを決定するトランジションモードについて説明した。トランジションCSSフックの各セットに対しては、標準的なVueイベントバインディングを使用した同等のJavaScriptフックのセットが用意されている。これにより、一連の“leave”クラスに結合する代わりに、単純にv-bind:leave=“animationFunction” で“leave”イベントにバインドすることができる。

Vueアプリのテスト

この朝最後の講演では、Vueコアチームのメンバで“vue-test-utils”作者のEdd Yerburgh氏が、Vueアプリケーションのテストについて語った。氏が取り上げたのはエンドツーエンドテスト、スナップショットテスト、ユニットテストからなるテストピラミッドをフロントエンドに適用する方法だ。

Yerburgh氏はまず、各タイプのテストのメリットとデメリットを細分化した。エンドツーエンドテストでは、ブラウザを使ってコードを実行することにより、ユーザがコードを実際に使用する状況に最も近づくことが可能だが、デバッグが困難であったり、速度の低下を招く可能性がある。その対極となるユニットテストは、デバッグが用意で高速な反面、十分な注意を払わなければ、実装の重要でない部分に対して脆弱であったり、敏感であったりする可能性がある。スナップショットテストは、スピードと脆弱性の観点から、E2Eコンポーネントとユニットテストの中間点に位置している。このテストでは、レンダリングされたコンポーネントコードのスナップショットを取得して、変更について比較を行う。このテストは意図しない変更からの保護、すなわち、レンダリングされたマークアップを開発者が誤って変更したり、あるいは機能修正中に重要なCSSクラスを意図せずに削除したりすることを防ぐために使用される。

全体として — コミュニティの重要性

カンファレンス全体を通じて、コミュニティが強調され、参加者は極めてポジティブで、“Vue”の語呂合わせが流行していた。カンファレンスに対する考えを質問されたKelvin Spencer氏は、次のように答えていた。

このカンファレンスで、プログラミングの未来に関する完璧な“ビュー(訳注:Vueに掛けている)”を得ることができました。

他の参加者も同意して、さらにコミュニティの快適さと居心地よさを強調していた。参加者のひとりであるMike Skott氏によれば、

嬉しかったのは多くの人に会えたことです — 怖じ気づかずに見知らぬ人に近づくことで、共通するものがあることが分かって、素晴らしい人たちをたくさん見つけることができました。

Richard Tallent氏もそれに同意して、

どれかひとつを選ぶのは難しいですね — ノートも15ページ程取りました。ですが、最も素晴らしかったのは、幅広い開発者や開発者エクスペリエンス、プラットフォームとその可能性に対して同じレベルの興奮を感じている人たちに出会えたことです。

 

講演はすべて記録されており、VueMastery.comに掲載される予定である。InfoQでもQ&Aと要約でVueConfについてお伝えしている。

 
 

この記事を評価

採用ステージ
スタイル
 
 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。