Clawdbot がヒットした後、私は抵抗できませんでした。バイブコーディングを実践した経験がまったくない文系の学生です。

著者: Denise I Biteye コンテンツチーム、Bbo I XHunt オペレーションチーム

最近、X でみんなが Clawdbot を使って AI エージェントでいろいろなことを行っているのを見て、文系の学生も「雰囲気」的にコードで遊べるということに突然気づいたので、基礎ゼロの実践的なプロジェクトを始めました。

Vibe Coding は、「要件をコードとして」という新しいパラダイムとして捉えられており、「プログラマー以外の人でもツールを構築できるようになる」と期待されています。

しかし、本当の疑問が残ります。技術的な障壁が低くなると、その技術を実際に実装する能力もそれに追随するのでしょうか?

この質問に答えるために、私はコーディング経験がまったくないユーザーとして、主流の Vibe コーディングツール 3 つを体験しました。

プロセスは決して順調ではありませんでした。落とし穴や挫折に遭遇し、何度もやり直さなければなりませんでした。しかし、まさにそのおかげで、問題が最も発生しやすい場所と、それを回避する方法を理解することができました。

この記事はツールの評価ではなく、認識と実践の真の記録です。

I. 概念の理解: Vibe コーディングとは何ですか?

これは、「コードを書かずに要件を提供するだけでよい」という新しい開発モデルです。

このコンセプトは、OpenAIの元共同創設者であるAndrej Karpathy氏によって最初に提案されました。彼は次のように述べています。

これは私がバイブコーディングと呼んでいる新しいプログラミング手法です。感覚（バイブス）に完全に身を委ね、効率が飛躍的に向上し、コードの存在さえ忘れてしまうのです。

Vibe Coding のモデルでは、あなたはもはや「建設作業員」ではなく、「製品マネージャー」、さらには「クライアント」のような存在になります。

あなたの仕事は、AIに正確に伝えることです。「ここに床から天井までの窓があり、あそこにプールがある家を建てたい。」

満足できない場合は、「何かおかしいので、もう一度変えさせてください」と言ってください。

これがバイブだ！

II. 落とし穴を避ける：バイブコーディングの安全基準

AIプログラミングに挑戦する前に、まずは「金庫」を確保する必要があります。多くの初心者は、AIと会話する際に、知らず知らずのうちに機密情報をAIに送信してしまい、非常に危険です。

1. 絶対に公開してはいけない3種類のデータ

APIキー：これは様々なプラットフォームで利用できる「プリペイドカード」のようなもので、漏洩するとクレジット限度額が瞬時に使い果たされてしまいます。
秘密鍵／ニーモニックフレーズ：絶対に、AIに送信したり、コードファイルに書き込んだりしないでください。漏洩した場合、オンチェーン資産は無価値になります。
クッキーデータ：一部のチュートリアルでは、ブラウザからクッキーを取得するプロセスを自動化する方法が紹介されていますが、クッキーにはログイン情報が含まれています。もし漏洩すると、他人があなたのTwitter、Discord、さらにはExchangeアカウントにパスワードなしでログインできてしまう可能性があります。

2. コア原則: 環境の分離、データの匿名化

API キーや機密情報をコードやヒントに直接書き込まないでください。

正しいアプローチは、「環境変数」を使用して、コードがキーの内容を直接読み取るのではなく、システムの変数名を読み取るようにすることです。

Windows システムの構成手順は次のとおりです。

キーボードで Win+S を押し、検索バーに「環境変数」と入力します。
新しい変数を作成する
変数名と変数値を入力して保存します。

macOS の設定手順は次のとおりです。

キーボードの Command + Space を押して、ターミナルを検索して開きます。
ポップアップの黒いボックスに、次のコマンドをコピーして貼り付け（必ず実際のキーに置き換えてください）、Enter キーを押します。
echo 'export CRYPTOHUNT_API_KEY="sk-xxxxxx キー"' >> ~/.zshrc
設定をすぐに有効にするには、入力を続けて Enter キーを押します: source ~/.zshrc
（オプション）成功を確認するには、「echo $CRYPTOHUNT_API_KEY」と入力します。画面にキーが表示されれば、設定は成功です。

III. 現実世界の（むしろ、不幸な）デブリーフィング：3つのツール、3つの経験

理論はここまでです。次は実践的な応用に移りましょう。最適なツールを見つけるために、主流のツールを3つテストしました。これらのツールを選んだ理由は、現在のバイブコーディングの3つの主流形式を代表しているからです。

Google AI Studio: 「プロトタイプを迅速に生成する」ための軽量なアプローチを表します。
Antigravity：「AIエージェント＋ローカルフルスタック開発」のエンジニアリングロードマップを表します。
Lovable: 「アプリケーションとしての対話」という抽象的なアプローチを表現します。

初心者が直接導入するのに最適なツールを知りたいだけなら、3番目のツールであるLovableまで飛ばしてください。回り道を避けたい場合は、このセクション全体をお読みになることをお勧めします。それでは、順番にレビューを始めましょう。

1. Google AIスタジオ

対象者: 個人開発者やスタートアップチームに適しています

エクスペリエンス:「スピード」と「無料」を重視し、AI のアイデアを数分で検証できます。

公式サイト: https://aistudio.google.com/apps

初めて使ったのはクリスマスの時でした。みんながサイバーパンク風のクリスマスツリーを作っていたので、試してみたんです。何気なくプロンプトを出すと、たった5分でとても美しい3Dページが生成されました。パーティクルがジェスチャーに合わせて流れ、エフェクトも非常に滑らかでした。

時代がどれだけ変わったかを実感します。

（昔、技術者が女の子を喜ばせるために徹夜で大量のコードを書き、それを長時間実行した後にハートマークがポップアップするのを思い出してみてください。これはかなりクールだと考えられていました。でも今は？Vibe Codingに任せれば、あっという間に最大の感情的価値を生み出すことができます。）

この成功談に勇気づけられ、私は「自信過剰」になり、真剣に取り組み始めました。それは、Cryptohunt API を使用して Twitter データダッシュボードを作成することでした。

自信満々で、APIドキュメントを入力してみました。最初は全てがスムーズに進みました。バックエンドのロジックは即座に動作し、データも正常に取得できました。「これで全て？」と思いました。

しかし、「フロントエンドでデータを美しく表示する」ように要求したとき、悪夢が始まりました。

チャートが表示されませんか？コードを修正する必要があります。
表示されていますが、完全には表示されていません。コードが再度変更され、インタラクションが壊れてしまいました。
インタラクションの問題は修正されましたか? API データが再び読み込まれなくなりました。

私は「バグを修正すると新しいバグが生まれる」という終わりのないサイクルに陥っていました。2日後、私は諦めました。

最終画像（AI がランダムなシンボルを描き始めました）。

私の経験のまとめ：Google AI Studioは、何でもできるものの、どれか一つに特化していない、いわば万能ツールです。クリエイティブなプロジェクトや1ページのデモ作成には最適です。しかし、フロントエンドとバックエンドの密接な連携（APIデータフローや複雑なフロントエンド画面など）となると、どうしても物足りなさを感じます。コードロジックを理解していないと、私のようにフロントエンドのプレゼンテーションで行き詰まってしまう可能性があります。

2. 反重力

ポジショニング: マルチモデル切り替えを統合したプロキシベースのフルスタック開発ツール。

機能: マルチモデルの切り替え、タスクの内訳、自動テスト

公式サイト： https://antigravity.google/

実際に使ってみると、ログイン機能のせいで、コードを書き始める前に諦めかけました。ウェブページを開くだけですぐに使えるツールがほとんどですが、アカウントとネットワーク環境の要件がかなり厳しいのです。

アカウントの制限は、現在のネットワークIPアドレスではなく、Googleアカウントに関連付けられた「国／地域」によって決まります。地域設定がサポートリストに含まれていない場合（例：中国本土、香港）、ログインはシステムによって拒否されます。地域変更のリクエストは何度も拒否されました。

このプロセス全体を経験した後、私はそれを一言で表現するしかありません。私は完全に麻痺していました。

3 つのアカウントが禁止され、環境を何度も切り替えた後、私は「邪悪な栽培」サイトにログインする方法を見つけました: Antigravity tools。

最初に、米国の IP アドレスを設定し、グローバル Tun モードを使用する必要があります。
反重力ツールをダウンロード
Twitterユーザーが共有したリンク: https://x.com/idoubicc/status/2004848130693759213
ダウンロードが完了したら、アカウントを追加して OAuth 認証を開始します。

4) 認証が成功すると、ログインページにリダイレクトされ、モデル割り当ても確認できます。

（リスク警告：Antigravity Toolsは、AntigravityモデルとClaude Codeなどのツールの統合を容易にするオープンソースプロジェクトです。ただし、Vibe Coding中は、潜在的なセキュリティリスクを軽減するために、資産ウォレットや重要なアカウントに使用されるコンピューターから動作環境を分離することをお勧めします。）

ツールの使い方を学んだ後、初心者にとって非常に重要なヒントを 2 つまとめました。

中国語言語パックをインストールします。左側の拡張機能バーで「中国語」を検索し、簡体字中国語言語パックをインストールしてソフトウェアを再起動します。この手順により、インターフェースが中国語に変更され、学習曲線が大幅に短縮されます。
「グローバルペルソナ」の挿入：Antigravityでは、AIが常に従わなければならない「グローバルルール」を設定できます。設定方法：右側の「ルール」アイコンをクリック→「+ワークスペース（ワークスペースルールの追加）」を選択し、「グローバルルールのヒント」を貼り付けます。これにより、中国語の使用が強制され、コード出力の品質が大幅に向上します。

しかし、ログインして基本的な設定を完了した後も、実際にコードを実行し始めると厳しい現実に直面しました。Google AI Studioのような即時プレビュー機能は提供されていませんでした。Node.jsやVS Codeといった付属のプレビューソフトウェアを複数ダウンロードするか、HTMLで結果を確認する必要がありました。さらに、大規模なモデルのレスポンスは明らかに遅く、要件を送信するたびに画面が回転し続けました。

しかし、Antigravityには本当に素晴らしい機能があります。それは自動テストです。コードを書き終えると、ビデオプレビューが起動し、まるで人間が操作しているかのようにウェブページ上でクリックしてロジックが動作するか確認します。AIが画面上でクリックする様子を見ていると、「未来はここにある」という畏敬の念を抱かざるを得ません。

私が試してもらったプロジェクトは、「暗号通貨のアルファシグナルキャッチャー。Cryptohunt APIを使ってTwitterのデータを監視し、ツイートからティックを自動的に取得し、人々が話題にしているトークンをカウントし、人気順に並べる。」というものでした。

現実は厳しい。コードの作成とテストを一生懸命サポートしてくれているように見えたにもかかわらず、API統合という核心部分で問題が発生しました。ローカルネットワーク環境の複雑さが原因か、AIがAPIドキュメントを誤解していたことが原因かはわかりませんが、データが全く接続されなかったのです。

デモ: シミュレーションデータの表示効果

ターミナルに赤いエラーメッセージが表示され、AIが「今回はきっとうまくいく」と錯覚しているのを見て、私は気づきました。フルスタック開発は素晴らしいものですが、ネットワークや環境のブラックボックス性のため、真に使えるツールを作るのは初心者にとって依然として非常に高いハードルです。これは、Antigravityが既に開発者であることを前提としているからです。

3. 愛すべき

ポジショニング: 「会話をアプリケーションとして」プラットフォーム

機能: ローカル環境の設定は不要、WYSIWYG (What You See Is What You Get)

公式サイト：https://lovable.dev/

Lovableを使ってみて、本当のクライアントとはどんな存在なのかを実感しました。支払いをするのはクライアントだけだからでしょうか？（ちなみに、Xianyuで15元で100クレジットを購入しましたが、プロジェクト終了後もまだ使い切っていません。）

Lovable では、コードを 1 行も変更せずに、Crypto Twitter を監視するための強力なツールである Crypto Pulse Twitter 監視ダッシュボードを実装しました。

はい、その通りです。今回ついに成功しました。

オンライントライアルはこちらからご利用いただけます: https://tweet-whisperer-dash.lovable.app/

「機能詳細」

A. パノラマデータとAIの概要

ホームページに入ると、最初に目にするのはコンテンツの「温度計」です。

リアルタイムデータカード：上部には、過去24時間の総ツイート数、総インタラクション数、アクティブなKOL数、市場センチメント指数が表示されます。具体的な詳細を見なくても、過去24時間のデータと比較することで、赤か緑かを見れば、今日の市場が恐怖感に陥っているのか、それとも貪欲さに陥っているのかが一目で分かります。
AIスマートサマリー：これは最も時間を節約できる機能です。このシステムにはGemini AIが統合されており、過去数時間の数千件のツイートを自動的に読み取り、市場サマリーを作成します。

B. トレンドレーダー

次の100倍コインを見逃したくないですか?

インテリジェントな分類: トレンドのトピックを自動的にフィルタリングし、トピック、プロジェクト、トークン、KOL に分類します。
市場トレンドインジケーター：各タグの横には、24時間の言及率の変化（増加/減少）が表示されます。議論が活発化しているところには、チャンスがあります。

C. インテリジェントな情報フロー

乱雑なタイムラインとはお別れして、整理された 4 つのタブをご紹介します。

ハイライト: AI によって二次フィルタリングされ、意味のないスパムが排除された価値の高いコンテンツ。
トレンド: エンゲージメント (いいね + シェア) が最も高い最も人気のあるツイート。
インフルエンサー: 業界のリーダー (Elon Musk、Vitalik など、100,000 人以上のフォロワーを持つ) のリアルタイム投稿のみを表示します。
最新情報: CT 関連アカウントの最新のツイートを入手します。
*ユーザーエクスペリエンスの詳細: 地域 (英語圏/中国語圏) によるフィルタリングをサポートし、カードをクリックすると元の Twitter 投稿に直接ジャンプします。

「使用上の注意」現在、個人のAPIキーを使用しているため、データの返却にはAPIクレジットが消費され、クォータ制限があります。お早めにお試しいただくことをお勧めします。

IV. Cryptohunt API 実用ガイド

Vibeでのコーディング作業では、コストパフォーマンスに優れたCryptohuntデータベースを選択しました。コーディングプロセスを完全にマスターしたわけではありませんが、APIについては十分に理解できたので、ここでガイドを書きたいと思います。

公式リンク: https://pro.cryptohunt.ai/

1. 精密給餌

多くの初心者は、何万語もの API ドキュメントを AI に投げつけるだけで、AI は圧倒されてしまいます。

誤った例: これは API ドキュメントであり、自分で理解することができます。
正しい例：トークン監視機能を実装したいと考えています。Cryptohunt APIドキュメントのpost/tweet/mention_tweetsのセクションをご覧ください。直近1時間のデータを取得する方法を教えてください。

プロンプトの例: 「/tweet/mention_tweets API を呼び出して、ティッカー「SOL」のツイートを検索してください。制限時間は過去 24 時間です。エンゲージメント (いいね + リツイート) が最も高い上位 5 件のツイートをフィルターして、SOL に対するユーザーの感想を確認してください。」

2. デバッグツール

Vibeでコーディング中に最もイライラする状況は、ボタンをクリックしても画面に何も表示されないことです。この時点で、初心者はしばしば「AIコードが間違っているのか？ネットワークが遅いのか？それともAPIがダウンしているのか？」と自問自答し始めます。

これにより、API 使用状況の更新を有効にすることができます。

記録にポイントが減点されたと表示されています。これはAPI呼び出しが成功したことを示しています。データがコンピューターに正常に送信されました。これはフロントエンドの表示の問題です。AIに「データは受信されましたが、画面に表示されません。レンダリングコードを確認してください」と伝えてください。
記録が全くない：これはリクエストが送信されていないことを意味します！つまり、ロジック/ネットワークの問題です。AIに「ボタンをクリックしても何も起こりません。リクエストが送信されていません。クリックイベントを確認してください。」と伝えてください。

AIに結論を入力するだけで、AIは問題をはるかに速く解決します。バイブコーディングのプロセスにおいて、真のエネルギー消費はもはやコードを書くのではなく、問題がどこにあるのかを特定することにあります。

複雑な構文と実装の詳細を AI に委任すると、開発の焦点は情報の制御に戻ります。

そのため、バイブコーディングの最終的な目標はコードではなくデータであるとよく言われます。

V. 結論：バイブコーディングの2つのコアテクニックをマスターする

Google AI Studio での「試運転」、Antigravity の「拷問」、そして Lovable の「爆発」を経て、ようやく理解できました。ツールは単なる手の中の剣であり、Vibe は心の中にある道なのです。

Vibe Coding を試すときは、次の 2 つの重要なポイントを覚えておいてください。これらはどのコードよりも重要です。

1. 夢を描こう: 想像力こそがあなたの唯一の「限界」です。

バイブコーディングの時代において、技術的な障壁は崩壊しました。以前はコードを書けないのではないかという不安からツールの開発をためらっていましたが、今では実践的な経験によって、ロジックさえしっかりしていればAIでも書けることが証明されています。
単なる「レンガ職人」ではなく、「建築家」になりましょう。これまで想像もできなかったような製品を、思い切って構想してみましょう。ネットワークデータ全体を監視するレーダーでしょうか？それとも、自動裁定取引ロボットでしょうか？必要なのは、頭の中にある漠然とした「願望」を、明確な「設計図」へと変えることです。

2. 「プロンプトワードはソースコードです。」と表示されます。

多くの初心者が失敗するのは、AI が愚かだからではなく、AI が「丁寧すぎる」または「曖昧すぎる」からです。

曖昧な需要 = 曖昧な結果

曖昧さを排除する: AI に「ユーザーフレンドリーな Web サイトを作ってください」と指示しないでください。(AI: 「ユーザーフレンドリー」とはどういう意味ですか?)
精度を重視します。ダッシュボードを作成するときのように、「上部に 4 つのデータカード、中央にこの API、右側に AI 生成の概要があるダークモードのダッシュボードが必要です...」と言います。

忘れないでください。あなたは今、クライアントなのです。クライアントの権限は、明確に定義されたニーズと辛抱強いフィードバックから生まれます。AIが間違いを犯しても、自分を責める必要はありません。「違います。やり直してください。Aが欲しいんです。Bではありません。」と伝えれば良いのです。

ここまで読んできた方は、おそらくすでに Vibe Coding を使用してツールを作成する能力を身に付けているはずです。

迷わずに

すぐにあなたのバイブをコーディングに変えましょう。