はじめに
先日、ClaudeでWebアプリのコードを書いてもらっているときに、ふと気づきました。
「これ、空のGitHubリポジトリを用意しておいて、Claude Code on the webに『アプリ作って』って頼んだら、ゼロから完成品が作れるんじゃないか？」
そこで実際に試してみることにしました。この記事では、Claude Code on the webという新機能を使って、空のリポジトリから実用的なCLIツールを作成した過程を紹介します。
Claude Code on the webとは
Claude Code on the webは、2024年11月にAnthropicがリリースした新機能です。
主な特徴は以下の通りです。
- ブラウザから直接コーディングタスクを依頼できる
- GitHubリポジトリと連携して自動的にコードを作成
- クラウド上の隔離環境で安全に作業
- 複数タスクを並列実行可能
- 自動的にブランチ作成とPR生成
詳細は公式ドキュメントで確認できます。
試してみたプロジェクト
初回テストなので、シンプルなものにしました。
BMI計算CLIツール
- 身長（cm）と体重（kg）を入力
- BMI値を計算
- 体型カテゴリー（低体重/普通体重/過体重/肥満）を表示
医療系の仕事をしているので、実用的でありながら簡単なツールとして選びました。
環境・前提条件
- GitHubアカウント
- Claude Pro/Maxプラン（Claude Code on the webはリサーチプレビュー）
- ブラウザ（今回はスマホのChromeを使用）
ハマったポイント
空のリポジトリでmainブランチが作られない問題
最初、GitHubで完全に空のリポジトリ（README等なし）を作成してClaude Code on the webを実行したところ、Claudeが作業用ブランチを直接作成してしまい、mainブランチが存在しない状態になってしまいました。
これは空のリポジトリには初期コミットがなく、デフォルトブランチが作られていなかったためです。
解決方法
完成後に、Claudeが作成したブランチを手動でmainにリネームしました。
今後同じことをする場合は、以下のいずれかの方法をおすすめします。
方法1: GitHubでREADMEを初期化（推奨）
リポジトリ作成時に「Add a README file」にチェックを入れるだけで、初期コミット+mainブランチが作られます。
方法2: ローカルで初期化
git clone https://github.com/username/repo.git
cd repo
echo "# Project Name" > README.md
git add README.md
git commit -m "Initial commit"
git push -u origin main実行手順
1. GitHubリポジトリ作成
リポジトリ名: bmi-cli
公開設定: Public
初期化: なし（今回はハマったので空で作成）リポジトリURL: https://github.com/kwrkb/bmi-cli.git
2. Claude Code on the webでタスク実行
claude.com/code にアクセスして、以下のプロンプトを入力しました。
Pythonで簡単なBMI計算CLIツールを作成してください。
要件:
- 身長（cm）と体重（kg）をコマンドライン引数で受け取る
- BMI値を計算して表示
- BMIカテゴリー（低体重/普通体重/肥満1度/肥満2度など）も表示
- README.mdに使い方と実行例を記載
- requirements.txt（必要なら）
シンプルに1ファイルで完結させてください。テストは不要です。3. 作業完了を待つ
Claudeが自動的に以下を実行しました。
- リポジトリをクラウド環境にクローン
- コード作成
- README作成
- 新しいブランチにコミット＆プッシュ
所要時間: わずか14分
生成されたコード
ファイル構成
bmi-cli/
├── README.md
└── bmi.pyシンプルに2ファイルのみ。テスト不要と指定したので、無駄がありません。
bmi.py の特徴
生成されたコードは予想以上に高品質でした。
1. argparseで柔軟な引数処理
# 両方の書き方に対応
python bmi.py 170 65
python bmi.py --height 175 --weight 702. 適切な関数分離
def calculate_bmi(height_cm, weight_kg):
"""BMIを計算する"""
height_m = height_cm / 100
bmi = weight_kg / (height_m ** 2)
return bmi
def get_bmi_category(bmi):
"""BMI値からカテゴリーを判定する（WHO基準）"""
if bmi < 18.5:
return "低体重 (Underweight)"
elif 18.5 <= bmi < 25:
return "普通体重 (Normal weight)"
elif 25 <= bmi < 30:
return "過体重 (Overweight)"
else:
return "肥満 (Obese)"3. エラーハンドリング
if height <= 0 or weight <= 0:
print("エラー: 身長と体重は正の数でなければなりません。", file=sys.stderr)
sys.exit(1)4. 完全な日本語対応
README、エラーメッセージ、カテゴリー表示まで、すべて日本語で出力されます。プロンプトで指定していないのに、自然に日本語対応されていました。
5. docstring完備
各関数に適切なdocstringが付いているため、コードの保守性も高いです。
README.md
使い方や実行例が丁寧に説明されており、すぐに使えるドキュメントになっていました。
感想とポイント
今回、Claude Code on the webを初めて使ってみて、以下のポイントに驚きました。
良かった点
- 圧倒的に速い: 14分で完成品
- 高品質: argparse、エラーハンドリング、docstring完備
- 日本語対応が自然: プロンプトに指定していないのに日本語で出力
- WHO基準: BMIカテゴリーも医学的に正確
- 柔軟な設計: 複数の引数形式に対応
注意点
- 空のリポジトリ問題: 初期コミットがないとブランチ管理が複雑になる
- 完全自動ではない: 空リポジトリの場合は事後調整が必要
まとめ
Claude Code on the webを使えば、以下のことが可能です。
- 空のGitHubリポジトリから実用的なツールを自動生成
- わずか15分程度で高品質なコード完成
- ブラウザだけで完結（ターミナル不要）
- 複数のプロジェクトを並列で開発可能
今回のように「簡単なツールを試しに作ってみたい」というケースでは非常に便利です。
ただし、空のリポジトリを使う場合は、GitHubでREADMEを初期化してからClaude Code on the webを実行することをおすすめします。
同じように試してみたい方の参考になれば幸いです。
コメント