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
440
ASTをいじいじして僕のかんがえた最強のDXを得る
Shinobu Hayashi
November 12, 2020
Tweet
Share
More Decks by Shinobu Hayashi
See All by Shinobu Hayashi
ESLint Rule により事業, 技術ドメインに沿った制約と誓約を敷衍させるアプローチのすゝめ
shinyaigeek
1
5.2k
Big “heart” of mud, 10000 lines VCL generated from .vcl.handlebars
shinyaigeek
0
250
Managing "side effect" in Frontend Development
shinyaigeek
3
3.8k
爆速の日経電子版開発の今
shinyaigeek
3
2.8k
加速するEdge Computing
shinyaigeek
6
6.9k
ブラウザ作りのすゝめ
shinyaigeek
1
520
フロントエンド
shinyaigeek
0
190
Web Frontend Performance Tuning
shinyaigeek
1
440
Other Decks in Technology
See All in Technology
我々は雰囲気で仕事をしている / How can we do vibe coding as well
naospon
2
220
.NET開発者のためのAzureの概要
tomokusaba
0
230
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
21
5.9k
Yahoo!ニュースにおけるソフトウェア開発
lycorptech_jp
PRO
0
350
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
6
1.8k
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
120
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
300
LLM時代の検索とコンテキストエンジニアリング
shibuiwilliam
2
1.1k
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
2
490
7月のガバクラ利用料が高かったので調べてみた
techniczna
3
390
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
270
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
Featured
See All Featured
Balancing Empowerment & Direction
lara
2
590
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Done Done
chrislema
185
16k
How GitHub (no longer) Works
holman
315
140k
Optimizing for Happiness
mojombo
379
70k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Code Reviewing Like a Champion
maltzj
525
40k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
The World Runs on Bad Software
bkeepers
PRO
70
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A better future with KSS
kneath
239
17k
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を自分で上げていくエキサイティングな取り組みができる