3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-01-04

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

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

これからの時代のメタプログラミング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が少しだけ身近になったような気がしました。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?