$30 off During Our Annual Pro Sale. View Details »

JSXで作るDSL / jsx-dsl

mottox2
September 04, 2019

JSXで作るDSL / jsx-dsl

gifteeさんで行われた『フロントエンド Night #1』のLT資料です。

https://giftee.connpass.com/event/141943/

mottox2

September 04, 2019
Tweet

More Decks by mottox2

Other Decks in Technology

Transcript

  1. 2019.09.04 フロントエンド Night #1 / @mottox2
    JSXでつくるDSL

    View Slide

  2. フロントエンドエンジニア(Web/iOS)
    Gatsby, Gridsome, Next.js, etc
    お仕事
    Watching
    mottox2
    @
    ؿٔ٦ٓٝأ8FCؒٝآص،
    ⾃⼰紹介

    View Slide

  3. #ϑϩϯτΤϯυNight
    DSL
    • DSL(Domain Specific Language)
    • ドメインに特化した⾔語
    • 例: itamae
    • Ruby製のプロビジョニングツール

    View Slide

  4. #ϑϩϯτΤϯυNight
    JSX
    • JavaScript の構⽂の拡張
    • ⾒⽅によっては『Viewを記述するためのDSL』
    • BabelによってReact.createElementに変換して使っている

    View Slide

  5. #ϑϩϯτΤϯυNight
    JSXから他形式への変換
    XML, JSON, PlainText
    などのフォーマット
    output
    input

    View Slide

  6. • 技術同⼈誌によく使われるフォーマット。ワンソースでPDFやEPUBに変
    換が可能。
    jsx-review: JSXをRe:VIEW形式に変換する
    GitHub mottox2/jsx-review

    View Slide

  7. #ϑϩϯτΤϯυNight
    1. コンポーネントの定義
    • コンポーネントを定義、TypeScriptの型を付けておくとよい。

    View Slide

  8. #ϑϩϯτΤϯυNight
    2. JSXをJSONへ変換
    • react-test-rendererを使うと、Reactコンポーネントをオブジェクトに変
    換できる。

    View Slide

  9. #ϑϩϯτΤϯυNight
    3. JSONをRe:VIEWへ変換
    • Reactコンポーネントから⽣成したオブジェクトをtypeごとに変換する。

    View Slide

  10. #ϑϩϯτΤϯυNight
    4. 表⽰するメソッドを実装
    • Reactコンポーネントから⽣成したオブジェクトをtypeごとに変換する。

    View Slide

  11. #ϑϩϯτΤϯυNight
    利点: TS/JSDocの補完が効く

    View Slide

  12. #ϑϩϯτΤϯυNight
    利点: TSの型チェックが効く

    View Slide

  13. #ϑϩϯτΤϯυNight
    まとめ
    • JSXをベースにHTML以外のアウトプットを想定したDSLが作れる。
    • React + TypeScriptで磨かれたDXがそのまま流⽤できる。
    • 補完 + 型チェック + フォーマット + ドキュメント
    • VSCode(No Plugin)

    View Slide

  14. 技術書典7で頒布します

    View Slide

  15. Thank you!
    2019.09.04 フロントエンド Night #1 / @mottox2

    View Slide