アプリを更新してデプロイし直す

レストランのメニュー表を思い浮かべてみてください。新しい料理を追加したくなったら、メニューの原稿を書き直して印刷所へ送りますよね。すると自動的に新しいメニュー表がお店に届きます。

Webアプリも同じ仕組みです。コード（＝アプリの設計図）を書き換えて保存・送信すると、ホスティングサービス（＝インターネット上の「印刷所」）が自動的に新しいバージョンを公開してくれます。この一連の流れを「継続的デプロイ（＝コードを送るたびに自動で公開される仕組み）」と呼びます。

このレッスンでは、すでにVercel（＝Webアプリのホスティングサービス）に公開済みのアプリを更新して、もう一度デプロイ（＝インターネットに公開すること）する手順を15分で体験します。

このレッスンに進む前に、次の条件を満たしているか確認してください。

• ✅ すでにNext.jsアプリをVercelにデプロイ済みである
• ✅ 自分のパソコンでアプリのフォルダを開ける
• ✅ GitHub（＝コードの保管場所）とVercelが連携済みである

まだ最初のデプロイが終わっていない場合は、先に「アプリを初めてデプロイする」レッスンを終えてから戻ってきてくださいね。

上の図は、これから行う「変更 → 保存 → 送信 → 自動公開」の流れをまとめたものです。全体で4つのステップがあり、順番に進めていきます。

まずは、あなたのアプリに小さな変更を加えてみましょう。AIツールを使うと、プログラミングの知識がなくても日本語の指示だけで変更できます。

使えるAIツールを選ぶ

どのツールでもOKですが、おすすめの使い分けを紹介します。

AIに変更を指示する

たとえばClaude Codeを使う場合、ターミナルでプロジェクトのフォルダを開いた状態で次のように指示します。

プロンプト例①（見た目の変更）：

トップページの見出しを「ようこそ」から「こんにちは、世界！」に変えてください

プロンプト例②（内容の追加）：

トップページのヘッダーの下に「最終更新: 2026年4月」というテキストを追加してください

プロンプト例③（デザインの変更）：

メインボタンの背景色を青(#3B82F6)から緑(#22C55E)に変えてください

AIがコードを書き換えてくれたら、変更内容を確認して次に進みます。

良い指示と悪い指示の違い

• ✅ 良い例：「ボタンの色を青から緑に変えて」— 何をどう変えるかが具体的
• ✅ 良い例：「タイトルの下に『新着情報』という見出しを追加して」— 場所と内容が明確
• ❌ 悪い例：「なんか良くして」— 何を変えたいか分からず、期待外れになりやすい
• ❌ 悪い例：「全部変えて」— 範囲が広すぎて、元に戻すのが大変に

コツ： 1回の指示で1つの変更にしましょう。まとめてお願いすると、どこが変わったか分かりづらくなります。

変更をパソコン上で確認する

送信する前に、自分のパソコン上で変更結果を確認しましょう。ターミナルで次のコマンドを実行すると、ブラウザで確認できます。

npm run dev

何をしているか：開発用サーバー（＝あなたのパソコン上でだけ動くお試し版のサイト）を起動しています。ブラウザで http://localhost:3000 を開くと、変更後のアプリが表示されます。

問題なければ、Ctrl+C（Macでは Cmd+C）でサーバーを止めて、次のステップへ進みます。

変更が確認できたら、その変更を「保存」して「送信」します。ここで使うのがGit（＝変更履歴を管理する仕組み）です。

レストランの例でいうと「修正したメニュー原稿を封筒に入れて、印刷所に郵送する」イメージです。

ステップ1：変更を記録する

ターミナルで次の1行をコピーして実行してください。

git add -A && git commit -m "見出しのテキストを変更"

何をしているか：git add -A は「すべての変更を保存の準備に入れる」こと、git commit -m "..." は「メッセージ付きで変更を確定保存する」ことです。料理でいうと「材料を全部まな板に揃えてから、一気に調理する」感覚です。

AIに頼むこともできます：

「今の変更をgitで保存して、コミットメッセージは『見出しのテキストを変更』にして」

Claude CodeやCursorなら、上のgitコマンドをあなたの代わりに実行してくれます。

ステップ2：変更を送信する

保存した変更をGitHub（＝インターネット上のコード保管場所）に送ります。

git push origin main

何をしているか：git push は「変更をインターネット上に送信する」こと、origin main は「GitHubのメインの保存場所」を指します。封筒をポストに入れるようなものです。

上の画面のように、エラー（＝赤い文字のメッセージ）が出ずに完了すればOKです。

ここが一番わくわくする瞬間です。GitHubに変更が届くと、Vercelが自動的に検知して、新しいバージョンを公開してくれます。

Vercelのダッシュボードで確認する

1. ブラウザで Vercel のダッシュボード（＝管理画面）を開く
2. あなたのプロジェクトをクリックする
3. 「Deployments」（＝公開履歴）タブを開く
4. 一番上に新しいデプロイが「Building」（＝準備中）または「Ready」（＝準備完了）と表示されていることを確認する

数分以内にステータスが「Ready」になれば、更新成功です！

公開されたサイトを確認する

Vercelダッシュボードに表示されているURL（＝Webサイトの住所）をクリックして、実際に変更が反映されているか確認しましょう。

• ✅ 成功の確認：見出しが「こんにちは、世界！」にちゃんと変わっている
• ❌ 古いまま？：ブラウザのキャッシュ（＝以前のデータを覚えている仕組み）が原因の可能性 → Ctrl+Shift+R（Macでは Cmd+Shift+R）で最新データを読み込んでみてください

「git push」でエラーが出る

よくある原因： GitHubのログインが切れている

対処法：

1. エラーメッセージをそのままAIツールに貼り付けて「このエラーを解決して」と聞く
2. Claude Codeを使っている場合は gh auth login と入力して再ログインできます

AIへのプロンプト例：

「git pushしたら次のエラーが出ました。どうすればいいですか？ （エラーメッセージを貼り付ける）」

Vercelのデプロイが「Error」（＝失敗）になる

よくある原因： コードの中に書き間違いがある

対処法：

1. Vercelダッシュボードでエラー詳細をクリック
2. 赤い文字のエラーメッセージをコピー
3. AIツールに「このビルドエラーを直して」と伝える

AIへのプロンプト例：

「Vercelでデプロイしたら以下のエラーが出ました。原因と修正方法を教えてください。 （エラーメッセージを貼り付ける）」

修正したら、もう一度「変更を保存して送信する」セクションに戻って同じ手順で送信してください。

変更したはずなのにサイトが古いまま

次の3つを順番にチェックしてください。

1. git push を忘れていませんか？ → ターミナルで git status と入力して確認。「Your branch is ahead」と出たら git push origin main を実行
2. ブラウザのキャッシュでは？ → Ctrl+Shift+R（Macでは Cmd+Shift+R）を試す
3. デプロイがまだ進行中では？ → Vercelダッシュボードでステータスが「Ready」になるまで待つ（通常1〜3分）

次の3つすべてを満たしていれば、このレッスンは完了です。

• 自分のパソコン上で変更を確認できた（npm run dev で動作確認）
• git push が成功し、Vercelのデプロイステータスが「Ready」になった
• 公開URLにアクセスして、変更が反映されていることをブラウザで確認できた

成果物として残すもの： 更新後のサイトが表示されているブラウザ画面のスクリーンショットと、公開URL

おつかれさまでした！このレッスンで、あなたは次のことを体験しました。

1. AIツールで変更する — 日本語の指示でコードを書き換えられる
2. Gitで保存・送信する — git add -A && git commit -m "メッセージ" と git push origin main の2つのコマンドだけ
3. Vercelが自動デプロイする — 送信するだけで新しいバージョンが公開される

この「変更 → 保存 → 送信 → 自動公開」のサイクルが、Webアプリ開発の日常的な作業です。何度も繰り返すうちに、自然と身につきますよ。次にアプリを改善したくなったら、いつでもこの手順に戻ってきてくださいね。