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.3k
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.8k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
8
7.1k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.9k
Figma Plugin公開までの壁を乗り越える
mottox2
3
3.4k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
680
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.8k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
650
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.2k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
33k
Other Decks in Technology
See All in Technology
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
620
エンジニア向け技術スタック情報
kauche
1
240
Witchcraft for Memory
pocke
1
220
Model Mondays S2E02: Model Context Protocol
nitya
0
220
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
3
780
Wasm元年
askua
0
130
5min GuardDuty Extended Threat Detection EKS
takakuni
0
110
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.2k
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
170
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
650
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
290
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
16
940
We Have a Design System, Now What?
morganepeng
53
7.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Docker and Python
trallard
44
3.4k
Balancing Empowerment & Direction
lara
1
360
Documentation Writing (for coders)
carmenintech
71
4.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
A better future with KSS
kneath
239
17k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Bash Introduction
62gerente
614
210k
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