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
   

   View Slide

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

   View Slide

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

   View Slide

4. Macaron
   https://macaron-elements.com/
   

   View Slide

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

   View Slide

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

   View Slide

7. VS Code Extension
   

   View Slide

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

   View Slide

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";
   
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. @seanchas_tが考えた理想世界
    デザインがそのままコードになる世F
    T 実装の単純作業がな2
    T デザインと実装の乖離がない
    
    
    コードがデザインとして振る舞える世界

    ・何が実装されているのか一目でわかる
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    {()
    公式サイトより
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. Web Componentsを

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

    View Slide

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

    View Slide

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までお預け
    

    View Slide

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

    View Slide

32. CSS界隈の新しい潮流
    

    View Slide

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

    View Slide

34. Utility-First (と言われる)
    
    ライブラリ/フレームワークの特徴
    q CSSはHTML要素一つ一つに対しに記述する

    (インラインスタイルっぽいV
    q インラインスタイルより強I
    ‡ 省略記法で場所取らな`
    ‡ 擬似要素/擬似クラス/レスポンシブデザインに対応
    

    View Slide

35. Utility-First (と言われる)
    
    ライブラリ/フレームワークの特徴
    D CSSはHTML要素一つ一つに対しに記述する

    (インラインスタイルっぽい3
    D インラインスタイルより強†
    ‰ 省略記法で場所取らなq
    ‰ 擬似要素/擬似クラス/レスポンシブデザインに対応
    Figmaとかのレイヤーっぽい

    ビジュアルエディタと相性が良さそう
    

    View Slide

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

    View Slide

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

    View Slide