JSXで作るDSL / jsx-dsl

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

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

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