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
270
ASTをいじいじして僕のかんがえた最強のDXを得る
Shinobu Hayashi
November 12, 2020
Tweet
Share
More Decks by Shinobu Hayashi
See All by Shinobu Hayashi
Big “heart” of mud, 10000 lines VCL generated from .vcl.handlebars
shinyaigeek
0
81
Managing "side effect" in Frontend Development
shinyaigeek
3
2.7k
爆速の日経電子版開発の今
shinyaigeek
2
1.7k
加速するEdge Computing
shinyaigeek
6
6.4k
ブラウザ作りのすゝめ
shinyaigeek
1
360
フロントエンド
shinyaigeek
0
150
Web Frontend Performance Tuning
shinyaigeek
1
290
Other Decks in Technology
See All in Technology
LLMプロダクト事業の立ち上げにおける挑戦
layerx
PRO
7
1.5k
生成AI・LLM時代における 機械学習エンジニアとしてのキャリア戦略・開発戦略 / my-career-and-development-strategies-for-ml-engineer-2024
yuya4
4
970
現実世界の事象から学ぶSOLID原則
h0r15h0
25
11k
エンジニア候補者向け資料2024.03.28.pdf
macloud
0
2.9k
SaaS型Webサービス「カオナビ」のチーム開発でPackage by Featureを取り入れた話/Implementing Package by Feature in kaonavi
kaonavi
0
120
#51 “Empowering Azure Storage with RDMA”
cafenero_777
3
220
10 Years of Kubernetes Patterns Evolution
bibryam
1
100
AFTを運用していたらAWS Configの課金が急増していた件
msato
0
120
継続的テストモデルを実現するためにスリーアミーゴスを用いた10Xでのシフトレフトの事例
nihonbuson
3
270
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.9k
MongoDB Atlas Vectorsearchではじめる生成AIアプリ開発
chie8842
3
510
任意コード実行の原理
ffri
0
190
Featured
See All Featured
Docker and Python
trallard
33
2.6k
Designing the Hi-DPI Web
ddemaree
275
33k
Pencils Down: Stop Designing & Start Developing
hursman
115
11k
Stop Working from a Prison Cell
hatefulcrawdad
265
19k
Git: the NoSQL Database
bkeepers
PRO
421
63k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
113
18k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
YesSQL, Process and Tooling at Scale
rocio
160
13k
In The Pink: A Labor of Love
frogandcode
137
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
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を自分で上げていくエキサイティングな取り組みができる