katashin
katashin は Vue.js コアチームメンバー、フロントエンドテックリードです。静的型付き言語を好み、Vue.js 本体と周辺ライブラリの TypeScript サポートに貢献しています。最近は開発体験（DX）の向上に興味を持っており、Vue Designer を始めとした各種 OSS ツールを作成、メンテナンスしています。フロントエンドの開発をリードした経験を持ち、大小様々に存在するプロジェクトの HTML や CSS を含むフロントエンド全般の技術選定、設計を行い、破綻しない土台作りに取り組んでいました。
Vue Designer: デザインと実装の統合
従来の Web サイト制作ではデザイナーがデザインから HTML、CSS の実装までを行っていました。しかし、現在 Web の UI は複雑になり、ロジックを持つアプリケーションも作られるようになっています。デザイナーがすべてを制作するのは難しくなり、デザイナーと開発者の分業が一般的になっています。
デザイナーと開発者のコミュニケーションが課題です。デザインは静的なモックアップで作られ、それをコードで再現することは二度手間です。デザインが静的なので、ウィンドウ幅や入力データの変化などの動的な要因をデザイン段階で十分に考慮することが困難です。運用を続けているうちにデザインデータと実装との乖離が発生することもあります。
本セッションではこの課題を解決するため開発中の Vue Designer をご紹介します。Vue Designer はコンポーネントのコードからグラフィカルなプレビューを表示し、デザイナーはそれを直接編集できます。デザインは即座に実装に反映され、実装の変更もデザインに反映されます。ビューポートのサイズやコンポーネントの入力などの動的な値を変更してプレビューもできます。