Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
JavaScript AST
MURAKAMI Masahiko
December 08, 2017
Technology
0
1.7k
JavaScript AST
MURAKAMI Masahiko
December 08, 2017
Tweet
Share
More Decks by MURAKAMI Masahiko
See All by MURAKAMI Masahiko
Using custom function template with AWS Amplify
fossamagna
1
180
Amplifyで始めるサーバレス開発/serverless-development-starting-with-amplify
fossamagna
0
1.4k
拡張して使うServerless&Amplify/use-with-extending-serverless-and-amplify
fossamagna
0
900
Mithrilの紹介/Introduce of Mithril
fossamagna
0
170
Electronで製造ラインアプリ開発/Business application by Electron
fossamagna
4
6.3k
Apps Scriptによるより高度な開発プロセス/More Advanced Development Process with Apps Script
fossamagna
3
2k
Other Decks in Technology
See All in Technology
Babylon.js で簡単 WebXR
yuhara0928
1
800
How We Foster Reliability in Diversity
nari_ex
PRO
8
2.2k
Poolにおける足を止めないシステム基盤構築
winebarrel
3
610
三越伊勢丹の接客DXを支える「DevOps基盤」とは
imdigitallab
0
250
The Real MVP: Going from idea to users' hands
adavis
0
590
開発者のための GitHub Organization の安全な運用と 継続的なモニタリング
flatt_security
2
2.6k
Who owns the Service Level?
chaspy
5
700
AWSの基礎を学ぼうで学んだ9種類のDBを勝手にふりかえる
98lerr
2
710
HTTP Session Architecture Pattern
chiroito
1
350
Nutanix_Meetup_20220511
keigotomomatsu
0
140
エンジニアと気軽に繋がれるプラットフォーム「ハッカー飯」で行った セキュリティ・モニタリングに関する取り組みについて
nobuakikikuchi
0
350
動画配信技術について
yaminoma
0
190
Featured
See All Featured
Debugging Ruby Performance
tmm1
65
10k
Unsuck your backbone
ammeep
659
55k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
Facilitating Awesome Meetings
lara
29
3.9k
Atom: Resistance is Futile
akmur
255
20k
Making Projects Easy
brettharned
98
4.3k
KATA
mclloyd
7
8.6k
From Idea to $5000 a Month in 5 Months
shpigford
372
44k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
3
430
Why Our Code Smells
bkeepers
PRO
324
54k
Scaling GitHub
holman
451
140k
GraphQLの誤解/rethinking-graphql
sonatard
24
6.2k
Transcript
JavaScript AST A-LT 2017-12-08 村上 雅彦 @fossamagna
村上 雅彦 a.k.a @fossamagna IT サー ビス事業部 所属 2
今日の話 JavaScript のAST の話 AST って何? AST で何ができるの? JavaScript とAST
3
AST って何? 4
Abstract Syntax Tree プログラムをパー スして意味のある情 報を木構造で表現したデー タ 5
AST をもう少し詳しく Abstract プログラムの行番号、 空白、 括弧などの情報は 取り除かれている( 存在する場合もある) Syntax プログラムの構文
Tree 木構造。 字句など木構造の枝葉として表現され る 6
var ast = "Abstract Syntax Tree"; のAST {"type": "Program", "body":
[{ "type": "VariableDeclaration", "declarations": [{ "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "ast" }, "init": { "type": "Literal", "value": "Abstract Syntax Tree", "raw": "\"Abstract Syntax Tree\"" } }], "kind": "var"}] , "sourceType": "script"} 7
AST で何ができるの? コー ドを処理するツー ルが作れる Lint ツー ルやドキュメント生成、 コー ド生成も。
新しい機能やライブラリに対応するようにコー ド変換するなど。 パー サー によってはJSX, Flow なども対応可能 CoffeeScript, TypeScript などのAltJS なんかのト ランスパイラ 8
JavaScript のパー サ AST はパー サでソー スコー ドをパー スして作る。 JavaScript
の主要なパー サには以下のものがある。 babylon:Babel で使っているECMAScript パー サ esprima:estree が標準化しているJavaScript の AST フォー マットに準拠したパー サ espree:ESLint が使っているacorn ベー スのパー サ acorn:parse_js の作者がesprima に対抗して作成し たパー サ 9
JS をパー スしてAST を作ってみる(esprima) esprima でJavaScript コー ドをパー スするJavaScript var
esprima = require('esprima'); var program = 'var ast = "Abstract Syntax Tree"'; var ast = esprima.parseScript(program); console.log(ast); パー スした結果のAST オブジェクト { type: 'Program', body: [ { type: 'VariableDeclaration', declarations: [Object], kind: 'var' } ], sourceType: 'script' } 10
JavaScript のAST JavaScript のAST はJavaScript オブジェクト JavaScript オブジェクトなので自由に変更できる。 var program
= 'var ast = "Abstract Syntax Tree"'; var ast = esprima.parseScript(program); // var を const に変える! ast.body[0].kind = 'const'; { type: 'Program', body: [ { type: 'VariableDeclaration', declarations: [Object], kind: 'const' } ], sourceType: 'script' } 11
AST をJavaScript コー ドに変換 ジェネレー タを使うとAST をコー ドに変換できる JS Code
-> (Parser) -> AST -> (Generator) -> JS Code escodegen esprima などのAST からコー ドを生成する babel-generator babel のAST からコー ドを生成する 12
AST をJavaScript コー ドに変換 var をconst に変換するコー ド: var esprima
= require('esprima'); var escodegen = require('escodegen'); var program = 'var ast = "Abstract Syntax Tree"'; var ast = esprima.parseScript(program); // var を const に変える! ast.body[0].kind = 'const'; var code = escodegen.generate(ast); console.log(code); 変換したJavaScript: const ast = "Abstract Syntax Tree"'; 13
AST を利用したツー ルの紹介 Babel ESLint browserify gasify by @fossamagna 14
参考資料 JavaScript AST を始める最初の一歩 Acorn: yet another JavaScript parser 15