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

JSXで作るDSL / jsx-dsl

mottox2
September 04, 2019
Technology
1
1.5k

JSXで作るDSL / jsx-dsl

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

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

mottox2

September 04, 2019
Tweet

More Decks by mottox2

See All by mottox2
Figma Plugin公開までの壁を乗り越える
mottox2
1
240
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
390
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.2k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
380
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
2.8k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
30k
プレイヤー目線の技術ブランディング / personal branding
mottox2
4
3.1k
SSRを検討する際にSSGも検討しませんか？ / ssr or ssg
mottox2
15
9.3k
Next.js meets Netlify
mottox2
3
1.5k

Other Decks in Technology

See All in Technology
Small Tips to use Bun with WebSocket Server and WebAssembly Modules
mganeko
0
2.9k
APN AWS Top Engineersが語るAWSの最新セキュリティ
cmusudakeisuke
0
850
コンテナ環境でのJava技術の進化
kazumura
5
1.1k
KubernetesとTerraformのセキュリティ/ガバナンス向上委員会 with OPA
saramune
1
200
ROSCon 2023に発表提案しませんか？
takasehideki
0
360
PyTorchの最近の動向
hamukazu
0
360
スタートアップ企業で始めるAWSセキュリティ対策 ～内部統制の観点から～ / aws-security-and-internal-audit-at-a-startup
yuj1osm
2
980
如何建立自己的開源專案
line_developers_tw
PRO
0
1.3k
Oracle Base Database Service：サービス概要のご紹介
oracle4engineer
PRO
0
1.6k
TreasureData Tech Talk 2022 - Journey to Improve Stability and Scalability of Plazma
yajirobee
0
120
バンダイナムコスタジオにおけるクラウドネイティブなゲーム開発スタジオの挑戦
yaegashi
2
190
デジタル社会の行き着く先にライブラリアンが果たしうる役割を考える / Thinking about the role librarians can play in the destination of the digital society
ykiyota
0
790

Featured

See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
23
4.4k
Become a Pro
speakerdeck
PRO
3
3.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
109
16k
The Power of CSS Pseudo Elements
geoffreycrofte
51
4.2k
The Pragmatic Product Professional
lauravandoore
19
3.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
4 Signs Your Business is Dying
shpigford
170
20k
Design by the Numbers
sachag
271
17k
Bash Introduction
62gerente
600
210k
Learning to Love Humans: Emotional Interface Design
aarron
262
38k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.7k
Designing for Performance
lara
599
64k

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