AIペアプログラミングアシスタント

🔗 デモ: https://ai-pair-programming-assistant-bhf7bvg40-oka031s-projects.vercel.app

なぜこのツールを作ったのか

プログラミングを始めたばかりの頃、何度も「もうやめよう」と思いました。特に忘れられないのは、たった一文字のタイプミスで3時間も悩んだ夜のこと。コンソールに出る英語のエラーメッセージは理解できず、StackOverflowなどを必死に検索しても、回答は専門用語だらけで初心者の私には難しすぎました。

「隣に先輩エンジニアがいてくれたら...」

その思いが、このツールの原点です。JavaScriptを学習する初心者のために、辛かった自分の経験を活かして、フレンドリーなAIアシスタントを作りたいと思いました。

私の「できない→できる」体験

構文エラーとの戦い

括弧の閉じ忘れという初歩的なミスで何時間も悩んだことがあります。「Unexpected token」というエラーメッセージの意味が分からず、コードの何が悪いのか見当もつきませんでした。今思えば簡単なことですが、当時の私には大きな壁でした。

変数のスコープ問題

「なぜ変数が見つからないの？」という疑問に何日も悩まされました。constとletの違い、ブロックスコープの概念を理解するまでに何度もコードを書き直しました。

非同期処理の難解さ

Promiseやasync/awaitの概念を理解するのに1週間かかりました。データが取得できない理由が分からず、「なぜか動かない」と諦めかけた時期もあります。

これらの経験から、つまずきやすいポイントで的確な助言をくれるツールがあれば、学習効率が大幅に向上すると確信しました。

🛠️ 技術スタック

フロントエンド

• React 18: モダンなUIコンポーネントの構築
• Monaco Editor: VS Codeと同じエディターエンジンを使用
• CSS Modules: コンポーネントごとにスタイルをスコープ化

バックエンド & API

• OpenAI API (GPT-3.5-turbo): エラーの詳細な分析と解説
• JavaScript Error Detection: リアルタイムエラー検出システム

デプロイ & インフラ

• Vercel: サーバーレスデプロイメント
• GitHub Actions: 自動ビルドとデプロイ

アーキテクチャ

src/
├── components/         # UIコンポーネント
│   ├── CodeEditor.js   # Monacoエディター
│   └── AIAssistant.js  # AIレスポンス表示
├── utils/              # ユーティリティ関数
│   ├── errorDetection.js  # エラー検出
│   └── commonIssues.js    # エラーパターン定義
├── services/           # 外部サービス連携
│   └── ai-service.js   # OpenAI API連携
└── App.js              # メインアプリケーション

AIとの協業で実現した開発プロセス

このプロジェクトは、AIとのペアプログラミングで開発しました。面白いことに、AIについて学びながらAIツールを作る、というメタな体験でした。

最初の設計

最初は「どんなツールにすべきか」というアイデアだけでスタートしました。ChatGPTやClaudeと対話しながら要件を明確にし、技術選定のアドバイスをもらいました。Reactと Monaco Editorという組み合わせも、AIとの対話から生まれたアイデアです。最も多くの人々に親しまれ始めているChatGPTライクなAIを選定したところ、GPT モデルのAPIを実装することに決めました。

実装の工夫

一番苦労したのは、エラー検知システムです。JavaScriptの多様なエラーパターンを網羅するために、自分が過去に遭遇したエラーをリストアップし、それをAIに説明して拡充してもらいました。これにより、7種類のエラーパターンに対応できるようになりました。

セキュリティ意識の向上

開発過程で、環境変数の管理や機密情報の取り扱いについて多くを学びました。GitHubのセキュリティ機能や、Vercelでの環境変数設定など、本番環境での安全な開発プラクティスを身につけることができました。これらの経験は、実務での安全なアプリケーション開発に直接活かせる貴重な学びでした。

デプロイの壁

Vercelへのデプロイ時に、環境変数の設定で躓きました。しかし、このトラブルシューティングプロセスを通じて、本番環境と開発環境の違いについて理解を深めることができました。

🚀 ローカルでの実行方法

# リポジトリのクローン
git clone https://github.com/oka031/ai-pair-programming-assistant.git

# プロジェクトディレクトリに移動
cd ai-pair-programming-assistant

# 依存関係のインストール
npm install

# .env ファイルを作成
cp .env.example .env
# .env ファイルにOpenAI APIキーを追加
# REACT_APP_OPENAI_API_KEY=your_api_key_here

# 開発サーバーの起動
npm start

ブラウザで http://localhost:3000 にアクセスすると、アプリケーションが表示されます。

🌟 主な機能

リアルタイムコード編集

MonacoエディターによるVS Codeライクな体験 シンタックスハイライト コード補完

7種類のエラーパターン検出

シンタックスエラー 変数スコープエラー 型エラー 範囲エラー 代入エラー 非同期処理エラー モジュールエラー

AI解析

OpenAI GPT-3.5-turboを使用した詳細なエラー分析 初心者にわかりやすい日本語での説明 ステップバイステップの解決策提案

📈 今後の展望

このプロジェクトを通じて、「できない」から「できる」に変わる体験を提供することの重要性を実感しました。今後は、より多くのプログラミング言語に対応し、よりパーソナライズされたアドバイスを提供できるように改良していきたいと思います。

開発予定の機能

TypeScriptサポート Python言語対応 コード実行機能 ユーザー認証とプログレス保存 エラー履歴の記録と学習パターンの分析 コミュニティ機能（質問と回答）

また、このツールを使った人が「次は自分も誰かを助けたい」と思えるような、知識の循環を生み出せるツールに育てていきたいです。

📝 開発者メッセージ

プログラミング学習の旅は、一人ではなく共に歩むものだと信じています。このツールがあなたの学びの旅のパートナーになれれば幸いです。 困難に直面したとき、諦めるのではなく、理解を深める機会と捉えてください。プログラミングの本質は、問題解決と継続的な学習にあります。

Made with ❤️ by oka031

バグ報告 | 機能提案