React開発で必須！ESLintとPrettierでコードフォーマットを自動化する方法

1. ESLintとPrettierってなに？

1. ESLintとPrettierってなに？

ESLintは、コードの「間違い」や「書き方のルール違反」を見つけてくれるツールです。例えば「セミコロンが抜けてるよ」や「使ってない変数があるよ」と教えてくれます。

一方でPrettierは、コードの「見た目」を自動で整えてくれるフォーマッターです。改行の位置やスペースの数などを、一定のルールで揃えてくれます。

この2つを組み合わせることで、読みやすくて、ルールに沿ったReactコードが自動的に保たれるようになります。

2. なぜ自動フォーマットがReact開発に必要なの？

2. なぜ自動フォーマットがReact開発に必要なの？

Reactでは、HTMLとJavaScriptが混ざったJSXという特殊な書き方をします。そのため、コードの構造が崩れやすく、見づらくなる原因にもなります。

そこで、ESLintとPrettierを使えば、毎回ボタンを押すだけでコードを整形できるようになります。さらに、保存時に自動整形する設定も可能なので、作業の効率もアップします。

3. ReactにESLintとPrettierを導入する手順

3. ReactにESLintとPrettierを導入する手順

それでは、ReactプロジェクトにESLintとPrettierを設定する手順を紹介します。

1. Reactプロジェクトを作成する（Viteなど）
2. 必要なパッケージをインストールする
3. 設定ファイルを作成・編集する
4. VSCodeで保存時に自動整形する

① パッケージのインストール

以下のコマンドをターミナルで入力してください。

npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-react eslint-plugin-react-hooks

② ESLintの初期設定

次に、初期設定コマンドを実行します。

npx eslint --init

質問がいくつか表示されますが、以下のように選べばOKです。

• How would you like to use ESLint? → To check syntax and find problems
• Which framework? → React
• TypeScript? → Yes（使っている場合）
• Config format? → JavaScript

③ PrettierとESLintの共存設定

ESLintとPrettierは、重なる機能もあるため、eslint-config-prettierを使って競合しないようにします。

作成された.eslintrc.jsの内容に、以下を追加してください。

extends: [
  "eslint:recommended",
  "plugin:react/recommended",
  "plugin:react-hooks/recommended",
  "prettier"
]

4. VSCodeで保存時に自動フォーマットする設定

4. VSCodeで保存時に自動フォーマットする設定

VSCodeでコードを保存するたびに、自動で整形されるように設定しましょう。

まず、VSCodeの設定ファイル .vscode/settings.json を作成して、以下のように書きます。

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

また、VSCode拡張機能として「Prettier - Code formatter」と「ESLint」もインストールしておきましょう。

5. Prettierのルールをカスタマイズするには？

5. Prettierのルールをカスタマイズするには？

Prettierの動作を細かく調整したい場合は、.prettierrcという設定ファイルを作成します。

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2
}

たとえばsemi: trueは「文の最後にセミコロンをつける」という意味、singleQuote: trueは「文字列をシングルクォーテーション（'）で囲む」という指定です。

6. React開発がもっと快適になる自動整形の効果

6. React開発がもっと快適になる自動整形の効果

自動整形があると、コードを書くことに集中できるので、Reactコンポーネントの設計や状態管理など本質的な部分に時間を使えます。

また、他の人とチームで開発する場合にも、コードのスタイルが統一されていることで見やすさ・理解のしやすさ・バグの減少につながります。

まとめ

まとめ

ESLintとPrettierで何が変わったのか

この記事では、React開発において欠かせないESLintとPrettierについて、役割や違い、導入方法から実際の効果までを丁寧に見てきました。 ESLintはコードの書き方やルール違反を見つけてくれる存在であり、Prettierはコードの見た目を自動で整えてくれる心強い味方です。 この二つを組み合わせることで、ReactコンポーネントやJSXのコードが常に読みやすい状態に保たれ、ミスにも早く気づけるようになります。

特にReactは、画面の部品を組み合わせて作るという特徴があり、ファイルやコードが増えやすい傾向があります。 その中でコードの書き方が人によって違ってしまうと、後から見直したときに理解しづらくなったり、修正に時間がかかったりします。 ESLintとPrettierを導入しておけば、そうした問題を未然に防ぎ、安心して開発を進められる環境を作ることができます。

自動フォーマットがもたらす学習面でのメリット

初心者にとって大きなメリットは、「見た目を気にしなくてよくなる」ことです。 インデントや改行、セミコロンの有無などに悩まされず、Reactの考え方やコンポーネントの仕組み、状態管理に集中できます。 コードを保存するだけで自動的に整形されるため、「これで合っているのかな」と不安になる場面も減っていきます。

また、エラーや警告をESLintが教えてくれることで、間違いをその場で修正できる習慣が身につきます。 これはReactだけでなく、JavaScript全体の理解を深めるうえでも大きな助けになります。 正しい書き方を自然と覚えていける点も、自動チェックツールを使う価値のひとつです。

シンプルなサンプルで振り返る自動整形の効果

function App() {
  return (
    <div>
      <h1>こんにちは！</h1>
      <button>クリックしてみよう</button>
    </div>
  );
}

このようなシンプルなReactコンポーネントでも、ESLintとPrettierが設定されていれば、 書き方が多少乱れていても自動的に整えられます。 初心者のうちは「動けばいい」と思いがちですが、早い段階から整ったコードに触れることで、 正しいReact開発の感覚が自然と身についていきます。

チーム開発や実務での大きな効果

実務やチーム開発では、ESLintとPrettierの重要性はさらに高まります。 複数人でReactアプリを作る場合、コードの見た目が揃っているだけで、理解のスピードが大きく変わります。 誰が書いたコードでも読みやすく、修正もしやすいため、無駄な確認作業や認識のズレが減っていきます。

その結果、Reactの設計や機能追加といった本来注力すべき部分に時間を使えるようになります。 自動整形は地味に見えますが、開発全体の質を底上げしてくれる、とても重要な仕組みです。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

React開発でESLintとは何をするツールですか？

ESLintは、ReactやJavaScriptのコードに含まれる構文ミスやルール違反を自動で検出してくれるツールで、セミコロンの忘れや未使用の変数などを指摘してくれます。