ESLint / Prettier の導入（コード品質向上） — eslint --init（設定手順）
JavaScript の開発では コード品質チェック（Lint） と コード整形（Format） を導入すると、バグを減らし、読みやすいコードを保てます。
初心者は「ESLint はコードの間違いを見つける先生、Prettier はコードをきれいに整える掃除係」と覚えると理解しやすいです。
1. ESLint の導入手順
インストール
npm install eslint --save-dev
初期化（設定ファイル作成）
npx eslint --init
実行すると質問が出ます。初心者向けの選び方は以下の通り：
- How would you like to use ESLint?
→ 「To check syntax, find problems, and enforce code style」
（構文チェック＋問題検出＋スタイル統一） - What type of modules does your project use?
→ 「JavaScript modules (import/export)」 - Which framework does your project use?
→ 「None of these」 （React/Vue を使うなら選択） - Does your project use TypeScript?
→ 「No」 （TypeScript を使うなら Yes） - Where does your code run?
→ 「Browser」 or 「Node」 （環境に合わせて） - Which style guide do you want to follow?
→ 「Popular style guide」から「Airbnb」や「Standard」を選ぶと無難 - What format do you want your config file to be in?
→ 「JSON」か「JavaScript」形式で保存される
これで .eslintrc.json が生成されます。
2. Prettier の導入手順
インストール
npm install --save-dev prettier
設定ファイル作成
プロジェクトルートに .prettierrc を作成：
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
- semi: セミコロンを付けるか
- singleQuote: シングルクォートを使うか
- tabWidth: インデント幅
- trailingComma: 配列やオブジェクトの末尾にカンマを付けるか
3. ESLint と Prettier の併用
ESLint と Prettier を一緒に使うと「コードチェック」と「整形」が両立できます。
追加インストール
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
.eslintrc.json に追記
{
"extends": ["eslint:recommended", "plugin:prettier/recommended"],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
plugin:prettier/recommended→ Prettier と ESLint の競合を解消prettier/prettier→ Prettier のルール違反を ESLint エラーにする
4. 実行方法
Lint チェック
npx eslint .
Prettier で整形
npx prettier --write .
例題: ESLint / Prettier の効果
整形前
function hello(name){console.log("Hello,"+name)}
整形後（Prettier適用）
function hello(name) {
console.log("Hello, " + name);
}
Lint エラー例
x = 10; // ESLint: 'x' is not defined
実務でのコツ
- VSCode 拡張機能を入れると保存時に自動整形できる。
- CI/CD に組み込むとチーム全体でコード品質を統一できる。
- 初心者は Prettier を優先 → コードがきれいになるだけでも効果大。
- 慣れてきたら ESLint を強化 → バグ検出やスタイル統一に役立つ。
練習問題（導入チェック）
- プロジェクトに ESLint を導入し、
npx eslint .を実行してみる。 - Prettier を導入し、
npx prettier --write .でコードを整形してみる。 - VSCode で保存時に自動整形されるように設定してみる。
直感的な指針
- ESLint = コードチェックの先生。
- Prettier = コード整形の掃除係。
- 両方導入すると「安全で読みやすいコード」が書ける。
- 初心者はまず Prettier → 次に ESLint → 最後に併用。
これを覚えれば「コード品質を自動で守る環境」が作れ、チーム開発でも安心して進められます。