Web Componentsを作れる
 デザインツールの開発 2022-08-17 PWA Night vol.42 @seanchas_t Macaron

@seanchas_t (しゃなはす) フリーランスエンジニア 以前はiOSアプリ/Qt/C++など Webフロントエンド、ちょっとUIデザイン フロントエンドは上から下まで (Wasm/WebGLなどからUIデザインまで) 全部やりたい派 個人開発: Web開発者向けのデザインツールを開発中

以前はiOSアプリ/Qt/C++など Webフロントエンド、ちょっとUIデザイン フロントエンドは上から下まで (Wasm/WebGLなどからUIデザインまで) 全部やりたい派 個人開発: Web開発者向けのデザインツールを開発中

Macaron https://macaron-elements.com/

Macaronってどんなツール? 背景とモチベーション 技術構成 今後の展望

Macaronってどんなツール? 背景とモチベーション 技術構成 今後の展望

VS Code Extension

Figmaに近いUIでWeb Componentsを作成 R ドラッグで要素追加(テキスト/四角3 R リサイズ/移G R サイドバーでスタイル変更 Macaronってどんなツール?

Macaronってどんなツール? 専用ファイル (.macaron) → JSに書き出し Vite/webpackでそのままimport import from export default macaronLoader ; { : [macaronLoader()], }; "@macaron-elements/loader-vite" plugins < = > import > < > > script script my-component my-component type "module" "./components.macaron";

Macaronってどんなツール? Figma Pluginで Figmaファイルから コピーペースト

https://macaron-elements.com/ Webサイトに動くデモあります

Macaronってどんなツール? 背景とモチベーション 技術構成 今後の展望

フロントエンドUI開発のペイン 脳内CSSパース/レンダリングがしんどい デザインを実装する単純作業が大変

Design as Code Code as Design @seanchas_tが考えた理想世界 デザインがそのままコードになる世界 コードがデザインとして振る舞える世界

@seanchas_tが考えた理想世界 デザインがそのままコードになる世F T 実装の単純作業がな2 T デザインと実装の乖離がない コードがデザインとして振る舞える世界
 ・何が実装されているのか一目でわかる

1つの解としての コードの一部をデザインツールで構築する仕組み → Macaron

Macaronってどんなツール? 背景とモチベーション 技術構成 今後の展望

エディタUI: 技術構成 UIフレームワーク React 状態管理 MobX

MobXの紹介 Reactは単なる状態色付け係に! オブジェクトのプロパティや配列などを observable(変更検知可能)にできる Reactなどのviewでそれらを参照すると 変更があったときに自動でviewを更新する仕組みを提供

class constructor this this this const new const { @observable secondsPassed = () { makeObservable( ) } increase() { .secondsPassed += } reset() { .secondsPassed = } } myTimer = Timer() TimerView = observer(({ timer }) => ( < = => timer.reset()}>Seconds passed: {timer.secondsPassed} > )) setInterval(() => { myTimer.increase() }, ) Timer 0 1 0 onClick 1000 button button {() 公式サイトより

MobXの良いところ + Macaronが採用した理由 b ReactなどのUIフレームワークに依存しなV b クラスベースで状態のモデリングができY b → 複雑なドメインロジックを持つアプリに最0 ) テストしやすV ) オブジェクト指向で設計できる

EditorState Document Component Element Text Element React UI MobX 状態モデル (概略) エディタUI: アーキテクチャ

VS Code Extension: アーキテクチャ VS Code Extension VS CodeやNodeのAPIに自由に アクセスできる ファイル (.macaron) ファイル (.macaron) Web View エディタUIを表示 Web View タブで表示 postMessageで通信 同期

VS Code Custom Editor API "contributes" "customEditors" "viewType" "displayName" "selector" "filenamePattern" : { : [ { : , : , : [ { : } ] } ] }, "macaron.macaronFile" "Macaron" "*.macaron" 指定した拡張子のファイルを開くと
 テキストエディタの代わりに webviewのエディタを表示させられる https://code.visualstudio.com/api/extension-guides/custom-editors

Macaronってどんなツール? 背景とモチベーション 技術構成 振り返りと今後の展望

技術的な成果 複雑GUIに対する知見がめっちゃ溜まった 自分でコードを書く開発のいいところ: プロダクトがうまく行ってもいかなくても技術が貯まる

リリースしてみたものの、 良い使い所が自分でも見つけられない… ちょっと試してみてその後使わないユーザが多そう →まずは自分で使い込めるプロダクトにしたい

Web Componentsを
 ビジュアルエディタの出力先にする弱点

React + Web Componentsの対応状況 ReactはWeb Componentsのサポート度がまだ低い https://custom-elements-everywhere.com/

React + Web Componentsの対応状況 RFC: Plan for custom element attributes/properties in React 19 #11347 https://github.com/facebook/react/issues/11347 Web Componentsの完全サポートは React 19までお預け

Web Componentsの弱点 F customized built-in element → Safariが未対" F (input/buttonとか には作れない) shadow rootが特定のタグにしか作れない input/buttonなどのスタイルを変えただけの コンポーネントが作りにくい

CSS界隈の新しい潮流

Utility-First な ライブラリ/フレームワークの台頭 などなど…

Utility-First (と言われる) ライブラリ/フレームワークの特徴 q CSSはHTML要素一つ一つに対しに記述する
 (インラインスタイルっぽいV q インラインスタイルより強I ‡ 省略記法で場所取らな` ‡ 擬似要素/擬似クラス/レスポンシブデザインに対応

Utility-First (と言われる) ライブラリ/フレームワークの特徴 D CSSはHTML要素一つ一つに対しに記述する
 (インラインスタイルっぽい3 D インラインスタイルより強† ‰ 省略記法で場所取らなq ‰ 擬似要素/擬似クラス/レスポンシブデザインに対応 Figmaとかのレイヤーっぽい
 ビジュアルエディタと相性が良さそう

React+Tailwindで書かれたコードを 直接いじれるツールを作る…? twitter.com/seanchas_t/status/1558032125987024896

ありがとうございました! もっと詳しい話は でもお話しできます! Meety