なぜその `printWidth` なのか？Prettierがもたらす「認知負荷」の最適解
エンジニア諸君、コードを書いているとき、脳のメモリを「コードの整形」に使ってはいないか？
Prettierを導入する最大の意義は、「コードの見た目に関する議論をこの世から抹殺すること」にある。しかし、チーム開発において最も不毛な議論の火種となりがちなのが `printWidth` の設定値だ。80文字か、100文字か、あるいは120文字か。
今日は、単なる好みの話ではなく、「人間の認知能力」と「コンテキストスイッチ」の観点から、なぜその数値が選ばれるべきなのかを解き明かす。
—
1. `printWidth` の本質：可読性とネストの戦い
結論から言えば、現代のフロントエンド開発において推奨される `printWidth` は 80〜100 だ。
なぜ120や150ではないのか？理由は単純だ。「視線の移動」と「ネスト」にある。
視線の移動距離
人間が文章を読む際、視線が左右に大きく振られると、行頭に戻る際に正確な行を捉えるのが難しくなる。これはコードにおけるインデントの深さを追いかける際に致命的なストレスとなる。`printWidth: 120` を超えると、マルチディスプレイ環境でエディタを左右に並べた際、水平スクロールが発生したり、コードの構造を把握するために顔を左右に振る必要が出てくる。
ネストとの相関関係
Prettierは `printWidth` を超えた瞬間に改行を強制する。ネストが深いコードで `printWidth` を高く設定しすぎると、「横には長いが、縦には極端に短い」という、構造が全く見えないコードが出来上がる。逆に80〜100であれば、適切に改行が挿入され、コードの階層構造が視覚的に浮き彫りになる。
アーキテクトの提言:
- 80: 究極の可読性。3カラム表示に耐えうる。ただし、JSのコールバック地獄には厳しい。
- 100: 現代の標準解。TypeScriptの型定義やReactのProps展開を考慮した際、もっともバランスが良い。
—
2. 実用的な `.prettierrc` ベストプラクティス
チームで「なぜこの設定なのか」を合意するための、堅牢な設定ファイル構成を紹介する。
{
“printWidth”: 100, // 認知負荷の最適点。視線移動を最小化しつつ型定義も収める
“tabWidth”: 2, // インデントは2スペースがJS/TS界のデファクト
“useTabs”: false, // スペース派かタブ派かの不毛な議論を避けるための必須設定
“semi”: true, // セミコロンはつける。ASI(自動セミコロン挿入)の罠を回避する
“singleQuote”: true, // シングルクォート推奨。記号の視認性を高める
“trailingComma”: “all”, // 差分管理を容易にするため、末尾カンマは常に有効化
“arrowParens”: “always”, // 引数が1つでも括弧をつける。型定義の追加時にDiffが汚れるのを防ぐ
“endOfLine”: “lf” // OS依存の改行コード事故を防ぐ
}
—
3. 開発スピードを劇的に高める「隠し味」
ただ設定ファイルを置くだけではプロとは言えない。開発体験(DX)を最大化するツールチェーンを組み込め。
神プラグイン：`prettier-plugin-sort-imports`
import文が混沌としているプロジェクトは、それだけで技術的負債の塊だ。このプラグインを入れれば、importの順序を自動で整理してくれる。
導入コマンド
npm install –save-dev @trivago/prettier-plugin-sort-imports
チーム開発の鉄則：Git Hooksによる強制
設定ファイルを共有しても、個人のエディタ設定で上書きされては意味がない。`husky` と `lint-staged` を使い、コミット時に必ず整形を走らせる強制力を持たせろ。
// package.json への追加設定
“lint-staged”: {
“.{js,ts,tsx,json,md}”: [
“prettier –write” // コミット対象のファイルだけを高速に整形
]
}
—
4. テックリードからのアドバイス：設定を「聖典」にするな
最後に一つ。どれだけ緻密にルールを決めても、コードベースが成長すれば「このルールじゃ読みづらい」という場面が必ず訪れる。
その時は、ツールを盲信せず、「何が一番読みやすいか」をチームで5分だけ議論して設定を更新すればいい。
Prettierを導入する真の目的は、「設定を固定すること」ではなく、「整形の手間を排除して、ロジックの設計やビジネス価値の創造に時間を投資すること」にある。
君たちのエディタ環境は、君たちの脳の拡張だ。ノイズを排除し、最高に集中できる環境を構築せよ。それが、開発効率を突き抜けるための唯一の道だ。