Claude Pro（$20）プランでゼロから始めるClaude Code
はじめに
ClaudeのProプラン（月額$20）からClaude Codeが利用できるようになったと聞きまして、早速試してみます。（後数日来なかったらMaxプラン契約してたかもしれない・・・）
ちなみに、Claude Code初心者なので、下記の資料を参考にして進めました。例によっていつもありがとうございます。
備忘録的につらつら書いていこうと思います。
まだ使ったことない人が、なんとなく使えるくらいには書く予定です。
なお、Proプランでは「Claude Sonnet 4」モデルしか利用できないそうです。
今回の記事も「Claude Sonnet 4」の利用が前提となります。
今回の記事では、実際に環境をセットアップし、簡単にテトリスゲームを作成し、Playwright MCPを使った自動テストまで一通り実施してみました。
その後、レート制限が来るまでひたすら利用して、Proプラン利用の場合、どの程度でレート制限がくるか確認しました。
これから初めて使ってみようかなという方の手助けになれば幸いです。
環境
M4 Max MacBook Pro
macOS Sequoia 15.2
事前準備
Claudeの契約
ClaudeのProプラン（もしくはMaxプラン）を契約しましょう。
APIで利用したい場合はそれでも良いですが、月額$20くらいなので、とりあえず一ヶ月だけ課金するのはアリかなと思います。
こちらからアカウント登録し、Proプランへのアップグレードをしてください。
年間契約だと安いですが、Xで断末魔が聞こえてきているので、おすすめしません。
なんなら、Proプラン契約後「設定」→「請求」→「プランを調整」から、契約を解除しても、支払った1ヶ月分は利用できるので、解約しても良いと思います。
1ヶ月使ってみて、また継続して使いたくなった時に再度契約すれば良いのです。
Node.jsをインストールする
macなら
brew install node
でインストールできます。今後npmコマンドを利用する上で必要になります。
Claude Codeを実行してみる
Claude Codeのインストール
ターミナルで下記のコマンドを実行しましょう。
とりあえず、以降フォルダの移動はしたくないので、作業用のsampleディレクトリで実行するものとします。
npm install -g @anthropic-ai/claude-code
下記のように表示されれば、成功です。
Claude Codeのログイン
続いて、下記のコマンドでログインを行います。
claude "/login"
すると、まずは下記のようにテキストスタイルの選択画面が表示されるので、好きなものを選びましょう。
私は1にしました。
続いて、ログイン方法の選択です。今回はProプラン経由でClaude Codeを利用するため、上の選択肢でEnterを押します。
すると下記のようにブラウザが立ち上がります。ブラウザにログイン情報が残っている場合は、しばらく待つと勝手にログインが行われます。
ログインに成功すると下記のように承認依頼が表示されるので、承認してください。
下記の画面が表示されたら、再びターミナルに戻りましょう
ターミナル上では下記にようになっているはずですので、Enterを押しましょう
セキュリティに関しての注意事項が記載されています。
記載内容は下記です。読んだらEnterを押しましょう
セキュリティに関する注意事項:
1. Claudeは誤りを犯す可能性があります
Claudeの応答は常に確認してください。特に
コードを実行する際は注意が必要です。
2. プロンプト注入のリスクのため、信頼できるコードのみで使用してください
詳細については以下のリンクを参照してください:
https://docs.anthropic.com/s/claude-code-security
Enterキーを押して続行してください…
続いてターミナルの設定について聞かれています。
Claude Codeのターミナル設定を使用しますか？
最適なコーディング体験のため、ターミナルの推奨設定を有効にします
改行にはShift+Enterを使用
❯ 1. はい、推奨設定を使用します
2. いいえ、後で/terminal-setupで設定します
こちらもとりあえず1で設定しておきます。Enterを押しましょう。
フォルダ内のファイルを全て読んでしまうが問題ないかを確認しています。
Claude Codeを実行したディレクトリ以下のフォルダやディレクトリはClaudeが読みにいくので、不適切な文章を置かないでくださいという意味です。
このフォルダー内のファイルを信頼しますか？
/use_claudecode/sample
Claude Codeはこのフォルダー内のファイルを読み込む可能性があります。信頼できないファイルを読み込むと、Claude Codeが予期しない動作をする可能性があります。
ご承諾いただければ、Claude Codeはこのフォルダー内のファイルを実行する可能性があります。信頼できないコードを実行することは危険です。
https://docs.anthropic.com/s/claude-code-security
❯ 1. はい、続行
2. いいえ、終了
さてこれで、Claude Codeが利用できるようになりました。
なんか作ってみる
/initを実行する
さて、なんか作ってもらおうと思いますが、まずは/initを実行してみましょう。
これを実行することで、ディレクトリの中身をClaudeが読み込んで、CLAUDE.mdに情報を書き込んでくれます。
これを読むことでClaudeはリポジトリの概要をすぐに理解できるわけです。
加えて、ここに記載されている制約を守って実装してくれるようになります。
まずは実行してみましょう
/init
すると下記のようにlsコマンドの実行をするので許可してくださいという表示が出ます。
普通に許可する場合は1でEnterを押せば良いです。
また、今後このコマンドは確認しなくて良いと思った場合は、2でEnterを押してください。
拒否する場合は3です。
ここでは一旦1にします。
続いては、ファイルの書き込みの承認依頼がきました。
こちらも承認します。
日本語で出力させる
さて、下記のようなCLAUDE.mdが作られました。
ただ、このままだと英語なのでちょっと不便ですね。
そこで、このCLAUDE.mdに下記の文言を追加しましょう。
必ず日本語で回答してください。
このようにすることで、今後Claudeの出力が日本語になります。
テトリスでも作ってみる
早速プロンプトを入れてみる
下記のようなプロンプトを試してみました
テトリスのゲームをpythonで作ってください。
すると下記のように、タスクを作って作り始めてくれました。
やっぱ変えたい！そんな時は
さて、ここで私、pythonじゃなくてNext.jsで作って欲しくなりました。
そんな時は、まずは現在の実行を停止するために「Esc」ボタンを押しましょう。
すると実行が止まって下記のような画面になります。
その際、入力ボックスが復活しているので、下記のように入力すればNext.jsで再度実装を開始してくれます。
やっぱり、Next.jsとTypeScriptで実装してください。
すると、下記のように、Next.jsによる実装のタスクを作成してくれました。
そのまま、プロジェクトの作成も実施してくれます。
何かするたびに承認が要求されますので、都度承認するか、2を押してオートモードにするのも良いです。（ただし、初出のコマンドは毎回承認要求されます）
ファイルの出力などもオートで進むのを眺めているといつの間にか、完成していて、実際に動くかどうかをサーバを立ち上げて確かめてくれるらしいです。
どうやら完成したようです。実際に起動してみましょう！
動作確認
新しいターミナルを立ち上げて、下記のコマンドを入力します。
npm run dev
するとちゃんと動くテトリスが表示されました。
ついでに、「コミットしといて」と伝えると、勝手にコミットメッセージとかも作ってcommitしておいてくれます。ありがたいですね。
もしエラーなどがあって動作しない場合は、入力欄にエラーの詳細を記述して「しっかり考えて」と追加して依頼すれば大体直してくれると思います。
CLAUDE.mdを更新する
改めて/initコマンドを実行してみましょう。
CLAUDE.mdが更新されて、先ほど作成したテトリスゲームの概要が書き出されるはずです。
下記をClaude Codeで実行してみましょう。
/init
このように、中身を更新してくれて、作成したコードを簡単に解説してくれるようになりました。
また、日本語で出力してほしいという指示は残したままにしてくれています。
したがって、「どんな技術を使うか」、「どんな制約下で実装するか」などはこちらに追記しておくことで、上書きされず常に参照してくれるようになります。
また、余談ですが、コンソールのログを見ると、.github/copilot-instructions.mdや/.cursorrules、/.cursor/rules/**なども参照してくれるっぽいです。
おそらくですが、ここに記載されている制約やルールも反映してくれるのだと思います。
Claude Codeを停止する
/exitコマンドを実行することで、停止してコンソールに抜けることができます。
MCPと接続させてみる
さて、せっかくWebアプリができたので、PlayWrite MCPを接続してテストも自動でしてもらいましょう。
MCPに接続させる方法はとても簡単です。
リポジトリに.mcp.jsonというファイルを作成して、下記を書き込むだけです。
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}
下記の記事を参考にさせていただきました。
PlayWrite MCPでテトリスゲームをテストする
いつも通りclaudeコマンドでClaude Codeを立ち上げてください。
すると、下記のようにMCPを実行してよいかの承認依頼が来るはずです。
これを承認後下記のようにclaude Codeに依頼してみます。
playwrite mcpを利用してテトリスゲームをテストしてください。
するとそのうち下記のように、Tool Useの承認依頼が飛んできます。これがMCPを使い始めた証拠です。
さて、実際にPlayWrite MCPがテストしている様子を動画でご覧ください。
Web画面のスクリーンショットを撮りながら、画面をクリックして一時停止してみたり、キーボード入力を試してミノが動くかどうかを確かめたりしながら、動作確認をしてくれています。
最終的にテストを完了できました！
かかったコストは？
Proプランから利用しているため、月額$20以上にはかかっていないですが、どうやらClaude Codeではかかったトークン数を保存してるらしく、そこからAPI利用時のコストを見積もってくれるツールを開発してくださった方がいるようです。
使い方などは下記の記事をご覧ください。
こちらを見ると、今回の処理でかかったコストは$2.39らしいです。
ちょっとしか使っていない割には結構かかったなという印象ですね・・・
やはり定額利用が正義だ・・・
Proプランの制限
その後、開発中のWebアプリの機能追加などに利用していたところ、上記の$2.39に加えて、$20.05、つまり合計$22.44使ったところでレート制限に達しました。
AM2:30ごろに制限を受けて、AM6:00ごろまでということなので、以下のProプランの制限が5時間でリセットされるというのは正しそうです。
感覚としては、「思ったよりたくさん使えたな」という印象です。
ただ、大きいリポジトリの機能追加などに利用すると、1タスクくらいですぐに制限が来る感じです。
（それでも5時間待てば再開できるのだから、かなり良心的だと思う。趣味で使う分には十分すぎると思いました。）
追記
Claude Codeでレートリミットが来て使えなくなっても、Claude Desktop（Web版）の方は使えるっぽいです。（実際に試して使えました。もちろんOpus4も使える）
追記2
上記では、$22程度で制限がきたと記載しましたが、本日4回くらいレート制限がくるまでClaude Codeを回してみたところ、下記のコストのタイミングでレート制限がきました。
1回目 +$13.49
2回目 +$14.52
3回目 +$15.02
4回目 +$15.58
昨日よりもだいぶ下がっており、もしかしたら昨日はたまたまレート制限がリセットされるタイミングを跨いでしまっていた可能性があります。
大変申し訳ございません。
$13-$15くらいでレート制限がくるのは、確かに少し短い感じがするなーという感覚はありますね。
（とはいえ月額$20で使えているので全然お得なのと、前述した通り5時間待てば復活するので、気長に待ちましょうって感じです）
1日を広く使うと、大体$55-60くらいClaude Codeを1日で利用できそうです。
無課金のスマホゲーのようにスタミナが貯まったら少しずつ実行しましょうw
まとめ
今回はClaudeのProプラン（月額 $20）を利用してClaude Codeを試してみました。
実際に環境をセットアップし、簡単にテトリスゲームを作成し、Playwright MCPを使った自動テストまで一通り実施しました。
Claude Codeは手軽に使えて、初心者から上級者まで十分に活用できるツールです。興味がある方は一度試してみてはいかがでしょうか！
参考文献
下記の記事で勉強させていただきました。ありがとうございました。
Discussion
claude code に関してとても分かりやすく、すぐに仕事で実践しました。ありがとうございます。
一点だけ細かいですが、playwright のスペルですが playwrite では無く playwright( 訳: 脚本家)となります。自分もずっと間違えていたんで、気になりました。