フロントエンドエンジニアが一人もいなかった会社に、コーディング（ほぼ）未経験で入社して半年のペーペーが、ChatGPTを使ってキャリアパス診断を作った話

## つくったもの
[『キャリアパス診断』](https://www.geekly.co.jp/diagnosis/career-path/ "geekly 『キャリアパス診断』")

https://youtu.be/WkoW8OMEOkI

職種、年齢、年収を入力するとGPT(model:GPT-4)が今後10年のキャリアパス（年収と職種変動）を予測し、必要なスキルとコメントを追加でくれるというもの。



https://prtimes.jp/main/html/rd/p/000000047.000039818.html


## はじめに

株式会社ギークリーの一人目のフロントエンドエンジニアとして2022年10月に入社しました。
前職では社員数3人のスタートアップベンチャーに2年勤め、主にWordpressのElementorを使ってノーコードでwebサイトを制作していました。
その過程でローンの計算シミュレーターを作る必要があり、それだけHTML/css/javascriptで作成したので、（ほぼ）コーディング未経験と定義しています。
シミュレーターを作る前にProgateで一通りの基礎は学びました。

高校卒業→プロゲーマーを3年→法政大学経済学部→前職→現職(ギークリー)
といった変わった経歴の持ち主でもあります。

ギークリーはIT特化型の転職エージェントで、私自身も前職からの転職にギークリーを求職者として利用し、ギークリーに転職しました。


## 企画背景

ChatGPTが昨年末に登場し、IT特化の転職エーエジェントとしてはなんとしてもGPTを用いた施策をうちたい！！
という~~安直な~~考えから立案し、やってみよう！！という上長のありがたい言葉と共に企画が走り出しました。

## 公開までのタイムライン
### 3月27日　ブレスト
* GPT施策の先鋒としてリリースまでの速度重視で行う
* 私の技術力でできそうな難易度のものを考える
（最終的には社内データベース情報を学習させ、具体的な企業提案等もさせたい）
* ただGPTを使っていますアピールをするのではなく、登録に結び付けるものにしたい

（実際のブレストメモに残っていた初期計画）
WF＆デザイン作成：4/5
コーディング完了：4/12
デバッグ：4/14
修正、リリース：4/17

この時点での私の状態としては
* 入社してから5ヶ月間LPのマークアップをたくさんやっていたのでHTML/scss/jsは無難に書けるようになった
* PHPが少しだけ読めるようになった
* GPTのAPIを叩く方法を知らない
* Pythonを1週間前に初めて使った

こんな状態になります。完成させた今だからわかりますが、何もかもノンストップで走れてギリギリといったスケジュールでした。
要件定義や事前調査をもっと深くすべきだったと反省しています。
実際にリリースできたのはGWなどもあり、延期延期を続け5/11でした。

私が作ったものではないですが、[年収診断](https://www.geekly.co.jp/diagnosis/income/ "geekly 年収診断")という診断系コンテンツを以前リリースしており、
この仕組みを使いまわすことで開発速度と私の技術不足を補おうと考えました。そしてChatGPTにやってもらって嬉しい診断ってなんだろう...と考えてたどり着いたのがキャリアパス診断です。

### 4月初週

マーケター及びデザイナーの方々にWFやデザインを完全に丸投げし、私はまずChatGPTを用いてプロンプトの作成にとりかかりました。最初はAPIを用いずにChatGPT-4でテストしていました。
（APIの費用申請などをしていなかったのもあります。この辺ももっと早くやっておけばよかったなと今は思います。）

OpenAI製で英語がベースということもあり、最初は年収の上がり方が明らかにアメリカ基準で、10年後年収が1500万円~2000万円という結果がザラにあったり、職種によっては10年間職種が変わらないまま、なんてこともありました。
そういった問題を試行錯誤の上一つ一つ潰していました。

LangChainみたいなライブラリを使ったらもっと楽だったのかな...と思います。
基本的にはGPTの気持ちはGPTが一番わかるだろという精神で、プロンプトもChatGPTを介して作っていました。
ChatGPTが登場してから、GPT関連の情報を大量にインプットし、社内掲示板で積極的にGPTについて発信し続けたのはかなり良かったと思います。
発信の重要性に気づいたので今度はqiitaでの発信にも挑戦してみることにしました。


試行錯誤の果て、最終的には以下のプロンプトになります。api_keyとjobなどを設定してpythonで叩けば遊べますが
良かったら[キャリアパス診断](https://www.geekly.co.jp/diagnosis/career-path/ "geekly キャリアパス診断")でやってくれたら嬉しいなって....

~~~
import openai

# APIキーを設定
openai.api_key = "hogehogehoge"


response = openai.ChatCompletion.create(
    model="gpt-4",
    temperature=0.1,
    messages = [
        {"role": "system", "content": "You are an AI trained to predict job, age, salary changes and required skills every 2 years for the next 10 years, based on the Japanese market. Upgrade the job title at least twice and provide concise information. Limit the salary increase to a maximum of 2.5 times the current salary."},
        {"role": "user", "content": f"Current data: job = {job}, age = {age}, salary = {annual}"},
        {"role": "assistant", "content": "Please start the analysis based on the given job, beginning 2 years from the current age. Make predictions for every 2 years over the next 10 years (5 predictions in total), taking into account the average salary in Japan. For each time point, propose 2 required skills connected by a '、'. Format the output predictions as a JSON object in Japanese, with keys like 'job1', 'salary1', 'age1', 'skill1', and so on. After the 10-year predictions, provide a 100-character specific and useful piece of information, concrete actions, points to be aware of, and motivating words as the 'advice' key, starting with 'このキャリアパスを描くためには、'. The last part of the advice,  please add content 'あくまでこのキャリアパスはGPT4によって出力された一例です、この診断結果をもとに、自分の目標とするキャリアを明確にしましょう！！'. Make sure the salary predictions are realistic and do not exceed 2.5 times the current salary, keeping the increments within 250,000 yen."},
    ]
) 

# ChatGPTの回答を出力
print(response["choices"][0]["message"]["content"]) 
~~~


### 4月2週目
* デザインが固まり、コーディング開始
* 同時並行でChatGPTに聞きまくりながら、GPTAPIの利用方法とPythonでAPIを叩く方法を理解し、APIでのプロンプトテストも開始します。

#### 問題発生
ここで大きな問題に気づきます。GPT4のAPIキーのwaitlistには3/16午前中（開始が3/15)に登録しましたが、まだGPTwaitlistを抜けれておらず、仕方なくmodel:3.5turboを使って開発することになります。
ChatGPT-4で使っていたプロンプトを3.5turboに投げた場合、出力結果にとんでもない差が生まれることはご存じの方も多いかと思いますが、それによってプロンプトを再度練り直すことになりました。
このあたりで4/17リリースは無理だなということを悟ります。見切り発車で突き進んでしまったことを反省しています。twitterなどでAPIキー解放されたという声が見受けられたので2日目に応募したし大丈夫やろくらいに思ってました。

ただ4月2週時点では3.5turboですら結果が帰ってくるまで90秒程かかっていたので、仮にapiキーが発行されたとしても、4を使うのはどちらにせよ現実的ではないなと判断していました。

### 4月3週目
* 3.5turboで安定した出力をさせることに苦戦
当然ながら社内にプロンプトエンジニアリング有識者なんてものはいないので、一人でプロンプトと格闘する日々が続いていたのですが、「プロンプトだったらエンジニアじゃなくても行けるんじゃね？」という発想に至り、マーケターの方に協力してもらい、色々なパターンを試してもらいました。別観点からの気づきを沢山もらうことができ、かなり助かりました。
* GPTに関する利用規約や注意書きの作成
プライバシーポリシーが必須であるように、GPTを使うことによる利用規約の作成も必須です。
こちらに関しても頭があまり回っていなかったのですが、ディレクター、人事、法務など様々な方々のご協力を頂き、形にしていただきました。規約の確認などはブレスト直後からディレクターを中心に動いてもらっていました。

### 4月4週目
* なんとかGW前に仕上げたいと奮起
* GPTのAPIを叩いて帰ってくるデータの処理に詰まりながらもなんとか実装
結果画面ページでHTMLに入れれるようにjsonでデータを返してもらいました。少しでも待機時間を減らすため、GPTAPIに飛ばす情報（職種、年齢、年収）が揃った時点でajaxを使ってプロンプトを飛ばすようにしました。
この時javascript側でAPIキーを直接指定していましたが、ヤバイということに奇跡的に気が付き、PHP側で変数に入れ、サーバーサイドでAPIキーを指定しました。（まじで危なかった...）
* デザイナーフル稼働
一部デザインの修正、広告用バナーやトップページからの導線用バナー、プレスリリース用画像など膨大な量のクリエイティブ作業をしていただきました。

#### GPT API覚醒？
4月末にAPIのレスポンスが爆速になりました。3.5turboでデータが帰ってくるまで90秒程かかっていたのですが、このころには10~15秒で帰ってくるようになりました。Thx OpenAI.

#### 4/28 ついにGPT-4 APIの招待が届く
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953179/dde01e37-6cbb-366e-b670-66572d5f49af.png)
いや今かよ！！！！どんだけ3.5turbo用のプロンプト頑張ったと思ってんの...


### 5月初週
* webセクションフル稼働でテスト
マーケター、デザイナー、メディア、エンジニア関係が集まったのが私の所属するwebセクションであり、GW前リリースをまだ諦めていなかったので、手の空いてるメンバー全員でテストを実施し、5/1時点で一応形にすることはできました。
使っていて違和感を感じる点などを洗い出し、デザインの修正やプロンプトの最終調整を行いました。

### 5/2
* データベース登録関連で修正が必要な点が多数あった
* やっぱり3.5だとキャリアパスの流れとかコメントに違和感が無い...?
なんとかすべての問題を乗り越え完成！！！！と個人的には舞い上がっていたのですが、マーケター側からやっぱりもう少し精度の高いものを提供したい、GW中に不具合があったりした場合も怖いしGW明けリリースに延期しましょう。と伝えられGW前のリリースはできませんでした。

### 5月2週目
* クオリティ向上のためGPT-4を用いることを決め、GPT-4用のプロンプトを急遽用意します。
大幅な変更はしていませんが、jsonの形式がなぜか一部変わってしまったので、そういった点の対応をしました。
* API利用料は意外と大したことなかった
4になり料金面で不安を感じていましたが、"usage":{"prompt_tokens":377,"completion_tokens":449,"total_tokens":826}
"usage":{"prompt_tokens":377,"completion_tokens":438,"total_tokens":815},"
キャリアパス診断のトークン数はこの程度で為替相場にもよりますが1回あたり5円程度です。


### 5/11 そしてついに...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953179/18a47397-d3a4-16c0-fc42-fe9ead81bb3d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2953179/c40df2eb-1404-7e32-6ca5-2eaa38cddf79.png)


### 振り返り
いかがだったでしょうか。Qiitaにいるつよつよエンジニアの皆様からするとツッコみどころが多かったかと思いますが、自分なりに精一杯出来ることをやってみてなんとか形にはできました。立案からリリースまで通して参画してチーム全体を動かしたのは初めてだったのであまりにも学ぶことが多かったです。ただ何よりも楽しかった！初めて扱う技術に大量に触れ、チームの偉大さを知り、とにかく楽しいが一番大きかったです。
これと並行してPythonで社内掲示板の集計システムを作っていたりしたので、特にAPIやPHP周りで大幅に成長を実感したことも良かったと思います。
ChatGPTは偉大。教わる人がいない環境でこういったものをリリースできたのは間違いなくChatGPTのお陰です。今後もAIの進歩が楽しみですね。


#

### 終わりに
非常に長くなってしまいましたが読んでいただきありがとうございました。

そして、キャリアパス診断作成に携わっていただいた皆さんにもここで改めて感謝を！
私の力量不足で沢山ご迷惑をおかけしましたが無事リリースまで行けたのは偏に皆様の
手厚いサポートのおかげです！本当にありがとうございました！！