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
72
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
140
Web Frontend Performance Tuning
shinyaigeek
1
290
Other Decks in Technology
See All in Technology
AWSアカウント74件をバックアップした方法と課題
chiharutsuboi
0
100
B+木入門:PHPで理解する データベースインデックスの仕組み/b-plus-tree-101
hanhan1978
5
2.8k
Simplifying Data Analysis & Visualization with Developer Tools & AI
nitya
1
220
調整さんの調整結果をカレンダーへ登録するGPTsを作った話
hrsano645
1
160
Command-line interface tool design / PHPerKaigi 2024
k1low
4
1k
Combineを中心とした処理をSwift Concurrencyへ (これまでも調べた調査と向き合い)
fumiyasac0921
1
180
SSMエージェントはIAMロールの夢を見るか/ Do SSM Agents Dream Of IAM Roles?
yukihirochiba
0
1.4k
庁舎DX推進ガイドブック
senryakuka
0
1.8k
進化する事業とデータ構造 ~Cloudbaseの場合~
tockn
2
230
ECS on FargateへのSeekable OCI導入レポート
iwamot
0
260
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
4
34k
【OpenAI本出版記念】npakaによるOpenAI最新技術情報と技術情報キャッチアップ術
npaka
8
1.5k
Featured
See All Featured
Teambox: Starting and Learning
jrom
126
8.3k
Infographics Made Easy
chrislema
237
17k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
185
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Facilitating Awesome Meetings
lara
39
5.5k
Visualization
eitanlees
135
14k
BBQ
matthewcrist
78
8.7k
Into the Great Unknown - MozCon
thekraken
10
810
Practical Orchestrator
shlominoach
180
9.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
15
6.3k
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
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を自分で上げていくエキサイティングな取り組みができる