レポート

日本初開催JSConf!「JSConf JP 2019」参加レポート[前編:1日目]

この記事を読むのに必要な時間:およそ 2.5 分

「JavaScript AST プログラミング: 入門とその1歩先へ」

今回のカンファレンスでは,屋上テントでもセッションが行なわれました。その一つ,和田卓人さんのライブコーディングを主体にしたJavaScript AST プログラミング: 入門とその1歩先へを取り上げます。

画像

数々の講演を経験されている和田さんも,野外は初めてとのこと。手がかじかんでしまうので「今日は,屋外はライブコーディイングに向かないといいう学びがありました」と話を始めます ⁠ちなみにこの学びは早速イベントに活かされ,運営スタッフの対応により2日目のハンズオンは屋内の会場に変更されました⁠⁠。

ASTプログラミングとは

今日のセッションの目標について,基本的には入門をやりますと説明がありました。BabelやESLintの普及でASTを間接的に使う人は増えていますが,直接触る人はまだ少ないので,今日のゴールは「家に帰ってASTをいじってみよう」と考える人が増えることと語り,本題に入りました。

和田さんによると,自身のOSSの代表作であるPowerAssertというテスティングフレームワークはASTプログラミングの塊で,今日はそこで得られた知見の,基礎の基礎から取り上げるとしました。

JavaScriptのソースコードの解析と改変は,コメントアウトの判別などが必要で,単純にテキストレベルでやるのは難しいです。そのため対象のコードをテキスト以上のものとして捉える技術が必要になります。それがJavaScriptの世界で発展しているAST(Abustruct Syntax Tree;抽象構文木)とベーシックなツール達です。JavaScriptの世界では,ASTはプレーンなオブジェクトのツリーです。複雑なメソッドを持った何かではなく,普段いじっている単なるオブジェクトリテラルの入れ子構造です。そのため,オブジェクトや配列に対するプログラミングができれば,ASTプログラミングはできると説明が続きました。

画像

ASTを扱う3つのステップ

ASTのツリーを扱う方法として,3つのステップを挙げました。

  1. ソースコードをパーサーに食わせて,オブジェクトツリーを得る
  2. オブジェクトツリーをいじる
  3. 最後にオブジェクトツリーをコードに戻す(アンパース,ジェネレーターともいう)

今日はパーサーとしてはacornを,ジェネレーターにはescodegenを使うとのことです。

ここから,Emacsを使ったライブコーディングがスタートしました。

  1. パーサーとしてacornを使い
  2. ソースを第二引数で受け取り,ファイルを読み
  3. acronでパースして
  4. json stringifyでテキストにして出力
  5. それをjqを使って色付けして表示

ここまで4行でできることを実演し,思ったより簡単だと感じてもらえれば今日のゴールに到達ですと和田さんは言及しました。

acornは比較的多機能なパーサーなので,標準ではないプロパティが付け加えられるとのことです。ASTの事実上の標準のようなものとしてestreeがあり,今回はそのestree標準のプロパティだけに減らすことになりました。そのために,espurifyというツールを使います。このとき,ちょと不思議なコードを紹介しました。ある計算式を実行すると,予想外の文字列が出現するというものです。その原因を探るのにASTが役立つことを取り上げていました。

次にアンパーサー(ジェネレータ)を説明しました。escodegenというアンパーサーを取り上げ,⁠ソースコード → パーサー → AST → アンパーサー → ソースコード」という処理の実演を行ないました。これが,途中で何もいじっていない基本のパターンであると言及しました。

その後はASTをいじる操作(トラバーサル)の説明し,ESLintのように何か違反しているノードがあったら検出するための実装を続けました。ASTを解析するツールとしてはestraverseを使いました。estraverseはtraverse()というメソッドを持っていて,ASTのオブジェクトツリーを遡ったり,中に入ったりできるツールだそうです。また,ノードタイプを調べられるenter, leaveというイベントを使って,特定の種類と条件のノードが現れたら警告するというコーディングとデモを行いました。他の利用例として,console.log()を検出したり,それを削除したりする例も紹介しました。

ASTプログラミングのまとめ

最後に,和田さんは次のようにまとめました。

  • ASTは単なるオブジェクトツリー,それをいじれば良い
  • パーサーと,トラバーサルと,アンパーサーという組み合わせで,ほぼすべてのASTプログラミングができる
  • あとはツールが使いやすいか,という違い

「Headers for Hackers」

Andrew BettsさんのHTTPヘッダーと標準化についてのセッションHeaders for Hackersを簡単に紹介します。

画像

Andrewさんは様々なHTTPヘッダーを取り上げて,使うと良いもの,使うべきでないもの,そして現在提案中で今後の動向に注目するべきものを解説しました。また,新しい仕様の策定にCDN事業者も取り組んでいて,CDN-LoopやProxy-Statusといった仕様の提案を行なっていることを紹介しました。

画像

関連記事

スポンサートーク&LT,そしてPartyへ

初日の最後は,スポンサートークとLTです。スポンサートークはmediba,メルカリ,サイボウズ,CureApoの4社から発表がありました。

LTのあいだに会場となった体育館の後方に飲み物と食べ物が並べられ,LT終了後にPartyへと突入していました。

画像

(イベント2日目の後編に続きます)

著者プロフィール

がねこまさし

WebRTC Meetup Tokyo スタッフ。
インフォコム株式会社で研究チームのマネージャーをしている。

GitHub:https://github.com/mganeko
Qiita:https://qiita.com/massie_g