こんにちは、Babel! まずはbabylonとbabel-generatorのみを用いて、コード変換入門にトライ

4750 ワード
JavaScript AST babel-generator babylon babel JavaScript テキストリンク

Qiita初投稿です。
実は去年の段階でアカウントは作っていたのですが、もっと良いコードや面白い記事が書けたらポストしようと思っていました。
でもそんな日はきっと訪れないし、それって英語の発音を気にして英語をなかなかしゃべれないのと同じじゃん！と思い、もう書くことにしました。
下書きだけ書いてうじうじしているより、投稿しちゃったほうが面白いしね！

コーディングタイムコンパイル、メタプログラミング、トランスパイル

これからの時代のメタプログラミングJavaScriptの正義を語ろう

さよならボイラープレート。s2sによる高速reduxアプリケーション構築

去年の暮れ頃に上記の記事に出会い、メタプログラミングやトランスパイルやコーディングタイムコンパイルといった言葉に魅了されました。そして、元旦には下のような記事も投稿しました。

2018年元旦、コーディングタイムコンパイルにメタプログラミング、トランスパイルという単語が、僕の心を捉えて離さない件

要はハマったわけです。
ただ、自身はこういう分野の知識が絶望的にないため、よし、俺も今日からメタプログラマーだ！という風にすぐにはなれないことに気づき、絶望しました。
さて、真っ暗な穴の底で絶望するのは簡単ですが、底から這い上がるのは楽しいです。
まずはbabelを使って簡単な変換コードを書くところから初めて見ることにしました。
というわけで、タイトルとなります。

babylonとbabel-generatorだけあれば、とりあえず変換できそう

早速やってみます。以下、備忘録的な形となります。

インストール

yarn add babylon babel-generator

コード書く

const babylon = require('babylon');
const generate = require('babel-generator').default;

const sampleCode = `
console.log("Goodmorning!!");
console.log("Hello!!");
console.log("Goodnight!!");
`

// ASTに変換
const ast = babylon.parse(sampleCode);

// console.log内の文字列を"Hi!"に変換
ast.program.body.forEach(function(n1) {
  n1.expression.arguments[0].value = "Hi!";
});

// ASTからJavaScriptコードを生成し、codeを取得する
const transformedCode = generate(ast, sampleCode).code;
console.log(transformedCode);

実行結果は下記の通り

node hello-world.js

console.log("Hi!");
console.log("Hi!");
console.log("Hi!");

難しいと思いこんでいたASTが少しだけ身近になったような気がしました。