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.4k
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
2k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
8
7.3k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.9k
Figma Plugin公開までの壁を乗り越える
mottox2
3
3.6k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
720
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.9k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
670
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.2k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
33k
Other Decks in Technology
See All in Technology
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
310
Dylib Hijacking on macOS: Dead or Alive?
patrickwardle
0
470
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
880
もう外には出ない。より快適なフルリモート環境を目指して
mottyzzz
13
10k
「タコピーの原罪」から学ぶ間違った”支援” / the bad support of Takopii
piyonakajima
0
140
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
14
82k
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
130
IoTLT@ストラタシスジャパン_20251021
norioikedo
0
140
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
140
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
410
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
380
知覚とデザイン
rinchoku
1
580
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
The Cult of Friendly URLs
andyhume
79
6.6k
Unsuck your backbone
ammeep
671
58k
Balancing Empowerment & Direction
lara
5
700
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Building an army of robots
kneath
305
46k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
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