開発環境の準備
開発を始める前に、必要なツールをインストールしましょう。このページでは、Windows/Mac両方の手順を説明します。
必要なツール一覧
📦
Node.js
Next.jsを動かすために必要
🐍
Python
FastAPIを動かすために必要
📝
VS Code
コードを書くエディタ
🔀
Git
コードのバージョン管理
1. Node.jsのインストール
- Node.js公式サイトにアクセス
- 「LTS」と書かれたボタンをクリックしてダウンロード
- ダウンロードしたインストーラーを実行
- 「Next」を押して進め、インストール完了
確認方法（PowerShellまたはコマンドプロンプト）：
node --version
v18.x.x のようなバージョンが表示されればOK
2. Pythonのインストール
- Python公式サイトにアクセス
- 「Download Python 3.x.x」をクリック
- インストーラーを実行
- 重要：「Add Python to PATH」にチェックを入れる
- 「Install Now」をクリック
必ず「Add Python to PATH」にチェック！
これを忘れると、コマンドでpythonが使えません。
確認方法：
python --version
3. VS Codeのインストール
- VS Code公式サイトにアクセス
- 「Download」をクリック（自動でOSを判別）
- ダウンロードしたファイルを実行してインストール
おすすめ拡張機能
- 必須 Japanese Language Pack - 日本語化
- 必須 Python - Python開発サポート
- 推奨 ESLint - JavaScript/TypeScriptの静的解析
- 推奨 Prettier - コード整形
4. Gitのインストール
- Git公式サイトにアクセス
- 自動でダウンロードが始まる
- インストーラーを実行し、基本的にデフォルト設定でOK
確認方法：
git --version
5. ターミナル（コマンドライン）の基本
開発では「ターミナル」からコマンドを入力することが多いです。最低限のコマンドを覚えておきましょう。
| コマンド | 意味 | 例 |
|---|---|---|
| cd | ディレクトリ（フォルダ）を移動 | cd Documents |
| ls (Mac) / dir (Win) | ファイル一覧を表示 | ls |
| mkdir | 新しいフォルダを作成 | mkdir my-project |
| pwd | 現在のディレクトリを表示 | pwd |
| clear | 画面をクリア | clear |
npm / pip コマンド
npm（Node.js用）
# プロジェクト作成
npx create-next-app@latest
# パッケージインストール
npm install axios
# 開発サーバー起動
npm run dev
pip（Python用）
# パッケージインストール
pip install fastapi
# インストール済み一覧
pip list
# サーバー起動
uvicorn main:app --reload
よくあるトラブルと解決法
「'node' は認識されていません」と表示される
Node.jsのパスが通っていません。
解決法：PCを再起動するか、インストールし直して「Add to PATH」にチェック
「'python' は認識されていません」と表示される
Pythonのパスが通っていません。
解決法：Pythonをアンインストールし、再インストール時に「Add Python to PATH」にチェック
Macで「python」と打つとエラーになる
Macではpython3と入力する必要があります。
解決法：python3またはpip3を使用
困ったら：エラーメッセージをそのままAI（Claude CodeやCursor）に質問すると、解決策を教えてもらえます。