00:00:00こんにちは、Vercelのポーリンです。今日の動画では、
00:00:03使い方をご紹介します。
00:00:05v0のGit連携を使って、
00:00:08アイデアをプロトタイプから本番環境へ移行する方法です。
00:00:11この動画では、
00:00:12ブログを構築し、
00:00:14GitHubに接続して、
00:00:15ブランチを使って安全に新機能を試し、
00:00:18それをウェブ上に公開するまでを行います。
00:00:21最後まで見れば、一連のワークフローが理解できるはずです。
00:00:25では、始めましょう。
00:00:27さて、v0の画面です。
00:00:30まずはシンプルなブログの構築から始めます。
00:00:33チャットで作ってほしい内容を伝えます。
00:00:35ここでは、
00:00:37モダンなブログページを作成します。
00:00:42ヘッダー、注目の記事、最新記事のグリッドを配置しましょう。
00:00:53ヒント：ここからモデルを変更することもできます。
00:00:57複数のモデルが用意されています。
00:00:59Mini、Pro、Max、
00:01:01そしてOpusもあります。
00:01:03チャットをしながら切り替えが可能です。
00:01:07いいですね、気に入りました。
00:01:09v0がクリーンなブログレイアウトを生成してくれました。
00:01:13少し調整を加えて、自分好みにパーソナライズしてみましょう。
00:01:17では、
00:01:21（タイピングを間違えなければ...）
00:01:23ヘッダーの背景を青から紫のグラデーションにします。
00:01:32完璧です。納得のいくブログができました。
00:01:36しかし、現時点ではこれはv0の中にしか存在しません。
00:01:40作業内容をより恒久的な場所に保存する必要があります。
00:01:43最終的にはこれをライブ公開したいので、
00:01:45そこでこのGit連携の出番です。
00:01:48サイドバーに移動しましょう。
00:01:52GitHubのロゴとGit接続の項目があります。
00:01:56このプロジェクトを接続するのは初めてなので、
00:01:59v0からGitHubアカウントの連携とリポジトリ名の設定を求められます。
00:02:04では、接続を進めていきましょう。
00:02:06スコープは私のアカウントにします。
00:02:08いくつかアカウントがありますが、
00:02:10今回は個人の「Pauline」アカウントを使用します。
00:02:13リポジトリ名はこのままでいいので、
00:02:15そのまま
00:02:16リポジトリを作成します。
00:02:18これだけで、v0が
00:02:21リポジトリを作成し、すべてのコードをGitHubにプッシュしてくれます。
00:02:24素晴らしい。では、GitHub側で何が起きたか見てみましょう。
00:02:29確認してみます。
00:02:31v0が生成したコードがこれらすべてです。
00:02:34必要な設定ファイルも含め、適切に構成されています。
00:02:38コンポーネントもあり、
00:02:40appディレクトリなど、
00:02:41すべてが整理されていて、すぐに作業できる状態です。
00:02:43「GitHubに接続して何のメリットがあるの？」と思うかもしれません。
00:02:48まず、コードが安全にバックアップされます。
00:02:51何か問題が起きても、
00:02:53すべての履歴が残っています。
00:02:55次に、変更による破損を恐れずに
00:02:57より自由に実験ができるようになります。
00:03:00これは後ほど「ブランチ」を使って実際に見てみましょう。
00:03:02そして3つ目に、本番公開への道が開けます。
00:03:04このブログをライブ公開できるのです。
00:03:06では、新機能を追加して実際に動かしてみましょう。
00:03:09「著者について」のセクションを追加したいとします。
00:03:14でも、まだデザインを100%決めきれていません。
00:03:17今のバージョンを壊したくはありませんよね。
00:03:19そこで「ブランチ」の登場です。
00:03:21ブランチとは、プロジェクトの並行バージョンのようなもので、
00:03:24安全に実験を行うことができます。
00:03:27では、このブランチを複製しましょう。
00:03:31ブランチ名は「author-bio」にします。
00:03:36上部を見てください。
00:03:38現在「author-bio」ブランチにいます。
00:03:41メインブランチは、先ほどのまま手つかずの状態で残っています。
00:03:45これで、ここで自由に実験ができます。
00:03:48著者紹介を追加したいので、
00:03:50v0に著者紹介セクションを追加するよう頼みます。
00:03:56いいですね。
00:03:59新しい著者紹介コンポーネントが追加されました。
00:04:02プレビューをクイック更新してみましょう。
00:04:06どこに追加されたか確認できるはずです。
00:04:10ありました。新しい「著者について」のセクションです。
00:04:13念のため確認ですが、
00:04:15変更を加えたのはこのブランチ、
00:04:18「author-bio」ブランチだけです。
00:04:19つまり、
00:04:22メインブランチには一切変更が加えられていません。
00:04:24ですから、このブランチでは自由に試行錯誤できます。
00:04:27テキストやスタイルを
00:04:29自由に変更してみましょう。
00:04:33実際に見てみると、
00:04:35著者紹介はもう少しコンパクトな方がいい気がします。
00:04:38このブランチにいるうちに調整してみます。
00:04:40お見せしましょう。
00:04:41「著者紹介をもっとコンパクトにして」
00:04:46はい、できました。
00:04:48v0が著者セクションをよりコンパクトにしてくれました。
00:04:52全体的にパディングが減っています。
00:04:56ずっと良くなりましたね。
00:04:57とても満足です。
00:04:58では、PR（プルリクエスト）を作成して、これらの変更を反映させましょう。
00:05:03このワークフローがメインブランチをどう守るか見ていてください。
00:05:06実験用ブランチで何度でも反復試行できますが、
00:05:10完全に納得するまでメインブランチは安定したままです。
00:05:13さて、著者紹介に満足したので、
00:05:16これをメインブランチにマージ（統合）します。
00:05:18プルリクエストを作成しましょう。
00:05:20プルリクエスト（PR）とは、簡単に言うと、
00:05:25「author-bio」ブランチの変更を
00:05:28メインブランチに取り込むよう依頼することです。
00:05:30変更を提案するための正式な方法です。
00:05:32ここから直接PRを開きます。
00:05:35そして、このPR自体をクリックします。
00:05:44すると、GitHubに飛びます。
00:05:46ご覧の通り、
00:05:47v0で行った2つのコミットが確認できます。
00:05:51著者紹介の作成と、そのコンパクト化の履歴です。
00:05:56「Files changed」タブへ行けば、
00:05:58v0が変更した正確なコードをレビューできます。
00:06:03チーム開発の場合、
00:06:04ここで同僚があなたのコードをレビューし、
00:06:07コメントを残したりします。
00:06:08個人プロジェクトなら、
00:06:09すべて問題ないかを確認する
00:06:11最終チェックの場になります。
00:06:13変更内容に問題はないので、
00:06:14このプルリクエストをマージします。
00:06:17v0の画面に戻りましょう。
00:06:20ここからもPRをマージできます。
00:06:23マージを実行します。
00:06:29GitHubに戻って確認すると、
00:06:31マージされたことがわかります。
00:06:34これで、この機能は正式にメインのコードベースの一部となりました。
00:06:38すべて公開準備が整いました。
00:06:39設定画面に移動して、
00:06:42Vercelプロジェクトを確認し、「View on Vercel」をクリックします。
00:06:46デプロイが完了しているのが見えますね。
00:06:51ドメインのリンクをクリックすると...ありました！
00:06:55私のブログがインターネット上に公開されました。
00:06:57グラデーションのヘッダーも、
00:07:00ブログ記事もしっかり反映されています。
00:07:01下にスクロールすると、著者紹介もあります。
00:07:06v0で構築したものがすべて、
00:07:08Gitを通じて安全に統合され、
00:07:10デプロイされて世界中からアクセス可能になりました。
00:07:13これは、プロの開発チームが
00:07:14毎日使っているのと同じワークフローです。
00:07:17v0で構築し、Gitでコードを管理し、
00:07:20Vercelでデプロイする。
00:07:22これが完全なプロダクション・ワークフローです。
00:07:25この動画で、v0のGit連携を
00:07:27より自信を持って使えるようになれば幸いです。
00:07:30ぜひこのワークフローを試してみてください。
00:07:32小さなことから始めて、ブランチを作り、
00:07:34実験して、デプロイしてみましょう。
00:07:36もし質問があれば、
00:07:38コミュニティスペース（community.vercel.com）でお待ちしています。
00:07:41ご視聴ありがとうございました。