このスライドは「JavaScript メタプログラミング勉強会@さくらインターネット metapro.es」のLT資料です。
はじめに
メタプログラミングすごそう
実行時注入ならRubyとかPHP, JSで結構簡単にできる
インジェクションなら楽にできる
けど黒魔術になりがちだし実際のプロダクト開発でやりだすとどうしても扱いづらい
他人の書いたメタプロ生成コードをみたとき
🤔🤔🤔🤔🤔
🙄
静的解析すごそう
けどわかんねーよ！
という人のためのはじめの一歩
自己紹介
- potato4d
- metapro.js発起人
- フロントエンドエンジニア
メタプログラミングわかりません
自分がわかるようになるために分かる人を呼んで勉強会を開いた
なんで話すか
「自分のQoLを高める程度なら意外と誰でもプラグイン書けるんやで」って言いたいから
つくったもの
process.env.NODE_ENV が production 以外の時に設定した文字を置き換えてくれるプラグイン
https://github.com/potato4d/babel-plugin-replace-only-development
動作:.babelrc
{
"plugins": [
[
"babel-plugin-replace-only-development",
{
"rules": {
"https://api.example.com": "http://localhost:3000"
},
}
]
]
}
動作: Before
import axios from 'axios'
axios.get('https://api.example.com')
動作: After
import axios from 'axios'
axios.get('http://localhost:3000')
使いみち
どうでもいいものを作ったけどローカルとデプロイ時でAPI ROOTを変えたいけど設定を管理するのがだるい時
まれによくある
replaceしかしてない簡単構成
作りかた
作りたいものを決める
- 例えばconsole.logリムーバーとか
- console.logをxhrに置き換えてロギングしたくない？とか
- そういうやつ
おもむろにbabelプラグインの初期設定をする
- babelプラグインなら構文パーサーとかがデフォでついてくるからしんどくない
- CLIインターフェースとかオプションとかをbabelのシステムに依存できるので楽
- 今回のサンプルプラグインはyarn initからはじめてて本当に最小限なので使ってみてくれ！
構文として何に属するかを調べる
- ASTエクスプローラーにおもむろにコードを投げつける
- 出てきたtypeをコピペ
ASTエクスプローラー
プラグインのテンプレを流用
const { transform } = require('@babel/core')
const plugin = ({types: t}, options) => {
return {
visitor: {
Literal (path, file) {
// Literalなのでここに書く
}
}
}
}
module.exports = plugin
Babel Plugin Handbookをみて欲しいのを調べる
書く
// ...
Literal (path, file) {
Object.entries(options.rules).forEach(([before, after]) => {
if (path.get('literal').container.value == before) {
path.replaceWith(t.stringLiteral(after))
}
})
}
// ...
完成
やってみたい人へ
4つのTips
1. babelプラグインにするとJSのパーサーを用意しないでいいので楽
2. ASTエクスプローラーとHandbookがあれば2秒でできそうと思うことは20分あればできる
3. とりあえずASTって構文の木があるんだ〜ぐらいの気持ちで雑にはじめる
4. 置き換える系はTypeを調べてreplaceWithだけで倒せるから楽
参考になった資料
参考になった資料
-
ASTエクスプローラー
- 使わないと非人道的なAST脳内パースがはじまる
-
Babel Plugin Handbook
- これがあればなんとかなる
-
babel@6プラグインの単純な作成方法について
- 簡単なものの作り方はほぼ書いてる
まとめ
まとめ
- babelプラグインにするとJSのパーサーを用意しないでいいので楽
- 資料は無茶苦茶あるので誰でもはじめの一歩は作れる
- ASTエクスプローラーがないと人権がないので頑張る
- Qiitaとかにも意外と記事はあるので有効活用すべし
- ちなみにwebpack pluginをやろうと思ったらそっちはなさすぎたのでブルーオーシャン
- Typeさえわかればあとは割りと泥臭い作業っぽい