🔰 講座01

PCに開発環境を作ってGitHubでコードを管理できるようになる

⏱ 想定学習時間 15時間（1日3時間 × 5日間）

📋 前提条件なし（完全初心者OK）

🛤 パス A・B共通

📖

このページで学ぶこと

Git for Windows をインストールし、GitBASH でコマンド操作ができる
Node.js を安全にインストール・切り替えられる管理ツールをセットアップできる（Path B用）
GitHub アカウントを作成し、Personal Access Token でリポジトリを操作できる
Cursor をインストールし、チャット・エディタ・ターミナルの場所を把握できる

🛤

Path A / Path B について

この講座は2つのルートに対応しています。どちらか不明な場合は Path A を選んでください。後から Path B に切り替えることができます。

	Path A（Google AI Studio 版）	Path B（Vite 版）
対象講座	講座02A	講座02B
Node.js 必要か	不要	必須
Phase 2	スキップ可	必須実施

5日間の学習スケジュール

📅 1日目

Phase 1: Git インストール

→

📅 2日目

Phase 2: Node.js（Path Bのみ）

→

📅 3日目

Phase 3: GitHub 準備

→

📅 4日目

Phase 4: Cursor 設定

→

📅 5日目

実践課題・復習

Phase 1: Git for Windows インストール・初期設定

⏱ 約3時間

🎯 Gitをインストールし、名前・メールアドレスを設定する

🛠 使用ツール: Git for Windows / Mac ターミナル

1-1

STEP 1-1: Git for Windows インストール

Gitはコードのバージョン管理を行うツールです。「いつ・誰が・何を変えたか」を記録し、過去の状態に戻したり、チームで共同作業したりできます。

Git Bash

# インストール後の確認コマンド

$ git --version

git version 2.44.0.windows.1

$ which git

/mingw64/bin/git

（Git のインストール確認完了）

▲ Git Bash を起動して git --version が表示されれば成功

Windowsの場合

ブラウザで https://git-scm.com/download/win を開く
「64-bit Git for Windows Setup」をクリックしてダウンロード
ダウンロードした .exe ファイルをダブルクリックして起動
インストーラーの設定を以下の通りに進める

画面	推奨選択
Select Components	デフォルトのまま Next
Choosing the default editor	Visual Studio Code を選択（なければ Nano でも可）
Adjusting your PATH environment	Git from the command line and also from 3rd-party software を選択
Choosing HTTPS transport backend	OpenSSL を選択
Configuring the line ending conversions	Checkout Windows-style, commit Unix-style を選択
Configuring the terminal emulator	Use MinTTY を選択
残りの画面	デフォルトのまま Next → Install

インストール完了後、スタートメニューから「Git Bash」を検索して起動

Macの場合

Mac には Git が最初から入っていることが多いですが、最新版の導入にはターミナルを使います。

アプリケーション → ユーティリティ → ターミナルを起動
以下のコマンドを実行

Terminal — Xcode Command Line Tools インストール Mac

xcode-select --install

ダイアログが表示されたら「インストール」をクリック
完了後、git --version で確認

⚠️ エラーが出た場合

インストーラーが起動しない（Windows）：

セキュリティソフトがブロックしている可能性 → 一時的に無効化してから再実行
ダウンロードが途中で壊れている → 再ダウンロードして再試行
管理者権限が必要な場合 → .exe を右クリック → 「管理者として実行」

「Windows によって PC が保護されました」が表示される：

Windows Defender SmartScreen の警告です
「詳細情報」をクリック → 「実行」ボタンをクリック
公式サイト（git-scm.com）からダウンロードしたファイルであれば安全です

1-2

STEP 1-2: GitBASH の起動と初期設定コマンド

Git をインストールしただけでは「誰がコミットしたか」がわかりません。名前とメールアドレスを登録します。この設定はコミット履歴に記録されるため、正確に設定しましょう。

Git Bash — 初期設定

# 名前とメールアドレスを設定（"" の中を自分のものに変更）

$ git config --global user.name "Taro Yamada"

$ git config --global user.email "taro@example.com"

# 設定を確認する

$ git config --list

user.name=Taro Yamada

user.email=taro@example.com

（設定確認完了）

▲ user.name と user.email が表示されれば設定完了

Windowsの場合

スタートメニューで「Git Bash」を検索して起動
以下のコマンドを1行ずつ実行（Your Name と you@example.com は自分のものに変更）

Git Bash — ユーザー設定 Windows

git config --global user.name "Your Name"
git config --global user.email "you@example.com"

# 設定を確認する
git config --list
user.name=Your Name
user.email=you@example.com

Macの場合

ターミナルで同じコマンドを実行してください（コマンドは Windows と同一）。

💡

GitBASH の使い方ポイント

コピーしたコマンドを貼り付けるには 右クリック → Paste または Shift+Insert
Ctrl+V は GitBASH では機能しません（Windows）
Mac のターミナルは Cmd+V で貼り付けできます

⚠️ エラーが出た場合

git config --list で何も表示されない：

設定が空の場合でも、コマンド自体は正常です
user.name と user.email の設定コマンドを再度実行してください
その後もう一度 git config --list を実行して確認します

'git' は内部コマンドまたは外部コマンドとして認識されていません：

Git のインストールで「PATH への追加」が正しく設定されていません
Git をアンインストール（コントロールパネル → プログラムと機能）してから再インストール
インストーラーの「Adjusting your PATH environment」で 「Git from the command line and also from 3rd-party software」 を選択する
インストール完了後、GitBASH を再起動

Phase 2: Node.js インストール（nvm-windows）

⏱ 約2時間

🎯 Node.js をバージョン管理ツール経由で安全にインストールする

🛠 使用ツール: nvm-windows（Windows）/ nvm（Mac）

🛤

Path A の方はスキップ可能 Path A（Google AI Studio 版）の方はこのフェーズをスキップできます。Path B（Vite 版）の方は必ず実施してください。

2-1

STEP 2-1: nvm-windows インストール

Node.js は直接インストールせず、バージョン管理ツール（nvm-windows）を経由してインストールします。これにより、複数のバージョンを切り替えながら使えます。

⚠️

注意: 既存の Node.js がある場合は先に削除が必要です

スタートメニュー → 設定 → アプリから「Node.js」を探してアンインストールしてください。その後、以下のフォルダが残っている場合は手動削除してください。

C:\Program Files\nodejs
C:\Users\[ユーザー名]\AppData\Roaming\npm
C:\Users\[ユーザー名]\AppData\Roaming\npm-cache

Windowsの場合

ブラウザで https://github.com/coreybutler/nvm-windows/releases を開く
最新のリリースから nvm-setup.exe をダウンロード
nvm-setup.exe をダブルクリックして実行（管理者として実行を推奨）
インストール設定はデフォルトのまま進める
インストール完了後、GitBASH を新しく開き直す
以下のコマンドでインストール確認

Git Bash — nvm-windows インストール確認 Windows

nvm version
1.1.12

Macの場合

Mac では nvm（通常の nvm）を使います。

Terminal — nvm インストール Mac

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/HEAD/install.sh | bash

実行後、ターミナルを再起動してから nvm --version で確認します。

⚠️ エラーが出た場合

nvm version で「command not found」が表示される（Windows）：

GitBASH を完全に閉じて、再度開く
それでも解決しない場合は PC を再起動してから再確認

Mac の場合：

~/.zshrc または ~/.bash_profile に以下が追加されているか確認します。ない場合は追記して、ターミナルを再起動します。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

2-2

STEP 2-2: Node.js インストールとバージョン確認

nvm が準備できたら、長期サポート版（LTS）の Node.js をインストールします。LTS 版は長期間サポートされる安定版で、学習・業務利用では常に LTS 版を選んでください。

Git Bash — Node.js インストール

# LTS版をインストール

$ nvm install --lts

Downloading and installing node v20.11.0...

Now using node v20.11.0 (npm v10.2.4)

# 使用するバージョンを設定

$ nvm use --lts

Now using node v20.11.0

# バージョン確認

$ node -v

v20.11.0

$ npm -v

10.2.4

（Node.js インストール完了）

▲ node -v と npm -v の両方でバージョン番号が表示されれば成功

Windows / Mac 共通

Git Bash / Terminal — Node.js インストールと確認 Windows / Mac

# LTS版インストール
nvm install --lts

# インストールしたNode.jsを使用設定
nvm use --lts

# バージョン確認（どちらも番号が表示されれば成功）
node -v
v20.11.0

npm -v
10.2.4

⚠️ エラーが出た場合

node -v で「command not found」または「node is not recognized」が表示される：

nvm use --lts を実行したか確認（インストールしただけでは有効化されません）
nvm の一覧でインストール済みバージョンを確認する

nvm list
    20.11.0
# 表示されたバージョン番号を使って明示的に指定
nvm use 20.11.0

Phase 3: GitHub アカウント作成とリポジトリ準備

⏱ 約4時間

🎯 GitHubアカウントを作成し、PATを発行してリポジトリを作る

🛠 使用ツール: GitHub（ブラウザ）

3-1

STEP 3-1: GitHub アカウント作成（Sign up 手順）

GitHub はコードのクラウドストレージです。ローカル（自分のPC）で書いたコードをアップロードし、バックアップ・共有・公開ができます。

🔒 https://github.com/signup

⬡ GitHub

GitHubに参加する

メールアドレス

example@email.com

パスワード

••••••••••

ユーザー名

your-username

続行

▲ github.com/signup からアカウント登録

Windows / Mac 共通

ブラウザで https://github.com を開く
右上の「Sign up」をクリック
以下の情報を入力

項目	入力内容
Email address	普段使うメールアドレス
Password	8文字以上の英数字混在パスワード
Username	英数字とハイフンのみ（後から変更可能）

メール認証コード（6桁）が届いたら入力
利用目的のアンケートが表示されたら任意で回答（Skip でも可）
無料プラン（Free）のまま「Continue」

💡

ユーザー名の選び方ユーザー名は公開されます。自分のポートフォリオとして見られることを意識した名前がおすすめです。英数字・ハイフンのみ使用できます。

⚠️ エラーが出た場合

メール認証コードが届かない：

迷惑メールフォルダを確認
それでも届かない場合、GitHub の Sign up 画面で「Resend code」をクリック
別のメールアドレスで登録し直す

3-2

STEP 3-2: Personal Access Token 発行

2021年8月以降、GitHub はパスワードによる認証を廃止しました。代わりに Personal Access Token（PAT） が必要です。これはコマンドラインからリポジトリを操作するときに使います。

🔒 https://github.com/settings/tokens/new

⬡ GitHub

New personal access token (classic)

Note

my-dev-token

Expiration

90 days ▼

Select scopes

repo Full control of private repositories

Generate token

▲ Settings → Developer settings → Personal access tokens から発行

Windows / Mac 共通

GitHub にログインした状態で右上のアイコンをクリック → 「Settings」
左メニューの一番下「Developer settings」をクリック
「Personal access tokens」→「Tokens (classic)」をクリック
「Generate new token」→「Generate new token (classic)」をクリック
以下の設定で発行

項目	設定値
Note	任意（例: my-dev-token）
Expiration	90 days（または任意の期間）
Scopes	repo にチェック（最低限必要）

「Generate token」ボタンをクリック
表示されたトークン（ghp_ で始まる文字列）を今すぐコピーしてメモ帳などに保存

🔐

トークンの安全な保管方法

このページを閉じると二度とトークン全体を見ることができません。必ずコピーしてください
メモ帳のファイルをデスクトップに置かない（他人に見られるリスク）
パスワードマネージャーへの保存がおすすめ
GitHubのリポジトリには絶対にアップロードしない

⚠️ エラーが出た場合

トークンを保存し忘れた / 紛失した：

トークンは再表示できません
Settings → Developer settings → Personal access tokens → Tokens (classic) を開く
古いトークンの「Delete」をクリックして削除
STEP 3-2 の手順で新しいトークンを発行する

3-3

STEP 3-3: 新規リポジトリ作成

リポジトリとは、コードとその変更履歴をまとめて管理する「プロジェクトフォルダ」のようなものです。GitHub 上に作成することで、クラウドにバックアップされます。

Windows / Mac 共通

GitHub の右上「+」ボタン → 「New repository」をクリック
以下の設定で作成

項目	設定値
Repository name	英数字とハイフン（例: my-first-app）
Description	任意（空白でも可）
Public / Private	どちらでも可（学習中は Private 推奨）
Add a README file	チェックしない
Add .gitignore	None のまま
Choose a license	None のまま

「Create repository」をクリック

💡

「Add a README file」にチェックを入れない理由チェックを入れると GitHub 側でコミットが作られます。ローカル（自分のPC）でも別のコミットを作ると、最初の git push 時に「履歴が食い違っている」エラーが発生しやすくなります。最初は空のリポジトリから始めるのが最もトラブルが少ない方法です。

⚠️ エラーが出た場合

リポジトリ名でエラーが出る：

リポジトリ名に使える文字は以下のみです。スペース・日本語・記号は使用できません。エラーが出たら名前を変更してください。

英字（大文字・小文字）
数字
ハイフン（-）
アンダースコア（_）

Phase 4: Cursor インストールと基本設定

⏱ 約3時間

🎯 Cursor をインストールし、3つのエリア（チャット・エディタ・ターミナル）の場所を把握する

🛠 使用ツール: Cursor IDE

4-1

STEP 4-1: Cursor インストール

Cursor は AI チャットが組み込まれたコードエディタです。コードを書きながら AI に質問・修正依頼ができ、ファイルの作成・編集まで自動で行ってくれます。

Windowsの場合

ブラウザで https://www.cursor.com を開く
「Download for Windows」をクリック
ダウンロードした .exe を実行
インストールが完了するとCursorが自動起動

Macの場合

https://www.cursor.com を開く
「Download for Mac」をクリック
.dmg ファイルを開き、Cursor を Applications フォルダにドラッグ
アプリケーションフォルダから Cursor を起動

⚠️ エラーが出た場合

Mac で「開発元を確認できないため開けません」と表示される：

Finder で Cursor.app を右クリック
「開く」を選択
「開く」ボタンをクリック
一度この操作をすると、次回からは通常通り開けます

4-2

STEP 4-2: Hobby プランの制限説明

Cursor には無料の Hobby プランがあります。以下の制限を理解してから使いましょう。

プラン	制限内容
Hobby（無料）	高速モードのリクエスト: 月50回 / 低速モードは制限なし
Pro（有料）	高速モード: 月500回 + それ以降は低速モードへ

💡

高速リクエストの節約コツ

シンプルな質問や短い修正は低速モードで行う
大きな機能追加・複雑な修正のみ高速モードを使う
高速リクエストが切れたら、Google AI Studio を併用する

⚠️ エラーが出た場合

「Rate limit exceeded」と表示される：

高速モードのリクエスト上限に達しています
チャットパネル上部のモード選択から低速モードに切り替えましょう
または Google AI Studio を代わりに使用してください

4-3

STEP 4-3: 画面構成確認

Cursor を起動したら、3つのエリアの場所を確認しておきましょう。

Cursor — my-project

📄 index.html ●

1<!DOCTYPE html>

2<html lang="ja">

3 <head>

4 <title>My App</title>

5 </head>

6 <body>

7 <h1>Hello World</h1>

8 </body>

9</html>

🤖 Cursor AI Chat

index.htmlにナビゲーションを追加して

ナビゲーションバーを追加します。以下のコードを...

💬 メッセージを入力... (Ctrl+L)

▲ Cursor の画面構成。左にファイルツリー、中央にエディタ、右にAIチャット

エリア	場所	用途
ファイルツリー	左側	プロジェクトのファイル一覧
エディタ	中央	コードの表示・編集
ターミナル	下部	コマンド実行（git / npm 等）
チャット	右側	AI への指示

ターミナルを開く方法

OS	ショートカット
Windows	Ctrl + ` （バッククォート）
Mac	Cmd + ` （バッククォート）

またはメニューバー → View → Terminal からも開けます。

💡

Cursorターミナルでもgitコマンドが使えます Cursor のターミナルでも GitBASH のコマンドが使えます。git や npm コマンドも同様に動作します。

⚠️ エラーが出た場合

ターミナルが開かない：

Ctrl + `（Mac: Cmd + `）を再度押す
View メニュー → Terminal を選択
Cursor を完全に終了して再起動する

✏

実践課題: GitBASH で基本コマンドを試す

⏱ 約3時間（5日目）

🎯 コマンドラインの基本操作を体で覚えることで、今後の作業がスムーズになります

🛠 使用ツール: Git Bash / Cursor ターミナル

★

コマンド実践（GitBASH または Cursor のターミナルで実行）

以下のコマンドを1つずつ実行してみましょう。実際に手を動かすことが上達への近道です。

Git Bash — 基本コマンド実践

# 1. 現在地を確認する

$ pwd

/c/Users/YourName

# 2. ファイル・フォルダ一覧を表示する

$ ls

Desktop/ Documents/ Downloads/

# 3. フォルダを作成する

$ mkdir practice-folder

# 4. フォルダに移動する

$ cd practice-folder

$ pwd

/c/Users/YourName/practice-folder

# 5. 一つ上のフォルダに戻る

$ cd ..

（基本コマンド実践完了）

▲ 5つのコマンドをすべて実行できれば実践課題完了

Git Bash — 基本コマンド一覧 Windows / Mac

# 1. 現在地を確認する（pwd）
pwd
/c/Users/YourName

# 2. ファイル・フォルダ一覧を表示する（ls）
ls
ls -la    # 隠しファイルも含めた詳細表示

# 3. フォルダを作成する（mkdir）
mkdir practice-folder

# 4. フォルダに移動する（cd）
cd practice-folder
pwd       # 移動後の確認
/c/Users/YourName/practice-folder

# 5. 一つ上のフォルダに戻る
cd ..

ショートカットまとめ

操作	Windows（GitBASH）	Mac（ターミナル）
テキスト貼り付け	右クリック → Paste または Shift+Insert	Cmd+V
前のコマンドを呼び出す	↑ キー	↑ キー
画面をクリア	`clear` コマンド	`clear` コマンド
コマンドをキャンセル	Ctrl+C	Ctrl+C
補完（途中まで打ってTab）	Tab キー	Tab キー

⚠️ エラーが出た場合

「command not found」と表示される：

コマンドのスペルを確認してください（大文字・小文字の区別あり）
全角スペースが混入していないか確認してください

フォルダが作成できない：

そのフォルダ内に書き込み権限があるか確認してください
フォルダ名に使えない文字（スペース、特殊記号）が含まれていないか確認してください

📋 修了チェックリスト

修了とみなすには、以下をすべて達成してください。

GitBASH のターミナルで git --version を実行して表示できる
git config --global user.name に自分の名前が設定されている
（Path B のみ）node -v と npm -v が表示できる
GitHub にログインできる
GitHub で Personal Access Token を発行している
GitHub に新規リポジトリを1つ作成している
Cursor を起動してチャット・エディタ・ターミナルの場所がわかる
実践課題（pwd / ls / mkdir / cd）を GitBASH で試した

次の講座：02 AIツールセットアップ →