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.1k
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.4k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
8
6.8k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.7k
Figma Plugin公開までの壁を乗り越える
mottox2
2
2.6k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
610
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.7k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
580
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.1k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
32k
Other Decks in Technology
See All in Technology
開発健全性の可視化と開発者体験の改善 ~ Compassでエンジニアに活力と生産性を ~
atlassianjapan
0
170
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
110
AWS CDK を活用した 大量 AWS アカウントへのプロビジョニング例 〜 SaaSus Platform の場合 〜 於 JAWS-UG CDK支部 #17
yaggy
1
220
実は仲良し?Amplify Gen2と生成AI
mkdev10
1
240
生成AIの活用パターンと継続的評価
asei
10
1.3k
Nix入門パラダイム編
asa1984
1
160
S3上のログを分析したいだけなのに
mitsuo_sys
1
150
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
140
いまからでも遅くない!コンテナでWebアプリを動かしてみよう入門(2-2)WebAPIハンズオン
nomu
0
150
現実のRuby/Railsアップグレード
takeyuweb
3
2.8k
サイロ化した金融システムを、packwerk を利用して無事故でリファクタリングした話
coincheck_recruit
3
2.6k
プロンプトエンジニアリング入門 Rev.3
seosoft
0
160
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
[RailsConf 2023] Rails as a piece of cake
palkan
50
4.8k
Agile that works and the tools we love
rasmusluckow
327
21k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
106
49k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
3
360
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Practical Orchestrator
shlominoach
186
10k
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