先生と生徒の会話形式で理解しよう

生徒

「Next.jsを書いていると、コードの見た目がバラバラになります…」

先生

「それはESLintとPrettierを使うと自動で整えられます。」

生徒

「自動で直してくれるんですか？難しそうです…」

先生

「順番に設定すれば、初心者でも安心して使えます。」

1. Next.jsでコード整形が必要な理由

Next.jsでプログラムを書き始めると、同じ内容でも人によって書き方が変わります。行の空き方やカッコの位置がバラバラだと、後から見たときに読みにくくなります。これは、ノートの文字が乱れている状態とよく似ています。

ESLintとPrettierは、ノートをきれいに書き直してくれる先生のような存在です。書き方のミスを教えてくれたり、見た目を自動でそろえてくれます。

2. ESLintとは何かをやさしく説明

ESLintは、JavaScriptやNext.jsのコードをチェックする仕組みです。文法の間違いや、間違えやすい書き方を見つけてくれます。テスト前に丸つけをしてくれる先生のような役割です。

Next.jsでは、最初からESLintが用意されていることが多く、設定を少し整えるだけで使えます。


export default function Page() {
  const message = "こんにちは"
  return <h1>{message}</h1>
}

（セミコロンの不足などをESLintが知らせてくれます）

Prettierは、コードの見た目を自動で整える仕組みです。インデントや改行をそろえてくれるため、初心者でも読みやすいコードになります。

手で直す必要がなく、保存するだけで整形される点が大きな特徴です。


export default function Page(){
return(
<div>
<h1>Next.js</h1>
</div>
)
}

（保存すると自動で読みやすい形に整えられます）

Prettierは、後から追加する道具です。ターミナルを使って、必要なものを準備します。ターミナルは、パソコンに命令を出すための窓口です。


npm install --save-dev prettier

（Prettierがプロジェクトに追加されます）

ESLintはルールを守れているかを確認し、 Prettierは見た目を整えます。役割が違うため、一緒に使うことで効果が高まります。

これにより、「間違いが少なく、読みやすいコード」を保てます。


export default function Header({ title }) {
  return <h1>{title}</h1>;
}

（ルールと見た目の両方が自動で整います）

VSCodeでは、ファイルを保存したタイミングで Prettierを動かすことができます。ノートを閉じるときに自動で清書されるイメージです。

一度設定すると、毎回意識する必要がなくなります。


export default function Footer() {
  return <footer>フッター</footer>;
}

（保存と同時にコードが整います）

自動整形を使うと、コードの見た目で悩む時間が減ります。その分、何を作るかに集中できます。

Next.jsを学び始めたばかりの人ほど、 ESLintとPrettierは強い味方になります。