本動画では、Claude CodeとCursorを組み合わせて、完全なウェブアプリケーションをゼロから構築する実践的なプロセスを紹介している。リンクトラッキングツールという具体的なプロジェクトを題材に、Next.js、Supabase、Vercelといった現代的な技術スタックを用いた開発手法を解説。複数のAIエージェントを同時活用する戦略、効果的なプロンプティング技術、GitHub連携からデプロイまでの一連の工程を実演しながら、AI支援開発における実用的なノウハウとベストプラクティスを提示する内容となっている。
プロジェクトの準備とツール選択
私の名前はDavid Ondreで、この動画ではAIを使ってアプリ全体をゼロから構築する方法をお見せします。まず最初に、どのツールを使用するかを選択する必要があります。私はClaude Codeと組み合わせてCursorを使用することにします。では、空のプロジェクトを開いてみましょう。
これは数分前に作成した文字通り空のフォルダです。ご覧のとおり、ファイルには何も入っていません。Cursorを使いたい理由は、これがフル機能のIDEだからです。BoldやLovable、Replitのようなツールを使うこともできますが、これらでMVPを動かすことはできても、本格的なソフトウェアを開発することはできません。だからこそCursorを使用しています。
次にCommand+Jでターミナルを開きます。claudeと入力します。これでClaude Codeが起動します。Claude Codeをメインのコーディングエージェントとして使用していきます。このプロジェクトで動作する許可を求めてきているので、有効にします。
次に、build-idea.mdという新しいファイルを作成する必要があります。これはマークダウンファイルで、基本的にはテキストファイルに似たテキストの一種です。ここに構築するものを記述していきます。プロジェクトごとに異なりますが、私はここでシンプルなアイデアを記述しました。リンクトラッキングツールです。
URL帰属分析、これは実際に私自身が必要としているもので、どの動画がより多くのトラフィックをもたらすかなどを追跡し、それについてより詳細な分析を得るためのものです。これを得た方法は、アイデアをClaudeに説明して生成を依頼しました。文字通り「リンクトラッキングツールを作りたい、そのためのテキスト仕様を教えて」と言えば、同様のファイルが得られます。
すでにそれは済ませたので、別のClaude Codeを起動します。再度claudeと入力します。複数のコーディングエージェントを同時に実行することができます。これを選択して、「build-ideaを読んで、私が何を構築したいのか理解してください。まだコードは書かないでください」と伝えます。
はい、その答えが返ってきました。次のステップは、実際にNext.jsアプリを構築させることです。では作業に取り掛かって、build-ideaが作成したとおりに、Next.jsアプリ全体を構築してください。セットアップに焦点を当てましょう。MVPとして構築します。後で良くしていきます。
私はSuper Whisperを使ってこれを話しています。話すことはタイピングより速いんです。私は1分間に120単語という非常に速いタイピング速度ですが、話すのはおそらく1分間に200単語です。
Gitリポジトリの初期化
Claude Codeが今これを構築しています。Gitリポジトリを初期化する必要があります。最初のClaude Codeに戻って、/clearでチャットをリセットします。「プロジェクト内に新しいGitリポジトリを初期化するために必要なターミナルコマンドを教えてください。自分で実行したいです。よく考えてください。短く答えてください」と言います。
GitやGitHubの使い方がわからなくても、AIツールやコーディングエージェントに聞くことができます。それが今まさに私がやっていることです。ご覧のとおり、3つのコマンドだけです。git initでこのプロジェクトにGitリポジトリを初期化します。git add .ですべてを追加してステージングし、git commitで最初のコミットを実行します。完了しました。
次のステップはGitHubに接続することです。「次にGitHubリポジトリに接続する方法を教えてください。ステップバイステップの手順をください。自分で実行します」と伝えます。
このClaude Codeは何かを構築しているか、リスクの高いターミナルコマンドを実行するために私の許可が必要です。でもこちらのClaude Codeは、もう一方がコードを構築している間に、私が作業するのを手伝ってくれています。
GitHubに行きます。GitHubアカウントを持っていない場合、作成には60秒しかかからず、完全に無料です。github.com/newが新しいリポジトリを作成する方法です。「building-app-from-scratch」という名前にします。実際、公開にできます。なぜダメでしょうか。READMEは必要ありません、gitignoreも必要ありません、何も必要ありません。リポジトリを作成しましょう。
必要なのはこれだけです。ここのこれをコピーする必要があります。このURLをコピーします。Cursorに戻ります。リポジトリを作成しました。次は、git remote addです。何か問題がありますか。ああ、originを追加する必要があります。私のミスですね。
git remote add originとそれからリンク。完了です。そしてgit branch -mを実行します。メインブランチを設定します。masterという名前にすることもできます。本当にどちらでも構いません。git push -u、これはアップストリームトラッキングorigin mainです。これらすべてを理解する必要はありません。AIに方法を聞いて、それを実行するだけです。
ここに行ってリロードすると、build-idea.mdが表示されるはずです。ご覧のとおり、ローカルプロジェクトをGitHubに正常にプッシュできました。これでGitHub上にあり、バージョン管理が簡単になり、他のすべてのサイトに簡単にデプロイでき、どこでも作業できるようになります。
GitHubの使い方を知り、GitHubにプロジェクトをデプロイする方法を知ることは、ソフトウェアを構築する際に絶対に不可欠です。
Next.jsアプリケーションの構築
今やる必要があるのは、実際にこのClaude Codeのブロックを解除して構築させることです。いくつか問題が発生しています。「どのターミナルコマンドを実行すればいいか教えてください。自分で実行します。コーディングはあなたがすべて行ってください」と伝えます。
複数のClaude Codeを使っています。こちらはコンサルタントのような役割で、アドバイザーと名前を変更できます。そしてこちらは開発者です。複数のコーディングエージェントを使えるのは利点です。
既存のファイルを一時的に移動します。まあ、それについては気にしません。docsフォルダに入れるべきでしょう。新しいフォルダdocsを作成して、そこに移動します。これを実行する必要があります。create next-app、許可に問題が発生しました。
Reactコンパイラー、何を選択すればいいかわからない場合は、「何を選択すればいいですか」と言って、AIに聞いてください。これがおそらく初心者と上級者の最大の違いです。上級者はAIを使って自分自身をスキルアップさせます。初心者はAIの言うことを盲目的に従うだけです。
Reactコンパイラーは実験的です。それは使いたくありません。物事をシンプルに保つために、実証済みの技術スタックを使いたいです。また、おそらく包括的なgitignoreファイルを作成すべきでしょう。「build-ideaの仕様をカバーする包括的なgitignoreファイルを作成してください」と言います。プロジェクトのルートにbuild-ideaをタグ付けします。自動承認に切り替えます。
Next.jsプロジェクトが作成されています。プッシュする前に、明らかにgitignoreが必要です。envファイルのような機密情報をプッシュしないようにするためです。完了しました。ファイルを戻す必要があります。Supabaseをインストールする必要があります。
ターミナルをクリアします。Supabaseをインストールします。ここでの技術スタックは非常にシンプルです。すべてにNext.jsを使用し、データベースにはSupabaseを使用します。デプロイにはVercelを使用し、AI機能が必要な場合はOpen Routerを使用します。
完了したと言います。すべて正常に実行されたか確認してください。そして、「MDファイルには/docsを選択しました。短く答えてください」と伝えます。「よく考えてください。短く答えてください」は単なるプロンプティングのトリックではありません。実際にClaudeモデルが使用する推論努力に影響を与えます。だから私がこれを使っているのを見ることになります。
これを承認する必要があります。なぜ毎回承認する必要があるのかわかりません。Claudeフォルダを作成する必要があるかもしれません。そのためには、実際にPerplexityを使ってウェブを閲覧し、Claude Code用のsettings.jsonファイルの作成方法を調べます。許可されたコマンドのリストを与えられるようにして、毎回許可を求めないようにします。そしてAIエージェントに与えられる安全なターミナルコマンドの良いJSONファイルも教えてください。
Perplexityのディープリサーチが好きな理由は、深さとスピードの良いバランスだからです。OpenAIのディープリサーチやClaudeのディープリサーチを見ると、長すぎます。ご覧ください、20秒のようなものでした。美しいです。そしてすでに20のソースをレビューしています。OpenAIやAnthropicには非常に長いディープリサーチがあります。適応性がありません。だからPerplexityは速く作業するのに理想的です。
このファイルを作成する必要があります。委任します。この場所にファイルを作成してください。完了です。そしてGitHubに別のプッシュをします。gitignoreがありますよね。確認させてください。gitignoreはここにあります。
git add .、git commit「Next.jsアプリを作成」、git push。10〜15分ごとにgit commitを実行すべきです。元に戻せるようにするための良い習慣です。完了です。これを検索します。何でも構いません。これがうまくいかなければ手動で作成できます。
Supabaseのセットアップとデプロイ
このAIエージェントがアプリを構築しています。スキーマpage.tsxを作成しています。なぜすべて削除したのかわかりません。ああ、おそらく事前設定されていたんでしょう。そうですね、理にかなっています。デフォルトのNext.js作成からのもので、今構築されています。
MVPは非常にシンプルなコードベースです。ご覧のとおりです。こちらは何をしているんでしょうか。Claudeディレクトリを作成したいようです。このプロジェクト内に作成してください、MacBookのルートではなく。
それは私がこれを貼り付けたせいだと思います。そうですね、プロジェクトのルートに作成するよう伝えるべきでした。さあ、完了です。次にJSONファイルを作成する必要があります。基本構造、これが許可プロセスを停止します、安全なコマンドを保存します、リストを作成します。
それは私が欲しいものではありません。空のsettingsファイルを作成してください。JSONファイルを作成します。完了です。これを貼り付けます。Command Vを実行する必要があります、実際にはControl Vではありません。次の行にはControl Jを実行する必要があります。Shift+Enterではダメです。それだとメッセージが送信されてしまいます。
JSONファイルを更新して、これらすべてのコマンドが含まれるようにしてください。他は何も変更しないでください。これでClaude Codeとの作業が速くなります。毎回許可を求められることがなくなるからです。最適化して速く作業するのは常に良いことですが、リスクの高いコマンドをホワイトリストに入れないようにします。
おそらく再起動する必要があると思います。見てみましょう。要求し続けるかどうか確認します。次にVercelにインポートする必要があります。アドバイザーに「Vercelにデプロイする方法をステップバイステップで教えてください。よく考えてください。短く答えてください」と聞きます。
すでにVercelにログインしています。新しいプロジェクトを追加する必要があるでしょう。でも、Claude Codeが教えてくれることに従いましょう。これを初めてやる場合、その知識はないでしょうから。
別のgit commitをすべきだと言っています。「Claudeフォルダを作成」と言います。プッシュしました。重要なコミットではありませんが、追加しましょう。完了です。これを実行するたびに、GitHubに新しいコミットが表示されるはずです。ご覧のとおり、3つのコミットがあり、最新のものは今で、Claudeフォルダがあります。これは無視できるかもしれません。好みによります。
それからVercelに行って、サインアップしてログインし、プロジェクトリポジトリをインポートします。やってみましょう。新しいプロジェクトを追加します。GitHubリポジトリをインポートする必要があります。これは私のミスで、これです。インポートします。
フレームワーク、見てみましょう。リポジトリを選択します。環境変数を追加します。これらはSupabaseのものです。まだSupabaseをセットアップしていません。後でやります。スクリーンショットを撮ります。ここに貼り付けます。スクリーンショットを貼り付けるには、Command VではなくControl Vを実行する必要があります。
添付ファイルを確認してすべて良いことを確認し、次のステップを教えてください。短く答えてください。これらのAIエージェントは非常に冗長です。だから「短く答えてください」と言うのは一般的に良い習慣です。そして何が起こっているのか理解しようとするのも良いことです。
Next.jsを使うべきです、それが私たちの技術スタックです。ルートディレクトリ、おそらく良いでしょう、実際にはsrcかもしれません。良さそうです、ルートディレクトリ。環境変数を展開します。完了です。これら2つを追加すべきです。
まだSupabaseプロジェクトを作成していません。今は空のままにすべきですか。おそらくそうです。そうですね。スキップして、デプロイします。環境ファイルがないからです。はい、それらなしでデプロイします。
今GitHubからプルしています。Vercelプロジェクトの設定です。そうですね、常に変更できます。問題ありません。VercelはNext.jsの技術スタックにとって明らかに最も簡単な選択肢です。異なる技術スタックを使用している場合、RenderやHeroku、Netlify、Railwayなど、他のデプロイオプションがたくさんあります。
デプロイが失敗しました。ローカルで実行してみましょう。Supabaseプロジェクトを作成します。実行するにはSupabaseプロジェクトが必要なようです。Supabaseのセットアップなしで実行できるようにMVPを変更してください。後で追加します。コード行数は少ないほど良いです。これは私がよく使う別のプロンプトです。
その間に、実際にSupabaseのセットアップを行うことができます。遅らせる理由はありません。新しい組織をゼロから作成します。YouTube testingという名前にします。タイプはpersonalです。無料プランで始めます。これには有料プランは必要ありません。
プロジェクト名はapp-from-scratchです。データベースパスワードが必要です。非常に無責任なことができます。「24文字のランダムな文字列を生成するシンプルなPythonスクリプトを書いてください。ターミナルで実行するとすぐに生成され、プロジェクトのscriptsフォルダに入れてください」と言います。
ウェブ上のものを使うより速いですし、Pythonも少し学べるので、自分のジェネレーターを構築します。その間、conda listでconda環境を確認できます。conda activate testingを実行します。これはPython環境管理用です。
それからpython scripts/generate-secretを実行する必要があります。書き終わるのを待ちます。実行します。完了です。ランダム文字列のパスワードがここにあります。左側のパスワードマネージャーにも保存します。
基本的に、独自のパスワードジェネレーターを構築しただけです。非常にシンプルです。戻りましょう。入力します。十分強力です。リージョンはヨーロッパです。私にとっては良いです。生成します。明らかに、データベースパスワードは共有しません。何かする前に削除します。
次は何でしょうか。Supabaseのenvキーをコピーする必要があります。プロジェクト設定、API、APIキー、ここに常に隠れています。より良いサポートのための新しいAPIキー。公開可能キーが必要で、確認してみましょう。フルスクリーンショットを撮ります。貼り付けます。「実際にどのAPIキーが必要か教えてください。よく考えてください。短く答えてください」
すべては必要ないからです。後で認証を追加する場合、JWT秘密鍵なども必要になるかもしれません。ローカルストレージを使っています。実際にこれはおそらく参照できます。Supabaseを追加しているだけなので。でもローカルで実行してみましょう。なぜダメでしょうか。物事が機能するかテストしましょう。
localhost:3000、リンクトラック、ログイン、サインアップ。非常に悪いUIです。test、test。サインアップ。Gemini 3 Proを使って、build-ideaを読んで、フロントエンドのデザインとUIを更新して見栄えを良くします。他は何も変更しないでください。機能を追加または削除しないでください。デザインとレイアウトの改善だけに集中してください。
これは非常に重要です。Geminiは、わかりません、Cursorの中で多くのことを変更します。他は何も変更しないでください。感嘆符3つでもう一度繰り返します。これは、どのモデルが異なることに優れているかを知るのにも良いです。Gemini 3は今おそらくフロントエンドに最適です。
今、実際のカラムとテーブルの名前に合わせてコードを変更しています。クエリーRBCコールとクエリーグループ化を置き換えています。これはbuild-ideaとマスタープランの両方に従っていますか。短く答えてください。私たちが実際に構築しているものに従っているか確認したいだけです。AIエージェントは時々夢中になって、計画していなかったことをすることがあるからです。
元のファイルを参照するのは決して悪いことではありません。build-ideaは基本的にリンクトラッキング、URL帰属です。コンテンツクリエーターをやっている時、有料広告やSEOなどをやっている時、トラフィックがどこから来ているのか知りたいだけで、そのトラフィックについて何らかの分析が欲しいんです。
明らかに、このようなものはすでに存在しますが、私は自分のシンプルなソリューションを構築しようとしています。はい、両方のドキュメントに従っています。ダッシュボードは完全に構築されていますか。実際のNext.js JSコードを確認して、マスタープランを再度読んでください。変更は加えないでください。短く答えるだけです。
今、Vercelに再デプロイすべきだと思います。前回エラーがありました。デプロイメントを検査します。おそらく再デプロイです。再度デプロイしましょう。前回以降、たくさんのコメントがありました、ほとんどがマスターで追加されています。
アナリティクスを追加する必要があります。確認しましょう。「ここでlocalhostでSupabase接続がうまく機能しているか確認する方法を教えてください。ステップバイステップで、短く答えてください」フロントエンドをデザインし直しましたが、Supabaseログインはテストしていないからです。
これは正しいはずです。シンプルにnpm run devです。おそらくフロントエンドを再起動する必要があります。実際には必要ないかもしれませんが、いつでも。待って、envファイルを更新しましたか。はい、しました。やってみましょう。npm run dev。このURLに行きます。サインアップ。実際のメールとパスワードでアカウントを作成します。
私のメールを使います。パスワードはtest1234にできます。確認しましょう。アカウントを作成します。メールで何か受け取るべきですか。それが問題です。Supabase認証からメールを受け取りました。これを見せます。サインアップを確認してください。
このリンクをクリックするだけです。このサイトにリダイレクトされました。アクセストークン付きです。ログインすべきです。david.com、test1234。ダッシュボードに入ります。ああ、新しいダッシュボードです。検索にリダイレクトされるべきです。認証、ユーザー。Supabaseにユーザー認証があるか確認しましょう。
ユーザー。完了です。私のメールでユーザーがいます。素晴らしい。UUID。これは機能しました。ここにあります。リンクやクリックは作成していません。良いです。リンクを作成します。ダッシュボードにいます。これが/dashboardです。ログインやランディングページではなくなりました。
リンクを作成、ベースを確認します。宛先URLは/u/testingだけです。わかりません。YouTubeチャンネルにリダイレクトできます。貼り付けます。完了です。短縮します。/testing。ソースはTwitterです。完了です。
リンクを確認しましょう。これをリロードします。完了です。このリンクがあります。ユーザーID、元のURL、/testing、作成日時。素晴らしい。まだクリックはありません。テストできます。リンクがここにあります。入れましょう、エラー、見つかりません。でもこれはクリックを保存しましたか。いいえ。
おそらく問題ありません。まだそのページに到達していないと思います。ああ、そうです。まだリダイレクトを構築していません。良いエラーです。まだ構築していません。
でもリンクがデータベースに保存されているのが確認できます。これは非常に重要です。リフレッシュするたびに、localhostやCookieに保存されているだけでなく、実際にSupabaseに保存されているからです。実際のユーザーがいる場合、作成したリンクやトラッキングが失われないようにする必要があります。
それは重要です。認証も機能しています。ユーザーが保存されています。私のメールとそのパスワードでログインでき、機能します。次のステップはおそらくVercelの再デプロイです。まだエラーが出ていますか。ローカルで確認させてください。
これを停止します。クリアします。npm run buildで、どんなビルドエラーが出ているか確認します。Supabase URLが必要です。環境ファイルが必要です。すべてをコピーします。そうですね、とてもシンプルです。ここに追加すべきです。1つだけ使います。envファイルからコピーします。完了です。さらに追加します。
これが失敗している理由です。Supabaseを再実装したからです。本当に必要なんです。ここでデプロイします。失敗しません。失敗しないはずです。開発環境ではより寛容だからです。Next.jsは本番ビルドよりも寛容です。だから失敗していませんでした。そして実際にENVファイルがありましたが、Vercelにはありませんでした。
それが次のステップです。実行させて、公開URLを取得できます。チャットで皆さんに送ることもできるので、テストできます。見てみましょう。同じ問題でクラッシュしていません。良いです。おめでとうございます。新しいプロジェクトをデプロイしました。
カスタムドメインはありませんが、デフォルトドメインを提供してくれます。スクリーンショットを撮ります。アドバイザーに戻ります。貼り付けます。「マスタープランを再度読んでください。Vercelでのデプロイに成功しました。公開アクセス可能かテストする方法を教えてください。短く答えてください」
でも全体的に、ここで無料URLが取得できるはずです。デプロイメント、ここです。ドメインがあります。そうです、ドメインがここにあります。ログインできるか見てみましょう。広告ブロッカー拡張機能とBlock Originを無効にします。同じログインでログインできるか見てみましょう。
david.com、test1234。パスワードをほとんど忘れるところでした。素晴らしい。ログインできました。これがデプロイされて、同じURLです。同じデータベースを使用しているからです。良いです。成功です。
次に何をする必要があるか見てみましょう。おそらくアナリティクスを追加する必要がありますよね。「build-ideaとマスタープランを再度読んで、次のステップは何か教えてください。短く答えてください」
このプランをレビューすると、まだアナリティクスを実装していません。トラッキングテーブル、ソースごとのクリック数表示、シンプルなチャート。そうですね、まだ実装されていないアナリティクスを実装する必要があります。それが次です。
「マスターとビルドを読んで、アナリティクスのステップを実行してください。他は何も構築しないでください。コード行数は少ないほど良いです」git commitができて、自動的に再デプロイされるはずです。
Vercelが自動的に再デプロイするように設定されているかわかりません。確認させてください。Perplexityに新しいプロンプトを出します。「GitHubを通じてプロジェクトをデプロイした時、Vercelはmainブランチへの新しいコミットで自動的に再デプロイしますか、それともVersellプロジェクト内の設定で何か設定する必要がありますか。ウェブを閲覧してください。短く答えてください」
ディープリサーチは必要ありません。自動的であるべきです。これができました。同じターミナルを使うべきでしょう。git add .、git add .、git commit。完了です。アナリティクスフェーズ完了。これをコピーします。git push。クリアします。
GitHubに行きます。Vercelでこれを確認します。デプロイメントに行きます。新しいデプロイメントが作成されているのが見えるはずです。これがアナリティクスフェーズ完了です。前回27秒かかったので、同じくらいかかるはずです。そしてアクセスできるはずです。
もうlocalhostは必要ありません。本番環境で実行できます。なぜダメでしょうか。今は閉じられます。19秒です。エラーなしです。良いです。GitHubにプッシュしただけで、Vercelが自動的に再デプロイしました。「このステップをステップバイステップでテストする方法を教えてください。短く答えてください」
今はすべてを本番環境でテストしています。もうローカルではありません。すべてデプロイされています。ここに何かあります。リロードさせてください。これをクリックするかもしれません。どこにあるかわかりません。追加します。スーパーURLが必要です。
これらの公開サービスURL、リダイレクトURLがあります。ああ、認証リダイレクトURLがSupabaseにありません。すでにこれを実行しました。「SuperbaseのAL設定でリダイレクトURLにVersel URLを追加する必要がありますか」
これはやっていませんでした。ここではlocalhostだけを追加して、Versel URLは追加しませんでした。はい。これを追加する必要があります。適切なオフサイトURLを実装できるように。変更しましょう。これも変更します。追加するだけです。
リダイレクト。完了です。コールバック、メール。Verselにはすでにsupabase環境があります。次は何ですか。デプロイされたURLで追加したアナリティクスを実際にテストするにはどうすればいいですか。シークレットタブで開きます。
テストすべきですね。このリンクがあります。シークレットタブを開きましょう。貼り付けます。見つかりません。まだ見つかりません。スクリーンショットを撮りましょう。リダイレクト機能がまだ機能していないようです。
「マスタープランを再度読んで、コードを再度確認してください。怠けないでください。実際にすべてのファイルを完全に読んで、リダイレクトが完全かつ適切に実装されているかどうか教えてください。よく考えてください。短く答えてください」
待って、間違って送ってしまいました。これをコピーする必要があります。エスケープします。完了です。上矢印。ここに貼り付けます。すべて一緒に送ります。スクリーンショットを含めたかわかりません。待って。そうです、スクリーンショットが削除されます。残念です。
これはClaude Codeがまだ追加していない機能の1つです。以前のメッセージに戻ると、添付されたスクリーンショットは一緒に送られません。これを送りましょう。
認証は完了しています。最初から、これら2つのClaude Codeインスタンスをリセットしていません。同じものを使っていますが、build-ideaとマスタープランをタグ付けしている理由は、時々新しいコンテキストで気が散ることがあるからです。何を構築しているか思い出させ、どの段階にいるか尋ねるためです。
Claude Codeは問題を見つけたと言っています。コードは正しいですが、Versellがパブリック読み取りをブロックしています。リンクステーブルは許可だけです。このポリシーを修正してください。SQLだけです。これをコピーしましょう。
次の5〜10分で終わらせる必要があります。後で思い出させてください。Supabaseに戻ります。SQLエディター。完了です。新しいスラック。これを作成しましょう。これを削除します。新しいのを配置します。テストしましょう。
アプリに戻ります、リンクトラック。これをコピーします。リダイレクト。機能しました。YouTubeチャンネルにリダイレクトされました。素晴らしい。今機能しています。クリックが追跡されていますか。クリックが追跡されています。
URL、ソース、リンクID、タイムスタンプ、公開を確認します。幸運なことにここにIPアドレスはありません。ここで身元がバレるのが怖かったです。幸運なことに、それほど多くは追跡していません。良いです。リンク。
機能しています。Supabaseのクリックステーブルで確認できます。良いです。これは正しい方向への大きな一歩です。アナリティクスが見られますか。グラフがここにあります。Twitter。いいですね。
別のソースを確認できるかもしれません。これをコピーして、YouTubeや、基本的にトラフィックソースはSEOのようなものに変更できます。試してみましょう。明らかに同じサイトにリダイレクトされます、そのように設定されているからです。
でもSEOが見えるはずです。完了です。今SEOです。でも、再度実行したり、実際にこれをコピーしてTwitterに戻れば、帰属が得られるはずです。ご覧ください、今Twitterです。
まだ派手なチャートはありませんが、機能しています。何が残っているか見てみましょう。コア機能は完了したと思います。認証があります。でも完全な認証は完了していますか。それが問題です。
認証がSupabase内、プロジェクト内で完全かつ適切にセットアップされていますか。怠けないでください。すべてのファイルを再度読んでください。よく考えてください。短く答えてください。2つのClaude Codeを使うことの欠点は、時々同じコンテキストを持たないことです。だからコードを読むように伝える必要があります。それが真実のソースだからです。
まだデプロイしていないものはありますか。ああ、でもGeminiが選んだこのUIスタイルが好きです。このアイデアに本当に適しています。ほぼ正しいです。Mos制限、確認は実際にまだログインしていません。これはMVPにとって大きな問題ではありません。
基本的なクライアントセッションは適切に持続しないかもしれません。MVPには問題ありません。オフ状態セッションが期限切れになります。メールを確認します。確認メールがなぜ問題なのでしょうか。ボットやスパムを防ぐ良いステップだと思います。短く答えてください。
おそらくここでClaude Codeに同意しません。正しく設定されていればテストの準備ができています。Versel URLですべてを本番環境でテストしています。master-plan.mdとbuild-idea.mdの両方を読む必要があります。両方のマークダウンファイルを完全に読んで、すべてを実装したか、他に何か足りないものがあるか教えてください。
コアは完了したと思います。セキュリティには良いです。サインアップ後、コードはすぐにダッシュボードを開始します。それを変更するということですね。何を提案しますか。別のページ、ランディングページ、またはログインページにリダイレクトするよう変更することを提案しますか。ログインです。
正確にどこを変更する必要がありますか。短く答えてください。すべてを確認しています。わかりません、VerselはVersailです。すごいですね。サインアップ後のリダイレクト、ログインに変更します。はい、これを変更してください。
非常にシンプルな変更です。理にかなっていますよね。メール確認後、/loginに行くべきです。ログインしていないからです。/dashboardに行くと、エラーが出るか、ホームページにリダイレクトされるだけです。余計な摩擦です。
それからpage.tsxにいくつかのパラメータを追加しています。それが何を変更するかわかりません。見てみましょう。異なるテキストを追加するだけです。確認メッセージをチェックします。簡単なオンボーディングのためだけです。良いですね。これをプッシュしましょう。
git add .、git commit「メール確認後のリダイレクトを変更」。git push。完了です。新しいVerselデプロイメントがここで修正されます。何が起こっているんでしょうか。
Claude Codeがすべてが正しく設定されているか詳細にチェックしています。デプロイするためにプッシュします。良いです。ここでエラーが出ています。ローカルで確認しましょう。npm run build。このエラーを確認します。コピーします。
同じです。すべてをコピーします。ログと言います。貼り付けます。ログ。エラーが出ています。よく考えてください。何が原因ですか。クリーンで最小限の修正を実装してください。短く答えてください。
おそらく明白な何かでしょう。ログインを変更しました。読んでみます。もっと読みます。ログインページでエラーに遭遇しました。/loginビルドを終了します。すべて実装されています。デモフェーズの準備ができています。すべてやりました。
実際にはこのClaude Codeに貼り付けるべきでした。再度確認しましょう。クリア、アプリエラー。ターミナルでapp矢印を実行すると、以前のコマンドが取得できます。時間を節約できます。良いです。
git、git add .、git commit「ビルドエラーを修正」。これらのシンプルな修正について、コミットメッセージをさらに詳しく説明する必要はないと思います。別のプッシュです。Verselが通って、完全なアプリが完成することを願いましょう。
Supabaseデータベース、認証セットアップ、リンク帰属、そしてトラフィックの分割がどこから来ているかを示す素敵な棒グラフがあります。明らかに複数作成できます。Twitterの宛先URL用に1つ作成できて、スラック、Twitter短縮できます。完了です。このスラグへのトラフィックを追跡して、どうなるか見られます。
より詳細なアナリティクスが必要なら、明らかにチャートやグラフを追加できますが、MVPにはこれで十分です。デプロイされているので、潜在的なクライアント、友人、家族に送って、テストしてもらい、エラーを見つけてもらうことができます。
何ヶ月もかけて完璧にしようとするよりも、それがはるかに重要です。多くの人がデプロイされたアプリに到達する前に何ヶ月もかかるのを見ます。ここでは約60分でこれを実行できたことがわかります。完全にデプロイされた公開アプリで、認証が機能していて、数百人に安全に送ることができます。
デプロイされました。今、誰かがサインアップすると、ランディングページに行きます。最新のClaude更新を確認するには、グローバルターミナルでsudo claude updateを実行する必要があります。パスワードを入力します。明らかにこれは公開しません。
最新バージョンを持っています。確認しましょう。不正確なことを話したくないからです。完了です。検索、最新10バージョンのClaude Codeの主な変更点は何か教えてください。完了です。短く答えてください。実際にディープリサーチでもいいです、なぜダメでしょうか。
LSPサポート、クリック可能な画像リンク、良いです。画像を貼り付ける時、例えばこのスクリーンショットを撮って貼り付けると、UIがはるかに良くなりました。以前は少し煩わしかったです。今はこれができて、クリックできます。私のブレースのとても良い品質です。
プロの提案のためのエンターキー、より多くのMCPのもの、メモリ改善が3倍。つまり、多くの変更を加えています。より最適化され、使いやすくなったと感じます。それが主な要約です。より最適化され、使いやすくなった感じがします。
何が起こっているかわかりません。画像があります。次は何ですか、短く。他は何もしないでください。UIを確認しましょう。
ご覧のとおり、UIが改善されました。戻ってみましょう。完了です。「でもこれは他のすべてのバイブコーディングアプリのように見えます。個性を与えてください。最近それほど人気がないけれど、それでも非常にプロフェッショナルでクリーンに見える特定のデザインスタイルを選んでください」見てみましょう。
Supabaseが作成されました。ここに別のClaude Codeアドバイザーがあります。リンクには、公開可能キーとプロジェクトURLが必要です。まずenvがあるか確認しましょう。いいえ、ありません。envファイルを作成します。新しいファイルenv。完了です。
まず公開可能キー、anonキーが必要です。取得しましょう。ここにあります。コピーします。完了です。次は何ですか。プロジェクトURL。どこで見つけられるか見てみましょう。プロジェクトID。一般設定を見つけます。一般、これですか。これがプロジェクトURLですか、と聞いてみましょう。
確認を恥じるべきではありません。多くのエラーを防ぐ方法だからです。完全に正しくはありません、プレス。完了です。あります。貼り付けます。完了です。オプションのサイド、秘密鍵は今のところ。今は秘密鍵は必要ありません。
開発者に戻ります。「加えたすべての変更を元に戻してください。すでにenvファイルをセットアップしたからです」envファイルをプロジェクトのルート、ルート構造内に作成しました。
Superbaseプロジェクトをセットアップしました。だからもうローカルは必要ありません。Supabaseを削除して追加し直した変更を元に戻してください。深呼吸して、シニア開発者のように進めてください。今はすべて削除したからです。
いくつかエラーが出ています。興味深いです。スクリーンショットを撮ります。完了です。貼り付けます。いくつかエラーが出ています。これが何か分析して、クリーンで最小限の修正を実装してください。コンテキストとしてスクリーンショットを追加しています。
Gemini 3 Proを使ってCursorエージェントでフロントエンドを再デザインしています。開発者Claude Codeが進めてSupabaseを再実装しています。実際に別のコミットをすべきでしょう。git add .、完了です。すべてステージングします。git commit「フロントエンド再デザイン」。git push。
もっとコミットをする必要があります。もっとすべきでした。以前はこれをAIに委任していましたが、必要ないです。自分でやる方が速いです。ここで、まだステージングされていない変更されたファイルが確認できます。見られます。
見てください、このUIが好きです。このデザインが好きです。非常にユニークに見えます。このUIが好きです。これが再実装されています。別のファイルを作成します、別のdocs、マスタープランを作成します。
これは私たちがする必要があるすべてのことの概要です。アドバイザーに今読ませます。マスタープランを読んでください。完了です。Supabaseテーブル作成の実行を手伝ってください。また、他のファイルを再度読むよう思い出させるべきです。build-ideaも再度読んでください。
テーブル作成、正確に何をすべきか、なぜかを教えてください。短く答えてください。おそらく左サイドバーは閉じられます。フロントエンド再デザインが完了したからです。今はGeminiは必要ありません。一時停止できます。これが完了したか見てみましょう。Supabaseに戻しました。
これをコピーします。git commitメッセージとして使います。Supabaseを再実装しました。完了です。git push。何か問題が起きた場合、最後のコミットに戻すだけです。だから10〜15分ごとにコミットすることが非常に重要です。
仕様に基づいて、2つのテーブルが必要です。ユーザーはSupabaseが自動的に、SQLエディターと新しいクエリです。正確に必要なことを教えてくれています。左側のSQLエディター、拡大して見やすくします。
このSQLクエリを実行する必要があります。リンクステーブル、クリックステーブル。これは本当にbuild-ideaによります。どのテーブルが必要かです。SuperbaseはPostgreSQLです。非常に古典的な技術スタック、実験的なものは何もありません。実行しましょう。
新しいプロジェクトなので心配する必要はありません。通常、SQLクエリを実行する場合、何を実行するか非常に注意すべきです。でもこれは新しいプロジェクトです。害はありません。クリックステーブルがここに見えます。リンクステーブルがここに見えます。カラムを見てみましょう。
ID、リンクID、ソースタグ、タイムスタンプ、国、リファー、リンクID、ユーザーID、元のURL、スラグ、作成日時。かなりミニマルです。プロジェクトを肥大化させたくありません。シンプルに保ちたいです。
完了、リンクが作成されました。良い習慣をします。「すべてが正常に作成されたことを確認するシンプルなSQLクエリを教えてください。結果をコピーして渡します。短く答えてください」
確認したいからです。Claude Codeはすべてのファイルを見られますが、Supabaseは見られません。明らかにSupabaseのMCPサーバーがありますが、AIエージェントにデータベースアクセスを与えることは絶対にお勧めしません。開発データベースならまだしも、本番データベースに変更する一歩手前になってしまうので難しいです。
データベースを削除したり、テーブルを削除したり、多くの害を与えられます。このようなことには、手動で行って、AIに指示を求める方が良いです。保護の層を1つ持つべきです。
このSQLクエリをコピーしましょう。これは確認のためだけです。左側のSQLエディターに戻ります。完了です。新しいスニペット。実行しましょう。マークダウンとしてコピー、エクスポートします。結果だけ、XMLタグです。完了です。
結果を貼り付けます。これはエージェントが何を話しているか見やすくするためのプロのエンジニアリングのヒントです。結果がここにあります。良いか悪いか教えてください。短く答えてください。
良さそうです。2つのテーブル、カラム、データ型があります。実際にここに文書化されているはずです。そうです、これがコピーしたものです。スキーマSQLです。すべて良好です。
schema.sqlと完全に一致していますか。短く答えてください。三重チェックです。誰も傷つけません。ここに何があるか見てみましょう。Supabaseに戻します。次のステップは認証です。マスタープランを読んで、オフステップの実装を手伝ってください。
正確に何をする必要があるか、なぜかを教えてください。フロントエンドが動いています。ここにあります。でもSupabaseを通じた認証を実装する必要があります。そうしないと安全ではありません。
実際に中断して、矢印キーで上に行って編集します。文字列は短く、と入力するのを忘れました。完璧ではありません、2つの違い、カラム名クリック、そうです。SQLファイルを更新して、実際にSupabaseで作成したものと一致させてください。他は何も変更しないでください。
Supabaseを変更するより簡単です。Claude Codeはセッションをどうしていますか。良いです。Anthropicにフィードバックを送ります。すでに完了しています。Supabaseを設定する必要があります。認証プロバイダー、メールが有効になっていることを確認します。やってみましょう。
Supabase認証。プロバイダーはどこですか。左側だと思います。メール通知。ああ、ここです、サインインプロバイダー。少し隠れています。メールを見つける必要があります。あります。有効になっています。良いです。認証URL設定をセットアップします。
URL設定。Supabaseを長時間使っていて、このUIに何時間もいたとしても、混乱することがあります。だから、AIにガイドを求めることを恥じるべきではありません。サイトURL。
テストのためにlocalhostを許可する必要があります。ここにあります。ここです。リダイレクトURL。このワイルドカードURLを追加するだけです。完了です。保存します。それがフローです。
スクリーンショットを撮ります。コピー。貼り付け。添付ファイルを確認してすべて良いことを確認します。短く答えてください。完了です。これが更新されました。別のgit pushをします。git add .、git commit「Supabaseテーブルを作成」。git push。
現実的には、プロジェクト内でこれらの変更を行っていません。Supabase内で行われています。でもSQLファイルを変更しました。これはドキュメント用だけです。何もしません。Supabaseがどのようにセットアップされているかを文書化するためだけです。
そうしないと、プロジェクトで作業する人がSupabaseがどのようにセットアップされているか知ることができず、非常に複雑になります。これは将来物事を簡単にするためだけです。設定は良さそうです。問題は、get click stat関数がありません。ダッシュボードが使用しています。
新しいスキーマに実際に従うようにコードを変更してください。Supabaseを変更するより簡単です。他は何も。変更するコード行数は少ないほど良いです。
AIでは、何を構築するか、どのビジネスモデルを選ぶかがすべてです。多くの人が、時代遅れになっている、飽和している、競争が激しい、初期予算が高すぎる、十分な時間の自由を与えないビジネスモデルを選びます。
正しいビジネスモデルを選ぶことは、AIで成功するかどうかに影響を与える最大の決定です。実際、それについて動画全体を作りました。ここにリンクします。自分のAIビジネスを始めたい場合、この動画を見てください。
コメント