Share
Embed
Slide 1
Slide 1 text
2019.09.04 フロントエンド Night #1 / @mottox2
JSXでつくるDSL
Slide 2
Slide 2 text
フロントエンドエンジニア（Web/iOS）
Gatsby, Gridsome, Next.js, etc
お仕事
Watching
mottox2
@
ؿٔ٦ٓٝأ8FCؒٝآص،
⾃⼰紹介
Slide 3
Slide 3 text
#ϑϩϯτΤϯυNight
DSL
• DSL(Domain Specific Language)
• ドメインに特化した⾔語
• 例: itamae
• Ruby製のプロビジョニングツール
Slide 4
Slide 4 text
#ϑϩϯτΤϯυNight
JSX
• JavaScript の構⽂の拡張
• ⾒⽅によっては『Viewを記述するためのDSL』
• BabelによってReact.createElementに変換して使っている
Slide 5
Slide 5 text
#ϑϩϯτΤϯυNight
JSXから他形式への変換
XML, JSON, PlainText
などのフォーマット
output
input
Slide 6
Slide 6 text
• 技術同⼈誌によく使われるフォーマット。ワンソースでPDFやEPUBに変
換が可能。
jsx-review: JSXをRe:VIEW形式に変換する
GitHub mottox2/jsx-review
Slide 7
Slide 7 text
#ϑϩϯτΤϯυNight
1. コンポーネントの定義
• コンポーネントを定義、TypeScriptの型を付けておくとよい。
Slide 8
Slide 8 text
#ϑϩϯτΤϯυNight
2. JSXをJSONへ変換
• react-test-rendererを使うと、Reactコンポーネントをオブジェクトに変
換できる。
Slide 9
Slide 9 text
#ϑϩϯτΤϯυNight
3. JSONをRe:VIEWへ変換
• Reactコンポーネントから⽣成したオブジェクトをtypeごとに変換する。
Slide 10
Slide 10 text
#ϑϩϯτΤϯυNight
4. 表⽰するメソッドを実装
• Reactコンポーネントから⽣成したオブジェクトをtypeごとに変換する。
Slide 11
Slide 11 text
#ϑϩϯτΤϯυNight
利点: TS/JSDocの補完が効く
Slide 12
Slide 12 text
#ϑϩϯτΤϯυNight
利点: TSの型チェックが効く
Slide 13
Slide 13 text
#ϑϩϯτΤϯυNight
まとめ
• JSXをベースにHTML以外のアウトプットを想定したDSLが作れる。
• React + TypeScriptで磨かれたDXがそのまま流⽤できる。
• 補完 + 型チェック + フォーマット + ドキュメント
• VSCode（No Plugin）
Slide 14
Slide 14 text
技術書典7で頒布します
Slide 15
Slide 15 text
Thank you!
2019.09.04 フロントエンド Night #1 / @mottox2