勢いでサービスを作るためにChatGPTを使う話
初めに
皆さん、勢いでサービスを作ろうと思ったことはありませんか？
アイデアがあるけど実装がめんどくさい or そんなに時間がない…
そういうときってありますよね。
この記事ではChatGPTを使ってサービスを作るということをやってみました。
作ったもの
1日一回今日行うチャレンジをランダムに表示してくれるサービスです。
ChatGPTをどのように使ったか
今回、ChatGPTを使うにあたって以下の部分で活用しました。
- コンテンツの生成
2．画面の実装 - コードの修正
逆に以下の部分ではChatGPTを使わず、自分で行いました。 - プラットフォーム、フレームワークの選定
- ルーティング周り
ChatGPTで行ったこと
1.コンテンツの生成について
今回実装するサービスでは、その日行うチャレンジのリストが必要でした。
しかしそのようなリストを作成する場合、多くの要素を書きだす必要が出てしまい時間がかかります。
そこでChatGPTを活用し、1日で行えるチャレンジを列挙してもらうということを行いました。
このように生成されたリストを見ていると"毎日"や"1日一回"というワードが出てきますが、今回のサービスでは1日でできるチャレンジを出したいという気持ちがあったため、これらのワードを削除してリストを作成するということを行いました
2.画面の実装について
今回、このサービスはsvelteKitとvercelを用いて実装しようと思っていました。
そこで各画面のコードをChatGPTで生成しました。
画面はほぼChatGPTで生成し、僕が行ったのはちょっとした修正ぐらいです。
3.コードの修正
ChatGPTでコードを生成する際、コードの不整合という問題が出てきます。
例えばある画面ではAという実装を使用しているが、ある画面ではBという実装を使用しており、それらでデータを共有している場合、うまく機能しないというケースが度々発生します。
今回のこのサービスではデータをlocalStorageに保存しているのですが、本来はデータを保存しているべきところで保存していないなどがありました。
例えば、今回のサービスではcheckResult関数というチャレンジを完了した際に動かす関数があるのですが、ChatGPTでの実装を見てみると
function checkResult() {
alert(lastResult ? `You got ${lastResult.item.name} on ${new Date(lastResult.date).toLocaleString()}` : 'You have not played yet');
}
となっています。
しかし、このサービスでは完了したという情報をlocalStorageに保存したいと思っていたのでChatGPTに以下のように修正させるということを行いました。
ここで実際に出力された関数が
function checkResult(result) {
const resultDate = new Date(result.date).toLocaleDateString();
const gachaIndex = gachaHistory.findIndex(gacha => gacha.date === resultDate);
if (gachaIndex === -1) {
// 新規の実行
gachaHistory.push({
date: resultDate,
result: result.result,
});
} else {
// 既に実行済みの場合
gachaHistory[gachaIndex].result = result.result;
}
localStorage.setItem('gacha_history', JSON.stringify(gachaHistory));
}
できちんと修正されたものが出力されていることがわかります。
実際にこれを組み込む際、修正する部分は1割程度でした。
ChatGPTで行わなかったこと
1.プラットフォーム、フレームワークの選定
これに関しては目的に応じて選ぶ方がいいと思ったのでChatGPTを使いませんでした（使う必要もないですしね）
フレームワークは正直なんでもいいと思うのですが、ChatGPTでサービスを作る際はファイルを作成するということが少ない方が早く作れるため、ファイル数が少なくても動かせるようなフレームワークがいいかもしれません。
2.ルーティング周り
今回はルーティングなどは自分でやりましたが、ここに関してはChatGPTで自動化できると思います。
実際別のケースで作りたいサービスの機能を教え、それに対応するものを出力させるといい感じになったので、十分使えるかと思います。
今回はやらなかったがChatGPTでできそうなこと
- フォルダ構造を決める
- やってみたら意外とできた、フォルダ構造によって動きが変わるフレームワークではかなり便利そう
- 機能の選定
- 目的に対してどのような機能が必要かというのもある程度できそう、機能を列挙させて、そこからいろんなこと（フォルダ構造や実装など）を聞き出すことである程度楽に作れそう
ChatGPTでサービスを作って思ったこと
1. 実装する手間がが0になるわけではない
コードを吐き出してもらうと、意外と違和感がある実装などが出てきたりします。
それを修正するためにコードを書き直すということはあるのでコードを書かなくなるということはありません。
また、いい感じのコードがそもそも吐き出されないケースもあるのでそのような場合は0から実装する必要があります。
あと
2. デザインは最小限になる傾向がある
吐き出されたコードを見るとデザインなどは最小限になるケースが多かったです、CSSが書かれていないケースもありました。
デザイン周りはどうにかする必要があると思います。（僕はデザインが苦手なのでどうにもできませんでしたが…）
ただここに関してはpromptをどうにかすれば何とかなる気がします。
3. デプロイとかインフラとかは自分でやる必要がある。
インフラやデプロイなどは自分でやる必要があります。
助けてくれ
結論
ChatGPTを使うことで高速にサービスを作ることができました。
ただしChatGPTを使う場合でも修正等でプログラミングの知識が必要になるので、まだ知識が0でもサービスを作れるというところまでは行っていないのかもしれません。
Discussion