開発環境の準備

この章では、Next.jsとTypeScriptを使った開発を始めるために必要な環境を整えていきます。具体的には、Node.jsのインストール、パッケージマネージャーの選択、エディタの準備、そしてNext.jsプロジェクトの作成までを順を追って説明します。

1. Node.jsのインストール

Next.jsは、JavaScriptの実行環境であるNode.js上で動作します。そのため、まずはNode.jsをインストールする必要があります。

Node.jsのバージョン確認

既にNode.jsがインストールされているかどうかは、ターミナル（コマンドプロンプト）で以下のコマンドを実行することで確認できます。

bash

node -v

バージョン番号（例：v18.17.0）が表示されれば、Node.jsはインストールされています。表示されない場合、または古いバージョンが表示された場合は、インストールまたはアップデートが必要です。

Next.jsは、Node.jsの公式ドキュメントで現在Maintenance、またはActive LTSとなっているバージョンをサポートしています。執筆時点(2024/03/13)では、Node.js 18.17以降が推奨されています。

Node.jsのインストール方法（Windows、macOS、Linux）

Node.jsをインストールするには、以下の方法があります。

公式サイトからダウンロードする

Node.jsの公式サイト（https://nodejs.org/）にアクセスします。
トップページに「LTS（推奨版）」と「Current（最新版）」の2つのダウンロードボタンが表示されます。基本的には、安定している**「LTS（推奨版）」** を選択します。
ダウンロードしたインストーラを実行し、画面の指示に従ってインストールを進めます。

パッケージマネージャーを使用する

各OSのパッケージマネージャーを使ってインストールすることもできます。

Windows: winget や chocolatey などのパッケージマネージャーがあります。例えば、chocolateyを使用する場合は、管理者権限でコマンドプロンプトを開き、以下のコマンドを実行します。
bash
```
choco install nodejs
```
macOS: Homebrewが一般的です。Homebrewがインストールされている状態で、ターミナルで以下のコマンドを実行します。
bash
```
brew install node
```
Linux: 各ディストリビューションのパッケージマネージャー（apt、yumなど）を使用します。例えば、UbuntuなどのDebian系のディストリビューションでは、以下のコマンドを実行します。
bash
```
sudo apt update
sudo apt install nodejs
```

インストールが完了したら、再度 node -v コマンドを実行して、バージョン番号が表示されることを確認してください。

2. パッケージマネージャーの選択 (npm, yarn, pnpm)

Node.jsのインストールが完了すると、npm (Node Package Manager) も一緒にインストールされます。npmは、JavaScriptのライブラリ（パッケージ）を管理するためのツールです。Next.jsプロジェクトでは、このパッケージマネージャーを使用して、必要なライブラリをインストールしたり、管理したりします。

各パッケージマネージャーの特徴と違い

一般的に使用されるパッケージマネージャーには、npm、yarn、pnpmの3つがあります。

npm: Node.jsに同梱されているデフォルトのパッケージマネージャーです。
yarn: Facebookが開発したパッケージマネージャーで、npmよりも高速で安全なインストールを提供します。
pnpm: 近年注目されているパッケージマネージャーで、ディスク容量の効率化とインストール速度の向上が特徴です。

それぞれの主な違いは以下の通りです。

特徴	npm	yarn	pnpm
速度	比較的遅い	高速	非常に高速
ディスク容量	プロジェクトごとにnode_modulesを作成	グローバルキャッシュ + プロジェクトごとのリンク	グローバルストア + プロジェクトごとのハードリンク
安全性	中	高	高
ロックファイル	package-lock.json	yarn.lock	pnpm-lock.yaml

操作	npm	yarn	pnpm
プロジェクトの初期化	`npm init -y`	`yarn init -y`	`pnpm init`
パッケージのインストール	`npm install <package>`	`yarn add <package>`	`pnpm add <package>`
開発依存のインストール	`npm install -D <package>`	`yarn add -D <package>`	`pnpm add -D <package>`
スクリプトの実行	`npm run <script>`	`yarn <script>`	`pnpm <script>`

3. エディタの準備（VS Code推奨）

コードを効率的に書くためには、使いやすいエディタが必要です。多くのエディタが存在しますが、ここでは特に初心者にも使いやすく、Next.jsとTypeScriptの開発に適したVisual Studio Code (VS Code) をおすすめします。

VS Codeのインストール

VS Codeの公式サイト（https://code.visualstudio.com/）にアクセスします。
「Download」ボタンをクリックし、お使いのOS用のインストーラをダウンロードします。
ダウンロードしたインストーラを実行し、画面の指示に従ってインストールを進めます。

VS Codeの基本的な使い方

VS Codeを起動すると、以下のような画面が表示されます。

エクスプローラー: プロジェクトのファイルやフォルダを表示します。
エディタ: コードを編集するエリアです。
ターミナル: コマンドを実行するためのターミナルです。

基本的な操作は以下の通りです。

ファイルを開く: エクスプローラーでファイルをクリックすると、エディタで開かれます。
ファイルを保存: Ctrl + S（Windows）または Cmd + S（macOS）でファイルを保存できます。
ターミナルを開く: Ctrl + （Windows）または Cmd + （macOS）でターミナルを開くことができます。
コマンドを実行する: ターミナルにコマンドを入力し、Enterキーを押して実行します。

4. Next.jsプロジェクトの作成

Node.js、パッケージマネージャー、エディタの準備が整ったら、いよいよNext.jsプロジェクトを作成します。

`create-next-app`を使用したプロジェクトの作成

Next.jsプロジェクトを簡単に作成するには、create-next-appというツールを使用します。ターミナルで以下のコマンドを実行します。

bash

npx create-next-app@latest my-next-app --typescript

使用するコマンド	説明
`npx`	npmに同梱されている、パッケージを実行するためのコマンド
`yarn create`	yarnで同様のコマンドを実行する場合
`pnpm create`	pnpmで同様のコマンドを実行する場合

このコマンドは、カレントディレクトリにmy-next-appという名前の新しいディレクトリを作成し、その中にNext.jsプロジェクトの基本的なファイルやフォルダを生成します。--typescriptオプションを指定することで、TypeScript用のプロジェクトが作成されます。

以下のような質問が聞かれるので、Yesを選択してEnterキーを押してください。

bash

Need to install the following packages:
[email protected]
Ok to proceed? (y)

TypeScriptテンプレートの選択

create-next-appを実行すると、いくつかの質問が表示されます。執筆時点(2024/03/13)では、次のような質問が表示されますので、以下のように選択し、Enterキーを押して進めてください。

bash

✔ Would you like to use ESLint with this project? ... Yes
✔ Would you like to use `src/` directory with this project? ... No
✔ Would you like to use experimental `app/` directory with this project? ... No
✔ What import alias would you like configured? ... @/*

この設定で、ESLintが有効になり、ソースコードはプロジェクトルート直下に配置され、@/*というインポートエイリアスが設定されます。

プロジェクトのディレクトリ構造の解説

作成されたプロジェクトのディレクトリ構造は、以下のようになっています。

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   │   └── hello.ts
│   ├── _app.tsx
│   └── index.tsx
├── public/
│   ├── favicon.ico
│   └── vercel.svg
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── .eslintrc.json
├── .gitignore
├── package.json
├── package-lock.json (npmの場合)
├── tsconfig.json
└── README.md

node_modules/: インストールされたパッケージが格納されるディレクトリです。
pages/: Next.jsのページコンポーネントを配置するディレクトリです。このディレクトリ内のファイル名が、そのままURLのパスになります。
- api/: API Routesを配置するディレクトリです。
- _app.tsx: すべてのページに共通のコンポーネントやスタイルを定義するファイルです。
- index.tsx: トップページ（/）に対応するコンポーネントです。
public/: 静的ファイルを配置するディレクトリです。ここに配置したファイルは、そのままのパスで公開されます。
styles/: スタイルファイルを配置するディレクトリです。
- globals.css: グローバルなスタイルを定義するファイルです。
- Home.module.css: index.tsxに対応するCSSモジュールファイルです。
.eslintrc.json: ESLintの設定ファイルです。
.gitignore: Gitで管理しないファイルやディレクトリを指定するファイルです。
package.json: プロジェクトの情報や依存関係、スクリプトなどを定義するファイルです。
package-lock.json (npmの場合) / yarn.lock (yarnの場合) / pnpm-lock.yaml (pnpmの場合): インストールされたパッケージのバージョンを記録するファイルです。
tsconfig.json: TypeScriptの設定ファイルです。
README.md: プロジェクトの説明を記述するファイルです。