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
200
Web Frontend Performance Tuning
shinyaigeek
1
440
Other Decks in Technology
See All in Technology
extension 現場で使えるXcodeショートカット一覧
ktombow
0
190
「技術負債にならない・間違えない」 権限管理の設計と実装
naro143
35
10k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
hogelog
3
1.7k
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
120
インサイト情報からどこまで自動化できるか試してみた
takas0522
0
130
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
360
Trust as Infrastructure
bcantrill
0
290
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
180
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
320
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9k
実装で解き明かす並行処理の歴史
zozotech
PRO
1
260
Featured
See All Featured
Code Review Best Practice
trishagee
72
19k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Speed Design
sergeychernyshev
32
1.1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Designing for humans not robots
tammielis
254
25k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Visualization
eitanlees
148
16k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
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を自分で上げていくエキサイティングな取り組みができる