JSXで作るDSL / jsx-dsl

297a42b94a1bda236982ec1cd81089b6?s=47 mottox2
September 04, 2019

JSXで作るDSL / jsx-dsl

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

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

297a42b94a1bda236982ec1cd81089b6?s=128

mottox2

September 04, 2019
Tweet

Transcript

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

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

    ⾃⼰紹介
  3. #ϑϩϯτΤϯυNight DSL • DSL(Domain Specific Language) • ドメインに特化した⾔語 • 例:

    itamae • Ruby製のプロビジョニングツール
  4. #ϑϩϯτΤϯυNight JSX • JavaScript の構⽂の拡張 • ⾒⽅によっては『Viewを記述するためのDSL』 • BabelによってReact.createElementに変換して使っている

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

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

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

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

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

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

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

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

  13. #ϑϩϯτΤϯυNight まとめ • JSXをベースにHTML以外のアウトプットを想定したDSLが作れる。 • React + TypeScriptで磨かれたDXがそのまま流⽤できる。 • 補完

    + 型チェック + フォーマット + ドキュメント • VSCode(No Plugin)
  14. 技術書典7で頒布します

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