Name	Name	Last commit message	Last commit date
parent directory ..
README.md	README.md

第1章: 環境構築

学習目標

この章では、Webフロントエンド開発に必要な環境を構築し、最初のHello Worldアプリケーションを作成します。

Web開発の全体像を理解する
なぜこれらのツールが必要なのかを理解する
VS Codeのインストールと設定
Node.jsのインストールと動作確認
GitHubアカウントの作成とGitの設定
Next.jsプロジェクトの作成と起動

0. Web開発の全体像を理解しよう

0-1. Webサイトが表示される仕組み

まず、普段何気なく見ているWebサイトがどのように表示されているのかを理解しましょう。

基本的な流れ:

1. あなたがブラウザでURLを入力する
   ↓
2. ブラウザがサーバーに「このページを見せて」とリクエストを送る
   ↓
3. サーバーがHTMLファイルを返す
   ↓
4. ブラウザがHTMLを読み込む
   ↓
5. HTMLに書かれたCSSファイルやJavaScriptファイルも読み込む
   ↓
6. ブラウザがこれらを解釈して画面に表示する

具体的な例:

https://example.com にアクセスした時、あなたのブラウザ（Chrome、Safari、Firefoxなど）は以下のことをしています：

HTMLを取得: サーバーから index.html というファイルを受け取る
HTMLを解析: ブラウザが <h1>タイトル</h1> のような命令を読み取る
CSSを適用: <h1> を「文字サイズ32px、太字、青色」にするなどの装飾を適用
JavaScriptを実行: ボタンをクリックしたら何かが起こる、などの動的な機能を追加
画面に描画: これらすべてを組み合わせて、目に見える形で表示する

0-2. フロントエンドとバックエンド

Web開発には大きく分けて2つの領域があります。

フロントエンド（このコースで学ぶ部分）:

ユーザーが直接見て、触る部分
ブラウザ上で動く
HTML、CSS、JavaScriptを使う
例：ボタンのデザイン、アニメーション、フォーム入力

バックエンド（このコースでは扱わない）:

ユーザーからは見えない、サーバー側の処理
データベースとのやり取り、ユーザー認証など
例：ログイン処理、データの保存、複雑な計算

両者の関係:

┌─────────────────┐        ┌─────────────────┐
│  フロントエンド   │ ←──→  │  バックエンド    │
│  (ブラウザ)      │  通信  │  (サーバー)      │
│                 │        │                 │
│ ・HTML/CSS/JS   │        │ ・データベース   │
│ ・見た目        │        │ ・ビジネスロジック│
│ ・ユーザー操作  │        │ ・データ保存     │
└─────────────────┘        └─────────────────┘

0-3. なぜ開発環境が必要なのか

質問: 「HTMLファイルを作ってブラウザで開けば表示されるのに、なぜわざわざ開発環境を整える必要があるの？」

答え: シンプルなHTMLファイル1つだけなら確かにメモ帳で作れます。しかし、実際の開発では：

1. ファイルが大量になる

現代のWebサイトは数十〜数百のファイルから構成される
手作業で管理するのは不可能

2. コードの品質を保つ必要がある

タイポや文法エラーを自動でチェックしてほしい
コードを見やすく整形してほしい

3. 効率的に開発したい

コードを書くと自動で補完してほしい
保存すると自動でブラウザをリロードしてほしい

4. チームで開発する

複数人で同じプロジェクトを編集する
誰がいつ何を変更したか記録したい

これらの理由から、専用のツールが必要になります。

0-4. このコースで使うツールの役割

これから以下のツールをインストールしますが、それぞれの役割を先に理解しておきましょう：

ツール	役割	なぜ必要？
VS Code	コードエディタ	メモ帳の超強化版。コードの補完、エラー表示、ファイル管理など
Node.js	JavaScript実行環境	ブラウザ外でもJavaScriptを実行できるようにする。開発ツールを動かすために必須
npm	パッケージマネージャー	他の人が作った便利なツールやライブラリを簡単にインストールできる
Git	バージョン管理	コードの変更履歴を記録。過去の状態に戻したり、チームで協力できる
GitHub	コード共有サービス	Gitで管理したコードをクラウドに保存・共有
Next.js	Reactフレームワーク	効率的にモダンなWebサイトを作るための土台

全体の関係図:

あなた
  ↓ コードを書く
VS Code (エディタ)
  ↓ 保存すると
Node.js (開発サーバーを起動)
  ↓ ファイルを処理して
ブラウザに表示
  ↓ 気に入ったら
Git (変更を記録)
  ↓ 共有したいとき
GitHub (クラウドに保存)

1. VS Codeのインストール

1-1. ダウンロードとインストール

Visual Studio Code（VS Code）は、無料で使える高機能なコードエディタです。

VS Code公式サイトにアクセス
お使いのOS（Windows / macOS / Linux）に対応したインストーラーをダウンロード
インストーラーを実行し、指示に従ってインストール

📸 スクリーンショット: VS Code公式サイトのダウンロードページ

1-2. 推奨拡張機能のインストール

VS Codeを起動したら、以下の拡張機能をインストールしましょう：

ESLint - JavaScriptの構文チェック
Prettier - Code formatter - コードの自動整形
ES7+ React/Redux/React-Native snippets - Reactのコードスニペット
Auto Rename Tag - HTMLタグの自動リネーム

📸 スクリーンショット: 拡張機能のインストール画面

インストール手順:

VS Codeの左サイドバーから「拡張機能」アイコンをクリック
検索バーに拡張機能名を入力
「インストール」ボタンをクリック

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

2-0. Node.jsとは何か、なぜ必要か

Node.jsの正体: Node.jsは、JavaScriptをブラウザの外でも実行できるようにする環境（ランタイム）です。

歴史的背景: もともとJavaScriptは「ブラウザの中でしか動かない言語」でした。HTMLのボタンをクリックしたら何かが起こる、といった用途のためだけに作られました。

しかし、2009年にNode.jsが登場したことで状況が変わりました：

JavaScriptがブラウザの外でも動くようになった
サーバー側のプログラムもJavaScriptで書けるようになった
開発ツール（ビルドツール、テストツールなど）もJavaScriptで作れるようになった

なぜフロントエンド開発にNode.jsが必要なのか:

「フロントエンド開発なのに、なぜサーバー側の技術が必要なの？」と疑問に思うかもしれません。答えは：

1. 開発サーバーを動かすため

npm run dev でローカル開発サーバーが起動します
このサーバーは Node.js 上で動いています
コードを変更すると自動でブラウザをリロードしてくれる便利機能も Node.js が提供

2. ビルドツールを動かすため

TypeScript → JavaScript への変換
複数のファイルを1つにまとめる（バンドル）
コードを圧縮して高速化
これらすべてが Node.js 上で動くツールで実行される

3. パッケージ管理のため

Node.js をインストールすると npm（Node Package Manager）も一緒にインストールされる
npm を使って React、Next.js などのライブラリをインストールする
世界中の開発者が公開している便利なツールを簡単に使える

具体例で理解する:

昔のやり方（Node.js なし）:

1. HTMLファイルを手書き
2. CSSファイルを手書き
3. JavaScriptファイルを手書き
4. それぞれを <script> や <link> タグで読み込む
5. ブラウザで開いて確認
6. 変更したら手動でブラウザをリロード

今のやり方（Node.js あり）:

1. npm run dev で開発サーバー起動
2. コードを書く（TypeScript、React など）
3. 保存すると自動で
   - TypeScript が JavaScript に変換される
   - 必要なファイルがまとめられる
   - ブラウザが自動リロードされる
4. 最新の状態がすぐに確認できる

npmとは:

Node.jsをインストールすると、npm（Node Package Manager）というツールも一緒にインストールされます。

npmは「パッケージマネージャー」です。他の開発者が作った便利なコードの塊（パッケージ）を簡単にインストールして使えるようにするツールです。

例え:

スマホの「アプリストア」のようなもの
欲しいアプリ（パッケージ）を検索してインストールできる
アップデートも簡単

実際の使用例:

# Reactをインストール
npm install react

# Next.jsをインストール
npm install next

# プロジェクトを作成（create-next-appというツールを使う）
npx create-next-app my-app

2-1. インストール方法

推奨: LTS（Long Term Support）版をインストールしてください。

Windowsの場合

Node.js公式サイトにアクセス
「LTS（推奨版）」をダウンロード
インストーラーを実行し、指示に従ってインストール

macOSの場合

方法1: 公式サイトからインストール

上記Windowsと同様の手順

方法2: Homebrewを使う（推奨）

brew install node

Linuxの場合

# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

# Fedora
sudo dnf install nodejs

2-2. インストール確認

ターミナル（またはコマンドプロンプト）を開いて、以下のコマンドを実行します：

node -v
npm -v

バージョン番号が表示されればインストール成功です。

📸 スクリーンショット: ターミナルでのバージョン確認

期待される出力例:

v20.11.0
10.2.4

3. Gitの設定とGitHub

3-0. Gitとは何か、なぜ必要か

Gitの正体: Gitは「バージョン管理システム」です。コードの変更履歴を記録し、過去の状態に戻したり、複数人で協力して開発したりできるようにするツールです。

なぜ必要なのか - 具体的なシナリオ:

シナリオ1: 「やっぱり前の状態に戻したい」

昨日まで動いていた機能が、今日の変更で壊れてしまった...
どこを変更したか覚えていない...

→ Gitがあれば: 「昨日の状態」に一瞬で戻せる
→ Gitがなければ: 手作業ですべて元に戻す（ほぼ不可能）

シナリオ2: 「複数の機能を同時に開発したい」

新機能Aを開発中だけど、緊急のバグ修正Bもしないといけない
でも新機能Aはまだ未完成で、本番環境に出せない...

→ Gitがあれば: 「ブランチ」を使って別々に作業できる
→ Gitがなければ: ファイルをコピーして管理（混乱する）

シナリオ3: 「チームで開発したい」

3人で同じプロジェクトを開発している
それぞれが別々のファイルを編集している
どうやって統合する？

→ Gitがあれば: 自動でマージ（統合）できる
→ Gitがなければ: メールでファイルを送り合う（事故の元）

Gitの基本概念:

Gitは「スナップショット」でコードを管理します：

初期状態
  ↓ (commit: 最初のファイル追加)
スナップショット1
  ↓ (commit: ボタンの色を変更)
スナップショット2
  ↓ (commit: 新しいページを追加)
スナップショット3 ← いまここ

各スナップショットには：

誰が変更したか
いつ変更したか
何を変更したか
なぜ変更したか（コミットメッセージ）

という情報が記録されています。

GitHubとの関係:

Git
├─ ローカル（あなたのPC）で動く
├─ コマンドラインツール
└─ コードの履歴を管理

GitHub
├─ クラウド（インターネット上）のサービス
├─ Web サイト
└─ Git で管理したコードを保存・共有

例え:

Git = カメラ（写真を撮る道具）
GitHub = Instagram（写真を共有するサービス）

GitHubの主な用途:

バックアップ: PCが壊れてもコードは安全
共有: チームメンバーと簡単にコードを共有
公開: 自分の作品を世界に公開（ポートフォリオ）
協力: オープンソースプロジェクトに貢献

3-1. Gitのインストール

Windowsの場合

Git for Windowsからダウンロード
インストーラーを実行（基本的にデフォルト設定でOK）

macOSの場合

# Homebrewを使用
brew install git

# またはXcode Command Line Toolsをインストール
xcode-select --install

Linuxの場合

# Ubuntu/Debian
sudo apt-get install git

# Fedora
sudo dnf install git

3-2. Git初期設定

ターミナルで以下のコマンドを実行します：

git config --global user.name "あなたの名前"
git config --global user.email "[email protected]"

確認：

git config --list

3-3. GitHubアカウントの作成

GitHubにアクセス
「Sign up」から新規アカウントを作成
メールアドレスを認証

📸 スクリーンショット: GitHub登録画面

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

4-0. Next.jsとは何か、なぜ使うのか

Next.jsの正体: Next.jsは、Reactをベースにしたフレームワークです。「Webサイトを作るための、便利機能がたくさん詰まった道具箱」と考えてください。

段階的に理解しよう:

Step 1: HTMLだけでWebサイトを作る場合

<!-- 昔ながらの方法 -->
<html>
  <head><title>私のサイト</title></head>
  <body>
    <h1>ようこそ</h1>
    <p>これは私のサイトです</p>
  </body>
</html>

シンプルで分かりやすい
でも、100ページあったらどうする？
ヘッダーやフッターを全ページにコピペ？
1箇所変更するとき、100ページ全部修正？

Step 2: JavaScriptで動的にする

// ボタンを押したら内容が変わる
button.addEventListener('click', () => {
  document.getElementById('content').innerHTML = '新しい内容';
});

動的な操作ができる
でも、複雑になると管理が大変
コードが散らかりやすい

Step 3: Reactで部品化する

// 再利用可能なコンポーネント
function Button({ text, onClick }) {
  return <button onClick={onClick}>{text}</button>;
}

// 何度でも使える
<Button text="クリック" onClick={handleClick} />
<Button text="送信" onClick={handleSubmit} />

コードが整理される
部品を再利用できる
でも、ページ遷移やSEOは自分で実装

Step 4: Next.jsで完璧にする

// Next.jsなら、これだけで1ページ
// app/page.tsx
export default function Home() {
  return <h1>ようこそ</h1>;
}

// app/about/page.tsx を作れば /about ページが自動で作られる
export default function About() {
  return <h1>About</h1>;
}

ファイルベースのルーティング（自動でページ作成）
SEO対策が簡単
画像の最適化が自動
高速なページ読み込み
その他、多数の便利機能

Next.jsが解決する問題:

問題	Next.jsの解決策
ページごとにHTMLファイルを作るのが面倒	ファイルを置くだけで自動でルーティング
SEO対策（検索エンジン対策）が難しい	サーバーサイドレンダリング標準搭載
画像の最適化が面倒	自動で最適化してくれる
ページの読み込みが遅い	自動でコード分割、先読みなど
開発サーバーの設定が面倒	`npm run dev` 一発で起動

なぜNext.jsを学ぶのか:

業界標準: 多くの企業が採用している
学習効率: React + ルーティング + SEO対策などを一度に学べる
実用性: 実際の仕事で使えるスキルが身につく
将来性: モダンWeb開発のトレンドを体験できる

Reactとの関係:

React
  ↓ これをベースに
Next.js（Reactの機能 + 追加機能）
  ↓ 使って作る
あなたのWebサイト

Reactは「エンジン」、Next.jsは「エンジン付きの完成車」のようなものです。

4-1. プロジェクトの作成

いよいよ、最初のNext.jsプロジェクトを作成します！

ターミナルで以下のコマンドを実行します：

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

以下のような質問が表示されます。推奨設定：

✔ Would you like to use TypeScript? … Yes
✔ Would you like to use ESLint? … Yes
✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like to use `src/` directory? … Yes
✔ Would you like to use App Router? … Yes
✔ Would you like to customize the default import alias? … No

📸 スクリーンショット: create-next-appの実行画面

4-2. プロジェクトディレクトリに移動

cd my-first-app

4-3. 開発サーバーの起動

npm run dev

ブラウザで http://localhost:3000 にアクセスすると、Next.jsのウェルカムページが表示されます。

📸 スクリーンショット: Next.jsのウェルカムページ

5. Hello Worldを作ってみよう

5-0. 「Hello World」がなぜ画面に表示されるのか

コードを書く前に、「なぜ画面に表示されるのか」を理解しましょう。これは非常に重要な概念です。

全体の流れ:

1. あなたがコードを書く (page.tsx)
   ↓
2. ファイルを保存する
   ↓
3. Next.js（開発サーバー）が検知する
   ↓
4. TypeScript → JavaScript に変換
   ↓
5. React のコンポーネントを処理
   ↓
6. HTML に変換
   ↓
7. ブラウザに送信
   ↓
8. ブラウザが HTML を解釈
   ↓
9. 画面に描画される

ステップごとの詳細:

ステップ1: TSXファイル（TypeScript + JSX）

あなたが書くコード：

export default function Home() {
  return <h1>Hello World!</h1>
}

これは「TSX」という形式です。HTMLに見えますが、実はJavaScriptです。

ステップ2: Next.jsが変換

Next.jsがこのコードを見て、裏で以下のような処理をします：

// あなたが書いたコード
<h1>Hello World!</h1>

// ↓ React が内部で処理する形式

React.createElement('h1', null, 'Hello World!')

ステップ3: HTMLに変換

React が最終的にHTMLを生成します：

<h1>Hello World!</h1>

ステップ4: ブラウザが描画

ブラウザがこのHTMLを受け取ると：

HTML解析: <h1> タグを認識する
DOMツリー構築: メモリ上に要素の構造を作る
スタイル適用: CSSを適用する（デフォルトでh1は大きく太字）
レイアウト計算: どこに、どれくらいの大きさで表示するか計算
描画: 画面のピクセルに実際に文字を描く

視覚的に理解する:

コード (TSX)               HTML                  画面
─────────────────────────────────────────────────
<h1>                   <h1>                 ┌──────────┐
  Hello World!    →      Hello World!   →  │Hello     │
</h1>                  </h1>                │World!    │
                                            └──────────┘
                                              大きく太字

Reactの「コンポーネント」という考え方:

export default function Home() {
  return <h1>Hello World!</h1>
}

これは「関数」です。呼び出されると、HTMLを返します。

Home() を呼び出す
  ↓
関数が実行される
  ↓
return の中身（<h1>...）が返される
  ↓
Reactがそれを画面に表示

なぜ関数なのか:

HTMLを直接書くのではなく、関数で書くことで：

再利用できる: 同じ関数を何度でも呼べる
動的にできる: 引数によって表示を変えられる
条件分岐できる: if文で表示を切り替えられる
整理しやすい: 部品として管理できる

実際の動作確認:

次のセクションでコードを書いたとき、ブラウザの開発者ツール（F12キー）を開いてみてください。「Elements」タブを見ると、実際に生成されたHTMLが確認できます。

5-1. ファイルの編集

VS Codeでプロジェクトを開きます：

code .

src/app/page.tsx を開いて、以下のように書き換えます：

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold">Hello World!</h1>
      <p className="mt-4 text-xl">私の最初のNext.jsアプリです</p>
    </main>
  )
}

このコードの意味を一行ずつ理解しよう:

export default function Home() {

export default: この関数を外部から使えるようにする
function Home(): "Home" という名前の関数を定義
この関数がページ全体を表す「コンポーネント」

  return (

この関数が返すもの（HTMLのような見た目のコード）を指定

    <main className="flex min-h-screen flex-col items-center justify-center p-24">

<main>: HTML5のセマンティックタグ（メインコンテンツを表す）
className: CSSのクラスを指定（Tailwind CSSのクラス）
- flex: フレックスボックスレイアウト
- min-h-screen: 最小の高さを画面全体に
- flex-col: 縦方向に並べる
- items-center: 中央揃え（横）
- justify-center: 中央揃え（縦）
- p-24: 余白（padding）

      <h1 className="text-4xl font-bold">Hello World!</h1>

<h1>: 見出しタグ
text-4xl: 文字サイズ大
font-bold: 太字
実際の表示内容: "Hello World!"

      <p className="mt-4 text-xl">私の最初のNext.jsアプリです</p>

<p>: 段落タグ
mt-4: 上マージン（margin-top）
text-xl: 文字サイズ中

保存したら何が起こるか:

ファイル保存を検知
Next.js が自動で再ビルド
ブラウザが自動でリロード（Hot Module Replacement）
変更がすぐに画面に反映

この一連の流れが1秒以内に完了します。これがモダンな開発環境の便利さです。

実際に試してみよう:

保存したら、ブラウザで確認してください。「Hello World!」が画面中央に大きく表示されるはずです。

次に、以下を試してみましょう：

"Hello World!" を "こんにちは世界！" に変更して保存 → 自動で画面が更新される
text-4xl を text-6xl に変更して保存 → 文字が大きくなる
font-bold を削除して保存 → 太字でなくなる

このように、コードを変更するだけで即座に結果が見えます。

📸 スクリーンショット: Hello World表示画面

ミニ課題

課題1: 自己紹介ページを作ろう

page.tsxを編集して、以下の情報を含む自己紹介ページを作成してください：

あなたの名前
趣味や興味のあること
このコースで学びたいこと

ヒント: <h1>, <h2>, <p> タグを使って構造化しましょう。

解答例

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-center p-24">
      <h1 className="text-4xl font-bold mb-8">自己紹介</h1>

      <div className="max-w-2xl">
        <h2 className="text-2xl font-semibold mb-4">名前</h2>
        <p className="mb-6">山田太郎です</p>

        <h2 className="text-2xl font-semibold mb-4">趣味</h2>
        <p className="mb-6">
          プログラミングと読書が好きです。
          最近はWeb開発に興味があります。
        </p>

        <h2 className="text-2xl font-semibold mb-4">学びたいこと</h2>
        <p>
          ReactとNext.jsを使って、
          自分のポートフォリオサイトを作りたいです。
        </p>
      </div>
    </main>
  )
}

よくあるエラーと解決策

エラー1: `command not found: node`

原因: Node.jsがインストールされていない、またはPATHが通っていない

解決策:

Node.jsを再インストール
ターミナルを再起動
echo $PATH でPATHを確認

エラー2: `npm ERR! EACCES: permission denied`

原因: npmのグローバルインストール時の権限エラー

解決策（macOS/Linux）:

sudo chown -R $(whoami) ~/.npm

エラー3: `Port 3000 is already in use`

原因: ポート3000が既に使用されている

解決策:

既存のプロセスを終了する
または別のポートを使用: npm run dev -- -p 3001

エラー4: TypeScriptの型エラー

原因: 型定義が不一致

解決策:

# 型定義パッケージを再インストール
npm install --save-dev @types/react @types/node

エラー5: `Cannot find module 'next'`

原因: 依存関係がインストールされていない

解決策:

npm install

まとめ

この章では以下のことを学びました：

✅ VS Codeのインストールと設定
✅ Node.jsとnpmのインストール
✅ Gitの設定とGitHubアカウント作成
✅ Next.jsプロジェクトの作成
✅ 開発サーバーの起動とHello World

次の章では、HTML & CSSについて学びます。

この章で習得すべきスキル

学習を完了したら、以下の項目をチェックしてください：

基礎知識の理解

Webサイトが表示される仕組み（ブラウザ-サーバー間の通信）を説明できる
フロントエンドとバックエンドの違いを理解している
Node.jsとnpmがなぜ必要なのか説明できる
Gitとバージョン管理の目的を理解している
Next.jsがReactの上に構築されていることを理解している

環境構築スキル

VS Codeをインストールし、基本的な操作ができる
Node.jsとnpmがインストールされているか確認できる（node -v, npm -v）
Gitがインストールされているか確認できる（git --version）
GitHubアカウントを作成し、リポジトリの概念を理解している
npx create-next-app@latestでプロジェクトを作成できる

実践スキル

ターミナル（コマンドライン）で基本的なコマンドを実行できる
npm run devで開発サーバーを起動できる
ブラウザでlocalhost:3000にアクセスして結果を確認できる
VS Codeでファイルを開いて編集できる
エラーメッセージを読んで、基本的なトラブルシューティングができる

FilesExpand file tree

01_env

Directory actions

More options

Directory actions

More options

Latest commit

History

01_env

Folders and files

parent directory

README.md

第1章: 環境構築

学習目標

0. Web開発の全体像を理解しよう

0-1. Webサイトが表示される仕組み

0-2. フロントエンドとバックエンド

0-3. なぜ開発環境が必要なのか

0-4. このコースで使うツールの役割

1. VS Codeのインストール

1-1. ダウンロードとインストール

1-2. 推奨拡張機能のインストール

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

2-0. Node.jsとは何か、なぜ必要か

2-1. インストール方法

Windowsの場合

macOSの場合

Linuxの場合

2-2. インストール確認

3. Gitの設定とGitHub

3-0. Gitとは何か、なぜ必要か

3-1. Gitのインストール

Windowsの場合

macOSの場合

Linuxの場合

3-2. Git初期設定

3-3. GitHubアカウントの作成

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

4-0. Next.jsとは何か、なぜ使うのか

4-1. プロジェクトの作成

4-2. プロジェクトディレクトリに移動

4-3. 開発サーバーの起動

5. Hello Worldを作ってみよう

5-0. 「Hello World」がなぜ画面に表示されるのか

5-1. ファイルの編集

ミニ課題

課題1: 自己紹介ページを作ろう

よくあるエラーと解決策

エラー1: command not found: node

エラー2: npm ERR! EACCES: permission denied

エラー3: Port 3000 is already in use

エラー4: TypeScriptの型エラー

エラー5: Cannot find module 'next'

まとめ

この章で習得すべきスキル

基礎知識の理解

環境構築スキル

実践スキル

トラブルシューティング

次のステップへの準備

参考リンク

エラー1: `command not found: node`

エラー2: `npm ERR! EACCES: permission denied`

エラー3: `Port 3000 is already in use`

エラー5: `Cannot find module 'next'`