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
ASTをいじいじして僕のかんがえた最強のDXを得る
Search
Shinobu Hayashi
November 12, 2020
Technology
0
430
ASTをいじいじして僕のかんがえた最強のDXを得る
Shinobu Hayashi
November 12, 2020
Tweet
Share
More Decks by Shinobu Hayashi
See All by Shinobu Hayashi
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
5.1k
Big “heart” of mud, 10000 lines VCL generated from .vcl.handlebars
shinyaigeek
0
230
Managing "side effect" in Frontend Development
shinyaigeek
3
3.7k
爆速の日経電子版開発の今
shinyaigeek
3
2.7k
加速するEdge Computing
shinyaigeek
6
6.8k
ブラウザ作りのすゝめ
shinyaigeek
1
510
フロントエンド
shinyaigeek
0
190
Web Frontend Performance Tuning
shinyaigeek
1
430
Other Decks in Technology
See All in Technology
How to Quickly Call American Airlines®️ U.S. Customer Care : Full Guide
flyaahelpguide
0
150
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
130
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.5k
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
スタートアップに選択肢を 〜生成AIを活用したセカンダリー事業への挑戦〜
nstock
0
260
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
180
united airlines ™®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedhelp
1
440
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
2
650
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
21k
タイミーのデータモデリング事例と今後のチャレンジ
ttccddtoki
6
2.5k
ビギナーであり続ける/beginning
ikuodanaka
3
790
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
GraphQLとの向き合い方2022年版
quramy
49
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Embracing the Ebb and Flow
colly
86
4.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Thoughts on Productivity
jonyablonski
69
4.7k
Scaling GitHub
holman
460
140k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
How to Ace a Technical Interview
jacobian
278
23k
Facilitating Awesome Meetings
lara
54
6.4k
Code Review Best Practice
trishagee
69
19k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Transcript
ASTをイジイジして僕のかんがえた 最強のDXを得よう 〜自分のDXは自分で守っていけ〜
Who am I Shinobu Hayashi(林 仁) a.k.a. @Shinyaigeek Web Frontend Engineer
Web Performanceのことを考えたり, ASTをイジイジする のが好きです. 夏バイト生として, ASGでお世話になってます.
今日のゴール ASTイジイジすることを布教したい!!
Agenda • ASTとは ◦ 概説 ◦ ASTの恩恵 • ASTをどうイジイジするのか(JavaScriptの場合) ◦
ライブコーディングタイム • 僕が最近ASTで作っていたもの • まとめ
ASTとは
ASTとは Abstract Syntax Tree, 抽象構文木 Tree とあるように, プログラムの文法構造を Tree 構造で表現したものになります.
Tree 構造なので, それぞれのプログラムの節々 を Node と言います. if文 条件 === 変数 hoge リテラル値 “bar” then 関数を実行 fuga 二項演算子 if( hoge === “bar” ) { fuga() }
ASTが使われているツール
ASTでコードをいじいじするときのあれこれ parse transform unparse JS -> AST traverse AST ->
JS
ASTでコードをいじいじするときのあれこれ parse transform unparse parseとunparseはライブラリに任せる • parse ◦ @babel/parser ◦
accorn • unparse ◦ @babel/generator
ASTでコードをいじいじするときのあれこれ parse transform unparse @babel/traverse の場合 traverse(ast, { //visitor })
↑ visitor?
ASTでコードをいじいじするときのあれこれ parse transform unparse Visitor Pattern Tree の内、あるNodeに “訪問” して、処理を行
う
ASTを試してみよう!! ライブコーディング
僕が作ってたもの
僕が作ってたもの lit-html使いたいけど型が。。 普通にJSX書きたい。。
僕が作ってたもの JSX html-bas ed template -literal 互換性あるんじゃね!!
僕が作っていたもの babel-plugin-lit-jsx(仮) https://github.com/Shinyaigeek/lit-jsx (実はまだWIP)
まとめ • 先人の努力のおかげで, ASTを触ること自体は難しくない • ASTが触れると, 扱える領域が広がる • 今回はJSの話をしたけど, どんな言語でも役にたつ
• 自分のDXを自分で上げていくエキサイティングな取り組みができる