Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
JSXで作るDSL / jsx-dsl
mottox2
September 04, 2019
Technology
1
1.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
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
330
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.1k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
330
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
2.7k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
29k
プレイヤー目線の技術ブランディング / personal branding
mottox2
3
2.9k
SSRを検討する際にSSGも検討しませんか? / ssr or ssg
mottox2
15
9.1k
Next.js meets Netlify
mottox2
3
1.4k
GatsbyJS hands-on
mottox2
5
1.4k
Other Decks in Technology
See All in Technology
History of the ML system in KARTE
kargo113
0
510
JJUG2022_spring_Keycloak (Red Hat Single Sign-on)
tinoue
0
190
アーキテクチャを明文化して開発に臨んだ話
akihiyo76
0
230
2022年度新卒技術研修「DNS」講義
excitejp
PRO
0
320
What's new in Jetpack 2022
fornewid
1
360
誰が正解を知っているのか / Who knows the right answer
takaking22
1
210
DAO (分散型自律組織) vs. 自律分散組織 / DAO vs. Distributed Autonomous Organization
ks91
PRO
0
210
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
3
8.8k
トランザクションスクリプトは何がダメなのか?
polidog
2
1.2k
機械学習システムアーキテクチャ入門 #1
asei
3
1.1k
Internet Explorer は Microsoft Edge へ - IE の歩みとこれから -
yuhara0928
1
3.4k
ハッカー飯に New Relic を導入して実践した3つのこと
nobuakikikuchi
0
160
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
63
7.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
Docker and Python
trallard
27
1.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
Mobile First: as difficult as doing things right
swwweet
213
7.5k
Designing for Performance
lara
597
63k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
A better future with KSS
kneath
225
15k
What's new in Ruby 2.0
geeforr
336
30k
Gamification - CAS2011
davidbonilla
75
3.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
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