AnthropicがリリースしたClaude Codeがプログラマーの間で盛り上がってるので、使ってみました。
まず、ネット上の日本語記事ではClaude Codeを使うには月額100ドルのMaxプランまたは、月額20ドルのProプランに入る必要があると書いてあるように見えますが、実は定額課金しなくてもAPI課金でも使えます！
今回の実験はAPI課金3ドルくらいですみました。もちろんClaude Codeが気に入ってバリバリ使うならProやMaxのプランの方が良いと思いますが、少し試したいだけならAPI課金で使うのもお薦めです。
Bing Image Creatorが生成した画像を使っています
いつものジャンケンアプリを作ってみます
Claude Codeのインストールや設定は簡単です。ターミナル上で動くのでCursorやVS Code + ClineのようなAI会話画面＋ターミナルより使いやすいと思いました。
まずはHello World
まずは、「Hello Worldを表示するReactアプリを作って」と依頼しました。難なくHello Worldを表示するReactコードを作ってくれました、しかもTailwind CSSを使っていました。
「なぜTailwind CSSを使ったの？」と聞いたところ、create-next-appのオプションにTailwind CSSがあったからと答えました。なんか新人プログラマーと会話しているようでした。😃 【コスト：約$0.2】
1画面のジャンケンアプリ
まずは、1画面のジャンケンアプリを作ってもらいました。
# ジャンケンを行うReactアプリを作って下さい
## 画面仕様
- 人間はグー、チョキ、パーのボタンを押し、コンピューターは乱数でジャンケンの手を作り対戦します
- 勝敗（勝ち、負け、引き分け）はコンピューターが判定します
- 対戦の結果（人間の手、コンピューターの手、勝敗）を表形式で表示します
- 人間が勝った場合は表示は青色にしてください
- 人間が負けた場合は表示は赤色にしてください
- 引き分けの場合は黒色にしてください
- 対戦の結果はデータベースに保存してください
- データベースの扱いはPrisma ORMを使ってください
- データベースはsqlite3を使ってください
## 環境
- フレームワークはNext.js
- React Server componetsを使ってください
- TypeScript を使ってください
- スタイリングはTailwind CSS を使ってください
上のプロンプトで、出来たアプリは以下のようになりました。デザインが入っていませんね😅、以前試したときもClaudeはあまり良いデザインのアプリを作ってくれなかったです。 【コスト：約$0.7】
いつもの2画面のジャンケンアプリ
いつも作ってもらう、対戦結果と対戦成績の表示出来るジャンケンアプリを作ってもらいました。ただし画面デザインをしてもらえる様に、①のようにサンプル画像を渡しました。
# ジャンケンを行うReactアプリを作ってください
## 概要
- 人間はグー、チョキ、パーのボタンを押し、コンピューターは乱数でジャンケンの手を作り対戦します
- 勝敗（勝ち、負け、引き分け）はコンピューターが判定します
## 画面仕様
- 画面には対戦結果と対戦成績の2つがあります
- 対戦結果はパス/scoresに、対戦成績はパス/statusに対応します
- 両画面ともに
- タイトルとメニューの表示されているアプリケーションバー
- グー、チョキ、パーのボタンが並ぶコンポーネント
- 対戦結果または対戦成績の表示
- 対戦結果の画面は
- 対戦の結果（人間の手、コンピューターの手、勝敗）を表形式で表示します
- 人間が勝った場合は表示は青色にしてください
- 人間が負けた場合は表示は赤色にしてください
- 引き分けの場合は黒色にしてください
- 対戦成績の画面は
- 対戦の成績（人間が勝った数、負けた数、引き分けの数）を表形式で表示します
- 人間が勝った場合は表示は青色にしてください
- 人間が負けた場合は表示は赤色にしてください
- 引き分けの場合は黒色にしてください
- 画面デザインはこの画像のようにしてください： /Users/xxxxx/jyanken.png ← ①
## 機能仕様
- 対戦の結果はデータベースに保存してください
- データベースの扱いはPrisma ORMを使ってください
- データベースはsqlite3を使ってください
## 環境
- フレームワークはNext.js App routerを使ってください
- React Server componetsを使ってください
- TypeScript を使ってください
- スタイリングはTailwind CSSを使ってください
- コメントは日本語で書いてください
出来たアプリの画面は以下の画像で、機能もちゃんと出来ていました。
【コスト：約$0.76】
あれTailwind CSSのバージョンが3だよ
上のアプリで使われているnpmライブラリーのバージョンを見ると、古いです😅
"next": "14.2.3",
"react": "^18",
"react-dom": "^18",
"tailwindcss": "^3.4.17"
現時点でcreate-next-app@latestでアプリを作ると以下のようになっています。
"next": "15.3.4"
"react": "^19.0.0",
"react-dom": "^19.0.0",
"tailwindcss": "^4",
試しに「Tailwind CSSをバージョン4にしてください」と依頼しました。そしてTailwind CSS V4のインストールや設定ファイルの変更が行われ
・・・
Tailwind CSS v4にアップグレード完了しました！
と自信ありげに表示されたのでブラウザーで画面を表示してみました。しかし、CSSが全く適用されていませんでした。自信満々ですが力量が伴ってない新人プログラマーのような感じかな？ 😅
Claude Codeに「全くスタイリングされなくなりました」と伝えると、何か作業を始めました。 しばらくするとコンソールに以下のように表示されました。
・・・
Tailwind CSS v3に戻してスタイリング問題を修正しました。
さらに、
変更内容：
✅ Tailwind CSS v4をアンインストール
✅ Tailwind CSS v3.4.1とautoprefixerを再インストール
✅ globals.cssを従来の形式に戻す
✅ tailwind.config.tsとpostcss.config.jsを復元
✅ ビルドが正常に動作確認済
Tailwind CSS v4はまだプレビュー版のため、安定したv3系を使用しています。スタイリングが
正常に動作するはずです。
え❗
Tailwind CSS v4はまだプレビュー版のため、安定したv3系を使用しています
本当はちゃんと設定すれば問題なく動かせるのに、苦し紛れな良いわけを言っているプログラマーのようですね。😅
以前のブログでClaude 3.7がTailwind CSS V4の事を知らない問題が、Claude Codeで使われているClaude 4.0 Sonnetでも同じなのでしょうか？ 【コスト：約$0.4】
Context7を使ってみた
AIにコードを書いてもらうならContext7 MCPは必須ですねに書いたようにContext7 MCPを使うと最新のライブラリーを使ってくれるので、
- ① Context7 MCPをインストールし
- ② プロンプトにContext7指定を追加
$ claude mcp add --transport sse context7 https://mcp.context7.com/sse ← ①
$ claude
・・・プロンプト・・・
- context7を使いNext.js, React, Tailwind CSSは最新版を使ってください ← ②
出来たジャンケンアプリはちゃんと最新のNext.js、Tailwind CSSが使われていました。😃
まとめ
Claude Codeはターミナル上で動くのでプログラマーにはとても使いやすいツールだと思います。
また最初に開発タスクを表示してくれます、さらにplan modeで実行すると作成するアプリの仕様を表示してくれるので、この時点でClaudeと対話して仕様を変更したりしながら開発仕様を決定できます。
当然MCPも使えるし、独自のスラッシュコマンドも作れるのも可能性を感じますね。ClaudeのProプランを契約してClaudeに全乗りするのも良いかな・・・
どのAIツールに課金するかは悩ましいですね。😅
