コードを書かないでWebサイトが作れる、

Webデザインプラットフォーム

開発中のプロトタイプも見せます！

平成最後の夏

Team STUDIOは、千葉に集結していた。

Team STUDIOは、千葉に集結していた。

Team STUDIOは、千葉に集結していた。

STUDIOを約1ヶ月かけて、

大規模改修をすることが決定した。

今回のタイミングで機能的に新しくなるのは、

主に以下の２つ

コンポーネント化

三代目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)

ご清聴ありがとうございました。