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