7,899 文字
クラインは最も過小評価されているAIコードエディターです。このビデオでは、あなたが完全な初心者であっても、クラインを使って望むアプリを構築する方法をお見せします。
そもそもクラインとは何でしょうか？クラインはコードの作成と管理を支援するオープンソースのAIエージェントです。また、非常にカスタマイズ性が高いのが特徴です。好きなモデルを好きなコードエディターで、好きなプロンプトと組み合わせて使うことができます。さらにクラインのカスタムフォークを作成し、独自のバージョンを構築することも可能です。また後ほど、クラインがCursorやWindsurfなどの代替品とどのように比較されるか、そしてどれを使うべきかについても説明します。ぜひ最後までご覧ください。
ちなみに私はVectoralの構築を手伝ってくれるバックエンド開発者を募集しています。5年以上の経験をお持ちの方は、ぜひご応募ください。リンクはビデオの下にあります。
さて、「デビッド、クラインはCursor、Windsurf、Boldなどの他のAIコーディングアプリとどう違うの？」と思われるかもしれません。まず、これは単体のアプリではありません。VSCodeの拡張機能であり、VSCodeをベースにしたどのコードエディターでも使用できます。ちなみにCursorもWindsurfもVSCodeベースです。しかし最大の違いは、クラインが完全にオープンソースであることです。つまり、その仕組みを正確に見ることができます。内部のプロンプトを見て、自分のバージョンのクラインをフォークして構築したり、改善したり、メインリポジトリにプルリクエストを行ったりできます。クラインがオープンソースであることで、多くの可能性が広がります。
さらに、クラインは常に進化しています。過去数ヶ月で、それを非常に強力にする複数の主要なアップデートをリリースしました。これらの機能には、YOLOモード、MCPマーケットプレイス、計画と実行のサイクル、ローカルブラウザの自動化などがあります。クラインが世界で最も急速に成長しているAIコーディングツールの一つである理由があるのです。そしてこの後、それがいかに強力であるかを実際にお見せします。
さて、クラインを始めるには、まずVSCodeをインストールする必要があります。Googleで「VSCode download」と検索して最初のリンクをクリックします。そして自分のオペレーティングシステムを選択します。私はMacなのでそれを選びます。これはすぐにダウンロードできるはずです。はい、VSCodeがインストールされました。もし何か理由で詰まってしまった場合は、ChatGPTに行ってスクリーンショットを送り、何が起きているか説明してください。
2025年の今、アプリのインストールや単純なエラーで立ち止まる必要はありません。特にO3のようなAIは、遭遇するエラーの99%を解決できます。だから、技術的な知識がない人間だという言い訳をしないでください。誰でもできることです。
VSCodeを手に入れたので、次はクラインを追加する必要があります。これは拡張機能です。左側のこのボタンをクリックすると拡張機能が開きますので、「client」と入力します。約130万ダウンロードがあるはずです。それをクリックしてインストールをクリックします。パブリッシャーを信頼してインストールします。クラインのインストールが完了すると、左側にクラインのロゴが付いた新しいボタンが表示されるはずです。これがクラインとの対話方法です。
クラインを使う際、主に2つの選択肢があります。無料で始めるか、または自分のAPIキーを使用してClaude 3.7のようなより強力なモデルにアクセスするかです。私は後者をお勧めします。「自分のAPIキーを使用する」をクリックしましょう。見ての通り、クラインでは、OpenRouter、Anthropic、Amazon Bedrockなど、複数の異なるAPIプロバイダーを使用できます。
しかし正直なところ、OpenRouterを使用するだけで十分です。なぜならそれはすべての異なるAIモデルを提供しているからです。OpenRouterに行き、右上でアカウントを作成しましょう。これは非常に簡単で、20秒ほどで完了します。次に「Credits」をクリックします。ここで5ドルの無料クレジットがある場合があります。このプロモーションがまだ続いているかわかりませんが、もしなければ、数ドルをチャージしてください。そうすれば、クラインの可能性を最大限に引き出せます。
さて、ここに数ドルがある場合は、再び右上をクリックして「Keys」をクリックします。ここで「Create key」をクリックします。「client API key」と名付けて作成し、これをコピーします。APIキーは誰とも共有しないでください。パスワードのように扱ってください。コピーして、VSCodeに戻り、OpenRouter APIキーを貼り付けます。よし！
見ての通り、クラインは新しいアップデートをリリースしたばかりです。改善点を見てみましょう。最初の変更点は、Geminiのキャッシングと透明性の向上です。基本的に、クラインはGeminiを使用する際により多くのトークンをキャッシュし、さらに多くのお金を節約します。
このクラインアップデートのもう一つの大きな変更点は、拡張チェックポイントによる柔軟性の向上です。タスクワークフロー全体でより多くのチェックポイントが追加されたので、異なるポイントでリセットできるようになりました。この機能は興味深いですね。「/new rule」と入力するだけで、プロジェクト標準を簡単に生成できるようになりました。
このコマンドを使用すると、クラインがプロジェクト全体のルールセット（カーソルルールファイルなど）を自律的に生成します。これはかなり印象的です。この変更ログ全体をビデオの下にリンクしておきます。クラインがどれだけ人気を集めているかをお伝えするために、OpenRouterのどのAIモデルでも常に1位です。これはGPT-4.1ですが、ちなみに私のスタートアップVectalは、先週6400万トークンを使用して17位です。だから、クラインは本当に最も過小評価されているAIコードエディターなのです。
さて、VSCodeに戻り、左上の「ファイル」をクリックし、「フォルダを開く」を選択して、クラインを使いたいフォルダを選択しましょう。私は「code」という名前の空のフォルダを作成したので、それを開きます。
まず何よりも、始める前に「計画モード」に切り替えてください。これはクラインで最大の結果を得るために不可欠です。なぜなら、まずプロジェクトの明確な計画を作成し、それが堅実な計画であると両者が合意した後でのみ、実行を開始するからです。「計画」をクリックしましょう。
クラインのパワーを示すために、チェスゲームを一発で作りたいと思います。これが私のプロンプトです：「シンプルなチェスゲームを作りたい。このための計画を立ててください。できるだけ少ないコードでやりたいです。」送信しましょう。
見ての通り、クラインでは、入出力されるトークン数や、モデルに基づいてコンテキストウィンドウをどれだけ使用しているかを簡単に確認できます。現在、Claude 3.7 Sonnetを使用しており、20万トークンのコンテキストウィンドウがあります。最初のプロンプトとレスポンスで12,000が埋まったことが簡単に分かります。これにより、新しいチャットを開始するべきか、現在のチャットでどれだけのコンテキストを提供したかについて、精神的な明快さが得られます。
さらに、APIコストも確認できます。これはVindsurfやCursorと比べて、クラインの即座に利点となります。それらはこれほどの透明性を持っていません。
さて、レスポンスを見てみましょう。「計画を作成する必要があります。計画モードにいるので、情報を収集し、質問をすることに焦点を当てるべきです」と書いていることがわかります。つまり、計画モードにいることを認識しており、変更を加えることはできません。
そして、チェスゲームのシンプルな実装計画を設計し、視覚的なグラフを含むアーキテクチャの概要も作成しました。驚きました！ゲームのコアコンポーネントを概説し、コードを最小限に抑え、開発フェーズを作成しています。悪くありません。
実行モードに切り替える前に、チェックボックスをクリックして、YOLOモード（自動承認とも呼ばれる）をオンにしましょう。これにより、自動承認のメニューが開きます。そこには、自動承認によってクラインが許可なしに実行できるアクションが記載されています。これにより、クラインはさらに自律的になります。もちろん、これにはリスクも伴いますが、真のバイブコーダーになりたいなら、見かけるYOLOモードや自動承認をすべてオンにする必要があります。
プロジェクトファイルの読み取り、編集、保存コマンドの実行が可能になり、少し冒険したい場合は、すべてのコマンドの実行も可能ですが、多くの方にはお勧めしません。また、ブラウザの使用も可能にしましょう。MCPサーバーを追加したい場合は、これも有効にできます。クラインにさまざまなMCPサーバーを追加する方法についてのビデオを作って欲しい場合は、コメントしてください。十分な人数が希望すれば、実現します。
最後に、クラインが承認を求める前に自律的に実行できるリクエストの最大数を設定できます。デフォルトでは20ですが、15くらい、10から15の範囲がおすすめです。設定に満足したら、自動承認をもう一度クリックして折りたたんでください。
これで自動承認がオンになりました。実行モード（今すぐ切り替えるべきです）では、クラインは自ら作業を始め、計画モードで列挙したことをすべて実行します。見ての通り、クラインはすでにチェスゲームに取り組んでいます。ここでチャット内の新しいチェックポイントが見えます。各変更の後、または実際には各変更の前に、チェックポイントが表示されます。もし何かが気に入ったが次のステップが気に入らない場合、最初に戻ってその進行状況を保持できます。
クラインが実行されている間に、バイブコーディングについて話しましょう。世界最高のバイブコーダーとして、私はできるだけ少ないコードを書きたいと思っています。2025年には、AIがすでに私のコードの99.9%を書いているため、次の最適化ステップは、できるだけ少ないプロンプトを書くことです。AIがあなたのためにコードを書いてくれるため、基本的にゼロコードを書いている場合、次のステップは、欲しい結果を得ながらも、プロンプトの中でできるだけ少ない言葉を書くことです。
これがまさにクラインのYOLOモード（自動承認）が活躍する場面です。自律的に行動し、すべての変更を自分で行うことで、バイブコーディングを次のレベルに引き上げることができます。これを私たちはバイブシッティングと呼ぶことができるかもしれません。なぜなら文字通り座って、おそらく10分に一度話すだけで、残りはAIがやってくれるからです。おそらくバイブシッティングはバイブコーディングの次の進化形かもしれません。
理解しなければならないもう一つの用語は「バイブラーニング」です。よく「ニューソサエティ」でAIに慣れておらず、圧倒されたり迷子になっていると感じる人からメッセージをもらいます。しかし皆さんが気づいていないのは、私も迷子になることがあるということです。違いは、私は迷子になったとき学ぶことです。AIに「エラーは何？もっと詳しく知るには？適切にデバッグするには？」と尋ねます。そして、これらのミスやエラーに落胆したり、止まったりしません。
多くの視聴者はほんの些細な障害で諦めてしまいます。代わりに深呼吸してAIに相談すべきです。これが私の言う「バイブラーニング」です。バイブコーディングをしているとき、多くの人がするように頭を使わずに、最大限の注意を払い、AIに質問を浴びせるべきです。「なぜこれをした？なぜその修正が機能した？なぜ前の修正が機能しなかった？」できるだけ多くを学ぼうとしてください。
AIによって学習はかつてないほど簡単になりました。数分のうちに50の個人化された質問をすることができます。だから、単なるバイブコーダーではなく、バイブラーナーにもなりましょう。
さて、VSCodeに戻ってクラインが何をしたか見てみましょう。このチェスゲームの総APIコストは2.5ドルでした。Claude 3.7を使用していることを考えると悪くありません。
これらのステップをスクロールして何が起きているか見てみましょう。これは本当に素晴らしいです。クラインはブラウザ自体を使用でき、ヘッドレスブラウザを実行して書いたコードが機能するかどうかを確認できます。私たちは本当にクラインについて知らなかったんですね。試した人がどれだけいるか分かりませんが、私はもっと早く試すべきでした。
最後まで下にスクロールして最後の部分を見てみましょう。「タスク完了しました。チェスゲームを正常に修正しました。」などと書かれています。計画モードに切り替えて「このゲームの実行方法は？短く答えてください」と聞くことができます。これは、プログラミング経験が全く必要ないことを証明するためです。
「これをどう実行するの？」「このコードをどう実行するの？」「これをどうテストするの？」と単純に尋ねることができます。コードを恐れないでください。多くの人がノーコードツールだけに限定されていますが、これは大きな間違いです。コードがあれば何でも構築できます。ノーコードツールではそのプラットフォームに制限されます。
「index.htmlを開いてください」と言われたので、ターミナルを開きます。Command+Jを押して、「open index.html」を実行しましょう。
私たちは、自分が最も多くの時間を過ごす5人の平均値だということを知っています。そして多くの人は実生活でAIに興味のある人がいません。だからこそ私は「ニューソサエティ」を作りました。これはAIの最先端にいる人々、実際に何かをしている人々のコミュニティです。ちなみに、「wins」という名前のチャンネル全体があり、そこではコミュニティメンバーの成功を見ることができます。例えば、5日前にジョンはAIスタートアップのMVP（最小実行可能製品）を販売して9万ドルを稼ぎました。9万ドルです。これはニューソサエティにある多くの異なるメンバーの成功の一つに過ぎません。だから、もしあなたがAIに真剣で、最先端の人々に囲まれたいなら、ニューソサエティに参加してください。リンクはビデオの下にあります。
さて、ブラウザに切り替えましょう。そこにシンプルなチェスゲームがあり、白の番です。ちなみに、これは単一のプロンプト、しかも短いプロンプトでした。これが機能するか見てみましょう。白の番です。簡単なポーンの動きをしてみましょう。はい、今は黒の番です。対抗してみましょう。取れるか見てみます。はい、できます。非常に印象的です。
黒が取ります。クイーンを取ります。白の番です。クイーン。クイーンは動けます。チェック。黒はチェック状態です。それを知っています。私が動けるか見てみましょう。いいえ、他の駒は動かせません。チェックを防ぐ駒だけを動かせます。この場合はキングだけですね。
すごい、これは本当のチェスゲームです。黒は再びチェック状態です。これは本当に機能しています。すべてのルールが実装された完全なチェスゲームが、単一のプロンプトでエラーなしに作成されました。クラインを見逃さないでください。
これが一度きりのものではないことを証明するために、新しいクラインチャットを作成して、別のゲームを一発で作ってみましょう。今回はマインスイーパーです。もちろん、誰もがマインスイーパーを知っています。世界で最もオリジナルなゲームの一つであり、チェスとは非常に異なります。
いつものように、計画モードから始めます。そうすることで、クラインはこれがどのように見えるかの概要を設計できます。基本的に、行動する前に考えるのです。これは推論を取るようなものですが、次のレベルに引き上げています。
ここでコードを一行も書く前に23,000トークンを生成しました。考えてみてください。23,000トークンということは、コードを書き始めたとき、複数の異なる角度を考慮したということです。どうするか、どんなミスをしないかなど、コードを書く前に考えたことが多くあります。
実行モードに切り替えて、残りはクラインにやらせましょう。これが2025年のバイブコーディングの状態です。どこかで詰まったら、スクリーンショットを撮り、何が起こったか、どうやってそこに到達したかを説明し、残りはAIにやらせましょう。これが私がVectalを構築した方法です。これは私のスタートアップであり、以前のスタートアップ経験もNex.jsのフロントエンド、バックエンド経験もなく構築しました。
始めたとき、APIの概念さえ完全には理解していませんでした。そしてAIを使って成功するAIスタートアップを構築しました。だから、私はただ話しているだけではなく、実際に自分でやっているのです。
はい、クラインがすべてのコードを書き、ターミナルも起動しました。マインスイーパーは実際にターミナル内に完全にあり、ターミナルを開いてマインスイーパーを開始するコマンドも実行しました。ボードサイズを入力しましょう。50にします。いや、25にしましょう。何らかの理由で無効でしたが、いいでしょう。
地雷の数を入力します。20にします。そこにあります。ターミナルに素敵なグラフィックのマインスイーパーがあります。R55をやってみましょう。ボーン。地雷なし。良いです。F43をやってみましょう。フラグを立てました。
見ての通り、機能するマインスイーパーアプリがあります。再び、クラインによって一発で作られました。これは素晴らしいです。クラインによって完全に一発で作られ、何の問題もありません。
だから、もしあなたが「私は技術的じゃない」「プログラマーじゃない」などの言い訳をまだしているなら、2025年5月ですよ。AIは非常に優れているので、単一のプロンプトを書いて、承認をクリックするだけで、インタラクティブなゲームやフルスタックのウェブアプリをLiveのようなツールで一発で作ることができます。
クラインについてのビデオをもっと見たい場合、例えばフォークの方法や独自のバージョンの構築方法、MCPの接続方法などについて、ぜひコメントを残してください。また、ぜひチャンネル登録もお願いします。このビデオから多くの人が登録しているのを見れば、もっとクラインのコンテンツを見たいと思っていることがわかります。
視聴いただきありがとうございました。素晴らしく生産的な一週間をお過ごしください。またお会いしましょう。
コメント