はじめに
2024年、うちの会社にAI研究チームが誕生しました！なんといっても「研究チーム」と聞くと、いかにもバリバリやってそうなイメージがあるんですが、実はメンバー全員、個人開発に挑戦するのは今回が初めて。
失敗もたくさんありましたが、その分学びも多く、なんとか形にすることができました！
この記事では、作成したアプリの紹介、難しかったこと、学んだことなどご紹介したいと思います！
開発の背景
最近、生成AIが話題ですよね！ChatGPTやら画像生成AIやら、あちこちで「これAIが作ったの!?」と驚く瞬間を目にすることが増えました。そんな時、「これをうちの会社でも使い倒せば、もっと楽に、もっと効率よくできるんじゃない？」とふと思ったのが、今回の開発のきっかけでした。
特に私たちが注目したのは「設計書をもとにしたソースコード生成」。設計書って、みんな一生懸命作りますけど、そのあとのコード書き起こしが正直めちゃくちゃ大変だったりしますよね……。そこで「設計書→コード」の流れを丸ごと自動化しちゃおう！というプロジェクトがスタートしました。
アプリの概要
このアプリは、事前に設定した案件情報を基に、設計書からソースコードを自動生成します。また、既存のソースファイルを読み込むことで、自動でコードレビューを行い、改善したコードを提供します。これにより、開発の効率化と品質向上を両立することを目指しました。
アプリの主な機能
- コード自動生成 - 設計書からソースコードを生成する
- コード自動レビュー - 生成されたソースコードまたはアップロードしたソースコードを自動レビューする
- 手動レビュー - 修正内容を手動で入力しソースコードを修正してもらう
- 案件情報登録・編集 - 案件で使用する言語やフレームワーク・テーブル情報などを登録・編集する
技術スタック
フロントエンド
{
"フレームワーク": {
"react": "18.3.1",
"typescript": "4.9.5"
},
"UI/UX": {
"tailwindcss": "3.4.4",
"react-syntax-highlighter": "15.5.0"
},
"データ管理": {
"mobx": "6.12.3",
"mobx-react-lite": "4.0.7",
"immutable": "4.3.6"
},
"データ処理/通信": {
"axios": "1.7.2",
"dotenv": "16.4.5",
"exceljs": "4.4.0"
}
}
バックエンド
{
"フレームワーク": {
"tornado": "6.4"
},
"データベース": {
"psycopg2": "2.9.10"
},
"AI/機械学習": {
"openai": "1.59.7"
}
}
使用したAPI
デモ
1.アップロードする設計書
2.案件情報を選択し、設計書をアップロードするとソースコードを生成してくれます。
3.手動で修正依頼をすると修正後のソースコードを生成してくれます。
前回ソースコードとの差分も確認が可能です。
4.ソースファイルをアップロードすると自動レビューし、レビュー後のソースコードを生成してくれます。
難しかったこと
1.設計書からChatGPTへのプロンプトの生成
設計書の書き方や記載内容はプロジェクトごとに異なり、固定的なルールでは対応できないケースが多くありました。そのため、動的にプロンプトを生成するロジックを設計する必要がありました。
そこで今回は、設計書の記載内容と作成してほしいプロンプトの定型文をChatGPTに渡すことで、設計書にある程度自由な記載がされていても、一貫性のあるプロンプトを作成できるようにしました。
※プロンプトの作成には試行錯誤しました
prompt_template = """
# 指示
以下のデータからpromptを作成して下さい。
# データ
{jsonData}
# 要件
- 以下のプロンプトの形式を参考にデータの内容で作成して下さい。
# 要件
## インターフェース名称: XXX
## 処理概要: XXXXX
## Endpoint:
- URL: XXXXX
- Method: XXXX
- Protocol: XXXX
- Encoding: XXXXX
## Request:
- Header:
-- Content-Type: XXXXX
-- Accept: XXXXX
- Data:
-- XXXXXX: XXX型, 必須:X, 最大桁数XXX桁
## Response:
- Header:
-- Content-Type: XXXXXX
- Data:
-- XXXX: XXX型, 必須:X, 最大桁数XXXX桁, -
## リクエストサンプル
XXXX /api/1.0/XXXXXXXXXXXX HTTPS
header:
Content-Type: application/json
Accept: application/json
requestbody:
{{
XXXXXX: XXXXXXXXX,
}}
## レスポンスサンプル
HTTPS 200
header:
Content-Type: application/json
{{
XXXXX: XXXXXXX
}}
## 処理内容
次の処理を実行します。
1.XXXXXXX
処理を終了する
"""
楽しかったこと
これまでChatGPTのようなアプリを使うことはありましたが、今回初めてAPIを利用してアプリを作成しました。正直、最初は「難しそう…」という気持ちがありましたが、実際に取り組んでみるといろいろな可能性が広がることに気づき、とても面白かったです！
特に、今回使用したOpenAIのAssistantAPIでは、事前にデータを持たせることで、より柔軟で賢いアプリを作れる点が便利だと感じました。これをうまく活用すれば、もっと多くのことが自動化できそうで、どんどん応用したい気持ちになっています！
今後の展望
今回のアプリはAPIの生成に特化した内容でしたが、今後はさらに機能を広げていきたいと考えています。具体的には、フロントエンド側のHTMLやその処理部分の生成にも対応できるようにしたいです。これが実現すれば、バックエンドだけでなくフロントエンド開発の負担も大きく軽減できるはずです！
少しずつ進化させて、より便利で使いやすいアプリにしていけたらと思っています！