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
2k
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.3k
なぜコピペで使うコンポーネント集を利用するのか?
mottox2
8
6.4k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.6k
Figma Plugin公開までの壁を乗り越える
mottox2
2
2.4k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
600
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.6k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
550
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.1k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
32k
Other Decks in Technology
See All in Technology
AI研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
130
ABEMAにおけるLLMを用いたコンテンツベース推薦システム導入と効果検証
cyberagentdevelopers
PRO
1
700
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
初中級者用如何使用backlog -VALE TUDOEDITION-
in0u
0
140
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
150
AWSでRAGを作る法方
sonoda_mj
1
140
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
140
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Making Projects Easy
brettharned
111
5.7k
In The Pink: A Labor of Love
frogandcode
139
22k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Atom: Resistance is Futile
akmur
261
25k
Side Projects
sachag
451
42k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
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