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
400
ASTをいじいじして僕のかんがえた最強のDXを得る
Shinobu Hayashi
November 12, 2020
Tweet
Share
More Decks by Shinobu Hayashi
See All by Shinobu Hayashi
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
4.7k
Big “heart” of mud, 10000 lines VCL generated from .vcl.handlebars
shinyaigeek
0
210
Managing "side effect" in Frontend Development
shinyaigeek
3
3.6k
爆速の日経電子版開発の今
shinyaigeek
3
2.6k
加速するEdge Computing
shinyaigeek
6
6.8k
ブラウザ作りのすゝめ
shinyaigeek
1
480
フロントエンド
shinyaigeek
0
180
Web Frontend Performance Tuning
shinyaigeek
1
400
Other Decks in Technology
See All in Technology
Amazon GuardDuty Malware Protection for Amazon S3を使おう
ryder472
2
100
Multitenant 23ai の全貌 - 機能・設計・実装・運用からマイクロサービスまで
oracle4engineer
PRO
2
120
パスキー導入の課題と ベストプラクティス、今後の展望
ritou
7
1.2k
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
280
IAMのマニアックな話 2025 ~40分バージョン ~
nrinetcom
PRO
8
910
セマンティックレイヤー入門
ikkimiyazaki
8
3.2k
3/26 クラウド食堂LT #2 GenU案件を通して学んだ教訓 登壇資料
ymae
1
200
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
320
LINE API Deep Dive Q1 2025: Unlocking New Possibilities
linedevth
1
160
ウェブアクセシビリティとは
lycorptech_jp
PRO
0
260
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
140
OPENLOGI Company Profile for engineer
hr01
1
22k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
42
7.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
490
The World Runs on Bad Software
bkeepers
PRO
67
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
How to Think Like a Performance Engineer
csswizardry
22
1.5k
Agile that works and the tools we love
rasmusluckow
328
21k
Code Reviewing Like a Champion
maltzj
522
39k
Scaling GitHub
holman
459
140k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Documentation Writing (for coders)
carmenintech
69
4.7k
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を自分で上げていくエキサイティングな取り組みができる