メドレー開発本部の社内勉強会「TechLunch」で、JavaScript ASTについて紹介させていただきました。
発表者：平木聡
JavaScript AST͜ͱ͡Ί
View Slide
Agenda• JavaScript ASTͱԿ͔?• JavaScript ASTͷجૅࣝ• JavaScript ASTͬͯԿ͔ͯ͠ΈΔ
JavaScript ASTͱԿ͔?
ͦͦASTͱͦͦASTநߏจͷӳޠ໊Ͱ͋Δabstract syntax treeͷུশʹͳΓ·͢ɻίϯύΠϥͱ͔ΠϯλϓϦλͳͲͷݴޠॲཧܥͷதؒॲཧʹྑ͘ΘΕΔख๏Ͱ͢ɻ(ͳ͓؊ػೳͷʹಉ͡ASTͱ͍͏ུশ͕͋Δ༷)h"ps://en.wikipedia.org/wiki/Abstractsyntaxtree
ͦͦASTͱΩϞͱͯ͠ॻ͔Ε͍ͯΔϓϩάϥϜΛߏจղੳͯ͠ߏԽʹෆཁͳ෦আͯ͠ɺߏͱͯ͠දݱ͍ͯ͠Δσʔλʹ͢Δͱ͍͏ͱ͜ΖͰ͢ɻ
ͦͦASTͱ͜ͷASTࣗମಛʹJSݻ༗ͷͷͱ͍͏Θ͚Ͱͳ͘ɺ৭ʑͳݴޠͰΘΕ͍ͯ·͢ɻྫ͑JavaͰΘΕΔIDEͷEclipseͰJavaͷߏจղੳʹͬͯͨΓ͢ΔͬΆ͍Ͱ͢ɻh"p://www.eclipse.org/ar1cles/Ar1cle-JavaCodeManipula1on_AST/index.html͜ͷASTʹ͍ۙख๏Ͱ(ݫີʹҧ͏)ߏங͞Ε͍ͯΔͷ͕ۙͰ͍͏ͱDOMͩͬͨΓ͠·͢ɻ
JavaScript ASTͲ͜ͰΘΕ͍ͯΔͷ͔?• React• Babel• UglifyJS• ESLint• PowerAssertͳͲͳͲ
JavaScript ASTͲ͜ͰΘΕ͍ͯΔͷ͔?ҰྫͰ͕͢ݱࡏͷϑϩϯτΤϯυ։ൃʹ͔ܽͤͳ͍ϓϩμΫτେମΘΕͯΔΜ͡Όͳ͍Ͱ͠ΐ͏͔ɻมΘΓμωͱͯ͠ಠࣗʹJSͷϚΫϩΛ࡞ΕΔsweet-js/sweet-coreͳΜ͔ͰΘΕ͍ͯ·͢ɻ
JavaScriptք۾ͰͷASTͷաڈJSք۾ͰͷASTͷऔΓѻ͍ͳͲͷผʹྺ࢙Λશ෦ͬͯΔΘ͚͡Όͳ͍ΜͰ͕͢ɺ͔͍ͭ·ΉͱҎԼͷΑ͏ͳྲྀΕʹͳΔ͔ɻ
JavaScriptք۾ͰͷASTͷաڈ• FirefoxͰΘΕ͍ͯͨSpiderMonkyͰ2010ʹParser API͕ࡌ͞Εͨ• Parser APIͷJSϙʔτͷzaach/reflect.js͕20114݄͘Β͍ʹϦϦʔε
JavaScriptք۾ͰͷASTͷաڈ• JavaScript ASTͰຊ֨తʹΘΕͩͨ͠jquery/esprima͕201111݄͘Β͍ʹϦϦʔε• ݩʑ࡞ऀͷAriya͞ΜͷݸਓϓϩδΣΫτ͚ͩͬͨͲɺ3͘Β͍લʹjQueryࡒஂʹҠ• esprima͍͗ͬͯͬͯ͢acornjs/acorn͕ొ
JavaScriptք۾ͰͷASTͷաڈ• ࠷ॳacornͬͯͨBabel͕ੜͤͯࣗ͞લͰbabel/babylonΛ20129݄͘Β͍͔Β࡞ͬͨΓ• ༷֎ͷ͜ͱͰ͖ΔΑ͏ʹ֦ு͞ΕͯΔ• JavaScript ASTΛ࡞ΔϥΠϒϥϦ͕৭ʑग़͖ͯͯޓੑ͕͋ͬͨΓແ͔ͬͨΓͱ͍͏ঢ়گͩͬͨͷΛ2015ʹjQueryࡒஂMozillaೖͬͯestree/estreeͱ͍͏JavaScript ASTͷඪ४ن͕֨Ͱ͖Δ
JavaScriptք۾ͰͷASTͷաڈ͜Μͳײ͡Ͱݱࡏ৭ʑͳϓϩμΫτͰΘΕ͍ͯΔJavaScript ASTϥΠϒϥϦ͕৭ʑͰ͖͖ͯ·ͨ͠ɻ༗໊ॴΛϐοΫΞοϓ͚ͨͩ͠ͳΜͰɺѥྲྀͷύʔα৭ʑ͋Γྫ͑ESLintͳΜ͔ݱࡏesprimaͱޓੑ͕͋Δeslint/espreeͱ͍͏ύʔαΛࣗલͰ࡞ͬͯͬͯͨΓ͠·͢ɻ
JavaScript ASTͷجૅࣝ
JavaScript AST࣮ࡍͲΜͳίʔυʹͳΔͷ͔JavaScript ASTιʔείʔυΛߏʹมͯ͠ɺ࠷ऴతʹJSONܗࣜʹͯ͠දݱ͍͖ͯ͠·͢ɻԼهͷΑ͏ͳ؆୯ͳJSίʔυΛྫʹऔΓ·͢ɻvar hello = 'Hello World';function sayHello() { console.log(hello) }
JavaScript AST࣮ࡍͲΜͳίʔυʹͳΔͷ͔ࠓճacornΛͬͯASTʹม͢ΔͱԼهͷΑ͏ͳJSONܗ͕ࣜͰ͖·͢ɻ{"type": "Program","start": 0,"end": 69,"body": [{"type": "VariableDeclaration","start": 0,"end": 26,"declarations": [{"type": "VariableDeclarator","start": 4,"end": 25,"id": {"type": "Identifier","start": 4,"end": 9,"name": "hello"},"init": {"type": "Literal","start": 12,"end": 25,"value": "Hello World","raw": "'Hello World'"}}],"kind": "var"},{"type": "FunctionDeclaration","start": 27,"end": 69,"id": {"type": "Identifier","start": 36,"end": 44,"name": "sayHello"},"generator": false,"expression": false,"params": [],"body": {"type": "BlockStatement","start": 47,"end": 69,"body": [{"type": "ExpressionStatement","start": 49,"end": 67,"expression": {"type": "CallExpression","start": 49,"end": 67,"callee": {"type": "MemberExpression","start": 49,"end": 60,"object": {"type": "Identifier","start": 49,"end": 56,"name": "console"},"property": {"type": "Identifier","start": 57,"end": 60,"name": "log"},"computed": false},"arguments": [{"type": "Identifier","start": 61,"end": 66,"name": "hello"}]}}]}}],"sourceType": "module"}
JavaScript AST࣮ࡍͲΜͳίʔυʹͳΔͷ͔શવಡΊͳ͍ͱࢥ͏ͷͰɺ͔Γ͍͢Α͏ͳπϦʔܗࣜͷεΫγϣ͕ͪ͜Βɻ
JavaScript ASTͷมϧʔϧͲͷΑ͏ʹม͞ΕΔ͔?ͷϧʔϧ͏ύʔαͷυΩϡϝϯτɺParser API - Mozilla | MDNɺestree/estree: The ESTree SpecͳΜ͔Λࢀߟʹ͠·͢ɻ͏ͪΐ͍ಥͬ͜ΜͩͰ͍͏ͱECMAScriptͷ༷ॻ߹ΘͤͯಡΉͱΑ͍͔͠Εͳ͍Ͱ͢ɻ• h#ps://developer.mozilla.org/en-US/docs/Mozilla/Projects/SpiderMonkey/Parser_API• h#ps://github.com/estree/estree• h#ps://www.ecma-internaEonal.org/ecma-262/8.0/index.html
ύʔαͰม͞Εͨͷͨͪͷઆ໌͞ΒͬͱࠓճͷͷΛୈೋ֊·Ͱઆ໌͢Δͱɺ͜Μͳײ͡Ͱ͢• Program• ϧʔτʹͳΔΦϒδΣΫτ• Կͳ͘ͱઈରʹม͢Δͱ࡞ΒΕΔ• ϓϩάϥϜશ෦͜ͷ߲ͷbodyʹߏͰ֨ೲ͞ΕΔ
ύʔαͰม͞Εͨͷͨͪͷઆ໌• VariableDeclaration• var hello = 'Hello World';ͷ෦• มએݴ͜ͷ߲ʹͳΔ• kind͕มએݴͷΩʔϫʔυͷछྨʹͳΔɻ• declarations͕એݴ͞Ε͍ͯΔ༰Λ֨ೲ͍ͯ͠Δ෦• ม໊ॳظʹԿ͕ೖ͍ͬͯΔͳͲ͕֨ೲ
ύʔαͰม͞Εͨͷͨͪͷઆ໌• FunctionDeclaration• function sayHello() { console.log(hello) }ͷ෦• ؔએݴ͜ͷ߲ʹͳΔ• id໊͕ؔͳͲ֨ೲ͍ͯ͠Δ෦• paramsࠓճۭ͕ͩɺԾҾΛ֨ೲ͍ͯ͠Δ෦
ݸੑ๛͔ͳύʔαͨͪͲͷύʔαʔجຊͱͯ͜͠ΕΒͷ߲ESTreeͰఆٛ͞Ε͍ͯΔͷΛ͍ͬͯΔͷͰ͕͢ɺࡉ͔͍ҧ͍͕͋ͬͨΓɺbablylonͷΑ͏ʹಠࣗͰ৭ʑͳ߲ΛೖΕ͍ͯͨΓ͢Δͱ͍͏ײ͡ʹͳ͍͖ͬͯ·͢ɻh"ps://github.com/babel/babylon/blob/master/ast/spec.md
JavaScript ASTͷ͍Ͳ͜Ζ͜͜·ͰجຊతͳΛ͖ͯ͠·͕ͨ͠ɺͰJavaScript ASTΛࣗୡͰ͏߹…Ͳ͏͍͏ͱ͖Ͱ͠ΐ͏͔?ͺͬͱࢥ͍ͭ͘ͱ͜Ζ͜Μͳײ͔͡ͳ͋ͱɻ- babelͷϓϥάΠϯ࡞- eslintͷϓϥάΠϯ࡞- ࣗલͰιʔείʔυΛมߋ͢Δ(APIมߋͳΜ͔ͷ)πʔϧ࡞Δͱ͖
JavaScript ASTͷ͍Ͳ͜Ζݸਓతʹڊਓͷݞʹ͔ͬΓ͍ͨͷͰɺ༻్͕ϓϥάΠϯ࡞ʹͳͬͨΓͯ͠·͕͢ɺJavaScript ASTͷΈΛ͑ࣗલͷτϥϯεύΠϥΛ࡞ͬͨΓͰ͖ΔͣͰ͢ɻ࣮ࡍʹJavaScript ASTΛͬͯJSΛੜ͢Δʹɺհͨ͠ύʔαͷଞʹASTΛtraverseͯ͠ॲཧ͢ΔϥΠϒϥϦ(estraverseͳͲ)AST͔ΒJSΛੜ͢ΔϥΠϒϥϦ(escodegenͳͲ)͕ඞཁʹͳΓ·͢ɻ
JavaScript ASTͬͯԿ͔ͯ͠ΈΔ
AST Explore࠷ޙʹͪΐͬͱ࣮ͨ͠ྫΛ͝հͯ͠ऴΘΓ·͕͢ɺͦͷલʹJavaScript ASTΛѻ͏ͷʹແͯ͘ͳΒͳ͍πʔϧ͕͋ΔͷͰհɻ
AST ExploreAST Explore: h.p://astexplorer.net/
AST Explore͜ͷαΠτJavaScript AST͚ͩͰͳ͘ଞͷ৭ʑͳݴޠͷύʔαίʔυδΣωϨʔλ͕ΦϯϥΠϯͰ؆୯ʹͰ͖ΔΑ͏ʹͳ͍ͬͯΔαΠτͰ͢ɻJSBinJSFiddleͷAST൛ͱ͍͏ײ͡ɻSave͢ΔͱύʔϚϦϯΫ࡞ͬͯ͘ΕͨΓASTͷπϦʔ͕ݟ͔ͬͨ͢Γ͢ΔπʔϧͰ͢ɻ͍͍ͨύʔαδΣωϨʔλ৭ʑͳछྨ͔Βબ·͢ɻࠓճͷྫ͜ͷπʔϧͬͯհ͠·͢ɻ
var Ͱॻ͔ΕͨJSΛconstʹॻ͖͔͑Δύʔα: babylon v7 / τϥϯεύΠϥ: babel7DEMO: varΩϥΠ
Vue.js 1.xܥ͔Β2.xܥͷϚΠάϨʔγϣϯʹ͑Δύʔα: acorn / τϥϯεύΠϥ: jscodeshi/h"ps://vuejs.org/v2/guide/migra4on.html#a"ached-removedDEMO: a(atchͷϚΠάϨʔγϣϯ
ऴΘΓ
ࢀߟ• h#ps://speakerdeck.com/michaelficarra/spidermonkey-parser-api-a-standard-for-structured-js-representa;ons• h#p://azu.github.io/slide/JSojisan/#1• h#ps://efcl.info/2016/03/06/ast-first-step/• h#ps://efcl.info/2015/02/26/recent-js-ast/• h#ps://medium.com/@jotadeveloper/abstract-syntax-trees-on-javascript-534e33361fc7
ࢀߟ• h#ps://www.sitepoint.com/understanding-asts-building-babel-plugin/• h#ps://github.com/jamiebuilds/babel-handbook• h#ps://github.com/facebook/jscodeshi<
medley
konifar
smt7174
kazumax55
autifyhq
yuneco
colopl
bengo4com
terahide
edwardkenfox
ewolff
tatsuru
guchey
addyosmani
frogandcode
kastner
mongodb
jlugia
aleyda
searls
eileencodes
jakevdp
lynnandtonic
thekraken
nonsquared