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

生徒

「Next.jsを始めたんですが、画面がごちゃごちゃして難しいです…」

先生

「それはエディタの設定を整えると、かなり楽になりますよ。」

生徒

「VSCodeの拡張機能って入れたほうがいいんですか？」

先生

「Next.js開発では、拡張機能があるだけで作業が驚くほど分かりやすくなります。」

1. Next.js開発とVSCodeの関係

Next.jsの環境構築をすると、多くの人がVisual Studio Code、通称VSCodeを使います。 VSCodeは、文字を書くためのメモ帳ではなく、プログラム専用の作業机のような存在です。文字の色分けや、自動補助など、初心者を助ける機能が最初からそろっています。

さらにVSCodeには「拡張機能」という追加パーツがあります。スマートフォンにアプリを入れるように、必要な機能を後から追加できます。 Next.js開発では、この拡張機能がとても重要です。

2. 拡張機能とは何かをやさしく説明

拡張機能とは、VSCodeをより使いやすくするための追加道具です。たとえば、英語が苦手な人に翻訳機を渡すようなイメージです。プログラムの間違いを教えてくれたり、入力を助けてくれたりします。

Next.jsはReactやJavaScript、TypeScriptを使うため、それらに対応した拡張機能を入れることで理解しやすくなります。

ESLintは、プログラムの書き方をチェックしてくれる仕組みです。文法のミスや、間違いやすい書き方を事前に教えてくれます。先生が横でノートを見てくれているような感覚です。


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

（書き方の間違いや不足をVSCode上で知らせてくれます）

Next.jsプロジェクトには最初からESLintが入っていることが多く、拡張機能を入れるだけで効果を発揮します。

Prettierは、プログラムの見た目を自動で整えてくれる拡張機能です。字がバラバラなノートを、きれいに書き直してくれる清書係のような存在です。

初心者のうちは、見た目が崩れていても気づきにくいですが、 Prettierを使うと常に読みやすい状態を保てます。


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

（保存すると自動で整った形に直されます）

Next.jsではJavaScriptやTypeScriptを使います。この拡張機能を入れると、入力途中で候補を出してくれます。次に何を書くかを先読みしてくれる案内板のような役割です。


type Props = {
  title: string;
};

export default function Header(props: Props) {
  return <h1>{props.title}</h1>;
}

（型やプロパティの候補が表示されます）

この拡張機能は、よく使う形を短い入力で呼び出せます。長い文章を省略できる定型文のようなものです。 Next.jsでコンポーネントを書くときに役立ちます。


const Page = () => {
  return <div>ページ内容</div>;
};

export default Page;

（短い入力から基本形をすぐ作れます）

Next.jsでは、画像やファイルを指定する場面が多くあります。 Path Intellisenseは、フォルダ名やファイル名を候補として表示してくれます。住所を入力するときに候補が出るのと同じ仕組みです。


<img src="/images/logo.png" />

（入力途中でフォルダや画像名が表示されます）

拡張機能は便利ですが、入れすぎると逆に混乱することがあります。まずは基本的なものだけを入れて、慣れてきたら少しずつ追加するのがおすすめです。

Next.js開発では、VSCode拡張機能を上手に使うことで、プログラミング未経験でも安心して作業を進められます。