Engineer Course - Next.jsポートフォリオ講座

このモジュールで学ぶこと

Next.jsとは何か、なぜ使うのか
プロジェクトの作成方法
ディレクトリ（フォルダ）構造の理解
開発サーバーの起動と確認方法
ホットリロード（自動更新）の仕組み

学習目標

このモジュールを終えると、以下のことができるようになります：

Next.jsの概念を理解し、説明できる
create-next-appコマンドでプロジェクトを作成できる
プロジェクトのディレクトリ構造を理解している
開発サーバーを起動し、ブラウザで確認できる
ファイルを編集して、即座に反映されることを確認できる

セクション1: Next.jsとは何か
セクション2: プロジェクトの作成
セクション3: プロジェクトをVSCodeで開く
セクション4: ディレクトリ構造の理解
セクション5: 開発サーバーの起動
セクション6: ホットリロードを体験する
セクション7: Claude Codeと連携する
まとめ
参考資料
よくある質問

事前準備

以下が完了していることを確認してください：

モジュール1が完了している
VSCodeがインストールされている
Node.js / npmがインストールされている
Claude Codeが使える状態になっている

確認コマンド：

node -v
npm -v

セクション1: Next.jsとは何か

Next.jsの基礎知識

Next.js（ネクスト・ジェーエス）は、Reactをベースにしたフレームワークです。

Reactとは？

Reactは、Facebookが開発したJavaScriptライブラリで、Webサイトのユーザーインターフェース（UI）を構築するためのツールです。

コンポーネントという部品を組み合わせてUIを作る
画面の一部だけを効率的に更新できる
世界中で最も人気のあるフロントエンドライブラリ

Next.jsとReactの関係

例え話:

React = 料理の材料（野菜、肉、調味料）
Next.js = レシピ本 + 便利な調理器具セット

Reactだけでもサイトは作れますが、Next.jsを使うことで、よく使う機能があらかじめ用意されていて、効率的に開発できます。

Next.jsの主な機能

1. ファイルベースルーティング

通常のWebサイト開発では、ページのURLを設定するために複雑な設定ファイルを書く必要があります。

Next.jsでは、フォルダとファイルの構造がそのままURLになります。

例:

app/
  page.tsx          → https://example.com/
  about/
    page.tsx        → https://example.com/about
  contact/
    page.tsx        → https://example.com/contact

2. サーバーサイドレンダリング（SSR）

従来の方法（クライアントサイド）:

ブラウザが空っぽのHTMLを受け取る
JavaScriptをダウンロード
JavaScriptが実行されて、やっと内容が表示される → 表示まで時間がかかる、SEOに弱い

Next.jsの方法（サーバーサイド）:

サーバーで事前にHTMLを生成
ブラウザは完成したHTMLを受け取る
すぐに内容が表示される → 高速、SEOに強い

3. 静的サイト生成（SSG）

ビルド時（公開前）に全ページのHTMLを生成しておく方法です。

ページが超高速で表示される
サーバー負荷が低い
ポートフォリオサイトに最適

なぜNext.jsを使うのか？

ポートフォリオサイト制作にNext.jsを選ぶ理由：

✅ 高速
- ページの読み込みが速い
- ユーザー体験が良い
✅ SEOに強い
- Googleなどの検索エンジンに見つけてもらいやすい
- ポートフォリオを多くの人に見てもらえる
✅ 開発体験が良い
- ホットリロード（保存すると即座に反映）
- エラーメッセージがわかりやすい
✅ デプロイが簡単
- Vercelというサービスで無料で公開できる
- ボタン一つでデプロイ
✅ モダンで学ぶ価値が高い
- 業界標準のフレームワーク
- 今後のWeb開発に役立つスキル

チェックポイント

Next.jsがReactベースのフレームワークであることを理解した
SSR/SSGの概念を大まかに理解した
なぜポートフォリオサイトにNext.jsが適しているか説明できる

セクション2: プロジェクトの作成

create-next-appとは

create-next-appは、Next.jsプロジェクトを自動で作成してくれるコマンドです。

必要なファイルやフォルダを全て自動生成してくれるので、すぐに開発を始められます。

プロジェクト作成手順

1. ターミナルを開く

VSCodeでターミナルを開きます：

メニュー: ターミナル → 新しいターミナル
ショートカット: Ctrl + Shift + @ (Windows) / Cmd + Shift + @ (Mac)

2. Cドライブに移動（Windowsの場合）

cd C:/

Macの場合は、ホームディレクトリでOK：

cd ~

3. プロジェクト作成コマンドを実行

以下のコマンドを入力してEnter:

npx create-next-app@latest portfolio-site

コマンドの意味:

npx: Node.jsのパッケージを一時的に実行するコマンド
create-next-app@latest: Next.jsプロジェクト作成ツールの最新版
portfolio-site: プロジェクトの名前（好きな名前でOK、半角英数字とハイフン）

4. 対話形式の質問に答える

コマンドを実行すると、いくつか質問されます。以下のように答えてください：

✔ Would you like to use TypeScript? … No / **Yes**
→ **Yes** を選択（矢印キーで選んでEnter）

✔ Would you like to use ESLint? … No / **Yes**
→ **Yes** を選択

✔ Would you like to use Tailwind CSS? … No / **Yes**
→ **Yes** を選択

✔ Would you like to use `src/` directory? … No / **Yes**
→ **Yes** を選択

✔ Would you like to use App Router? (recommended) … No / **Yes**
→ **Yes** を選択

✔ Would you like to customize the default import alias (@/*)? … **No** / Yes
→ **No** を選択（Enterだけでいい）

各質問の意味:

質問	説明	推奨
TypeScript	型チェック機能付きのJavaScript	Yes
ESLint	コードの品質チェックツール	Yes
Tailwind CSS	CSSフレームワーク（スタイリングが楽になる）	Yes
src directory	ソースコードを`src`フォルダにまとめる	Yes
App Router	新しいルーティングシステム	Yes
Import alias	インポートパスのカスタマイズ	No

5. インストール完了を待つ

Creating a new Next.js app in C:\portfolio-site.

Installing dependencies:
- react
- react-dom
- next

...

Success! Created portfolio-site at C:\portfolio-site

このようなメッセージが表示されたら成功です！

所要時間: 通常1-3分（インターネット速度による）

チェックポイント

create-next-appコマンドを実行できた
全ての質問にYes（最後だけNo）で答えた
"Success!"メッセージが表示された
portfolio-siteフォルダが作成された

セクション3: プロジェクトをVSCodeで開く

作成したプロジェクトを開く

方法1: フォルダを開く（推奨）

VSCodeのメニューから 「ファイル → フォルダーを開く」
C:\portfolio-site（またはプロジェクトを作成した場所）を選択
「フォルダーの選択」をクリック

方法2: コマンドラインから開く

ターミナルで以下を実行：

cd portfolio-site
code .

cd portfolio-site: プロジェクトフォルダに移動
code .: 現在のフォルダをVSCodeで開く

信頼の確認

初めてフォルダを開くと、「このフォルダー内のファイルの作成者を信頼しますか？」と聞かれます。

→ 「はい、作成者を信頼します」 をクリック

チェックポイント

VSCodeでプロジェクトフォルダが開けた
左サイドバーにファイルツリーが表示されている

セクション4: ディレクトリ構造の理解

プロジェクトの構造

左サイドバーのエクスプローラーで、以下のような構造になっているはずです：

portfolio-site/
├── node_modules/        # 依存パッケージ（自動生成、触らない）
├── public/              # 静的ファイル（画像など）
├── src/
│   └── app/
│       ├── favicon.ico  # ファビコン
│       ├── globals.css  # グローバルCSS
│       ├── layout.tsx   # 全体レイアウト
│       └── page.tsx     # トップページ
├── .eslintrc.json       # ESLint設定
├── .gitignore           # Git除外設定
├── next.config.ts       # Next.js設定
├── package.json         # プロジェクト情報
├── tailwind.config.ts   # Tailwind設定
└── tsconfig.json        # TypeScript設定

各ファイル・フォルダの役割

📁 node_modules/

npmでインストールしたパッケージ（ライブラリ）が入っているフォルダです。

自動生成されるので、中身を編集しない
サイズが大きい（数百MB）
Gitにはアップロードしない（.gitignoreに記載済み）

📁 public/

画像、動画、フォントなど、静的ファイルを置く場所です。

public/image.jpg → http://localhost:3000/image.jpg でアクセス可能
次のモジュールでここに画像・動画を配置します

📁 src/app/

メインの作業場所です。ここでページを作成していきます。

page.tsx

トップページのコンポーネントです。

http://localhost:3000/ にアクセスしたときに表示される
.tsxは TypeScript + JSX（React）のファイル拡張子

layout.tsx

全ページ共通のレイアウトを定義するファイルです。

ヘッダーやフッターなど、全ページで共通の要素をここに書く
<html>や<body>タグもここで定義

globals.css

全体に適用されるCSSファイルです。

Tailwind CSSの設定が含まれている
基本的には触らなくてOK（Tailwindで十分スタイリングできる）

favicon.ico

ブラウザのタブに表示される小さなアイコンです。

後で自分のアイコンに変更します（モジュール7で実施）

📄 package.json

プロジェクトのメタデータと依存関係を記録したファイルです。

{
  "name": "portfolio-site",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18.x.x",
    "next": "^14.x.x",
    ...
  }
}

重要な項目:

scripts: 実行できるコマンド
- npm run dev: 開発サーバー起動
- npm run build: 本番用ビルド
dependencies: 使用しているライブラリのリスト

📄 next.config.ts

Next.jsの設定ファイルです。

基本的にはデフォルトのままでOK
必要に応じて画像最適化などの設定を追加

📄 tailwind.config.ts

Tailwind CSSの設定ファイルです。

カラーパレットやフォントをカスタマイズできる
後のモジュールで編集します

📄 .gitignore

Gitでバージョン管理する際に、除外するファイルをリストアップしたファイルです。

node_modules/
.next/
.env.local

node_modulesは容量が大きいので除外
.env.localは環境変数（秘密情報）なので除外

srcディレクトリを使う理由

srcフォルダを使うことで、ソースコードと設定ファイルを分離できます。

メリット:

プロジェクトルートがスッキリする
どこを編集すればいいか明確
業界標準の構成

チェックポイント

各フォルダの役割を理解した
src/app/page.tsxがトップページであることを理解した
publicフォルダに静的ファイルを置くことを理解した
node_modulesは触らないことを理解した

セクション5: 開発サーバーの起動

開発サーバーとは

開発サーバーは、ローカル環境（自分のパソコン）でWebサイトを動かすためのサーバーです。

localhost（自分のパソコン内）でサイトを確認できる
ファイルを変更すると自動的にブラウザが更新される（ホットリロード）
公開はされない（自分だけが見れる）

サーバー起動手順

1. ターミナルを開く

VSCodeで新しいターミナルを開きます。

すでにターミナルが開いている場合は、プロジェクトフォルダ内にいることを確認：

pwd  # Mac/Linux
cd   # Windows

結果が C:\portfolio-site または /path/to/portfolio-site になっていればOK。

2. 開発サーバーを起動

以下のコマンドを実行：

npm run dev

期待される出力:

> portfolio-site@0.1.0 dev
> next dev

  ▲ Next.js 14.x.x
  - Local:        http://localhost:3000
  - Environments: .env.local

 ✓ Ready in 2.3s

Ready in X.Xs: サーバー起動完了
http://localhost:3000: アクセスするURL

3. ブラウザで確認

方法1: ターミナルからクリック

http://localhost:3000 の部分を Ctrlキーを押しながらクリック
ブラウザが自動で開く

方法2: 手動で開く

ブラウザを開く
アドレスバーに http://localhost:3000 と入力してEnter

4. 初期画面を確認

Next.jsのデフォルトページが表示されます：

Next.jsのロゴ
"Get started by editing src/app/page.tsx"
ドキュメントへのリンク

この画面が表示されればOK！

localhost:3000 とは？

localhost: 自分のパソコン自身を指すアドレス
3000: ポート番号（Next.jsのデフォルトは3000）

他の人はアクセスできません。あくまで自分だけが開発中に確認するためのものです。

サーバーを停止するには

ターミナルで Ctrl + C を押すと停止します。

^C  # Ctrl + C を押した
Shutting down...

停止すると、ブラウザで http://localhost:3000 にアクセスできなくなります。

再起動するには、再度 npm run dev を実行します。

チェックポイント

npm run devでサーバーが起動できた
http://localhost:3000にアクセスできた
Next.jsの初期画面が表示された
サーバーを停止・再起動できる

セクション6: ホットリロードを体験する

ホットリロードとは

**ホットリロード（Hot Reload）**は、ファイルを保存すると自動的にブラウザが更新される機能です。

従来の開発:

HTMLを編集
ファイルを保存
ブラウザを手動でリロード（F5）
変更を確認

Next.jsのホットリロード:

ファイルを編集
保存（Ctrl+S / Cmd+S）
自動的にブラウザが更新される
すぐに変更を確認

→ 開発スピードが劇的に向上！

実際に試してみよう

1. サーバーが起動していることを確認

npm run devが実行中であることを確認してください。

ターミナルに ✓ Ready と表示されていればOK。

2. page.tsxを開く

左サイドバーのエクスプローラーで:

src → app → page.tsx

をクリックして開きます。

3. テキストを変更してみる

以下の部分を探してください（19行目あたり）：

<p>
  Get started by editing&nbsp;
  <code>src/app/page.tsx</code>
</p>

これを以下のように変更：

<p>
  私のポートフォリオサイトへようこそ！&nbsp;
  <code>src/app/page.tsx</code>
</p>

4. ファイルを保存

Windows: Ctrl + S
Mac: Cmd + S

5. ブラウザを確認

保存した瞬間、自動的にブラウザが更新されて、変更したテキストが表示されます。

ブラウザを手動でリロードする必要はありません！

6. 元に戻してみる

もう一度編集して、別のテキストに変えてみましょう。

保存するたびに即座に反映されることを確認してください。

チェックポイント

page.tsxを編集できた
ファイルを保存した
ブラウザが自動的に更新された
変更内容が即座に反映された

セクション7: Claude Codeと連携する

Claude Codeでプロジェクトを開く

せっかくなので、Claude Codeを使って簡単な変更をしてみましょう。

1. Claude Codeパネルを開く

左サイドバーのClaudeアイコンをクリック。

2. Claude Codeに指示を出す

以下のように話しかけてみてください：

src/app/page.tsx のメインテキストを、
「ポートフォリオサイト制作中」という内容に変更してください。
シンプルでわかりやすいデザインにしてください。

3. Claude Codeが提案してくれる

Claude Codeがpage.tsxを編集する提案をしてくれます。

内容を確認して、良さそうであれば承認してください。

4. ブラウザで確認

自動的に反映されて、シンプルなページに変わっているはずです。

Claude Codeの強み

自然な日本語で指示できる
コードの書き方がわからなくてもOK
「こんな感じにしたい」というイメージを伝えるだけ

この講座では、Claude Codeを使いながらサイトを作っていきます。

チェックポイント

Claude Codeに指示を出せた
ファイルが自動的に編集された
ブラウザで変更を確認できた

まとめ

このモジュールで学んだこと

Next.jsの基礎概念（React、SSR、SSG）
create-next-appでプロジェクトを作成する方法
プロジェクトのディレクトリ構造
開発サーバーの起動方法（npm run dev）
ホットリロードで効率的に開発する方法
Claude Codeとの連携

重要ポイントの復習

項目	内容
プロジェクト作成	`npx create-next-app@latest プロジェクト名`
サーバー起動	`npm run dev`
アクセスURL	`http://localhost:3000`
メインファイル	`src/app/page.tsx`
静的ファイル	`public/` フォルダ
サーバー停止	`Ctrl + C`

次のステップ

プロジェクトの骨組みができたので、次は画像や動画などの素材を準備します。

モジュール3: 素材の準備とファイル管理 に進んでください。

参考資料

よくある質問

Q: TypeScriptとJavaScriptの違いは？ A: TypeScriptは型チェック機能が付いたJavaScriptです。エラーを事前に発見しやすくなります。この講座ではClaude Codeが型も書いてくれるので、深く理解していなくてもOKです。

Q: Tailwind CSSを使わない場合は？ A: 通常のCSSでも問題ありませんが、Tailwindの方が効率的にスタイリングできます。

Q: App Routerとは？ A: Next.js 13以降の新しいルーティングシステムです。appディレクトリを使うことで、より直感的にページを管理できます。

Q: npm run devを実行すると別のポート番号になる A: 既に3000番ポートが使われている場合、3001や3002などに自動的に変更されます。表示されたURLにアクセスしてください。

Q: ブラウザで「このサイトにアクセスできません」と表示される A: サーバーが起動しているか確認してください。ターミナルでnpm run devを実行し、✓ Readyメッセージが出ていることを確認してください。

Q: ホットリロードが効かない A: VSCodeを再起動するか、サーバーを再起動してみてください（Ctrl+Cで停止 → npm run devで再起動）。

前へ: モジュール1: 開発環境のセットアップ次へ: モジュール3: 素材の準備とファイル管理

Next.jsプロジェクトの初期設定

このモジュールで学ぶこと

学習目標

目次

事前準備

セクション1: Next.jsとは何か

Next.jsの基礎知識

Reactとは？

Next.jsとReactの関係

Next.jsの主な機能

1. ファイルベースルーティング

2. サーバーサイドレンダリング（SSR）

3. 静的サイト生成（SSG）

なぜNext.jsを使うのか？

チェックポイント

セクション2: プロジェクトの作成

create-next-appとは

プロジェクト作成手順

1. ターミナルを開く

2. Cドライブに移動（Windowsの場合）

3. プロジェクト作成コマンドを実行

4. 対話形式の質問に答える

5. インストール完了を待つ

チェックポイント

セクション3: プロジェクトをVSCodeで開く

作成したプロジェクトを開く

方法1: フォルダを開く（推奨）

方法2: コマンドラインから開く

信頼の確認

チェックポイント

セクション4: ディレクトリ構造の理解

プロジェクトの構造

各ファイル・フォルダの役割

📁 node_modules/

📁 public/

📁 src/app/

page.tsx

layout.tsx

globals.css

favicon.ico

📄 package.json

📄 next.config.ts

📄 tailwind.config.ts

📄 .gitignore

srcディレクトリを使う理由

チェックポイント

セクション5: 開発サーバーの起動

開発サーバーとは

サーバー起動手順

1. ターミナルを開く

2. 開発サーバーを起動

3. ブラウザで確認

4. 初期画面を確認

localhost:3000 とは？

サーバーを停止するには

チェックポイント

セクション6: ホットリロードを体験する

ホットリロードとは

実際に試してみよう

1. サーバーが起動していることを確認

2. page.tsxを開く

3. テキストを変更してみる

4. ファイルを保存

5. ブラウザを確認

6. 元に戻してみる

チェックポイント

セクション7: Claude Codeと連携する

Claude Codeでプロジェクトを開く

1. Claude Codeパネルを開く

2. Claude Codeに指示を出す

3. Claude Codeが提案してくれる

4. ブラウザで確認

Claude Codeの強み

チェックポイント

まとめ

このモジュールで学んだこと

重要ポイントの復習

次のステップ

参考資料

よくある質問