LoginSignup
7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@eno49conan(Eno)in株式会社エーエスエル

Claude Code&Github Actionsで、PRレビュワーとIssueからのコーディングをお任せできるかな～～

Last updated at Posted at 2025-05-25

概要

2025年になってから、ClineやMCPが話題になっていますね。

そんな中、Claude4に関する投稿が数日前にありました。

この投稿と関連した内容で、
Claude CodeとGithub Actionsを組み合わせた活用方法がXで紹介されていました。

これは試すべき内容だと思い、早速取り組んでみました。

開発作業を進める前に、Claude CodeとGithub Repositoryのセットアップが必要なので、そこから進めていきます。（所要時間：～30分）

作業を進める前に
本作業では、AnthropicのAPIを呼び出して行う作業のため、トークン量に応じて課金されます。

またAPIキーの扱い・管理にはご注意ください。

Claude Codeのインストール

現在はまだベータ版となっているツールです。

Claude Codeは、ターミナル上で動作し、コードベースを理解し、自然言語コマンドを通じてより速くコーディングできるようサポートするエージェント型コーディングツールです。開発環境に直接統合することで、追加のサーバーや複雑なセットアップを必要とせずにワークフローを効率化します。

まずはClaude Codeをインストールします。

今回のゴール

ClaudeをGitHub Repositoryと連携し、以下の作業をClaudeにお任せします。

  • PRに対するコードレビュー
  • Issueの概要文を参照した実装提案とブランチ作成

Windowsに直接インストールは不可

npm installを用いてインストールしますが、Windowsに直接インストールはできません。
PowerShellなどで以下コマンドを実行してみました。

npm install -g @anthropic-ai/claude-code

npm error Error: Claude Code is not supported on Windows.
npm error Claude Code requires macOS or Linux to run properly.

エラー全体
image.png

記載された通り、Windows環境の方はUbuntuなどを用いてインストールを実施します。

ターミナルでUbuntuを選択していることを確認し、以下コマンドを実行します。

npm install -g @anthropic-ai/claude-code

管理者権限周りのエラーが発生した場合は、
以下ページを参照ください。

インストール作業完了後、
claudeとターミナルに入力して、Enterを押します。
image.png

スラッシュを入力すると候補が表示されます。
ここは一旦/exitでOKです。
image.png

github-cliのインストール

この後GithubのRepositoryと連携を行いますが、
その前に対象のGithubアカウントに対する認証が必要です。
そのために、ghコマンドを通じて認証を完了させる必要があります。

以下コマンドを実行し、バージョンが表示されればインストール完了しているので、
そのまま認証作業を実施します。

gh --version
gh auth login

作業する方によって、多少状況は異なると思いますが、以下のように数個質問に回答後、
ワンタイムパスワードが表示されます。

Enterで、ブラウザが表示されます。
アカウント選択後ワンタイムパスワードを入力し、認証されれば作業完了です。
image.png

Github Repositoryと連携

再度ターミナルでclaudeと入力してClaude Codeを起動します。
起動後、/install-github-appを選択します。

作業としては、以下の3つです。

  • リポジトリ選択とアプリインストール
  • ワークフローのyamlファイル生成
  • APIキーの入力

リポジトリ選択とアプリインストール

対象のリポジトリを選択します。（私は選択済なので、以下のように表示されます）
image.png

ブラウザが立ち上がります。

あるリポジトリでインストール済の場合

あるリポジトリでインストール済であれば、画像の赤枠の通り、背景色が灰色で文字がConfigureのボタンが表示されます。

image.png

初回インストールの場合

背景色が緑色で文字がInstallのボタンなので、インストールしてください。

作業中のリポジトリに適用

いずれの場合も、クリック後、
以下画像のようにどのリポジトリに対して適用するか表示されるので、作業中のリポジトリを追加してください。（選択後Saveをクリック）
image.png

ワークフローのyamlファイル生成

インストール作業完了後、ワークフロー作成に進みます。（どういった権限を付与してどういった場合にclaudeを利用するか）

ここは1番でOKです。
image.png

APIキーの入力

APIキー作成

anthropicのコンソールでAPIキー未作成の方はここで作成をお願いします。

私は対象リポジトリのsecretsに、
変数名：ANTHROPIC_API_KEYが登録済なので以下の表示になります。
未作成であれば、APIキーをペーストするように指示されるので、ペーストします。

image.png

マージ作業

ここまで作業が終わると、対象リポジトリにPRが作成されています。
このPRのマージ作業を完了させることで、Claudeと連携可能になります。
忘れずにマージしてください。

どういったときにclaudeを利用するか、またどういった権限を付与するか、そういった情報が設定されたワークフローファイルを自動で作成してくれます。
image.png

Claudeを活用した開発

ここからが本題です。
実際に開発作業でClaudeを使ってみます。

以降私はFlutterを使った開発をしますが、皆さんご自身のソースコードでOKです！

冒頭に記載した通り、以下2つの作業をやってみます。

  • PRに対するコードレビュー
  • Issueの概要文を参照した実装提案とブランチ作成

PRに対するレビュー

以下画像のように画面に表示するボタンに関する修正をPRを作成したとします。
image.png

PRのトップで、以下画像のように@Claude
とメンションに続けて指示を出します。

@claude Please review this PR and suggest improvements

image.png

すると、Claudeが考え始めます。
ここは数分待ちます。（たった数分です）
すると、以下のようにレビュー結果を返してくれます。

全体もぜひ見ていただきたいので、
review.mdで公開しています。

image.png

内容を確認の上、OKであればマージします。

Issueの概要からコード作成

ある機能を作成するために、Issueを作成しました。
image.png

続けて、@claudeを付けて指示をします。

image.png

数分待ちます。

実装ができたようです。
赤枠で囲った箇所ですが、修正したコードのブランチが作成されています。凄いです。

こちらもぜひ全体を見ていただきたいので、
issue.mdで公開しています。

image.png

続けて、
マージ先との差分を見てみました。（全部は少し長いので冒頭のみ）
image.png

このブランチをローカルにチェックアウトして動作確認してみます。
以下のように特に不具合無く思った通りの挙動でした。

image.png
image.png

コード作成時の方針

（2025.05.30追記）

コードを生成する際、完全にお任せした場合、プロジェクトの方針から逸脱した書き方をしない、とも限りません。
そういったことを避けるために、どういった方針でコードを作成ほしいか記述ができます。
上記手順を実行した過程で作成してくれるタイミングがあったかと思いますが、以下記載の通り、CLAUDE.mdに記載を加えていくそうです。

（この後のセクションでやってみた内容を記載しました。）

CLAUDE.md: Define coding standards, review criteria, and project-specific rules in a CLAUDE.md file at the root of your repository. Claude will follow these guidelines when creating PRs and responding to requests. Check out our Memory documentation for more details.
Custom prompts: Use the prompt parameter in the workflow file to provide workflow-specific instructions. This allows you to customize Claude’s behavior for different workflows or tasks.

Determine memory type
（2025.05.30追記）

変な日本語になるのも嫌なので、公式の見出しをそのまま記載しました。
上記のCLAUDE.mdに関する話ですが、ファイル名によって、役立てる場面が変わるそうです。

image.png

https://docs.anthropic.com/en/docs/claude-code/memory

CLAUDE.mdに実装方針を追記して再確認

（2025.05.31追記）

対象のプロジェクトのルートディレクトリにCLAUDE.mdがあります。
以下内容を記載後、再度issueに対する実装修正を依頼してみました。

コードはDart（Flutter）ですが、
こういうことをやってくれるんだ、とざっくり見ていただく形でOKです！

CLAUDE.mdの記載内容

## コード実装時とレビュー時にチェックしてほしい箇所（実装ガイドライン）
- 他クラスからimportしない`StatelessWidget`はprivateにすること
    ```dart
    class MyHomeScreen extends StatelessWidget {
    const MyHomeScreen({super.key});

    @override
    Widget build(BuildContext context) {
        return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const [
            HelloText(name: 'Flutter'), // 外部Widget
            SizedBox(height: 16),
            _LocalMessage(), // プライベートWidget
        ],
        );
    }
    }

    // このファイル内でしか使われないWidget（プライベート）
    class _LocalMessage extends StatelessWidget {
    const _LocalMessage();

    @override
    Widget build(BuildContext context) {
        return Text(
        'This is a private widget',
        style: TextStyle(fontSize: 16, color: Colors.grey[600]),
        );
    }
    }
    ```
- 他クラスからimportされるWidgetにはドキュメンテーションコメントがあること
- プライベートクラスは、通常のコメント（`//`）でいいので、Widgetの説明があること
```dart
/// MyHomeScreen is a simple stateless widget that displays
/// a greeting message and a private informational widget.
/// 
/// It demonstrates the use of both an imported public widget
/// (`HelloText`) and a private widget (`_LocalMessage`) defined
/// in the same file.
class MyHomeScreen extends StatelessWidget {
  const MyHomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        // Public widget imported from another file
        HelloText(name: 'Flutter'),

        SizedBox(height: 16),

        // Private widget used only in this file
        _LocalMessage(),
      ],
    );
  }
}

作成されたコードでPRを作成

他クラスからimportされるWidgetにはドキュメンテーションコメントがあること

該当箇所
image.png

プライベートクラスは、通常のコメント（//）でいいので、Widgetの説明があること
他クラスからimportしないStatelessWidgetはprivateにすること

該当箇所
image.png

こんな感じで、CLAUDE.mdをガイドラインとして、実装してくれます。

まとめ

開発時間短縮できそうな機能だと思いましたし、「すご」「マジか」とつぶやきながら作業していました。

PRのレビュー依頼・Issueからの実装提案、比較的シンプルな内容で試しましたが、Issueからの実装提案に関して、特に修正不要なコードが出力されたことに驚きました。

これは個人開発であり、
現場では様々な制約があるかもしれないので、サクッと実践とはいかないかもしれません。

それでも、活かすことで効率よく開発がすすめられそう、とは思いました。
（特にレビュー作業に関して）

この先ですが、今回1ファイルで処理が完結する例でした。
現場では複数のファイルからimportして、処理を実装することが普通かと思います。
そういった部分もカバーできるやり方を確認して発展させていただければと思いました。

コスト面

特に途中で話をしていませんでしたが、
今回試した2つの作業を終えて、コンソールを確認してみたところ、

1ドル前後、といったトークンの消費量です。

これだけ効率よく開発ができて、150円なら、大変お安いものと感じました。

今後も短期間でアップデートされる内容かと思うので、
定期的なキャッチアップをしていきたいと思います。

7
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?