皆の者、ご機嫌麗しゅう！我は、生成AI猫 エルシーじゃ😊
生成AI活用方法を紹介していくのじゃ
基本的な使い方を覚えて、快適な生成AI活用ライフを過ごすのじゃ
出身地：Adobe Firefly（画像生成AI）
皆さん、初めまして！私は、オリバーです。
エルシーさんの助手猫です。
エルシーさんがよく暴走するので、暴走を止める役割をしています。
出身地：Adobe Firefly（画像生成AI）
VS CodeでClaude Code APIを使いたいけれど、「認証方法がわからない…」「情報が少なくて不安」という初心者の方は多いはずです。
本記事では、Claude Code APIをVS Codeで利用するために必要な準備から、ターミナルでの操作、認証画面の流れまでを丁寧に解説します。
生成AIを安全に使うための注意点もまとめているので、この記事を読めば迷わずセットアップを完了できます。
APIを使うには課金が必要です。（5ドル～）
予算の範囲内で使うようにお願いします。
VS CodeでClaude Code APIを使うのに必要なもの
VS CodeでClaude Code APIを使いたいです。
何が必要ですか？
下記のものが必要になるのじゃ！
手順については、随時記事を追加するから少し待ってほしいのじゃ！
VS Code
VS Codeの拡張機能から、「Claude Code for VS Code」をインストール
Git for Windows
Node.js
Anthropicのアカウント作成 → APIキー発行
Claude API は従量課金制なので、課金設定（支払い方法登録）が必要
環境変数に作成したAPIキーを設定する
VS CodeでClaude Code APIの認証をする方法
Claude Code APIの認証方法についてやり方を探していますが情報が少ないです。
どうすればいいですか？
先ほどの必要なツールや手順を準備したら、下記の手順を行うのじゃ！
まずは、VS Codeのターミナルから下記のコマンドを実行するのじゃ！
npm install -g @anthropic-ai/claude-code完了しました！
VS Codeのターミナル
完了したら、VS Codeのターミナルに下記のコマンドを入力して実行するのじゃ！
claude下記の画面が表示されました！これで完了ですか？
VS Codeのターミナル
まだ終わりではないのじゃ！設定をしていくのじゃ！
まず最初に、画面のモードを選ぶのじゃ！
矢印キーで前後に移動して、モードを選んでエンターキーを押すのじゃ！
こちらの画面だと、Dark modeが選択された状態になっています。
VS Codeのターミナル
ログイン方法の設定じゃ！
「毎月定額で支払うプラン or APIで使った分だけ払う方法」のどっちを使う？
と聞かれているのじゃ！
今回はAPIキーを使うので２番を選択して、エンターキーを押します。
VS Codeのターミナル
急にブラウザに下記の画面が表示されました。
このアカウントで認証するのか聞かれているのじゃ！
※すでにClaude Codeのアカウントが作成されている場合
自分が作成したアカウントで間違いありません。
「Authorize」ボタンを押します。
ブラウザの画面（Edgeとか）
これでブラウザでの設定が完了じゃ！
ブラウザを閉じます。
ブラウザの画面（Edgeとか）
VS Codeのターミナルに戻るのじゃ！
ログインに成功した。続けるならエンターキーを押すようにと書いてあるのじゃ！
エンターキーを押します。
VS Codeのターミナル
「APIキーを見つけたぞ！このAPIキーを使うの？」と聞かれているのじゃ！
すでに環境変数にAPIキーを設定しています。
それなら１番の「Yes」を選択して、エンターキーを押すのじゃ！
VS Codeのターミナル
これで完了じゃ！
APIキーが漏洩すると勝手に使われて大変なことになるのじゃ！
他の人にAPIキーを教えない・共有しないようにご注意ください！
定期的にAPIキーの課金額と使用量をご確認ください。
Claude Code×PlaywrightでE2Eテスト作成の試行錯誤をゼロにする方法
「Claude Codeでテスト自動化を試したいけれど、プロンプトの調整や環境作成で何時間も溶かしてしまう…」と感じていませんか？
試行錯誤に1〜2時間使うコスト（あなたの時給換算）を考えれば、今すぐコピペで動く完成品を手に入れるのが最も効率的です。
仕様書の読み込みから、Playwrightを使ったフルHD高画質エビデンス（スクショ・動画）の取得、見やすいマークダウンレポート出力までを一発で全自動完結させるプロンプトを作成しました。
💡 このプロンプトでできること
- 仕様書（MD等）を読み取り、PlaywrightのE2Eテストコードを自動生成＆実行
- 操作ごとにフルHD（1920×1080）の高画質でスクショ・動画を自動保存
- 時系列で整理された
test_日時.mdレポートを出力 - 届いて3分で試せる「お試し用HTMLアプリ（ZIP）」を同梱
🎥 実際の動く様子・生成レポート
🎯 こんな人におすすめ
- Webブラウザ系のシステム開発を行っているエンジニア
- PlaywrightによるE2Eテスト・エビデンス生成をサクッと自動化したい方
- Claude Codeの検証時間を削って、本来のコード開発に集中したい方
「自分の手元で動くか不安」という方でもすぐ検証できるよう、動作確認済みのサンプルHTMLアプリをセットにして1,500円（※先着順で段階値上げ予定）で公開しています。
以下のnote記事から、プロンプトとサンプルアプリを今すぐダウンロードしてご活用ください！
マニュアル作成の試行錯誤をゼロにするプロンプト公開中
「Claude Codeで操作マニュアルを作らせたいけれど、全画面スクショで文字が潰れたり、動画が急に拡大・チラついたりしてプロンプト調整に時間を取られていませんか？」
手作業でのスクショ撮影や、Playwrightの録画エラー対策に4〜5時間使うくらいなら、バグ対策済みの完成版プロンプトをコピペで使う方が圧倒的に時短になります。
ターゲット読者に合わせた文章調整から、対象要素の自動切り抜き（赤枠ハイライト付き）、さらに画面下のテロップ（字幕）付き高画質動画まで、コマンド一発で全自動生成します。
💡 主な特徴
- 2パス分離構造: 録画時のズーム事故やチラつきを技術的に完全防止
- 要素単位のスマート撮影: 画面全体ではなくモーダルやボタンだけを自動切り抜き
- 読者ターゲット自動最適化: 一般ユーザー向け／技術者向けなどトーンを自動調整
- 届いてすぐ試せる: 動作確認済みの「お試し用HTMLアプリ（ZIP）」を同梱
「手元で動くか不安」という方でも3分で検証できるよう、サンプルアプリ付きで販売しています。マニュアル作成の単純作業から解放されたい方は、ぜひご活用ください
Claude Codeをもっと活用したい人向け！【ブログ運営者の本】
下記は、アフィリエイト広告ではありません。自分の本の宣伝です。
※Kindle Unlimitedのサービス（毎月定額料金を払うことで本が読み放題）
に加入されている方は無料で読めます！
システムのテストを自動化したい人向け
テストや操作マニュアル作成って面倒ですよね？
自動で下記を行う方法を解説しています。
- テスト自動化
- テスト結果レポートの作成（スクショ・動画）
- 操作マニュアル作成
システム完成後の操作マニュアルを自動で作りたい人向け
操作マニュアルの動画を手作業で作るのは大変なのじゃ！
自動で操作マニュアルの動画を作成する方法を解説しているのじゃ！
まとめ
ここまで読んでくれてありがとうなのじゃ！
生成AIの使用には注意が必要です。
注意しながら、生成AI活用を楽しんでくださいね！
- 生成AIの回答は必ず確認する
- 理由：生成AIは間違った情報を出すことがあります。
- 対策：複数の情報源と照らし合わせて正確性を確認しましょう。
- 個人情報や機密情報は入力しない
- 理由：入力内容が学習や記録に使われる可能性があり、漏洩リスクがあるため。
- 例：パスワード、住所、電話番号、社内資料などは入力しない。
- 仕事で使うときは組織のルールを確認する
- 理由：会社や組織ごとに生成AI利用のルールが異なるため。
- 対策：利用前に必ず上司や規定を確認しましょう。
- 商用利用の可否を確認する
- 理由：生成AIごとに「商用利用OK／NG」のルールが違うため。
- 対策：利用規約を必ずチェックしてから使いましょう。
- 著作権侵害にならないか確認する
- 理由：生成AIで作った文章や画像が、既存の著作物に似すぎてしまう可能性があるため。
- 対策：公開・販売する前に、オリジナリティや権利関係を確認しましょう。
コメント