[個人開発]ChatGPT APIを使って転職エントリをまとめるサイトを作りました[技術紹介編]
作ったサイトはこちらになります。
前提
私の本業はフリーランスのデータアナリストで、個人開発がやりたくてWebアプリケーションの開発を勉強し始めました。今回のリリースが初の個人開発プロダクトのリリースです。
今までzennは読むだけだったのですが、これを期に自分の学びを発信していこうと思います。
よろしくお願いいたします！
転職DBとは
転職DBとは転職エントリを要約し会社別に整理して掲載しているサイトです。
サイトの趣旨についてはこちらのnoteに書きましたので、本記事ではサイトを構成する技術について紹介します。
Chatgpt API + function calling
転職DBではChatgpt APIを使用して転職エントリを要約しています。
以下のように一つの転職に対する複数の要素を一度のリクエストで取得するため、function callingを使用しています。
{
"fromCompany": "会社A",
"fromCompanyReason": [
"給与に不満があった"
],
"toCompany": "会社B",
"toCompanyReason": [
"前職で一緒に働いていた優秀なメンバーが入社していた",
"ビジョンに共感した",
],
"jobType": "営業",
}
上記のような返答をしてもらうために、openai.createChatCompletionの引数に以下のような値を渡しています。
function_call: 'auto',
functions: [{
name: 'summarizedArticle',
description: 'summarized information of an article',
parameters: {
type: 'object',
properties: {
fromCompanyName: {
type: 'string',
description: 'A company name writer exited'
},
// ...他のproperties
jobType: {
type: 'string',
description: 'Job type of writer',
enum: ['エンジニア', 'デザイナー', 'ビジネス', 'マーケティング', 'PM', 'コンサルタント', 'その他']
},
},
required: ['fromCompanyName', 'toCompanyName', 'fromCompanyReason', 'toCompanyReason', 'jobType']
}
}],
少し思ってたのと違ったのはjobTypeの部分でenumを指定しているのですが、ChatGPTはこちらで指定したenum以外の値も出力してくるということです。
ChatGPT APIのおかげで900件ほどの転職エントリを数時間で要約することができました。
next13 App Router
私がこのサイトの開発を始めた時には、App Routerはstableになったばかりで学習リソースもPages Routerのものしかなく混乱しましたが、とりあえずApp Routerを採用しました。
*先日のNext ConfでLearn Next.jsが発表されたので、これからやってみようと思っています。
dynamic route
転職DBでは会社ごとに転職エントリをまとめたページがあります。例えばクラスメソッドだと以下のページです。
これは以下のようにcompany/[id]/page.tsxにページを作成するだけで会社ごとのページが簡単に作れました。
また、OGP画像についても以下のドキュメントの通りにopengraph-image.tsxを設定するだけで、ページごとの画像が生成されます。
Next.jsにApp Routerから入門しましたが、結果的に非常に開発体験が良く、これからも使っていきたいと思いました。
shadcn/ui
デザインに苦手意識があり、手間なくいい感じにしたいということでshadcn/uiをUIライブラリに採用しました。
このサイトの主な部分はデータテーブルですが、これはほぼ以下のコンポーネントそのままです。
フィルターやソートなど、欲しい機能が最初から備わっており、サクッと使えて非常に便利でした。
またshadcn/uiはv0.devのデフォルトのUIフレームワークにも採用されています。私はまだv0.devはwaitlist待ちなのですが、早く使ってみたいです。
終わりに
ここまでお読みいただきありがとうございました！
これからもどんどん個人開発をやっていこうと思います。
もしサイトのフィードバックやバグ報告などございましたら、以下までお願いいたします。
Discussion