3,800 文字
今日の動画ではClaude Codeを見ていきます。昨日アクセス権を得たので、基本的にはいくつかのプロジェクトを試して、このツールの機能を確認していきます。詳細なレビューというわけではなく、試してみて最初の印象を共有したいと思います。いくつかの簡単なものを作り、私が使う際のコツも紹介します。それでは始めましょう。
Claude Codeを使う際に最初に覚えておく必要があるのは、Claudeを起動するときに作業したいディレクトリにいることが重要だということです。私は現在ゲームディレクトリにいます。背景のカーソルでそれが確認できます。「CLA」を実行すると、プロンプトが表示されます。ライトテキストを選択して、アカウントにログインしましょう。ここで「組織をこれに接続したい」を選びます。完璧です、セットアップ完了しました。ここに戻ってログイン成功です。
これで開始する準備ができました。いくつかの情報を入力していきます。はい、はい。これでプロンプトを入力する準備ができました。上部に表示されているように、我々は「apps」内のゲームディレクトリにいます。これは私がここに持っているのと同じディレクトリです。
私が発見したのは、このディレクトリに事前にいくつかの資料を読み込むのが良いということです。API鍵を含む環境ファイルと、Claude APIの使用方法に関するドキュメントをプリロードしました。ツール呼び出しを使いたい場合にも対応しています。このディレクトリにドキュメントをプリロードできるのは非常に便利です。「read the docs」という指示を出すと、Claude Codeはそれらのディレクトリに入ってドキュメントを読み込みます。必須ではありませんが、できることの一例です。Cursor 2などのツールでも同様に、ドキュメントを事前に読み込むのが私の好みの作業方法です。プロジェクト作業時に時間を節約できると感じています。
さて、プロンプトを入力していきましょう。事前に用意したプロンプトをコピーします。使用するプロンプトは次のとおりです：「Claude AI APIからレスポンスをストリーミングするダークテーマのチャットアプリを作成しよう。アプリはブラウザで実行され、AIターミナルのようなミニマリスティックなスタイルを持ち、ユーザーが入力し、AIがレスポンスをストリーミングする。ミニマリスティックでターミナルのみ。Anthropic APIを使用し、APIキーは.envファイルに格納する。」これが私が指示として与えるすべてです。
これを入力すると、作業が開始されます。ファイルが見つからないと修正しようとしています。APIキーはここに表示されていますが、後で無効にします。ここから作業が始まります。
Package.jsonを編集するかどうか尋ねられています。「このセッションでは再度尋ねない」を選びます。右側を見ると、package.jsonファイルが作成されていることがわかります。そして、作業が続いています。server.jsを作成していて、基本的にはエージェントのようなものです。Cursorでエージェントを設定したことがあれば、ほぼ同じような感じです。いくつか試してみましたが、これまでのところかなり良いと思います。Cursorに慣れている私にとっては、この環境で作業するのは少し新しいですが、すでにいくつかの面白いものを作れました。しばらく実行を続けて、何ができるか見てみましょう。
それでほぼ完了です。実行方法は「npm start」で、「/cost」と入力すると費用が表示されます。30セントかかりました。Claude CodeはClaude 3.7を使用しており、それは高価なので使用量には注意が必要です。
「npm start」を実行して、localhost:3000を開きます。「hello」と入力してみましょう。システムが動作しています。「2つの数字を足すためのコードを書いて」と入力してみましょう。うまく動作していて、良いストリーミングが行われています。かなりクールな小さなチャットアプリができました。非常に簡単にできました。事前にドキュメントを用意していたのが役立ちました。
さて、これをGitHubに移したいとしましょう。リポジトリを用意しました。リポジトリをコピーしてClaude Codeに戻り、「このリポジトリにプッシュしたい」と入力します。これは非常に役立つと思います。
initを実行し、リモートを追加します。それは良さそうです。オリジンが異なりますが、変更しましょう。「cla-chat」を追加し、コミットして、メインブランチにプッシュします。すべて受け入れることもできますが、プロセスを見たいだけです。
GitHubリポジトリに戻って更新すると、プッシュされているのが確認できます。READMEファイルやセットアップ方法の説明もあります。非常に簡単です。.gitignoreも作成したので、環境ファイルは持ち込まれていません。
チャットアプリの作成からGitHubへのプッシュまで、準備完了するのに最大でも10分程度しかかかりませんでした。とてもスムーズでした。Claude Codeでの作業は私には少し慣れないですが、引き続き試していきます。Cursorとこのどちらを好むかはまだわかりませんが、両方試してみる価値はあると思います。
この動画の最後に、何かゲームを作成してみましょう。Reddit等でClaude 3.7を使ってクールなゲームを作る人を多く見かけたので、Claude Codeでも試してみましょう。
次のプロンプトを使います：「Skiという名前のウェブブラウザゲームを作成してください。矢印キーで操作する2Dサイドスクロールのスキーゲームです。スペースキーでジャンプします。フリースタイルモードで、ジャンプやレールでフリップやグラインドを行います。シンプルなピクセルアートグラフィック。レスポンシブな操作と滑らかなゲームプレイに最適化してください。棒人間スキーゲームに最適と思われるフレームワーク、モジュール、言語で構築してください。」
これを実行して、ゲームが動作するか見てみましょう。一発で動作するとは思えませんが、デバッグしながら棒人間スキーゲームを動かせるようにしましょう。
完了しました。index.htmlを開いてみましょう。何かが表示されました。最後に操作方法の説明があります。「空中で前に傾ける、回転する」などです。動作するかどうかわかりませんが、試してみましょう。
スペースキーを押します。ジャンプは機能しています。前に進むことができます。グラインドしていて、岩もあります。悪くありません。この木を越えるにはどうすればいいのでしょうか？ここで詰まっているようです。バグがあるようです。フリップは集計されているようです。
デバッグしましょう。「木を飛び越えられない」という問題があります。変更を加えてみましょう：「木を飛び越えられません。また、ジャンプでスキーヤーを自動で回転させないでください、手動で行うべきです。マップを左から右に20度下降させて、スキーをしている感覚を出してください。下り坂のため速度が増します。また、新しいグラインドアニメーションを作成してください。」
これらの変更を実装している間に、音楽を作成しましょう。「90年代レトロスキーゲーム用の器楽音楽」を作成して、MP3ファイルにして、ゲームに背景音楽として追加できるでしょう。
更新しましょう。音楽は聞こえませんが、少し縮小してみます。グラインドしていますが、あまり面白くないかもしれません。レールはありませんが、悪くはありません。
多くの時間をかけなかったにしては悪くありません。多くのループを実行したようなので、コストを確認してみましょう。$1.80かかりました。かなり高価です。総時間は11分でした。コード行数を数えてみましょう。プロジェクトは14,410行のコードで$1.80でした。
ゲームは完璧ではありませんでしたが、短時間で悪くない結果でした。Cursorを使っていれば、もう少し制御できたかもしれませんが、エージェント的なワークフローは非常にスムーズで楽しめました。少し制御が失われましたが、統合が上手くいって満足しています。
興味深いソフトウェアなので、引き続きClaude Codeで探索を続けます。既存のプロジェクトに入るのも非常に簡単です。プロジェクトに移動してClaudeを起動するだけで、環境にすぐアクセスできます。これは非常に役立つと思います。
引き続きテストを続けますが、これは私の初期反応と最初の印象でした。試し続ける予定ですし、皆さんにも試してみることをお勧めします。現在はMacでのみテストしていて、他のオペレーティングシステムでは試していませんが、かなりスムーズに動作しているようです。
これがClaude Codeについての私の印象です。視聴ありがとうございました。何が期待できるかについての考えが得られたかもしれませんし、自分でも試してみたくなったのではないでしょうか。視聴ありがとうございました。またすぐにお会いしましょう。
コメント