Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
JSXで作るDSL / jsx-dsl
Search
mottox2
September 04, 2019
Technology
1
2.2k
JSXで作るDSL / jsx-dsl
gifteeさんで行われた『フロントエンド Night #1』のLT資料です。
https://giftee.connpass.com/event/141943/
mottox2
September 04, 2019
Tweet
Share
More Decks by mottox2
See All by mottox2
もう一歩進めたい OG画像の動的生成
mottox2
7
1.6k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
8
6.9k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.8k
Figma Plugin公開までの壁を乗り越える
mottox2
2
3k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
640
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.8k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
620
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.2k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
33k
Other Decks in Technology
See All in Technology
開発組織のための セキュアコーディング研修の始め方
flatt_security
3
2.7k
コンテナサプライチェーンセキュリティ
kyohmizu
1
110
Share my, our lessons from the road to re:Invent
naospon
0
110
2024.02.19 W&B AIエージェントLT会 / AIエージェントが業務を代行するための計画と実行 / Algomatic 宮脇
smiyawaki0820
15
4.1k
Goで作って学ぶWebSocket
ryuichi1208
3
2.3k
次世代KYC活動報告 / 20250219-BizDay17-KYC-nextgen
oidfj
0
370
なぜ私は自分が使わないサービスを作るのか? / Why would I create a service that I would not use?
aiandrox
0
880
オブザーバビリティの観点でみるAWS / AWS from observability perspective
ymotongpoo
9
1.6k
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
160
AI エージェント開発を支える MaaS としての Azure AI Foundry
ryohtaka
6
630
速くて安いWebサイトを作る
nishiharatsubasa
14
15k
2.5Dモデルのすべて
yu4u
2
930
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Rails Girls Zürich Keynote
gr2m
94
13k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
BBQ
matthewcrist
87
9.5k
Writing Fast Ruby
sferik
628
61k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Agile that works and the tools we love
rasmusluckow
328
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Transcript
2019.09.04 フロントエンド Night #1 / @mottox2 JSXでつくるDSL
フロントエンドエンジニア(Web/iOS) Gatsby, Gridsome, Next.js, etc お仕事 Watching mottox2 @ ؿٔ٦ٓٝأ8FCؒٝآص،
⾃⼰紹介
#ϑϩϯτΤϯυNight DSL • DSL(Domain Specific Language) • ドメインに特化した⾔語 • 例:
itamae • Ruby製のプロビジョニングツール
#ϑϩϯτΤϯυNight JSX • JavaScript の構⽂の拡張 • ⾒⽅によっては『Viewを記述するためのDSL』 • BabelによってReact.createElementに変換して使っている
#ϑϩϯτΤϯυNight JSXから他形式への変換 XML, JSON, PlainText などのフォーマット output input
• 技術同⼈誌によく使われるフォーマット。ワンソースでPDFやEPUBに変 換が可能。 jsx-review: JSXをRe:VIEW形式に変換する GitHub mottox2/jsx-review
#ϑϩϯτΤϯυNight 1. コンポーネントの定義 • コンポーネントを定義、TypeScriptの型を付けておくとよい。
#ϑϩϯτΤϯυNight 2. JSXをJSONへ変換 • react-test-rendererを使うと、Reactコンポーネントをオブジェクトに変 換できる。
#ϑϩϯτΤϯυNight 3. JSONをRe:VIEWへ変換 • Reactコンポーネントから⽣成したオブジェクトをtypeごとに変換する。
#ϑϩϯτΤϯυNight 4. 表⽰するメソッドを実装 • 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