ChatGPT APIでコードのリファクタリングをするサービスを作りました

Posted at 2023-03-15

みなさんこんにちは @y_temp4 です。

この記事では、先日公開された ChatGPT API を用いてコードをリファクタリングするサービスを作ってみたのでご紹介します。

このサービスは OSS にしているため、誰でもソースコードを閲覧できます！スターをつけてもらえると泣いて喜びます⭐️

作ろうと思ったきっかけ

元々、自分は ChatGPT の API を使って何か作ろうというよりかは、OSS 製の既存のサービスの代替サービスを何か作ってみたい、というモチベーションのほうが高かったです。

OSS の代替サービスには、例えば calcom/cal.com: Scheduling infrastructure for absolutely everyone. のような感じで Calendly の OSS の版のサービスなどがあります。

このようなサービスは他にも複数あって、例えば以下の awesome-oss-alternatives というリポジトリから OSS 代替サービスで有名なものの一覧が確認できます。

自分は開発者として、特にジャンル問わず自分の好みのサービスを楽しく作れればいいな〜と思っていたので、日々何か良いアイデアは無いかな？と考えていました。

そんな中、ChatGPT API が公開され、「これはチャンスだ！」と思い、とりあえず前から気になっていた Refraction というコードのリファクタリング等を行ってくれるサービスの OSS 代替版を作ってみることにしました。

新しくなった ChatGPT API が公開された翌日の朝から作成に着手し、その日の夜にリリースしました！

Initial commit から最初のリリースまでのコミットだけ見ると、制作時間は 10 時間ほどでしょうか。ただ、この間は割と普通の生活をしながら（？）開発をしていて、ずっと開発に没頭していたわけではないので、手を動かしていた時間はもう少し短いかなぁと思います。

リポジトリの README にも書いてありますが、今回のサービス開発では主に以下の技術を採用しています。

OpenAI のアカウントがあれば、誰でも簡単に API キーが発行できます。18 ドルくらいの無料枠があるため、気軽に試せるのが良いですね。

最近はもっぱら Next.js ばかり使っています。特に後述する tRPC との親和性が非常に高く、重宝しています。

tRPC は TypeScript ベースで効率よくバックエンドとフロントエンドの開発ができるライブラリです。

tRPC allows you to easily build & consume fully typesafe APIs without schemas or code generation.
https://trpc.io/docs/ より

バックエンドの API を構築すると、型安全な API クライアントを自動で生成してくれるためかなり開発者体験が良いです。
また、Next.js で使う際は API Routes にエンドポイントを立てて使えるため非常に便利ですね。

今回の開発がスムーズにできたのは、間違いなく tRPC のおかげです。tRPC は近年注目されつつある技術ですが、まだまだ採用事例は少ない気がします。今後は採用事例がどんどん増えていくと嬉しいですね😄

認証機構の組み込みに使いました。本記事の執筆時点では名前が Auth.js に変わりつつあり、SvelteKit や SolidStart などの Next.js 以外のフレームワークでも使えるようになるっぽいですね。

tRPC での API 開発時に使っています。TypeScript との親和性が高く、DB のマイグレーション等も行ってくれるのでもう手放せません🤝

今回はサッと UI を組み立てたかったので、Mantine を採用することにしました。Mantine を使うのは初めてでしたが、割と使いやすくて良かったですね。

Mantine は Mantine UI というコンポーネントのサンプル実装があり、そこからよく使うコンポーネントを利用できたのも非常にありがたかったです。

また、Mantine とあわせて Tailwind CSS も採用しました。基本的な UI は Mantine に任せつつ、ちょっとしたデザインの修正は Tailwind CSS で行いました。結構雑に開発したこともあり、お作法は整ってないところもありますが、将来的には直したいですね･･･🫣

また、リファクタリングしたいコードを Web 上で書くエディタには monaco-editor を使っています。今回は React のプロジェクトだったので @monaco-editor/react を使って組み込んでいます。

それと、このプロジェクトの雛形の作成には Create T3 App を採用しています。Create T3 App を使うと

あたりの技術がセットアップされたプロジェクトを簡単に作成できるので良いですね。

catnose さんのツイートにもあるように、最近出た ChatGPT API ベースのサービスのメインとなるロジックは ChatGPT の API に投げるプロンプトを用意している箇所だけかなと思います。

自分が作ったサービスも本質的に重要な箇所は以下の数行だけで、あとは認証機構やコードを入力するインターフェースを整えただけにすぎません。

今後はもう少し凝ったロジックを入れ込んだサービスもどんどん出てくるかなとは思いますが、逆に今はアイデア勝負で色々できる時期なのかな、とも思います。

みなさんもぜひ ChatGPT API を使って新しいサービスを作ってみてください🙌

Web のフロントエンドに関する技術を解説する YouTube チャンネルを作りました✨

今回の記事でも触れた ChatGPT API を Web アプリケーションで使う方法についても解説しているため、気になる方はぜひご確認ください！