Web アプリ・サイト開発

デザイン

実装

UX

情報設計

アクセシビリティ

スタイルガイド

...など

コード設計

状態管理

レスポンシブ

アニメーション実装

...など

デザイナー

開発者

デザインと実装が分かれる問題

みんなが解決しようとしている

Dreamweaver デザインビュー

vuegg

Framer X

SFC

サーバー

クライアント

SFC が唯一のデータ

プレビュー上の変更は SFC に反映される

SFC を変更するとプレビューも変わる

実際のコードがデータ

開発の任意のフェーズで使える

プレビュー上でデザイン

デザインが動的

SFC の静的解析

vue-eslint-parser

@babel/parser

postcss

AST

• プレビューのレンダリング
• 意味解析
  • props / data
  • あたってるスタイル
  • import してるコンポーネント
• GUI 上の操作との対応付
• コード編集・生成

プリプロセッサ

TypeScript のみサポート

今はあまりサポートを増やすつもりはない

やりたい人がいればどうぞ

Vue のレンダラの再実装

{{ exp }}

v-for

<slot>

...

AST

<VueNode :data="ast" />

なぜ再実装したか

描画するだけでなく任意の処理を挟めるようにしたい

D&D で UI 構築

ガイドの表示

ノードの選択

実装してどうだったか

大体は実装済み

意外にエッジケースが多い

Vue のレンダラを使う方法も模索したい

サーバー / クライアント

エディター連携

コード解析

...

WebSocket

サーバー

プレビュー

GUI 操作

...

クライアント

当時の VSCode の WebView が
想定してない使い方だったため

他のエディターに対応しやすい

デザイナー向けにスタンドアローン版を作るとか

ホストにつないで共同編集するとか

メリット

デバッグ時も楽

• 普通のブラウザで動作確認できる
• 開発ツールが使える
  • ​Chrome devtool
  • Vue devtool

v1.0.0 までの展望

開発者が使って便利なものにする

Preview tool of SFC

Chrome devtools on VSCode

Layouting tool

アイデア

npm install

element-ui

vuetify

vuesax

quasar-framework

とするだけでデザインで使える

デザイナーと開発者が
GitHub で同じコードを編集

コンポーネントカタログの
自動生成