「デザインツールをつくりなおす話」
Vue.js Tokyo v-meetup #8
甲斐 啓真

@keimakai1993
CPO @ STUDIO Inc.
甲斐 啓真
UI Designer
Interaction Designer
Frontend Engineer

@keimakai1993
「STUDIO」知っている人🖐
コードを書かないでWebサイトが作れる、
Webデザインプラットフォーム

ユーザー数、約2万人
海外ユーザー比率、約50%
Product Hunt 1位


Editor
Publish
LivePreview


1年前の Vue.js Tokyo v-meetup #4
「Vueでデザインツールを作った話」
1年前はほとんど一人でフロント作ってた
フロントエンドエンジニアが増えた!!






※副業も含む
「デザインツールをつくりなおす話」
開発中のプロトタイプも見せます!
※つぶやいても問題ないです。

平成最後の夏

Team STUDIOは、千葉に集結していた。
Team STUDIOは、千葉に集結していた。
Team STUDIOは、千葉に集結していた。
STUDIOを約1ヶ月かけて、
大規模改修をすることが決定した。
今回のタイミングで機能的に新しくなるのは、
主に以下の2つ
コンポーネント化
三代目D&D
しかし、
Vue1系の時から2年半続く既存のコードを
増築する限界を感じ、
つくりなおすことになった。
主な負債の例①
Vue.js 2以降無くなった、
$dispatch と $broadcast に対応するための、
event hub の通知が飛び回ってる
主な負債の例②
参照渡しされたオブジェクトの深い部分を、
コンポーネント内で直接書き換えてる。
=> どのコンポーネントが書き換えた分からない
view.style.border = '1px solid #000'
主な負債の例③
所々に混ざる、jQuery + jQuery UI
jquery-uiの、draggable、resizeableは
UIライブラリとして極めて良く出来ていて、
今までのSTUDIOを作る上でとても助けられました。

主な負債の例④
ドラッグ&ドロップの部分を、
誰も触りたがらない。
コンポーネント化
Vueコンポーネントはよく使うが、
コンポーネントという機能はどう作るのか。
コンポーネントとは何か?



Sketch: Symbol
Figma: Component
Vue: Vue Component (.vue )
共通パーツ
雑に解釈すると、
上書きできる
override or props
コンポーネントのイメージ

FigmaのComponentを使用
別の解釈
UIパーツは必ず何かしらのデータと紐づく
りんご
"りんご"というstringのデータ

というimageのデータ

別の解釈
コンポーネントは必ずオブジェクトと
紐付けられるのでは?
現在開発中のコンポーネント機能の紹介
今まで通りに
ボックス(≒ element)を組み合わせて
パーツを作成

⌘ + K でコンポーネント化

データが増えると自動的に繰り返し

v-for="data in datas"
ネストしたデータにも対応

開発中の最新版のデモ
三代目 D&D
現在のD&Dは二代目
「使い方に癖がある」などとよく言われる
=> 直感に反する挙動をする事がある
ボックス内に入れようと思ったら逃げる
よろしくない挙動①

左のボックスの下に置けない
よろしくない挙動②

なぜ発生するか?
ボックスモデルに準拠したレイアウトモデル
基本的にflex-boxのレイアウトを採用
二代目D&Dの設計がイケてない
というよりは、
イケてるD&Dを開発中!!
三代目D&D
開発中の最新版のデモ
おわりに
「インフラ・バックエンドエンジニア」
STUDIOでは、Vue.js が好きな
募集しています
kubernetes・Larabel(Lumen)
ご清聴ありがとうございました。
deck
By keima
deck
- 3,032