📱

ClaudeCodeをGitHubに導入して、出先でも開発する

に公開1

本記事のサマリ

最近、GitHub ActionsとClaude Codeを組み合わせて、スマホから本格的な開発をする環境を構築してみました。移動中の電車内や、カフェでの休憩時間に、ふと思いついたアイデアをその場でコードに落とし込める環境です。
この記事では、セットアップから実際の運用までの流れを紹介します。料金面での考慮点や、実際に使って気づいた注意点についても詳しく解説します。

なぜスマホから開発したいのか

私がスマホ開発環境を構築しようと思ったきっかけは、最近の引越しでした。新居でのWifi開通まで時間がかかり、ただただ手持ち無沙汰だったのです。そうだ!モバイル開発しよう。

そんな時、OikonさんのLTを拝見し、出先でも精度高く開発できるのか!!と衝撃を受けて実践するに至ります。
https://x.com/oikon48
セットアップしてみると驚くほどスムーズに動作しました。GitHub Mobileアプリからissueにコメントを書くだけで、Claudeが実際にコードを書いてPRまで作成してくれます。

(OikonさんのLTでは、CodeRabbitで品質を向上させているのが妙でした。次の記事ではそれも試してまいります!)

GitHub ActionsでClaude Codeを動かす仕組み

GitHub ActionsとClaude Codeの連携は、思っているよりもシンプルな仕組みで動いています。基本的には、PRやissueのコメントで @claude とメンションするだけで、GitHub Actionsのワークフローがトリガーされ、Claude CodeがCI環境上で動作してコードの変更を行います。

この仕組みの優れている点は、すべてがGitHubのランナー上で実行されることです。自分のローカル環境には一切影響を与えず、クラウド上で完結します。つまり、スマホのスペックや環境に関係なく、フルスペックの開発環境を利用できるのです。
(それでいてActionsの料金体系でコストを抑えることができます。)

https://docs.claude.com/en/docs/claude-code/github-actions

具体的なセットアップ手順

Claude Codeの公式ドキュメントに従って進めれば、10分程度で完了します。

まず、ローカル環境でClaude Codeをインストールし、/install-github-app コマンドを実行します。このコマンドが、GitHub AppのインストールからAPIキーの設定まで、必要な手順を自動で進めてくれます。

# Claude起動とGitHub App設定
claude
/install-github-app

このコマンドを実行すると、ブラウザが開いてGitHub Appの認証画面が表示されます。必要な権限を許可すると、自動的にワークフローファイルがリポジトリに追加され、ANTHROPIC_API_KEY がシークレットに設定されます。

動作確認は簡単です。適当なissueを作成し、コメントで @claude こんにちは と書いてみてください。数分後にClaude からの返信がコメントで追加されれば、セットアップは成功しています。

スマホから使う実践ワークフロー

実際にスマホから開発する際のワークフローを紹介します。

GitHub Mobileアプリを開いてissueを確認し、前日に作成したissueに対するClaudeの提案やPRをチェックします。満足のいく結果であれば、そのままマージします。

新しいアイデアが浮かんだときは、その場でissueを作成します。「ユーザーの検索履歴を保存する機能を追加したい」という要望を自然言語で書き、その下に @claude この機能を実装してください。LocalStorageを使って実装し、プライバシーに配慮した設計にしてください とコメントします。

後でスマホから確認すると、Claudeが実装したPRが作成されています。コードレビューして、問題があれば追加でコメントします。「TypeScriptの型定義を厳密にしてください」「テストケースも追加してください」といった具体的な指示を出せば、勿論修正してくれます!

このワークフローの良い点は、開発のリズムが途切れないことです。思いついたらすぐに形にでき、小さな機能追加やバグ修正なら、ほとんどスマホで完結できます。

CLAUDE.mdで開発基準を共有する

スマホから開発する際に重要なのは、プロジェクトの開発基準やコーディング規約を Claude に理解してもらうことです。これを実現するのが皆さん知っての通り CLAUDE.md ファイルです。

プロジェクトのルートディレクトリに CLAUDE.md を配置すると、Claude がこのファイルの内容を参考にして、プロジェクトの流儀に沿ったコードを生成してくれます。

それはもちろんActions上でも同様です。

おまけ:料金試算

実際に使ってみた時のコストから、現実的な料金を試算してみます。

実測値から計算する

ハンズオンで実行した「READMEにメッセージを追加」というシンプルなタスクでは:

  • コスト: $0.1330(約20円)
  • 実行時間: 58.6秒

この実測値をもとに、1日3時間(180分)使った場合を想定します。

タスクの種類別に考える

実際の開発では、タスクの複雑さによってコストが変わります。

シンプルなタスク(README編集、バグ修正など)

  • 1回あたり: $0.10〜0.20(15〜30円)
  • 実行時間: 1分程度

中程度のタスク(機能追加、リファクタリングなど)

  • 1回あたり: $0.50〜1.00(75〜150円)
  • 実行時間: 3〜5分程度

複雑なタスク(大規模な機能実装など)

  • 1回あたり: $2.00〜5.00(300〜750円)
  • 実行時間: 10〜20分程度

1日3時間使った場合の試算

現実的な使い方として、以下のような配分を想定します:

  • シンプルなタスク: 5回 × $0.15 = $0.75
  • 中程度のタスク: 3回 × $0.75 = $2.25
  • 複雑なタスク: 1回 × $3.00 = $3.00
  • 1日の合計: $6.00(約900円)

月額コスト(30日間)

  • Claude Code: $180(約27,000円)
  • GitHub Actions:
    • パブリックリポジトリ: 無料
    • プライベートリポジトリ(Freeプラン): 月2,000分無料枠あり
      • 1日の実行時間: 約15〜30分
      • 月間実行時間: 450〜900分
      • 無料枠内に収まる可能性が高い

月額合計: 約27,000円

実際の使用感とコストバランス

これを見ると「高い」と感じるかもしれませんが、実際には:

  • 毎日3時間フルに使うことは少ない
  • 週末や忙しい日は使わない日もある
  • 実際の月額は10,000〜15,000円程度になることが多い

ハンズオン:実際にスマホから開発してみよう

ここからは、実際に手を動かしながらスマホ開発環境を構築していきます。このハンズオンを終えれば、今すぐスマホから開発を始められます。

ステップ1:ローカルでのセットアップ(10分)

# 1. リポジトリをクローン
git clone https://github.com/your-username/your-repo.git
cd your-repo

# 2. Claude Codeを起動してGitHub Appを設定
claude

Claude Codeが起動したら、以下のコマンドを実行します。

/install-github-app

権限を付与したら、再度 /install-github-app を実行します。

リポジトリ選択画面

現在のリポジトリが表示されるので、そのまま Enter で続行します。

ワークフロー選択画面

インストールするワークフローを選択します。デフォルトで2つのワークフローが選択されています。

  • @Claude Code: issueやPRコメントで @claude をメンションすると動作
  • Claude Code Review: 新しいPRが作成されたときに自動レビュー

両方にチェックを入れて Enter で次へ進みます。

API Key選択画面

Anthropic API Keyの設定方法を選択します。

  • Create a long-lived token with your Claude subscription: Claude.aiのサブスクリプションを使用(推奨)
  • Enter a new API key: 自分で取得したAPI Keyを入力

最初のオプションを選択すると、自動的にトークンが生成されてリポジトリのSecretsに設定されます。

セットアップが正常に完了すると、Claudeが自動的にPRを作成します。

https://github.com/toto-inu/lab-202510-vercel-first/pull/1

このPRには .github/workflows/claude.yml.github/workflows/claude-review.yml が含まれています。内容を確認してマージしましょう。これで、GitHub ActionsでClaude Codeが使えるようになります。

ステップ2:動作確認(3分)

設定が完了したら、スマホで動作確認します。

  1. GitHub Mobileアプリを開く

  2. リポジトリのIssuesタブを開く

  3. 新しいissueを作成

    • Title: 「Hello Claudeテスト」
    • Body:
      READMEに「Hello, Claude Code!」というメッセージを追加してください。
      
      @claude お願いします!
      
  4. issueを作成して待つ

数分後、Claudeからコメントが返ってきて、PRが作成されているはずです。PRを確認して、問題なければマージしましょう。

Claudeからの応答例

上の画像のように、Claudeが「Claude Code is working...」と応答し、「I'll analyze this and get back to you.」というメッセージとともに処理を開始します。実際の動作例は以下のissueで確認できます。

https://github.com/toto-inu/lab-202510-vercel-first/issues/2

Claudeは自動的にブランチを作成し、変更をコミットしてくれます。ブランチ名は claude/issue-2-20251019-2344 のように、issue番号と日時を含む形式で自動生成されます。

Claudeの実行結果

GitHub Actionsの実行ログを見ると、今回の実行にかかったコストと時間も確認できます。

  • コスト: $0.1330
  • 実行時間: 58.6秒

この例では、シンプルなREADMEの編集で約20円程度(1ドル=150円換算)のコストでした。

PRの作成ボタン

タスクが完了すると、Claudeがissue上に「Create PR」ボタンを用意してくれます。このボタンをクリックするだけで、タイトルと説明文が自動的に設定されたPRを作成できます。スマホからでもワンタップでPR作成が可能です。

まとめ

GitHub ActionsとClaude Codeを組み合わせたスマホ開発環境は、セットアップの簡単さの割に、想像以上に実用的だと感じられました!
勿論、完全にデスクトップ環境を置き換えるものではありませんが、隙間時間を活用してアイデアをすぐに形にできる環境として価値があるかと思います。

まだまだ、スマホからの開発では「大量にコードを生成されてもレビューが小さい画面でしんどい」という問題があるかと思います。次回ではCodeRabbitを使って、この問題をスマートに解決できればと思います!

株式会社StellarCreate | Tech blog📚

Discussion

佐々木将一佐々木将一

めちゃめちゃタイムリーですが...
GithubActionsからClaudeを呼び出さなくても、スマホからClaudeアプリでできるようになりました!
投稿した日に、アプデでナレッジが風化するのは流石に笑っちゃいました。
https://x.com/toto_inu/status/1980626975283941815

これで公式のClaudeアプリから、じゃんじゃんPR出せるようになりますね。
その分レビューがボトルネックになると思いますので、レビューサービス「CodeRabbit」についての記事を近々書きます!