# ハッカソンに出てきました
(例：20210901_LT会を開催しました)
###### tags: `ブログ記事`

- [ ] 公開（ブログ公開担当者がいじるやつ）

太字斜体で書いてある内容を埋めて行ってください．
文章，画像は太字斜体の下の行に入れてください．
最初に書く時はREADMEを読んだら読むといいと思います．

<br>

## 表示されない情報
***書いた人の名前(自己紹介文と同じ名前)***
{
市之瀬拓実
}

***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{
こんにちは。学部4年の市之瀬です。
今回は先日ハッカソンに出たときに作ったものと、そこで得た学びを共有しようと思います。
}

<br>

## 表示される部分
***サムネイル画像***
{
}

***カテゴリ***
以下の中から該当しそうなカテゴリを選択してください
※一つだけ選択してください
- [ ] 対外活動

***タグ***
以下の中から該当しそうなカテゴリを選択してください．当てはまる物がない場合は適宜追加してください.
言語
- [x] HTML
- [x] CSS
- [x] Python
- [ ] Go
- [ ] Ruby
- [x] JavaScript
- [x] TypeScript
- [ ] Dart
- [ ] Rust
- [ ] Kotlin
- [ ] Swift

フレームワーク・ライブラリ
- [ ] Ruby on rails
- [ ] Vue.js
- [ ] Nuxt.js
- [ ] React.js
- [x] Next.js
- [ ] Gin
- [ ] Flluter
- [x] fastAPI

ツール
- [x] GitHub
- [ ] ターミナル
- [ ] WSL
- [ ] Ubuntu
- [x] Docker
- [ ] Raspberry Pi
- [ ] Figma

分野
- [ ] チームづくり
- [x] フロントエンド
- [x] バックエンド
- [x] インフラ
- [ ] Web-design
- [x] API関係

---

***以下に本文を記載してください***

こんにちは。現在学部4年の市之瀬です。
今回は先日ハッカソンに出たときに作ったものと、そこで得た学びを共有しようと思います。

## ChatGPT使いたい
今回ハッカソンにはシェアハウスしている友達2人と出てきました。計3人のチームです。その友人の一人が、ChatGPTを使いたいとうるさかったので、今回のハッカソンではこれを主軸に開発するものを決めました。

ChatGPTといって思いつくのは、「対話による文章生成」でした。
そこで最初は「一人かけてても大丈夫！マーダーミステリーAI」を作ろうとしたのですが、著作権の無いマーダーミステリー探しが面倒だし、何よりマーダーミステリーを作るのは画面数が多くてしんどすぎたため却下となりました。

そこで、今回作ったものは、ChatGPTとの対話で進むレースゲームです。

## Chatグランプリ
このゲームの面白いポイントは、
- レースに参加する車を自作できる
- ChatGPTとの対話でレースが進むため、無限に展開がある

ところだと思ってます。

### レースに参加する車を自作できる
下の画像の「入力欄」に、作って欲しい車の特徴を入れるとその言葉に応じた車をChatGPTが作ってくれます。作ってくれたものが下の画像になります。

こんな感じで、画像と車の情報（名前、説明文など・・）が生成されます。

### レース部分
レースに移ると、下の画像のようにアナウンサーから次の行動を問われます。
このときに、ユーザーは好きな行動を入力して進めます。
無難に行くなら、「めっちゃアクセルを踏む！」とかだと思います。
ただほんとになんでも良くて、空飛んでもいいし、ワープしても良いです。そんな入力に対しても、chatGPTが柔軟に対処してくれます。便利なAIですね。

## 学んだこと
chatGPTを使う上で一番気になったのは、お金です。使うたびにお金がかかるとか、信じられない。そんなものをネット上にあげて、なぜみんな破産しないのか・・・
APIキーを設定してはいましたが、ただの文字データなので知られたら1発でアウトです。
お金を使いすぎるのが嫌だったので、どうにか安全にAPIを叩けないか考えた結果、下の画像の左のような構成になりました。


この構成の良いところは、APIがインターネットに公開されていないところです。これが可能になっているのは、Next.jsにクライアントとサーバーという二つの実行環境があるからです。

通常のウェブアプリはクライアントとAPIのみです。クライアントからapiを叩く際に、例えばlocalhost:9004/getItemsと書いたとします。こう書くと、クライアントは使用するユーザーの端末で動作するためユーザーの端末のlocalhost:9004にアクセスしようとします。しかしユーザーの端末にAPIは立っていないので叩くことはできません。
できないために、通常はAPIを公開します。ここでAPIをchatgp-api.nosse.netとします。クライアントがこのchatgp-api.nosse.netを叩くようにすることで、インターネット上にあるAPIにアクセスして叩くことができます。

しかし今回はChatGPTを使っているためAPIを公開したくありません。なので上で書いた方法はとれません。
そこで使用したのがNext.jsのサーバー側です。クライアント側が文字通りクライアント側で動作するのに対し、サーバーも文字通り実行されるサーバー上で動作します。そのため、サーバー側はdockerコンテナ内に存在します。
dockerコンテナ内に存在しているということは、APIとdocker内のローカル通信できるということです。

この仕様を用いたのが左側の構成図になります。クライアントは、まず自身のサーバー側にAPIを叩くよう要求します。すると、サーバー側はdocker内のローカル通信でAPIを叩きます。叩いた結果はサーバー側を介してクライアントに届きます。これにより、APIをインターネットに公開せずに叩くことが出来ました。
サーバー側で、クライアントの認証情報などをチェックすることで、この構成はより強固なAPIにすることができます。chatGPTなどの従量課金のAPIを叩く際には参考にしてみてください。