Zenn
🦜

【AIが隣にいる開発】Claude Code GitHub Actionsで新人エンジニアの開発が爆速に進んだ話

に公開
新人プログラマ応援
生成 AI
cluade
Claude Code
Vibe Coding
tech

【AIが隣にいる開発】Claude Code GitHub Actionsで新人エンジニアの開発が爆速に進んだ話

はじめに

新人エンジニアとして個人開発を進める中で、小さなエラーの解決に予想以上の時間を費やしてしまうことや、基本的な設定作業で手が止まってしまうことが多々ありました。そんな中、Claude Code GitHub Actionsというツールに出会い、実際のプロジェクトで活用してみたところ、開発効率が大幅に改善されました。

本記事では、FlaskとPythonで構築した「PDF文字起こしWebアプリケーション」の開発において、Claude Code GitHub Actionsをどのように活用したか、その実体験を共有します。

対象プロジェクトの概要

開発中のアプリケーションは以下の機能を持つWebアプリケーションです：

  • PDFファイルのアップロード機能
  • OCR処理によるテキスト抽出
  • 抽出結果のMarkdown形式での出力
  • Flask フレームワークを使用したWebインターフェース

直面していた技術課題

Flaskテンプレートエラーの解決困難

アプリケーション実行時に jinja2.exceptions.TemplateNotFound: index.html エラーが発生していました。HTMLファイルは確実に存在しているにも関わらず、なぜエラーが発生するのか原因を特定できずにいました。

Flaskの基本的な仕組みについて理解が不足していたため、エラーメッセージから適切な解決策を導き出すことができませんでした。

APIキーの適切な管理方法

OCR処理に外部API（OpenRouter API）を使用する必要がありましたが、APIキーをどのように安全に管理し、アプリケーションに読み込ませるべきか判断に迷っていました。

セキュリティのベストプラクティスについて知識が不足しており、コードに直接記述するべきではないことは理解していても、具体的な実装方法が分からない状況でした。

Claude Code GitHub Actionsの導入

セットアップ手順

  1. APIキーの取得と設定

    • Anthropic でAPIキーを取得
    • GitHubリポジトリの Settings > Secrets で ANTHROPIC_API_KEY を設定

  2. ワークフローファイルの作成

    • .github/workflows/claude.yml ファイルを作成
    • anthropics/claude-code-action@beta アクションを使用

  3. 権限設定の調整

    • 初回実行時に権限エラーが発生したため、permissions と allowed_tools の設定を調整

課題解決の実践例

テンプレートファイル配置問題の解決

状況
Flaskアプリケーションでテンプレートが見つからないエラーが継続していました。

Claudeへの相談内容

GitHub Issue での相談
@claude このリポジトリをローカル環境で実行したところ、
jinja2.exceptions.TemplateNotFound: index.html というエラーが発生しました。

現在のファイル構成を確認したところ、index.html および upload_success.html は 
app.py と同じルートディレクトリに配置されていますが、エラーが解消されません。

この問題を解決するための適切な修正をお願いします。
新しいブランチを作成してPull Requestで変更を提案してください。

Claudeの対応結果

この経験を通じて、Flaskのテンプレート機能の基本的な仕組みを理解することができました。

環境変数によるAPIキー管理の実装

要件
APIキーを安全に管理し、アプリケーションから適切に読み込める仕組みを構築する必要がありました。

実装依頼

環境変数設定の依頼
@claude OpenRouter APIキーの管理について相談があります。

現在、APIキーをどのように安全に管理すべきか迷っています。
以下の要件を満たす実装をお願いします：

1. セキュリティを考慮したAPIキーの管理
2. ローカル開発環境での動作確認
3. 必要な依存関係の追加
4. 設定手順のドキュメント化

実装成果

得られた学習効果と開発改善

技術的な学習

Flaskフレームワークの理解
テンプレートディレクトリの概念や、Flaskアプリケーションの基本構造について実践的に学習できました。

セキュリティ意識の向上
APIキーの適切な管理方法や、機密情報をコードに含めない開発手法を身につけることができました。

開発環境の設定
python-dotenv を使用した環境変数管理や、依存関係の適切な管理方法を学習しました。

開発プロセスの改善

問題解決速度の向上
従来は数時間かかっていたエラーの原因調査と解決が、数分で完了するようになりました。

学習機会の増加
Claudeが提案する解決策から、新しい技術や実装パターンを学ぶ機会が増えました。

品質向上
人の目では見落としがちな設定ファイルやドキュメントの更新も同時に行われるため、プロジェクト全体の品質が向上しました。

新人エンジニア向けの活用指針

効果的な質問の仕方

具体的なエラー情報の提供

良い質問例
エラーメッセージ、ファイル構成、実行環境などの具体的な情報を含めて質問する

期待する結果の明示
何を実現したいのか、どのような状態になれば問題が解決されるのかを明確に伝える

学習効果を最大化するために

提案内容の理解
Claudeが提案した解決策について、なぜその方法が適切なのかを理解するよう心がける

関連技術の調査
使用されたライブラリや設定について、公式ドキュメントで詳細を確認する

段階的な導入
いきなり複雑な作業を依頼するのではなく、簡単なタスクから始めて慣れていく

注意すべきポイント

コードレビューの重要性
AIが生成したコードでも、必ず内容を理解してから適用する

セキュリティ設定の慎重な検討
allowed_tools や実行権限の設定は、必要最小限に留める

まとめ

新人エンジニアとしてClaude Code GitHub Actionsを活用した結果、以下の成果を得ることができました：

  • 学習効率の向上：実践的な問題解決を通じて、フレームワークやツールの使い方を効率的に学習
  • 開発速度の改善：基本的な設定作業や定型的なタスクにかかる時間を大幅に短縮
  • 品質向上：ベストプラクティスに基づいた実装を学び、プロジェクト全体の品質が向上

個人開発において、技術的な壁に直面した際の強力なサポートツールとして、Claude Code GitHub Actionsは非常に有効でした。特に新人エンジニアにとっては、実践的な学習機会を提供してくれる貴重なリソースだと感じています。

今後も継続的に活用し、より効率的な開発プロセスの確立を目指していきます。

参考リソース

リポジトリ情報

ソースコードは以下のリポジトリで公開しています：

https://github.com/Be114/OCR_PDFtoMD

実際に動作するアプリケーションのコードをご覧いただけます。バグ報告や機能提案、スターをいただけると励みになります。

謝辞

本ブログは全てClaude Code GitHub Actionsで作成されています。anthropic社の皆様に感謝の意を表します。

Discussion