レポート

Vue.jsの進化を感じるカンファレンス――Vue Fes Japan 2018

この記事を読むのに必要な時間:およそ 4 分

KARTEを支えるVue.jsの技術

プラチナスポンサーセッションでは,PLAIDの韓徹氏がCXプラットフォーム KARTEでのVue.js活用について発表します。

Vue.jsを2014から使い始め,650超のコンポーネント作成を誇るKARTE。Vue.jsではコンポーネントごとに開発できるため,スピード感を活かせます。

Vue.jsだからできた挑戦として,GUIによるコンテンツ編集などをVue.jsで実現できたことがあげられます。Vue.jsのディレクティブを更に改造して,クライアント自信が簡単にコンポーネントを作ることを可能としました。

実際に顧客がVueコンポーネントを作っているという状況を実現している,珍しいプラットフォームです。Vue.jsを最初期から活用しているため,会場の関心が高かったです。

PLAIDの韓氏

PLAIDの韓氏

一歩先行くVueアニメーション

Sarah Drasner氏(Microsoft)はVue.jsのアニメーションについて解説します。

Sarah Drasner氏,発表中ではMicrosoft AzureとVue.jsの連携などについても紹介

Sarah Drasner氏,発表中ではMicrosoft AzureとVue.jsの連携などについても紹介

アニメーションをわかりやすくするためには意識しなければいけないことがあります。どううやっていいアニメーションを作るか。次の項目がカギとなります。

  • transitionの見直し
  • ウォッチャー/リアクティビティ
  • カスタムディレクティブ
  • ページトランジション(Nuxt)

Vueのtransitionコンポーネントでは変化を宣言的に記述でき,他のコンポーネントへの再利用も容易です。トランジションモードやTransitionGroupコンポーネント,アニメーションを快適にするためのFLIP原則リアクティブAPIの連携などの話題も紹介します。

SVGとリアクティブシステムを採用したVue.jsは相性がよく,moment.jsのような巨大なライブラリなしでも十分にアニメ―ションが使えるなどVue.jsのアニメーションまわりの充実具合を解説します。その他にも,さまざまな実例とともにネイティブアプリ風のページトランジション。VueとThree.jsの組み合わせなどを紹介してくれました。

次世代のデザインツールとなりえるか? Vue Designer

katashin氏は現在開発中のデザインツール Vue Designerについて紹介しました。Vue Designerは,現段階ではまだプロトタイプ,コンセプト共有レベルの話です。

フロントエンドではデザイン(PSDなどのカンプやSketchで作成したプロトタイプ)と実装が分割されてしまうという課題があります。デザインと実装が行ったり来たり,というフローの分断です。職域が完全に別れ,Webの複雑化で役割が複雑化してそれぞれに高度な専門性がもとめられるようになりました。

ファイルがデザインと実装で非対応,機能追加時の実装とデザインのズレ,画面サイズの変更に伴う動作変更をどうするか…… など,これを背景に実装とデザインのズレが生まれてしまいます。デザイン実装分断問題はみんな問題を感じている領域です。katashin氏のニーズと近いツールでは,Reactと連携しやすいデザインツールFramerXがあります。

こういった課題を背景にSFCが実装かつデザインという統合されたデザイン・開発環境を構築するためのツールがVue Designerです。現在VS Code上で動くデモで,props変更時の見た目の変化やGUIベースの要素に関する操作やコード側への反映が実装済みであることを見せてくれました。

katashin氏はプロトタイプのVue Designerを実際に動かして説明

katashin氏はプロトタイプのVue Designerを実際に動かして説明

Atomic Desiginはデザイナーとデベロッパーの課題を解決している,のか?

Farmnoteの菅原孝則氏は,Atomic Designをデザイン側・実装側双方に立ち考察したプレゼンテーションを行いました。デザイナー・デベロッパー両方を経験し17年のキャリアを誇る視点から解説します。

Atomic Design,デザイナーとエンジニア(デベロッパー)に同じ目線を与えたように言われていることもありますが,必ずしもそうではないと主張します。Atomic Designはデザイナーが疲弊しがちだというのです。

Atomic Designに代表されるコンポーネント指向について,デザイナー,エンジニアで長所短所に関する認識にズレがあり,必ずしもそこを共有できているわけではありません。Atomic Designや,その中心的な考え方であるコンポーネント指向はエンジニア(運用や開発効率向上)よりの知識です。

デザイナーが重視する価値観から誕生したものではないため,これらを習得する学習コストは無視できません。Atomic Designでデザイナー・エンジニア間のすべての問題が解決するわけではないということです。

そもそもデザイナーがコンポーネント指向を身に着けようにも,これまではコンポーネント前提のツールがなく,なれることができないという課題を指摘します。Sketchのようなコンポーネントベースの手段を手に入れれば,徐々に慣れていく問題ではないかとも提唱しています。

コンポーネント指向が身についていないのに,Atomic Designいきなりやってもらうのは無理な話です。

では,どうするのか? Deisgn Opsという考え方を紹介します。Dev Opsはデザイナーが自分の仕事に専念しやすい状況をつくる,デザインプロセスをサポートする仕組み・組織を作ることでデザイナー・エンジニアが協業しやすくするという考え方です。

Design Opsをもとにエンジニアがデザインツールを身につける,デザインナーが働きやすいようエンジニアが頑張る,デザイナーの横についてコンポーネントの写経し続けるといったようにプロセス改善でどうにかすることがデザイナーとエンジニアの協業をより良いするものにするために必要かもしれません。

Vue.jsはエンジニア,デザイナー双方から注目を集める技術のため多くの参加者のいるセッションでした。

参加者の質問に回答する菅原氏

参加者の質問に回答する菅原氏

著者プロフィール

野田大貴(のだだいき)

株式会社技術評論社、雑誌編集部所属。主な業務は書籍の編集。

Twitter:@nodawep