Docker環境でNode.jsを学ぼう_Part3_コード品質ツール編

// ❌ 未使用の変数
const unusedVar = 'not used';

// ❌ 未定義の変数を使用
console.log(undefinedVar);

// ❌ 比較演算子の間違い
if (value = 10) { }  // 代入になっている

// ❌ 到達不能コード
function test() {
  return;
  console.log('never executed');
}

# ローカルで作業ディレクトリを作成
mkdir eslint-study && cd eslint-study

# Dockerコンテナを起動
docker run -it --rm -v $(pwd):/work -w /work node:20 bash

# コンテナ内で実行
npm init -y

# ESLintをインストール
npm install --save-dev eslint

# 対話形式で設定ファイルを作成
npm init @eslint/config

import globals from "globals";
import pluginJs from "@eslint/js";

export default [
  {
    languageOptions: {
      globals: globals.node
    }
  },
  pluginJs.configs.recommended,
];

# 問題のあるコードを作成
cat << 'EOF' > sample.js
// 問題のあるコード例

// 1. 未使用の変数
const unusedVariable = 'I am not used';

// 2. varの使用（letやconstが推奨）
var oldStyle = 'using var';

// 3. セミコロンなし（設定によってはエラー）
const noSemicolon = 'no semicolon'

// 4. console.logの使用（本番では非推奨の場合も）
console.log('Hello, ESLint!');

// 5. 未定義変数の使用
console.log(undefinedVar);

// 6. 関数
function greet(name) {
  return 'Hello, ' + name;
}

// 7. 関数を呼び出し
const result = greet('World');
console.log(result);
EOF

# ESLintでチェック
npx eslint sample.js

# 自動修正可能な問題を修正
npx eslint sample.js --fix

# 修正後のコードを確認
cat sample.js

# 設定ファイルを更新
cat << 'EOF' > eslint.config.mjs
import globals from "globals";
import pluginJs from "@eslint/js";

export default [
  {
    languageOptions: {
      globals: globals.node
    }
  },
  pluginJs.configs.recommended,
  {
    rules: {
      // 未使用変数を警告に変更（エラー→警告）
      "no-unused-vars": "warn",
      
      // console.logを許可
      "no-console": "off",
      
      // varを禁止してlet/constを強制
      "no-var": "error",
      
      // セミコロンを必須に
      "semi": ["error", "always"],
      
      // シングルクォートを強制
      "quotes": ["error", "single"]
    }
  }
];
EOF

# 再度チェック
npx eslint sample.js

# package.jsonを更新
cat << 'EOF' > package.json
{
  "name": "eslint-study",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  },
  "devDependencies": {
    "@eslint/js": "^9.0.0",
    "eslint": "^9.0.0",
    "globals": "^15.0.0"
  }
}
EOF

# スクリプトで実行
npm run lint

# .eslintignoreファイルを作成（または設定ファイルで指定）
cat << 'EOF' > .eslintignore
node_modules/
dist/
build/
*.min.js
EOF

exit

// 整形前（バラバラなスタイル）
const foo={a:1,b:2,c:3};
function bar( x,y ){return x+y}
const arr = [1,2,3,4,5]

// 整形後（統一されたスタイル）
const foo = { a: 1, b: 2, c: 3 };
function bar(x, y) {
  return x + y;
}
const arr = [1, 2, 3, 4, 5];

# ローカルで作業ディレクトリを作成
mkdir prettier-study && cd prettier-study

# Dockerコンテナを起動
docker run -it --rm -v $(pwd):/work -w /work node:20 bash

# コンテナ内で実行
npm init -y

# Prettierをインストール（バージョン固定推奨）
npm install --save-dev --save-exact prettier

# 整形前のコードを作成
cat << 'EOF' > sample.js
// 整形前のコード（わざと汚く書く）
const user={name:"Alice",age:25,email:"alice@example.com"};
function greet(name){console.log("Hello, "+name+"!");}
const numbers=[1,2,3,4,5];
const doubled=numbers.map(n=>n*2);
if(user.age>=18){console.log("Adult")}else{console.log("Minor")}
EOF

# 内容確認
cat sample.js

# 整形が必要かチェック
npx prettier --check sample.js

# 整形を実行
npx prettier --write sample.js

# 整形後のコードを確認
cat sample.js

// 整形前のコード（わざと汚く書く）
const user = { name: "Alice", age: 25, email: "alice@example.com" };
function greet(name) {
  console.log("Hello, " + name + "!");
}
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((n) => n * 2);
if (user.age >= 18) {
  console.log("Adult");
} else {
  console.log("Minor");
}

# .prettierrcファイルを作成
cat << 'EOF' > .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "always"
}
EOF

# 設定を反映して再整形
npx prettier --write sample.js

# 結果を確認（シングルクォートに変わる）
cat sample.js

// 整形前のコード（わざと汚く書く）
const user = { name: 'Alice', age: 25, email: 'alice@example.com' };
function greet(name) {
  console.log('Hello, ' + name + '!');
}
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((n) => n * 2);
if (user.age >= 18) {
  console.log('Adult');
} else {
  console.log('Minor');
}

# 複数のファイルを作成
mkdir src

cat << 'EOF' > src/utils.js
const add=(a,b)=>a+b;
const subtract=(a,b)=>a-b;
module.exports={add,subtract};
EOF

cat << 'EOF' > src/index.js
const {add,subtract}=require('./utils');
console.log(add(5,3));
console.log(subtract(10,4));
EOF

# srcディレクトリ内のすべてのJSファイルを整形
npx prettier --write "src/**/*.js"

# .prettierignoreファイルを作成
cat << 'EOF' > .prettierignore
node_modules/
dist/
build/
*.min.js
package-lock.json
EOF

# package.jsonを更新
cat << 'EOF' > package.json
{
  "name": "prettier-study",
  "version": "1.0.0",
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  },
  "devDependencies": {
    "prettier": "3.3.0"
  }
}
EOF

# スクリプトで実行
npm run format:check
npm run format

exit

# ローカルで作業ディレクトリを作成
mkdir eslint-prettier-study && cd eslint-prettier-study

# Dockerコンテナを起動
docker run -it --rm -v $(pwd):/work -w /work node:20 bash

# コンテナ内で実行
npm init -y

# ESLintとPrettierをインストール
npm install --save-dev eslint prettier

# 競合を解決するパッケージ
npm install --save-dev eslint-config-prettier

# eslint.config.mjsを作成
cat << 'EOF' > eslint.config.mjs
import globals from "globals";
import pluginJs from "@eslint/js";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  {
    languageOptions: {
      globals: globals.node
    }
  },
  pluginJs.configs.recommended,
  // Prettierと競合するルールを無効化（最後に配置）
  eslintConfigPrettier,
  {
    rules: {
      "no-unused-vars": "warn",
      "no-console": "off"
    }
  }
];
EOF

# .prettierrcを作成
cat << 'EOF' > .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}
EOF

# 問題のあるコードを作成
cat << 'EOF' > sample.js
// 問題のあるコード
const unusedVar="not used";
const user={name:"Alice",age:25};
function greet(name){console.log("Hello, "+name)}
console.log(undefinedVar);
EOF

# ESLintでチェック（品質の問題を検出）
npx eslint sample.js

# Prettierで整形（見た目を統一）
npx prettier --write sample.js

# 整形後のコードを確認
cat sample.js

// 問題のあるコード
const unusedVar = 'not used';
const user = { name: 'Alice', age: 25 };
function greet(name) {
  console.log('Hello, ' + name);
}
console.log(undefinedVar);

# package.jsonを更新
cat << 'EOF' > package.json
{
  "name": "eslint-prettier-study",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "check": "npm run lint && npm run format:check",
    "fix": "npm run lint:fix && npm run format"
  },
  "devDependencies": {
    "@eslint/js": "^9.0.0",
    "eslint": "^9.0.0",
    "eslint-config-prettier": "^9.0.0",
    "globals": "^15.0.0",
    "prettier": "^3.0.0"
  }
}
EOF

# 1. コードを書く

# 2. 保存時に自動整形（エディタ設定推奨）

# 3. コミット前にチェック
npm run check

# 4. 問題があれば修正
npm run fix

exit

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

# 学習ディレクトリを削除
rm -rf eslint-study prettier-study eslint-prettier-study