「プログラミング」と聞くと難しそうに聞こえますが、使うツールの役割を理解すれば全体の流れが見えてきます。
各ツールの役割
| ツール | 役割のたとえ |
|---|---|
| VS Code | コードを書く机・作業部屋 |
| GitHub | コードを保管するクラウドドライブ |
| Vercel | 完成品をインターネットに公開する印刷所 |
| Supabase | アプリのデータを保存するクラウド表計算 |
| Claude Code | 隣で助けてくれるAIアシスタント |
「VS Codeでコードを書く → GitHubに保存 → Vercelで公開 → Supabaseにデータ保存」という流れです。Claude Codeはこの全ての過程をサポートしてくれます。
開発を始める前に、必要なソフトウェアをインストールします。チェックリストを使って一つずつ確認しながら進めましょう。
インストールが必要なもの
- 1Git — ファイルの変更履歴を管理するツール
- 2Node.js — JavaScriptを動かす実行環境（Next.js開発に必要）
- 3Python — 一部のAIツール（MCP等）に必要
- 4VS Code — コードを書くエディター（作業部屋）
- 5Anthropicアカウント — Claude Codeを使うためのアカウント
- 6Claude Code拡張機能 — VS CodeにAIを追加する
- 7GitHubアカウント — コードを保管・共有するサービス
GitHubは「コードのGoogle Drive」です。写真や書類をGoogleドライブに保存するのと同じように、コードをGitHubに保存・共有・管理できます。
GitとGitHubの違い
| 名前 | 場所 | 役割 |
|---|---|---|
| Git | 自分のPC上 | 変更履歴を記録・管理するツール |
| GitHub | インターネット上 | Gitの内容をクラウドで保存・共有するサービス |
GitHubでできること
- コードをクラウドにバックアップ保存
- チームメンバーとコードを共有・共同編集
- 過去の状態に巻き戻す（タイムマシン機能）
- Vercelと連携してアプリを自動デプロイ
リポジトリは「プロジェクトの箱（フォルダ）」です。1つのアプリ・Webサイトの全ファイルと変更履歴を1つの箱にまとめて管理します。
リポジトリの種類
| 種類 | 誰が見られる？ | 用途 |
|---|---|---|
| パブリック | 世界中の誰でも | オープンソース・ポートフォリオ |
| プライベート | 許可した人だけ | 個人・社内プロジェクト |
よく使うGitコマンド
Commitはゲームの「セーブポイント」です。コードを変更した区切り目に「この状態を記録！」とCommitしておくと、後で問題が起きたときにそのポイントに戻れます。
Commitの3ステップ
良いコミットメッセージの例
- ✅「ユーザー登録フォームのバリデーションを追加」
- ✅「商品一覧の画像が表示されないバグを修正」
- ❌「修正した」「変更」「aaa」（具体性がないのでNG）
| 操作 | 方向 | 日常の例え |
|---|---|---|
| Push | 自分のPC → GitHub | ファイルをクラウドへアップロード |
| Pull | GitHub → 自分のPC | 最新ファイルをダウンロード |
Claude Codeとは
Claude CodeはAnthropicが開発したVS Code拡張機能です。AIと会話するようにコードを一緒に書いたり、バグを見つけてもらったり、コードの意味を説明してもらえます。
プランの違い
| プラン | 費用 | 利用制限 |
|---|---|---|
| 無料 | 0円 | 1日の使用量に上限あり |
| Pro | 約3,000円/月 | より多くのメッセージを送れる |
| Max | 約15,000円/月 | さらに多くのメッセージ・高速 |
良い指示の出し方
- ✅「ログインページの〈パスワード〉入力欄を赤い枠で囲んでください」
- ✅「このエラーメッセージの原因を教えてください：[エラー内容]」
- ❌「直してください」「何かして」（具体性がない）
コマンドラインは「テキストメッセージでパソコンに指示を送る」ようなものです。マウスでクリックする代わりに、文字を打ってコンピューターを操作します。
よく使うコマンド一覧
| コマンド | 何をするか |
|---|---|
npm run dev | 開発サーバーを起動（ブラウザでプレビュー） |
npm install | 必要なパッケージを全部インストール |
ls（Mac）/ dir（Win） | 今いるフォルダの中身を一覧表示 |
cd フォルダ名 | フォルダを移動する |
git status | 変更されたファイルの一覧を表示 |
MCPは「AIに手足を与える仕組み」です。普通のAIはチャット（会話）しかできませんが、MCPを設定するとGitHubを操作したり、ブラウザを自動で動かしたり、ファイルを検索したりできるようになります。
MCPでできること（例）
- GitHubのIssueやPull Requestを確認・作成
- ブラウザを自動操作（Playwright MCP）
- Supabaseのデータを検索・更新
- ウェブ検索を実行して最新情報を取得
設定ファイルの例
Next.jsは「プレハブ住宅のキット」です。一から家を建てるのではなく、材料と設計図がセットになったキットを使うことで、素早く安全に家を建てられます。Webアプリ開発も同じです。
Next.jsの主な機能
- ルーティング自動化 — フォルダにファイルを置くだけでURLページになる
- API機能内蔵 — バックエンドAPIも同じプロジェクトで作れる
- 表示速度の最適化 — 高速なページ読み込みを自動で実現
- Vercel対応 — Vercelへのデプロイが超かんたん
基本のファイル構成
JavaScriptはもともとブラウザ（Chrome等）の中でしか動きませんでした。Node.jsは「JavaScriptをブラウザの外でも動かせるようにする実行環境」です。サーバー、デスクトップアプリ、コマンドラインツールなどを作れるようになります。
npmとは
npm（Node Package Manager）はNode.jsと一緒にインストールされる「ライブラリ管理ツール」です。世界中の開発者が作ったツールを簡単にインストールできます。
package.jsonの役割
package.jsonはプロジェクトの「説明書」です。プロジェクト名・バージョン・使っているパッケージ一覧・コマンド定義が書かれています。
Vercelは「Webアプリの出版社」です。手元（PC）で書いた本（アプリ）を、インターネット上に出版（公開）してくれます。GitHubと連携すると、原稿（コード）をGitHubに渡すだけで自動で出版してくれます。
デプロイの自動化フロー
- 1VS Codeでコードを書く
- 2GitHubへPush（アップロード）
- 3VercelがGitHubの変更を検知して自動でビルド開始
- 4数分後にアプリが本番URLで公開される
環境変数の設定
APIキーなどの秘密情報はVercelの管理画面で「Environment Variables（環境変数）」として設定します。コードに直接書くと危険なため、この方法を使います。
Supabaseは「クラウド上のスプレッドシート」です。ユーザー情報・商品データ・投稿内容などをクラウドのデータベースに保存し、アプリから読み書きできます。Googleスプレッドシートが自動でAPIになったイメージです。
Supabaseの主な機能
| 機能 | 説明 |
|---|---|
| データベース | 表形式でデータを保存・検索できる |
| 認証 | ユーザーのログイン機能を内蔵 |
| ストレージ | 画像・動画などのファイルを保存 |
| リアルタイム | データが更新されたら即座にアプリに通知 |
RLS（行単位セキュリティ）の重要性
RLSは「自分のデータは自分だけが見られる」というルールをデータベースに設定する機能です。必ず設定するようにしましょう。
.env ファイルに書き、絶対にGitHubにアップロードしないようにしましょう。SupabaseのAPIキーや決済サービスのシークレットキーをコードの中に直接書くと、GitHubに公開した瞬間に世界中から見られてしまいます。.envファイルはそれを防ぐための「シークレット専用のファイル」です。
.env.localファイルの書き方
NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.coNEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGci...コードの中では
process.env.NEXT_PUBLIC_SUPABASE_URL として呼び出します。絶対に守るルール
| 場所 | 設定方法 |
|---|---|
| 自分のPC（開発中） | .env.local に書く |
| Vercel（本番公開後） | Vercelの「Settings → Environment Variables」に設定 |
| GitHub | 絶対にアップロードしない |
Next.jsプロジェクトを作ると
.gitignore が自動生成されます。.env*.local の行が含まれているか確認しましょう。含まれていない場合はClaude Codeに「.gitignoreに.env.localを追加して」と頼んでください。Vercelでの設定手順
- 1Vercelにログインして対象プロジェクトをクリック
- 2「Settings」→「Environment Variables」を開く
- 3変数名（例:
NEXT_PUBLIC_SUPABASE_URL）と値を入力して「Save」 - 4「Deployments」から再デプロイして反映
開発の基本的な流れ
- 1GitHubでリポジトリを作成
github.com → 「New」ボタン → リポジトリ名を入力 → 「Create repository」 - 2自分のPCにクローン（コピー）
git clone https://github.com/username/repo-name.git - 3Next.jsプロジェクトを作成
npx create-next-app@latest - 4VS CodeとClaude Codeで開発
機能を作るたびにCommitを繰り返す - 5GitHubにPush
git push origin main - 6VercelでデプロイしてURLを公開
GitHubと連携済みなら自動でデプロイされる