目次

成果物 (Product)
はじめに (Introduction)
システム概要 (System Overview)
開発過程 (Development Process)
使用技術 (Technologies Used)
遭遇した課題と解決策 (Challenges and Solutions)
結果と学び (Results and Learnings)
今後の展望 (Future Prospects)
まとめ (Conclusion)
参考資料 (References)

1. 成果物 (Product):

スニペットをコピペしてEnterを押すだけでスニペットとその概要を登録できる、というWebアプリを作成しました。

2. はじめに (Introduction):

このWebアプリケーションの開発の背景には、スニペットの概要を効率的かつ簡単にユーザーが登録できるようにするという思いがあります。スニペットの管理は、多くの方にとって共通の習慣であるかと思います。ですが、処理の内容、使用言語、またはその言語の習熟度によっては、一見して処理の目的がすぐには理解できないことがあるでしょう。この問題を解決する目的で、このサイトを開発しました。
この目的を達成するキーとなったのが、ChatGPTのAPIでした。最近はAIの利用が増えており、私も何かAIを活用したプロジェクトを手がけたいと考えていました。
また、これが初めての個人開発プロジェクトであったため、必要なリソースやマネタイズの方法を学ぶ良い機会になりました。
この記事では、GPT APIを使ったアプリ制作の手順を紹介します(AIを利用しているからと言って特に難しいことはしていませんが…)。

3. システム概要 (System Overview):

主要な機能と動作については以下の通りです。

スニペットを登録、管理できる
他ユーザーが登録したスニペットを閲覧、お気に入り登録できる
スニペットをコピペしてEnterを押すだけで処理概要を含めた内容を登録できる
使用技術やキーワードをタグ登録できる
処理名、処理概要、タグはGPT APIを利用して自動生成されるが、手動で修正追加削除も可能

4. 開発過程 (Development Process):

設計書などのドキュメントは残していませんが、進め方としてはざっくり以下の通りになります。

最低限必要な機能の選定
最低限必要な画面、画面イメージの決定
DB テーブル構造の決定
画面コーディング
APIコーディング(DB CRUD)
APIコーディング(GPT API)
デプロイ、稼働確認、微修正
その他Webアプリとしてリリースするのに必要な作業(ドメイン取得/設定、利用規約+プライバシーポリシー+免責事項作成、Google Analytics登録、広告媒体登録/申請/設定、OGP設定)

5. 使用技術 (Technologies Used):

使用技術と採用理由はざっくり以下のとおりです。

Next.js (+ React + TypeScript)
- 比較的新しい技術で、今も更新され続けている
- 英語、日本語ともに情報が多いので、調べて問題を解決しやすい
- ファイルベースルーティングがわかりやすい+ルーティングの設定を特にしなくてよい
- デプロイが楽
  → VercelアカウントとGithubアカウントを紐づければ、pushするだけでデプロイしてくれるのでとても楽です。事前の設定も環境変数を設定しておくくらいでほぼ不要。これはNuxt.jsやAngularなど他にはない強みかと思います。無料枠も2プロジェクト分あり。
- 人気がある(大事)
  → 個人開発だけすると考えると使用技術は特にこだわらなくていい(強いて言えば、Flutterとか使って各プラットフォームにまとめて出せればよさそう)かと思いますが、どこか外部のプロジェクトに入ることを考えると、大規模プロジェクトに強い技術に慣れておきたかった
- ページ以外のフォルダ構成が自由
  → これもプロジェクトの規模に合わせて柔軟に変えることができていいですね。ある程度決められているNuxt.jsと大きく違うところだと思います。最近だと、粒度の低いコンポーネントはcomponentに配置して、特定のページへの依存度が高く粒度の高いコンポーネントやほぼページを構成するようなコンポーネント(機能)はfeaturesフォルダに配置するのが主流のようです。規模が大きい場合は、featuresフォルダをさらに細分化して使えば良さそうです。今回のアプリは小規模であり、Chakra Uiのお陰で粒度の低いコンポーネント(例えばButton.tsx)を定義する必要がなかったので、featuresフォルダだけ作成しています。その中のcomponentsフォルダに、粒度の高いコンポーネントを配置しています。コンポーネント系以外には、utils(ユーティリティ系)、hooks、configsというように最低限分類されるようにしました。
- Nuxt.jsとの比較
  → 以下の理由で、安定をとるor個人開発でサクッとWebアプリを作るならNuxt.jsを採用してもよさそう
  - 競合にNuxt.jsがあるが、できることはほとんどかわらなさそう。コードの書き方が、template構文という独特なものになっているので、JSX方面に慣れている人には学習コストが高そう
  - 自動インポートが便利
    → ファイル構造が複雑になりがちなので、自動インポートがあったり、自動補完がすぐ効くようになるのは便利
  - ComponentsやLayoutなどフォルダ構成がある程度決められているので悩まなくて済む
    → 上記でも書きましたが、初心者や小規模な開発にあっていそう。
  - 破壊的変更が少ない
    → Next.jsは最近13のリリースでかなり大きい変更が来ましたが、Nuxt.jsはあまり大きい変更は来ていない。
ChakraUI
- Flutter開発の経験があったのでそれを活かしやすかった
- Reactと相性がよい
- 1ファイル1コンポーネント管理と相性が良い
- 競合としてTailwindがありますが、classNameにすべてを書く書き方が見づらくて採用に消極的だった
NextAuth.js(現Auth.js)
- Next.jsのために作られてしかも無料なので、採用しない理由がない
- 慣れれば実装が楽
- ユーザー側にとっても、アカウント連携させるだけで良いので楽だと思った
- ユーザーのメールアドレスの管理を避けたかった
- 必要があれば自作のログインページを使える
Prisma
- SQL書かずにSQLを使えて便利(SQLで書きたいと思うこともありますが)
- 使用DBがある程度自由
  → 今回Vercelにデプロイしていますが、ここの無料枠はすでにつかっていまっていたため、supabaseを使用。DBが変わっても使用感に特に変化はなかったので、いろいろDBを変えることができそうです。環境変数でDBのURLを変えるだけでよかったのでとても楽でした。
GPT API(gpt-3.5-turbo)

情報が多いので調べて問題を解決しやすい
APIを使った実装が容易だった
もともとChatGPTの方を頻繁に使用していた

当アプリのコアとなるところ。スニペット登録時の省力化と、なるべく多くのパターンのスニペットで、指定のフォーマットに合うようにするため、AIの力を借りるのは不可欠です。
一番情報が多く実装が楽で、実際ほぼコピペで行けた。プロンプトはもちろん調整が必要で、今回のアプリでは決まったフォーマットで返ってくるようにJSON形式の指定をした。
プロンプトはこんな感じにしました。もっとうまい書き方があるかもしれませんが、応答結果はいい感じだったのでこれで使用しています。

      下記の処理について、指定のフォーマットのJSON形式で回答お願いします。データに質問文は不要です。
      プログラミングなどの処理になっていない文字列の場合は、"function_name"にエラーと返してください。
      {
        "function_name_jp": "処理名 日本語で",
        "function_name_en": "処理名 英語で",
        "function_description": "日本語の処理概要",
        "function_keywords": "処理概要のキーワードの配列",
        "used_program_language": "使用されているプログラミング言語の英語名称",
        "used_frameworks": "使用されているフレームワークの配列",
        "used_techs": "その他に使用されているフレームワーク・ライブラリ・パッケージ・技術などの名称の配列",
      }

      ${snippet}

6. 遭遇した課題と解決策 (Challenges and Solutions):

デザイン
今まで、イチからデザインを考えてコーディングするということがなかったため、どういうデザインにするかを考えるのが大変でした。UX、現状の技術力、レスポンシブ対応など考えることが多いです…。特にレスポンシブ対応では、あっちを直せばこっちが崩れるといったことが頻発して、調整するのが大変でした。かなり考えて作ったデザインでも、いざ完成してみると拙さが残ってしまいますね。デザイナーの方本当に尊敬します…。
　
法的な内容の整備
Webアプリとしてリリースするにあたって必要だった利用規約、プライバシーポリシーなどの対応が、初の個人開発だったこともあり少々苦戦。Webアプリ、個人ブログ向けの内容で、汎用的な内容を紹介しているサイトがあったのでそれを参考にしました。
GoogleAdsenseの審査に通らない
対策としては下記の3つ考えられます。

アクセス数、利用者を増やしてから再申請
宣伝などを頑張ってアクセス数、利用者数を増やせば通る可能性はありそう。しかし、かなり時間がかかるので、下の2つを対応しながらになりますね。
まずは個人ブログを通す
ブログで最初の審査を通したあと、同じドメインのものなら審査に通りやすい、というようなことを見かけたので、作ってあるの個人ブログの記事を充実させて一度審査を通した後に、サブドメインを設定して再度このアプリを審査にかけてみる
別の広告媒体を使用する
1.の方法だとやはり時間がかかってしまうので、個人ブログを整備する前に審査がゆるいorない広告媒体をさくっと実装するのがよさそうと思い、実装しました。これについては、別途記事にしたいと思います。
→ 2023/10/31 書きました

7. 結果と学び (Results and Learnings):

Webアプリを運営するにあたって必要な作業を一通り実施することができた
利用規約、プライバシーポリシー+免責事項といった法的な内容に触れられた
(汎用的な内容だが初めてまともに読みました…。考えてみれば当然ですが、難癖をつけられない必要十分な内容がしっかり書かれていますね。)
AI利用はやはり汎用性が高いと分かった

8. 今後の展望 (Future Prospects):

GPT APIについて
今回のアプリでは、GPT3.5を使用しています。理由は、GPT4のAPIにアクセスできないためです。GPT4のAPIは、支払履歴があるユーザーにのみ開放されているようです。しかも1ドル以上の支払い…。一人で1ドル分のAPIを叩くのは意外と大変なので、ますますこのアプリをいろんな方に使ってもらう必要が出てきました！また、もう少し複雑な内容の問い合わせが必要になるアプリを作ることになれば、LangChainというのも使ってみたいです。LangChainを使えば、登録済みのスニペットを読ませることで、概要作成力が上がるのではないかと考えています。スニペット登録の際に、ユーザーさんに概要を逐一最適化していただけていればですが…。

広告について
このアプリに関して言えば、GoogleAdsenseをどうにかして審査通過させたいですね。審査の難易度的には、これに通ればアプリが完成形になったと言える気がします。
このアプリに関わらずいえば、AIのAPIを利用したアプリをまた作成したいと考えてます。またGPT APIを使うことになりそうですが。一応こんなのを作ってみたいというアイディアはありますが、アイディアを考えるだけでも一苦労です。アイディアといえば先日、DEV HAUNTという個人開発サイトを紹介するサイトに、今回作成したアプリを掲載したところ、なんとコメントを、こんなアプリいいんじゃないかというアイディアとともにいただくことができました。とても嬉しく、ありがたいですね。

9. まとめ (Conclusion):

よくプログラミング初心者向けの記事で、インプットするのも大事だが、ものにしたいならさっさとアプリを作ってリリースしろ、という言葉を見かけます。私はプログラミング自体は初心者ではないものの、初の個人開発をやってみてこの言葉の大事さを痛感しました。時間はかかりましたが、作りきれてよかったです。

10. 参考資料 (References):

開発全般

利用規約、プライバシーポリシー+免責事項関連