みなさん、こんにちは。開発本部エンジニアの平木です。こちらのブログの投稿自体はほぼ1年ぶりになりそうな勢いですが、みなさまお元気でしょうか?
弊社で定期的に開催してる社内勉強会TechLunchで自分の順番が回ってきたため、どうしようか迷った末にJavaScript ASTことはじめという発表をしたので、そのことについて書いていきます。
なぜJavaScript ASTについて話そうと思ったのか
現在、弊社のエンジニアメンバーのバックグラウンドで一番多数派なのは「元サーバサイドエンジニア」です。もちろん、業務ではサーバサイド・フロントエンド・ネイティブアプリとバックグラウンドに関わらず、必要に応じて分け隔てなく開発しています。
とはいえ、ちゃんとサービス開発自体はできるとしても、やはり得意な分野以外で基本原理など含めて把握して開発できるかというと、ちょっと難しいところもあります。しかし、そういった基本原理なんかを知っていると、その言語やツールなどの理解が捗るのは確かですよね。
そんな中、弊社で開発している人間がほぼ全て恩恵を受けているはずなのに、具体的にどんな風に動いているのかが一番分かりにくいであろうBabelひいてはJavaScript ASTの話をしたら、まあ興味持って話を聞いてくれるかなーということででこのテーマを選んだ次第です。
どのように伝えるか
自分はJavaScript ASTについてとても詳しいわけではないのですが、以前仕事でacornを使ってコンバータみたいなのを作ったりしていたので、それなりに興味は持っているという人間です。
ですので、どうやって紹介をしようかと悩んだ結果、ほぼ全面的にAST Exploreに頼っていくというスタイルにしました。AST Exploreは本当に最高ですね。前述の仕事をしていたときはこんな便利なツールはなかったんで、ひたすらASTに変換するコード書いては出来たASTを見て、それをトランスフォームさせて結果と睨めっこして試行錯誤するという毎日でした。
ということで、当日のスライドはこちらになります。
スライドで紹介したデモはそれぞれこちらになります。
- https://astexplorer.net/#/gist/82742676286b2dced595ce36cdeb8aae/latest
- https://astexplorer.net/#/gist/52d871c2f3a8d9cefc68d17badf4f165/latest
今回伝えたかったこと
まず、ASTがJavaScriptの発展にとても寄与しているものだということを知ってもらいたかったため、JavaScript ASTの今までの簡単な流れや、現在どのような形で使われているのかの説明をしました。(個人的にNode.jsの誕生とJavaScript ASTの存在が現在のフロントエンドの発展にとても重要だと思っているので)
最初のうちは聞いてる人も「何の話なんだろ…」感がありましたが、やはり実際に自分が使っているツールなどに使われているという説明をしたあとだと、聞いているメンバーも俄然興味が出てきたという雰囲気になった気がします(当社比)。
ASTの文法などは自分が説明するよりは、ちゃんと資料が揃っているので必要な部分以外簡略化しました。逆にちょっと端折りすぎたきらいもありますが、興味を持ったときに何となくでも調べる道標くらいにはなるかなと考えています。
次に知ってもらいたかったのは、やろうと思えばBabelのプラグインなんかもASTで作れちゃいますよということでした。仮にいきなり「Babelプラグイン作りましょう」となったとしても正直あまりピンと来ないと思いますが、どういう原理でプロダクトが動いているのか?が分かると、babel-handbookなどを読んでも理解が進むのではないかと思います。
AST Exploreのこと
このように今回の発表で全面的に活躍したAST Exploreですが、TechLunch中でも軽い説明だけで使ってしまったので、使いかたなど簡単にご紹介していきます。
AST Exploreとは
AST ExploreはFelix Klingさんが、2014年頃から開発しているプロダクトです。
余談ですが、Felixさんは現在Facebookで働いていらっしゃるようで、facebook/jscodeshiftやreactjs/react-docgenなんかの開発にも携わっていらっしゃる模様。(react-docgenはbabylonを使っているようですが)
ここまで書いてきた通りに、このツールは色々な言語をコピペするだけでASTをツリー形式で分かりやすく表示したり、トランスフォームさせることができたりするというASTを触るには大変便利なツールです。去年のv2.0のアップデートにより、セーブするとgistを匿名で作ってくれてリンクが生成されるなどの便利機能が付きました。
プロジェクトのREADMEに書いていますが、パーサだけであれば、かなりパースできるものが多く、またJavaScript / CSS / 正規表現 / Handlebarsに関してはトランスフォームまでできるようになっています。
READMEから抜粋すると以下のような感じです。
AST Exploreでパースできるもの
- CSS:
- cssom
- csstree
- postcss + postcss-safe-parser & postcss-scss
- rework
- GraphQL
- Graphviz:
- redot
- Handlebars:
- glimmer
- handlebars
- HTML:
- htmlparser2
- parse5
- ICU
- JavaScript:
- acorn + acorn-jsx
- babel-eslint
- babylon
- espree
- esformatter
- esprima
- flow-parser
- recast
- shift
- traceur
- typescript
- typescript-eslint-parser
- uglify-js
- JSON
- Lua:
- luaparse
- Markdown:
- remark
- PHP
- php-parser
- Regular Expressions:
- regexp-tree
- Scala
- Scalameta
- SQL:
- sqlite-parser
- WebIDL
- YAML
実験的だったりするけどパースできるもの
- ES6: arrow functions, destructuring, classes, …
- ES7 proposals: async/await, object rest / spread, …
- JSX
- Typed JavaScript Flow and TypeScript
- SASS
パースしたものをトランスフォームできるもの
- JavaScript
- babel (v5, v6)
- ESLint (v1, v2, v3)
- jscodeshift
- tslint
- CSS
- postcss
- Regular Expressions
- regexp-tree
- Handlebars
- glimmer
AST Exploreの使い方の簡単な解説
サイトにアクセスするとこのような画面になっているはずです。
メイン画面
JavaScriptにフォーカスして解説していきますと、左ペインがASTに変換したいソースコード、右ペインが変換後のASTをツリー構造で見せています。
初期表示時に、左ペインのソースコードをクリックすると該当箇所のASTツリーが展開してハイライトします。また右ペインをポイントするとソースコードの該当箇所がハイライトします。お互いの関係が分かりやすい仕様になっています。
