Web Componentsを作れる デザインツールの開発

PWA Night vol.42 ～Design Tools〜 での発表
https://pwanight.connpass.com/event/256731/

Transcript

1. Web Componentsを作れる
 デザインツールの開発 2022-08-17 PWA Night vol.42 @seanchas_t Macaron
2. @seanchas_t (しゃなはす) フリーランスエンジニア 以前はiOSアプリ/Qt/C++など Webフロントエンド、ちょっとUIデザイン フロントエンドは上から下まで (Wasm/WebGLなどからUIデザインまで) 全部やりたい派 個人開発: Web開発者向けのデザインツールを開発中
3. 以前はiOSアプリ/Qt/C++など Webフロントエンド、ちょっとUIデザイン フロントエンドは上から下まで (Wasm/WebGLなどからUIデザインまで) 全部やりたい派 個人開発: Web開発者向けのデザインツールを開発中
4. Macaron https://macaron-elements.com/
5. Macaronってどんなツール? 背景とモチベーション 技術構成 今後の展望
6. Macaronってどんなツール? 背景とモチベーション 技術構成 今後の展望
7. VS Code Extension
8. Figmaに近いUIでWeb Componentsを作成 R ドラッグで要素追加(テキスト/四角3 R リサイズ/移G R サイドバーでスタイル変更 Macaronってどんなツール?
9. 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";
10. Macaronってどんなツール? Figma Pluginで Figmaファイルから コピーペースト
11. https://macaron-elements.com/ Webサイトに動くデモあります
12. Macaronってどんなツール? 背景とモチベーション 技術構成 今後の展望
13. フロントエンドUI開発のペイン 脳内CSSパース/レンダリングがしんどい デザインを実装する単純作業が大変
14. Design as Code Code as Design @seanchas_tが考えた理想世界 デザインがそのままコードになる世界 コードがデザインとして振る舞える世界
15. @seanchas_tが考えた理想世界 デザインがそのままコードになる世F T 実装の単純作業がな2 T デザインと実装の乖離がない コードがデザインとして振る舞える世界
 ・何が実装されているのか一目でわかる
16. 1つの解としての コードの一部をデザインツールで構築する仕組み → Macaron
17. Macaronってどんなツール? 背景とモチベーション 技術構成 今後の展望
18. エディタUI: 技術構成 UIフレームワーク React 状態管理 MobX
19. MobXの紹介 Reactは単なる状態色付け係に! オブジェクトのプロパティや配列などを observable(変更検知可能)にできる Reactなどのviewでそれらを参照すると 変更があったときに自動でviewを更新する仕組みを提供
20. 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 {() 公式サイトより
21. MobXの良いところ + Macaronが採用した理由 b ReactなどのUIフレームワークに依存しなV b クラスベースで状態のモデリングができY b → 複雑なドメインロジックを持つアプリに最0 ) テストしやすV ) オブジェクト指向で設計できる
22. EditorState Document Component Element Text Element React UI MobX 状態モデル (概略) エディタUI: アーキテクチャ
23. VS Code Extension: アーキテクチャ VS Code Extension VS CodeやNodeのAPIに自由に アクセスできる ファイル (.macaron) ファイル (.macaron) Web View エディタUIを表示 Web View タブで表示 postMessageで通信 同期
24. 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
25. Macaronってどんなツール? 背景とモチベーション 技術構成 振り返りと今後の展望
26. 技術的な成果 複雑GUIに対する知見がめっちゃ溜まった 自分でコードを書く開発のいいところ: プロダクトがうまく行ってもいかなくても技術が貯まる
27. リリースしてみたものの、 良い使い所が自分でも見つけられない… ちょっと試してみてその後使わないユーザが多そう →まずは自分で使い込めるプロダクトにしたい
28. Web Componentsを
 ビジュアルエディタの出力先にする弱点
29. React + Web Componentsの対応状況 ReactはWeb Componentsのサポート度がまだ低い https://custom-elements-everywhere.com/
30. 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までお預け
31. Web Componentsの弱点 F customized built-in element → Safariが未対" F (input/buttonとか には作れない) shadow rootが特定のタグにしか作れない input/buttonなどのスタイルを変えただけの コンポーネントが作りにくい
32. CSS界隈の新しい潮流
33. Utility-First な ライブラリ/フレームワークの台頭 などなど…
34. Utility-First (と言われる) ライブラリ/フレームワークの特徴 q CSSはHTML要素一つ一つに対しに記述する
 (インラインスタイルっぽいV q インラインスタイルより強I ‡ 省略記法で場所取らな` ‡ 擬似要素/擬似クラス/レスポンシブデザインに対応
35. Utility-First (と言われる) ライブラリ/フレームワークの特徴 D CSSはHTML要素一つ一つに対しに記述する
 (インラインスタイルっぽい3 D インラインスタイルより強† ‰ 省略記法で場所取らなq ‰ 擬似要素/擬似クラス/レスポンシブデザインに対応 Figmaとかのレイヤーっぽい
 ビジュアルエディタと相性が良さそう
36. React+Tailwindで書かれたコードを 直接いじれるツールを作る…? twitter.com/seanchas_t/status/1558032125987024896
37. ありがとうございました! もっと詳しい話は でもお話しできます! Meety