なぜ、我々は「コードの形」に執着するのか？――Prettier拡張という深淵へ
エンジニアの皆さん、こんにちは。日々の開発で「もっとこう書ければ読みやすいのに」「このDSL（ドメイン特化言語）の構造、自動整形が効かなくてストレスだな」と感じたことはありませんか？
多くの開発者は、ESLintやPrettierの既存ルールに従うだけで満足してしまいます。しかし、「コードの美学」をツールに強制するのではなく、ツールに自分のライブラリの構文を理解させる――この視点を持った瞬間、あなたの開発環境は単なるツール集から、あなたの思考を拡張する「第二の脳」へと進化します。
今日は、既存のプラグインではどうにもならない「独自の構文」を、Prettierの心臓部（AST: 抽象構文木）を直接操作して美しく制御する方法を伝授します。
—
1. なぜ「設定」ではなく「プラグイン」なのか？
Prettierの強みは、コードを一度パース（解析）してASTに変換し、それを再び「きれいな文字列」として再構成する（プリントする）ことにあります。
もし皆さんが自作のライブラリや複雑なDSLを使っていて、Prettierが意図しない改行やインデントを入れてしまうなら、それはPrettierがそのコードの「意味」を理解できていないからです。ここでプラグインを自作すれば、「この構文はこういう構造だから、ここを優先して改行せよ」という知的なルールを、機械に教え込むことができるのです。
—
2. 環境構築：ASTの迷宮へ潜る準備
まずは、開発環境を整えましょう。Prettierのプラグインを作るには、`prettier`自体をプロジェクトに含める必要があります。
プロジェクトの初期化
mkdir my-prettier-plugin && cd my-prettier-plugin
npm init -y
必要な依存関係をインストール
prettier: 本体
@babel/parser: AST解析の強力な味方（独自の構文を解析するために必須）
npm install –save-dev prettier @babel/parser
—
3. 実践：独自の構文を「美しく」制御する仕組み
ここが本題です。Prettierプラグインの構成は、大きく分けて以下の3ステップで成り立っています。
1. Parsers: コードをASTというツリー構造に分解する。
2. Printers: ASTを走査し、再構築して文字列にする。
3. Plugin Export: これらをPrettierに登録する。
ステップ1: パーサーの設定（解析の定義）
まずは、独自の構文をパースする設定です。`index.js`を書きましょう。
const parser = require(‘@babel/parser’);
module.exports = {
languages: [{
name: “my-dsl”,
parsers: [“my-parser”], // 自作パーサーの名前
}],
parsers: {
“my-parser”: {
parse: (text) => {
// ここで独自のDSLをASTに変換するロジックを書く
return parser.parse(text, { sourceType: “module” });
},
astFormat: “my-ast”, // どのプリンタを使うかを指定
}
}
};
ステップ2: プリンタの拡張（出力の定義）
次に、ASTをどう出力するかを定義します。ここが「美学」の反映場所です。
module.exports = {
// … 前述のコードに続けて
printers: {
“my-ast”: {
print: (path, options, print) => {
const node = path.node;
// 特定のノードタイプ（例えば関数呼び出し）に独自の整形ルールを適用
if (node.type === ‘CallExpression’) {
// ここで「引数が3つ以上なら改行する」といった高度なロジックを注入可能
return print();
}
return print();
}
}
}
};
—
4. HelloWorld：動作確認の儀式
作成したプラグインが本当に動いているか確認しましょう。
動作確認用のテストコードを作成
echo “my_custom_dsl(a, b, c)” > test.my-dsl
npxを使って自作プラグインを読み込ませて実行
npx prettier –plugin . test.my-dsl
もし、設定した通りにインデントや改行が走れば成功です！ここからは、あなたが普段「面倒だ」と感じている箇所を、ASTのノードタイプごとに細かく制御していくだけです。
—
5. アーキテクトからのアドバイス
Prettierの拡張は、単なる「コード整形」ではありません。「チーム全員が、常に最も読みやすい形でコードを書けるようにする」という環境の標準化です。
- 最初は小さく始める: すべての構文をカバーしようとせず、「特定のメソッドチェーンだけ」「特定のブロックだけ」を制御することから始めてください。
- AST Explorerを活用する: [AST Explorer](https://astexplorer.net/) というサイトは、あなたのコードがどのような木構造になっているかを表示してくれる神ツールです。これを見ながらプラグインを書けば、迷うことはありません。
この技術をマスターすれば、あなたは単なる「コードを書く人」から、「開発という行為そのものを設計する人」へとランクアップします。あなたのライブラリが、あなたの意図通りに美しく並ぶ。その瞬間、コーディングがこれまでとは全く別の、心地よい体験へと変わるはずです。
さあ、あなたのコードを、あなただけの美学で制御してみましょう。準備ができたら、まずは小さな1ノードの制御から始めてみてください。応援しています！