import文の混沌を制する：`@trivago/prettier-plugin-sort-imports` による規律あるコードベースの構築
大規模プロジェクトにおいて、`import`文は「技術的負債の第一関門」です。
何百ものファイルが入り乱れる開発現場で、import順序がバラバラなまま放置されると何が起きるか。Gitのマージコンフリクトが多発し、差分が追えない「ノイズの山」が生成されます。
多くのエンジニアはこれを「手動で直すもの」と考えがちですが、それは現代のDevOpsの思想に反します。「自動化できるものはすべて自動化し、人間はロジックに集中せよ」。
今回は、`@trivago/prettier-plugin-sort-imports` を用いて、importを機械的に制圧し、開発効率を最大化する手法を伝授します。
—
1. なぜ「importの整理」が開発スピードを左右するのか
importのルールが曖昧なプロジェクトでは、コードレビューにおいて「意味のある変更」と「単なる import の順序違い」が混在します。これがレビュアーの認知的負荷を跳ね上げ、レビュー時間の増大を招きます。
`@trivago/prettier-plugin-sort-imports` を導入することで、以下のメリットが自動的に担保されます。
- Gitコンフリクトの劇的減少: 順序が強制されるため、異なるブランチで同じライブラリを追加しても、Gitはマージを安全に処理します。
- 認知コストの排除: 「どこに何が書かれているか」を視覚的にパターン化することで、脳がファイル先頭を読み飛ばす速度が上がります。
- 依存関係の可視化: サードパーティか、自社モジュールか、あるいは相対パスか。この階層を強制的に分けることで、循環参照の予兆や不適切な設計を即座に検知できます。
—
2. 実践：最強の `prettier.config.js` 設定
現場で採用すべき、保守性と拡張性を両立した設定例です。これを設定ファイルに組み込むことで、チーム全員のimportが完璧に同期されます。
// prettier.config.js
module.exports = {
plugins: [“@trivago/prettier-plugin-sort-imports”],
// importの順序定義
importOrder: [
“^react$”, // 1. React本体
“
“^@/components/(.)$”, // 3. 共通コンポーネント
“^@/hooks/(.)$”, // 4. カスタムフック
“^@/utils/(.)$”, // 5. ユーティリティ
“^[./]”, // 6. 相対パス（同階層や親階層）
],
// 各グループ間に空行を挿入して視認性を高める
importOrderSeparation: true,
// 同じグループ内でのアルファベット順ソートを有効化
importOrderSortSpecifiers: true,
// 開発効率を上げるための型指定importの分離
importOrderParserPlugins: [“typescript”, “jsx”, “decorators-legacy”],
};
この設定の「思想」
- `importOrderSeparation: true`: これが重要です。セクション間に空行を強制することで、脳に「ここから先は異なる階層のモジュールだ」という信号を送ります。
- エイリアス（`@/`）の活用: 相対パスの地獄（`../../../../`）を避けるため、tsconfig.json と連携したパスエイリアスを前提としています。これにより、ディレクトリ構造が変わってもimport文の破壊を最小限に抑えられます。
—
3. チーム開発で役立つ「自動化」と「共有化」のルール
ツールを入れるだけでは不十分です。チームの「暗黙の了解」をシステムに落とし込むことが、テックリードの仕事です。
Husky + lint-staged による「強制力」
コミット前に必ずフォーマットが走るようにします。これがないと、必ず「誰かが手動で直したコード」と「直していないコード」が混ざります。
huskyとlint-stagedの導入
npx mrm@2 lint-staged
`package.json` に以下を追記します。
“lint-staged”: {
“.{js,ts,tsx}”: [
“prettier –write”
]
}
開発効率を最大化するキーボードショートカット
VS Code で開発している場合、以下の設定を `.vscode/settings.json` に記述してください。
{
“editor.formatOnSave”: true,
“editor.defaultFormatter”: “esbenp.prettier-vscode”,
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: “explicit”
}
}
これにより、「保存した瞬間にimportが整い、型エラーが解消されている」という理想的な開発体験が手に入ります。 修正のために別ウィンドウを開く必要は一切ありません。
—
4. 伝説のテックリードからのアドバイス
importの順序にこだわるのは「美学」のためではありません。「コードに人格を持たせないため」です。
属人的な書き方が許されるコードベースは、いずれカオスへと向かいます。importを機械的に整列させることは、チームに対する「我々は一貫したルールで品質を担保している」という無言のメッセージになります。
もし、プロジェクトにまだこのプラグインが入っていないなら、今日の午後にでも導入してください。最初は既存ファイルに差分が出てGitが騒ぐかもしれませんが、それは「今まで見えていなかった負債が顕在化した」という、健全な浄化のプロセスです。
完璧な自動化が施されたコードベースで、貴方のチームがより高次元なビジネスロジックの設計に集中できることを願っています。