T-CREATOR

ESLint × AirBnB スタイルガイド導入マニュアル

ESLint × AirBnB スタイルガイド導入マニュアル

JavaScript 開発において、コードの品質と一貫性を保つことは、プロジェクトの成功に直結する重要な要素です。特に複数の開発者が関わるチーム開発では、統一されたコーディングスタイルが開発効率と保守性を大きく左右します。

AirBnB スタイルガイドは、世界中の開発チームで採用されている信頼性の高いコーディング規約として、多くのプロジェクトで標準となっています。ESLint と組み合わせることで、このスタイルガイドを自動的に適用し、継続的にコード品質を維持できるのです。

本記事では、ESLint と AirBnB スタイルガイドの導入から基本的な運用まで、実際のコード例を交えながら段階的に解説していきます。初心者の方でも安心して導入できるよう、よくあるエラーの対処法も含めて詳しくご紹介しますね。

AirBnB スタイルガイドとは

世界標準のコーディング規約

AirBnB スタイルガイドは、民泊サービスで有名な AirBnB 社が開発・公開している JavaScript のコーディング規約です。GitHub で 14 万を超えるスターを獲得しており、世界中の開発チームで採用されている事実上の標準となっています。

このスタイルガイドの特徴を表にまとめると以下のようになります：

#特徴詳細
1実用性重視実際のプロダクション環境で検証された実践的なルール
2包括性ES6+の最新機能から基本的な構文まで幅広くカバー
3明確性各ルールに詳細な理由と例が記載されている
4柔軟性プロジェクトに応じてカスタマイズ可能
5コミュニティ活発なメンテナンスと豊富な情報

他のスタイルガイドとの違い

AirBnB スタイルガイドが他の選択肢と比べて優れている点を見てみましょう。

Google JavaScript Style Guide との比較

javascript// AirBnB: アロー関数を推奨
const getUserName = (user) => user.name;

// Google: function宣言も許可
function getUserName(user) {
  return user.name;
}

StandardJS との比較

javascript// AirBnB: セミコロン必須
const message = 'Hello World';

// StandardJS: セミコロン不要
const message = 'Hello World';

AirBnB スタイルガイドは、セミコロンの使用やアロー関数の積極的な活用など、モダンな JavaScript 開発により適した規約を採用しています。また、TypeScript サポートも充実しており、現代的なフロントエンド開発に最適化されているのが大きな特徴です。

環境準備とインストール

必要なパッケージの確認

AirBnB スタイルガイドを導入するためには、まず開発環境を整備する必要があります。以下のパッケージが必要になります：

#パッケージ名役割
1eslintESLint のコアライブラリ
2eslint-config-airbnbAirBnB の設定ルール
3eslint-plugin-importimport/export 文の検証
4eslint-plugin-reactReact 関連のルール
5eslint-plugin-react-hooksReact Hooks のルール
6eslint-plugin-jsx-a11yアクセシビリティ関連のルール

プロジェクトの初期化

新しいプロジェクトで AirBnB スタイルガイドを導入する場合の手順をご紹介します。

bash# プロジェクトディレクトリの作成
mkdir my-airbnb-project
cd my-airbnb-project

# package.jsonの初期化
yarn init -y

基本パッケージのインストール

React プロジェクトで AirBnB スタイルガイドを使用する場合の標準的なインストール方法です：

bash# ESLintとAirBnB設定のインストール
yarn add -D eslint eslint-config-airbnb

# 依存関係の確認とインストール
npx install-peerdeps --dev eslint-config-airbnb --yarn

TypeScript プロジェクトの場合

TypeScript を使用する場合は、追加で TypeScript 関連のパッケージが必要です：

bash# TypeScript対応版のインストール
yarn add -D eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

Next.js プロジェクトでの特別な配慮

Next.js プロジェクトでは、フレームワーク固有の設定も考慮する必要があります：

bash# Next.js用の追加パッケージ
yarn add -D eslint-config-next

これらのパッケージをインストールすることで、AirBnB スタイルガイドの基盤が整います。次のステップでは、これらを実際に設定ファイルで活用していきましょう。

基本設定ファイルの作成

.eslintrc.js ファイルの基本構成

AirBnB スタイルガイドを適用するための設定ファイルを作成します。プロジェクトルートに.eslintrc.jsファイルを作成しましょう：

javascript// .eslintrc.js
module.exports = {
  // 実行環境の指定
  env: {
    browser: true, // ブラウザ環境
    es2021: true, // ES2021の機能を使用
    node: true, // Node.js環境
  },

  // AirBnBスタイルガイドを継承
  extends: ['eslint:recommended', 'airbnb', 'airbnb/hooks'],

  // パーサーオプション
  parserOptions: {
    ecmaFeatures: {
      jsx: true, // JSXを有効化
    },
    ecmaVersion: 'latest', // 最新のECMAScript機能
    sourceType: 'module', // ESモジュールを使用
  },

  // 使用するプラグイン
  plugins: ['react', 'react-hooks'],

  // カスタムルール（必要に応じて）
  rules: {
    // ここでプロジェクト固有の調整を行う
  },
};

TypeScript 対応の設定

TypeScript プロジェクトの場合は、以下のような設定になります：

javascript// .eslintrc.js (TypeScript版)
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },

  extends: [
    'eslint:recommended',
    'airbnb',
    'airbnb-typescript',
    'airbnb/hooks',
    '@typescript-eslint/recommended',
  ],

  parser: '@typescript-eslint/parser',

  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: './tsconfig.json', // TypeScript設定ファイルを指定
  },

  plugins: ['react', 'react-hooks', '@typescript-eslint'],

  rules: {
    // TypeScript固有の調整
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/explicit-function-return-type':
      'off',
  },
};

package.json へのスクリプト追加

ESLint を効率的に実行するため、package.json にスクリプトを追加しましょう：

json{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "lint:check": "eslint . --ext .js,.jsx,.ts,.tsx --max-warnings 0"
  }
}

これらのスクリプトの役割は以下の通りです：

#スクリプト機能
1lintファイルをチェックし、問題を報告
2lint自動修正可能な問題を修正
3lint警告も含めて厳密にチェック

.eslintignore ファイルの設定

チェック対象から除外したいファイルやディレクトリを指定します：

text# .eslintignore
node_modules/
.next/
out/
build/
dist/
coverage/
*.min.js
.env*

この設定により、不要なファイルをスキップして効率的に Lint を実行できます。

主要ルールの理解

変数とスコープ関連のルール

AirBnB スタイルガイドで特に重要な変数管理のルールを見ていきましょう：

const/let の使い分け

javascript// ✅ 良い例：再代入しない場合はconstを使用
const userName = 'John Doe';
const userList = ['Alice', 'Bob', 'Charlie'];

// ✅ 良い例：再代入が必要な場合のみletを使用
let currentIndex = 0;
currentIndex += 1;

// ❌ 悪い例：varの使用は避ける
var message = 'Hello World';

オブジェクト記法とデストラクチャリング

javascript// ✅ 良い例：ショートハンドプロパティを使用
const name = 'Alice';
const age = 25;
const user = { name, age };

// ✅ 良い例：デストラクチャリングを活用
const { name: userName, age: userAge } = user;

// ❌ 悪い例：冗長な記法
const user = { name: name, age: age };
const userName = user.name;
const userAge = user.age;

関数定義のベストプラクティス

アロー関数の活用

javascript// ✅ 良い例：短い処理はアロー関数で
const multiply = (a, b) => a * b;

// ✅ 良い例：複数行の場合も適切に
const processUser = (user) => {
  const normalizedName = user.name.toLowerCase();
  return {
    ...user,
    name: normalizedName,
    displayName: `Mr. ${user.name}`,
  };
};

// ❌ 悪い例：不要なfunction宣言
function multiply(a, b) {
  return a * b;
}

デフォルトパラメータの活用

javascript// ✅ 良い例：デフォルトパラメータを使用
const greetUser = (name = 'Guest', greeting = 'Hello') => {
  return `${greeting}, ${name}!`;
};

// ❌ 悪い例：条件分岐でデフォルト値を設定
const greetUser = (name, greeting) => {
  name = name || 'Guest';
  greeting = greeting || 'Hello';
  return `${greeting}, ${name}!`;
};

配列とオブジェクトの操作ルール

配列メソッドの推奨

javascript// ✅ 良い例：map、filter、reduceを活用
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((num) => num % 2 === 0);
const doubledNumbers = numbers.map((num) => num * 2);

// ✅ 良い例：スプレッド演算子で配列の結合
const newNumbers = [...numbers, 6, 7, 8];

// ❌ 悪い例：forループでの配列操作
const evenNumbers = [];
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    evenNumbers.push(numbers[i]);
  }
}

React 特有のルール

コンポーネント定義

javascript// ✅ 良い例：関数コンポーネントの推奨記法
const UserProfile = ({ name, email, avatar }) => {
  return (
    <div className='user-profile'>
      <img src={avatar} alt={`${name}のアバター`} />
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
};

// ✅ 良い例：PropTypesの定義
UserProfile.propTypes = {
  name: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
  avatar: PropTypes.string,
};

// ✅ 良い例：デフォルトプロパティ
UserProfile.defaultProps = {
  avatar: '/default-avatar.png',
};

これらのルールを理解することで、AirBnB スタイルガイドに準拠した読みやすく保守しやすいコードが書けるようになります。

エディタ連携設定

VS Code での自動修正設定

開発効率を最大化するため、VS Code で ESLint の自動修正機能を設定しましょう。まず必要な拡張機能をインストールします：

必要な拡張機能

#拡張機能名機能
1ESLintESLint のリアルタイム表示と修正
2Prettierコードフォーマッターとの連携
3Auto Rename TagHTML タグの自動リネーム

settings.json の設定

VS Code のワークスペース設定を行います。プロジェクトルートに.vscode​/​settings.jsonファイルを作成します：

json{
  // ESLintの基本設定
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.format.enable": true,

  // ファイル保存時の自動修正
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

  // 対象ファイルの指定
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],

  // エディタの表示設定
  "editor.rulers": [80, 120],
  "editor.tabSize": 2,
  "editor.insertSpaces": true,

  // ファイル形式別の設定
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

Prettier との連携設定

ESLint と Prettier を組み合わせて使用する場合の設定方法をご紹介します：

必要パッケージのインストール

bash# Prettierとの競合を回避するパッケージ
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

更新された.eslintrc.js

javascriptmodule.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },

  extends: [
    'eslint:recommended',
    'airbnb',
    'airbnb/hooks',
    'prettier', // Prettierとの競合を回避
  ],

  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },

  plugins: [
    'react',
    'react-hooks',
    'prettier', // Prettierプラグインを追加
  ],

  rules: {
    'prettier/prettier': 'error', // Prettierルールをエラーとして扱う
  },
};

.prettierrc 設定ファイル

json{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

便利なキーボードショートカット

開発効率を上げるため、よく使うショートカットを設定しましょう：

keybindings.json の設定例

json[
  {
    "key": "ctrl+shift+l",
    "command": "eslint.executeAutofix",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+f",
    "command": "editor.action.formatDocument",
    "when": "editorTextFocus"
  }
]

これらの設定により、コーディング中にリアルタイムで ESLint の指摘を確認し、保存時に自動的に修正が適用される環境が整います。

よくある設定エラーと対処法

パッケージ依存関係のエラー

AirBnB スタイルガイド導入時によく遭遇するエラーと解決方法をご紹介します。

エラー 1：peer dependencies の不足

bash# エラーメッセージの例
warning "eslint-config-airbnb@19.0.4" has incorrect peer dependency "eslint-plugin-import@^2.25.3"

解決方法

bash# 不足している依存関係を確認
yarn info eslint-config-airbnb peerDependencies

# 必要なパッケージをまとめてインストール
npx install-peerdeps --dev eslint-config-airbnb --yarn

エラー 2：バージョンの競合

bash# エラーメッセージの例
Error: Cannot resolve dependency tree
Found: eslint@8.57.0
Expected: eslint@^7.32.0

この場合の対処方法を表にまとめます：

#対処方法詳細
1バージョン確認yarn info package-name versions --json
2互換バージョン選択互換性のあるバージョンを手動指定
3強制インストール--forceフラグを使用（非推奨）
4設定見直しより新しい設定パッケージへの移行

設定ファイルのパースエラー

エラー 3：設定ファイルの構文エラー

javascript// ❌ 間違った設定例
module.exports = {
  extends: [
    'airbnb',
    'airbnb/hooks'  // カンマが抜けている
  ]
  rules: {
    // 設定...
  }
};

正しい設定

javascript// ✅ 正しい設定例
module.exports = {
  extends: [
    'airbnb',
    'airbnb/hooks', // カンマを追加
  ],
  rules: {
    // 設定...
  },
};

TypeScript 関連のエラー

エラー 4：TypeScript 設定の問題

bash# エラーメッセージの例
Parsing error: Cannot read file '/path/to/tsconfig.json'

解決方法

javascript// .eslintrc.js
module.exports = {
  // ... 他の設定

  parserOptions: {
    // TypeScript設定ファイルのパスを正確に指定
    project: ['./tsconfig.json', './tsconfig.eslint.json'],
    tsconfigRootDir: __dirname,
  },

  // ... 他の設定
};

tsconfig.eslint.json の作成

json{
  "extends": "./tsconfig.json",
  "include": [
    "src/**/*",
    "pages/**/*",
    "components/**/*",
    "*.js",
    "*.ts",
    ".eslintrc.js"
  ],
  "exclude": ["node_modules", ".next", "out"]
}

ルール設定のエラー

エラー 5：カスタムルールの記述ミス

javascript// ❌ 間違ったルール設定
module.exports = {
  rules: {
    'react/jsx-props-no-spreading': 'warn', // 存在しないルール名
    'import/prefer-default-export': off, // クォートが抜けている
  },
};

正しいルール設定

javascript// ✅ 正しいルール設定
module.exports = {
  rules: {
    'react/jsx-props-no-spreading': 'warn',
    'import/prefer-default-export': 'off', // クォートを追加
  },
};

パフォーマンス関連の問題

大規模プロジェクトでの実行速度改善

javascript// .eslintrc.js でのパフォーマンス最適化
module.exports = {
  // キャッシュの有効化
  cache: true,
  cacheLocation: '.eslintcache',

  // 除外パターンの最適化
  ignorePatterns: [
    'node_modules/',
    '.next/',
    'out/',
    'build/',
    'dist/',
  ],

  // ... 他の設定
};

これらの対処法を参考に、スムーズな AirBnB スタイルガイドの導入を進めていただけます。

まとめ

本記事では、ESLint と AirBnB スタイルガイドの導入方法について、基本的なセットアップから実践的な運用まで詳しく解説してまいりました。

導入によって得られる効果

AirBnB スタイルガイドを導入することで、以下のような効果が期待できます：

#効果具体的なメリット
1コード品質の向上バグの早期発見と予防
2開発効率の改善統一されたスタイルによる可読性向上
3チーム開発の円滑化コードレビューの効率化
4保守性の向上長期的なメンテナンスコスト削減
5学習効果ベストプラクティスの自然な習得

今後のステップ

AirBnB スタイルガイドの基本導入が完了したら、次のステップとして以下の取り組みを検討してみてください：

段階的な改善

  • プロジェクト固有のカスタムルールの追加
  • CI/CD パイプラインへの組み込み
  • プリコミットフックの設定
  • チーム内でのコーディング規約の文書化

高度な活用

  • TypeScript 環境での型安全性との連携
  • パフォーマンス最適化のための設定調整
  • 他の開発ツールとの統合
  • 自動テストとの組み合わせ

継続的な運用

AirBnB スタイルガイドは一度導入して終わりではありません。定期的なルールの見直しや、新しいバージョンへのアップデート、チームメンバーとの合意形成など、継続的な改善が重要です。

特に、開発チームが成長していく過程で、より効率的で実用的なルール設定に調整していくことで、開発体験の向上と品質の維持を両立できるでしょう。

この記事でご紹介した内容を基に、ぜひ皆さんのプロジェクトでも AirBnB スタイルガイドを活用して、より良いコード品質の実現に取り組んでみてくださいね。

関連リンク

ブログBlog

もっと見る

書籍レビューReview

もっと見る