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
360
ASTをいじいじして僕のかんがえた最強のDXを得る
Shinobu Hayashi
November 12, 2020
Tweet
Share
More Decks by Shinobu Hayashi
See All by Shinobu Hayashi
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
4.1k
Big “heart” of mud, 10000 lines VCL generated from .vcl.handlebars
shinyaigeek
0
170
Managing "side effect" in Frontend Development
shinyaigeek
3
3.4k
爆速の日経電子版開発の今
shinyaigeek
2
2.2k
加速するEdge Computing
shinyaigeek
6
6.7k
ブラウザ作りのすゝめ
shinyaigeek
1
440
フロントエンド
shinyaigeek
0
160
Web Frontend Performance Tuning
shinyaigeek
1
380
Other Decks in Technology
See All in Technology
【Pycon mini 東海 2024】Google Colaboratoryで試すVLM
kazuhitotakahashi
2
540
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
170
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
1k
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
300
OCI 運用監視サービス 概要
oracle4engineer
PRO
0
4.8k
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
110
The Rise of LLMOps
asei
7
1.7k
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.9k
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
390
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
600
Featured
See All Featured
Designing for Performance
lara
604
68k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
What's new in Ruby 2.0
geeforr
343
31k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Automating Front-end Workflow
addyosmani
1366
200k
A better future with KSS
kneath
238
17k
Ruby is Unlike a Banana
tanoku
97
11k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
16
2.1k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
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を自分で上げていくエキサイティングな取り組みができる