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

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

VSCodeのインストールと基本的な使い方
Claude Codeの導入と操作方法
ターミナル（コマンドライン）の基礎
Node.jsとnpmの理解
Gitの基本概念
GitHubアカウントの作成

学習目標

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

VSCodeを起動し、基本的な操作ができる
ターミナルを開いて、簡単なコマンドを実行できる
Claude Codeを使って、AIと対話しながら作業できる
GitとGitHubの違いを理解し、アカウントを持っている
開発に必要なツールがすべて揃っている

セクション1: VSCodeのインストール
セクション2: ターミナルの基礎
セクション3: Node.jsとnpmのインストール
セクション4: Gitのインストール
セクション5: GitHubアカウントの作成
セクション6: Claude Codeのインストール
セクション7: 開発の基本的な流れを理解する
まとめ
参考資料
よくある質問

事前準備

必要なもの

パソコン（Windows/Mac/Linux）
安定したインターネット接続
メールアドレス（GitHubアカウント作成用）

推奨スペック

メモリ: 8GB以上
ストレージ: 10GB以上の空き容量
OS: Windows 10以降 / macOS 10.15以降 / Ubuntu 20.04以降

セクション1: VSCodeのインストール

VSCode（Visual Studio Code）とは？

VSCodeは、Microsoftが開発した無料のコードエディタです。世界中の開発者に最も使われているツールの一つで、以下の特徴があります：

無料でオープンソース
拡張機能が豊富（プラグインで機能を追加できる）
軽量で高速
多言語対応（プログラミング言語だけでなく、UI言語も日本語に対応）

インストール手順

Windowsの場合

公式サイトにアクセス
- https://code.visualstudio.com/ を開く
ダウンロード
- 「Download for Windows」ボタンをクリック
- インストーラー（VSCodeUserSetup-x64-x.xx.x.exe）がダウンロードされる
インストール実行
- ダウンロードしたファイルをダブルクリック
- 「同意する」をチェックして「次へ」
- インストール先はデフォルトのままでOK
- 重要: 以下のオプションにチェックを入れる
  - ☑ デスクトップ上にアイコンを作成する
  - ☑ PATHへの追加（再起動後に使用可能）
  - ☑ Code で開くアクションをエクスプローラーのコンテキストメニューに追加する
- 「インストール」をクリック
起動確認
- インストール完了後、「Visual Studio Codeを実行する」にチェックを入れて「完了」
- VSCodeが起動すればOK

Macの場合

公式サイトにアクセス
- https://code.visualstudio.com/ を開く
ダウンロード
- 「Download for Mac」ボタンをクリック
- ZIPファイルがダウンロードされる
インストール
- ダウンロードしたZIPファイルを解凍
- 「Visual Studio Code.app」を「アプリケーション」フォルダにドラッグ&ドロップ
起動確認
- アプリケーションフォルダから「Visual Studio Code」をダブルクリック
- 初回起動時に「開いてもよろしいですか？」と聞かれたら「開く」をクリック

日本語化（任意だが推奨）

VSCodeを起動
左サイドバーの拡張機能アイコン（四角が4つ並んだアイコン）をクリック
検索ボックスに「Japanese Language Pack」と入力
「Japanese Language Pack for Visual Studio Code」をインストール
VSCodeを再起動
UIが日本語になっていることを確認

チェックポイント

VSCodeが起動できる
UIが日本語になっている（日本語化した場合）
左サイドバーのアイコンをクリックして、各パネルが開閉できる

セクション2: ターミナルの基礎

ターミナル（コマンドライン）とは？

ターミナルは、キーボードでコマンド（命令）を入力してコンピュータを操作するツールです。

通常のアプリケーションはマウスでクリックして操作しますが、プログラミングの世界では、ターミナルにコマンドを入力して操作することが多いです。

なぜターミナルを使うのか？

マウス操作より高速に作業できる
複雑な操作を自動化できる
開発ツールの多くがターミナルで動く

最初は難しく感じるかもしれませんが、よく使うコマンドは限られているので、すぐに慣れます。

VSCodeでターミナルを開く

VSCodeを起動
上部メニューから 「ターミナル」→「新しいターミナル」 をクリック
- または、ショートカット: Ctrl + Shift + @ (Windows) / Cmd + Shift + @ (Mac)
画面下部にターミナルパネルが表示される

基本的なコマンドを試してみよう

ターミナルが開いたら、以下のコマンドを入力してEnterキーを押してみましょう。

1. 現在のディレクトリ（フォルダ）を確認

# Windowsの場合
cd

# Mac/Linuxの場合
pwd

結果: 現在いる場所（ディレクトリのパス）が表示される

2. ディレクトリの中身を表示

# Windowsの場合
dir

# Mac/Linuxの場合
ls

結果: 現在のディレクトリにあるファイルやフォルダの一覧が表示される

3. Cドライブに移動（Windowsのみ）

cd C:/

結果: プロンプトが C:\ に変わる

4. ホームディレクトリに移動

cd ~

結果: ユーザーのホームディレクトリに移動する

よく使うコマンド一覧

コマンド	説明	例
`cd [ディレクトリ名]`	ディレクトリ移動	`cd C:/`
`cd ..`	一つ上のディレクトリに移動	`cd ..`
`mkdir [名前]`	新しいディレクトリ作成	`mkdir my-project`
`dir` (Win) / `ls` (Mac)	ファイル一覧表示	`ls`
`pwd` (Mac) / `cd` (Win)	現在地を表示	`pwd`
`clear` (Mac) / `cls` (Win)	画面をクリア	`clear`

チェックポイント

VSCodeでターミナルを開ける
cdやlsコマンドを実行できる
現在のディレクトリがどこか確認できる

セクション3: Node.jsとnpmのインストール

Node.jsとは？

Node.jsは、JavaScriptをブラウザ外（パソコン上）で実行するための環境です。

**npm（Node Package Manager）**は、Node.jsのパッケージ（便利なツールやライブラリ）を管理するツールです。Node.jsをインストールすると、npmも一緒にインストールされます。

なぜ必要？

Next.js（これから使うフレームワーク）を動かすために、Node.jsが必要です。

インストール手順

1. 公式サイトにアクセス

https://nodejs.org/

2. LTS版をダウンロード

LTS（Long Term Support）版を選択してください
「推奨版」と表示されているボタンをクリック
❌ Current版は選ばない（最新機能が含まれるが不安定な場合がある）

3. インストーラーを実行

Windowsの場合:

ダウンロードした.msiファイルをダブルクリック
全てデフォルト設定でOK（「Next」を何回かクリック）
「Automatically install the necessary tools」にはチェックを入れなくてOK
インストール完了

Macの場合:

ダウンロードした.pkgファイルをダブルクリック
指示に従ってインストール
パスワード入力を求められたら、Macのログインパスワードを入力

4. インストール確認

ターミナルを再起動してから、以下のコマンドを実行：

node -v

期待される結果: v20.x.xのようなバージョン番号が表示される

npm -v

期待される結果: 10.x.xのようなバージョン番号が表示される

トラブルシューティング

「nodeは内部コマンドまたは外部コマンドとして認識されていません」と表示される場合

ターミナルを一度閉じて、VSCodeごと再起動してください
それでも解決しない場合は、パソコンを再起動してください
再起動後も表示されない場合は、Node.jsを再インストールしてください

チェックポイント

node -vでバージョンが表示される
npm -vでバージョンが表示される

セクション4: Gitのインストール

Gitとは？

Gitは、バージョン管理システムです。

バージョン管理とは？

コードの変更履歴を記録する仕組み
「いつ」「誰が」「何を」変更したかを追跡できる
過去の状態に戻すことができる
複数人で同じプロジェクトを開発する際に必須

例え話: ゲームのセーブポイントのようなもの。定期的にセーブしておけば、失敗してもやり直せます。

インストール手順

Windowsの場合

公式サイトにアクセス
- https://git-scm.com/
ダウンロード
- 「Download for Windows」をクリック
インストール
- ダウンロードしたファイルを実行
- 基本的に全てデフォルト設定でOK
- 重要な設定:
  - エディタ: 「Use Visual Studio Code as Git's default editor」を選択
  - PATH環境変数: 「Git from the command line and also from 3rd-party software」を選択
  - その他はデフォルトのまま「Next」

Macの場合

Macには最初からGitがインストールされている場合が多いです。

インストール確認

ターミナルで以下を実行:
```
git --version
```
インストールされていない場合

上記コマンドを実行すると、自動的にインストールプロンプトが表示されます。指示に従ってインストールしてください。

インストール確認

ターミナルを再起動してから:

git --version

期待される結果: git version 2.x.xのようなバージョン番号が表示される

Gitの初期設定

以下のコマンドで、ユーザー名とメールアドレスを設定します（後でGitHubで使う情報）：

git config --global user.name "あなたの名前"
git config --global user.email "your.email@example.com"

例:

git config --global user.name "Taro Yamada"
git config --global user.email "taro.yamada@example.com"

チェックポイント

git --versionでバージョンが表示される
ユーザー名とメールアドレスを設定した

セクション5: GitHubアカウントの作成

GitHubとは？

GitHubは、Gitで管理しているプロジェクトをオンラインで保存・共有できるサービスです。

GitとGitHubの違い:

Git: パソコン上でバージョン管理をするツール（ローカル）
GitHub: Gitで管理しているプロジェクトをクラウドに保存するサービス（リモート）

例え話:

Git = ゲームのセーブ機能
GitHub = クラウドセーブ（オンラインにバックアップ）

アカウント作成手順

GitHubにアクセス
- https://github.com/
Sign upをクリック
必要情報を入力
- Email: メールアドレスを入力
- Password: パスワードを設定（8文字以上、数字・記号を含む）
- Username: ユーザー名を設定
  - 半角英数字とハイフン(-)のみ使用可能
  - 例: taro-yamada, portfolio-creator-2024
- Email preferences: メール配信の設定（チェックを外してOK）
パズルを解く
- ロボットではないことを証明するパズルが表示される
メール認証
- 登録したメールアドレスに認証コードが届く
- コードを入力して認証
プラン選択
- Freeを選択（無料プランで十分）
完了
- アカウント作成完了

チェックポイント

GitHubアカウントを作成した
ログインできることを確認した
ユーザー名を覚えている（後で使用）

セクション6: Claude Codeのインストール

Claude Codeとは？

Claude Codeは、AIアシスタントClaude（クロード）をVSCodeで使えるようにする拡張機能です。

できること:

自然な日本語で指示を出すだけで、コードを書いてくれる
エラーが出たら、原因と解決策を提示してくれる
コードの説明や改善案を教えてくれる

従来のプログラミングとの違い:

従来: 構文を暗記して、自分で全てコードを書く
Claude Code: 「こんな機能がほしい」と伝えれば、AIが実装してくれる

インストール手順

VSCodeを起動
拡張機能パネルを開く
- 左サイドバーの拡張機能アイコン（四角が4つのアイコン）をクリック
- または、ショートカット: Ctrl+Shift+X (Windows) / Cmd+Shift+X (Mac)
Claude Codeを検索
- 検索ボックスに「Claude Code」と入力
- 「Claude Code」（Anthropic製）を見つける
インストール
- 「Install」ボタンをクリック
VSCodeを再起動

認証方法の選択

Claude Codeは2つの認証方法があります：

方法1: ログイン認証（推奨）

メリット:

APIキー管理不要
使いやすい
MAXプラン（有料プラン）推奨
- より高速
- 長時間の作業に対応
- 優先サポート

手順:

Claude Codeパネルを開く
「Sign in with Claude.ai」をクリック
ブラウザでAnthropicアカウントにログイン
認証完了

プラン:

無料プラン: 制限あり
MAXプラン推奨: 月額20ドル（本格的な開発に最適）

方法2: APIキー（上級者向け）

APIを使いたい場合のみ。詳細はAnthropic公式サイト参照。

Claude Codeの起動方法

方法1: アイコンから起動

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

方法2: ターミナルから起動（推奨）

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

claude

メリット:

キーボードだけで操作できる
より効率的
ターミナルとの相性が良い

WSL環境の推奨:

Windowsユーザーは**WSL（Windows Subsystem for Linux）**の使用を推奨します。

WSLのメリット:

IDEとの相性バツグン
Linuxコマンドがそのまま使える
開発環境がクリーン

WSLのセットアップ:

# PowerShellで実行
wsl --install

再起動後、Ubuntuがインストールされます。

Claude Codeの基本的な使い方

チャット画面
- Claudeパネルまたはターミナルでclaudeコマンド
- 下部のテキストボックスに日本語で指示を入力
- Enterで送信
試しに話しかけてみる
```
こんにちは。あなたは何ができますか？
```
Claudeが応答すればOKです。

チェックポイント

Claude Code拡張機能がインストールされている
ログイン認証が完了している（またはAPIキー設定済み）
Claudeと会話ができる
claudeコマンドでターミナルから起動できる（オプション）
WSL環境をセットアップした（Windowsユーザー・オプション）

セクション7: 開発の基本的な流れを理解する

プロジェクトとは？

プロジェクトとは、1つのWebサイトやアプリを作るために必要なファイル一式が入ったフォルダです。

例えば、ポートフォリオサイトを作る場合:

portfolio-site/          # プロジェクトフォルダ
├── src/                 # ソースコード
├── public/              # 画像などの素材
├── package.json         # プロジェクト設定ファイル
└── ...

開発の基本的な流れ

プロジェクトを作る (次のモジュールで実施)
```
npx create-next-app@latest my-portfolio
```
VSCodeでプロジェクトを開く

方法1: エクスプローラーから開く（Windows）
1. エクスプローラーでプロジェクトフォルダを開く
2. フォルダ内の空白部分を右クリック
3. 「Code で開く」を選択
※ この項目が表示されない場合：
- VSCodeインストール時に「PATHへの追加」にチェックを入れ忘れた可能性
- 再インストールするか、方法2を使用
方法2: VSCodeから開く
- VSCodeを起動
- File → Open Folder → プロジェクトフォルダを選択
方法3: ターミナルから開く（推奨）

プロジェクトフォルダに移動してから：
```
code .
```
.の意味:
- 現在のディレクトリ（カレントディレクトリ）を表す
- code . = 「VSCodeで現在のフォルダを開く」
使用例:
```
cd ~/projects/my-portfolio
code .
```
この方法が最も効率的です。
開発サーバーを起動
```
npm run dev
```
- ブラウザで http://localhost:3000 を開くと、作成中のサイトが見れる
コードを編集
- ファイルを変更すると、ブラウザが自動的に更新される（ホットリロード）
保存・公開
- Git でバージョン管理
- GitHub にアップロード
- Vercel でデプロイ（公開）

チェックポイント

プロジェクトの概念を理解した
開発の基本的な流れがイメージできる

まとめ

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

VSCodeのインストールと基本操作
ターミナルでコマンドを実行する方法
Node.js / npm のインストール
Gitのインストールと初期設定
GitHubアカウントの作成
Claude Codeのセットアップ

次のステップ

環境構築ができたので、次は実際にNext.jsプロジェクトを作ります。

モジュール2: Next.jsプロジェクトの初期設定 に進んでください。

参考資料

よくある質問

Q: Claude CodeはMAXプランが必要ですか？ A: 無料プランでも使えますが、本格的な開発にはMAXプラン（月額20ドル）を推奨します。制限なく、快適に開発できます。

Q: APIキーとログイン認証、どちらがいいですか？ A: 初心者はログイン認証が簡単です。APIキーは従量課金なので、上級者向けです。

Q: VSCodeの代わりに他のエディタは使えますか？ A: 使えますが、この講座ではVSCodeを前提としています。

Q: Windowsでcdコマンドがうまく動きません A: パスに日本語やスペースが含まれていませんか？英語のパスを使用してください。

Q: code .コマンドが動きません A: VSCodeのPATHが設定されていない可能性があります。VSCodeを再インストールするか、インストール時に「PATHへの追加」にチェックを入れてください。

Q: WSLは必須ですか？ A: 必須ではありませんが、Windowsユーザーには強く推奨します。開発環境がより快適になります。

次へ: モジュール2: Next.jsプロジェクトの初期設定

開発環境のセットアップ

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

学習目標

目次

事前準備

必要なもの

推奨スペック

セクション1: VSCodeのインストール

VSCode（Visual Studio Code）とは？

インストール手順

Windowsの場合

Macの場合

日本語化（任意だが推奨）

チェックポイント

セクション2: ターミナルの基礎

ターミナル（コマンドライン）とは？

VSCodeでターミナルを開く

基本的なコマンドを試してみよう

1. 現在のディレクトリ（フォルダ）を確認

2. ディレクトリの中身を表示

3. Cドライブに移動（Windowsのみ）

4. ホームディレクトリに移動

よく使うコマンド一覧

チェックポイント

セクション3: Node.jsとnpmのインストール

Node.jsとは？

なぜ必要？

インストール手順

1. 公式サイトにアクセス

2. LTS版をダウンロード

3. インストーラーを実行

4. インストール確認

トラブルシューティング

チェックポイント

セクション4: Gitのインストール

Gitとは？

インストール手順

Windowsの場合

Macの場合

インストール確認

Gitの初期設定

チェックポイント

セクション5: GitHubアカウントの作成

GitHubとは？

アカウント作成手順

チェックポイント

セクション6: Claude Codeのインストール

Claude Codeとは？

インストール手順

認証方法の選択

方法1: ログイン認証（推奨）

方法2: APIキー（上級者向け）

Claude Codeの起動方法

Claude Codeの基本的な使い方

チェックポイント

セクション7: 開発の基本的な流れを理解する

プロジェクトとは？

開発の基本的な流れ

チェックポイント

まとめ

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

次のステップ

参考資料

よくある質問