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
1.9k
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
6
1.1k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
7
6k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.4k
Figma Plugin公開までの壁を乗り越える
mottox2
2
2.1k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
570
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.5k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
520
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
32k
Other Decks in Technology
See All in Technology
競技としてのKaggle、役に立つKaggle
yu4u
3
510
require(ESM)とECMAScript仕様
uhyo
1
280
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
350
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
web-application-security
matsuihidetoshi
0
160
Postman v10リリース後を振り返る / Looking back at Postman v10 after release
yokawasa
1
160
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
180
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
170
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.7k
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
120
開発パフォーマンスを最大化するための開発体制
ham0215
2
350
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
422
63k
Happy Clients
brianwarren
92
6.4k
It's Worth the Effort
3n
180
27k
The Art of Programming - Codeland 2020
erikaheidi
42
12k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
14
1.6k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Designing with Data
zakiwarfel
96
4.8k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Agile that works and the tools we love
rasmusluckow
325
20k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
244
20k
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