# 20241208_衝動的にWEBゲーム作り始めた男の末路
(例：20210901_LT会を開催しました)
###### tags: `ブログ記事`

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

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

<br>

## 表示されない情報
***書いた人の名前(自己紹介文と同じ名前)***
{
うっちー
}

***記事の簡単な説明(検索した時にタイトルの下に出てくる文章)***
{
<!-- 44thNUTMEGの副局長に就任した人間の話 -->
Next.js初心者が勢いだけで人狼ゲームを作ろうとした話
}

<br>

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

***カテゴリ***
以下の中から該当しそうなカテゴリを選択してください
※一つだけ選択してください
- [ ] 対外活動
- [x] 活動の様子
- [ ] メンバーの趣味
- [ ] 実務訓練体験記
- [ ] NUTMEG Advent Calendar 2023

***タグ***
以下の中から該当しそうなカテゴリを選択してください．当てはまる物がない場合は適宜追加してください.
言語
- [ ] HTML
- [x] CSS
- [ ] 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] GitHub
- [ ] ターミナル
- [ ] WSL
- [ ] Ubuntu
- [ ] Docker
- [ ] Raspberry Pi
- [x] Figma

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

---

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

このブログは本来11/27に公開される予定でしたが、内田がブログ発表の日に寝坊をかましたせいでアドカレよりも後の公開となっております。
時系列的にはアドカレ以前の内容となっています。
ご注意ください。

## 副局長になりました！
お疲れ様です！うっちーです！
ラーメンフェスの企画をやろうと奔走していた時期から早5カ月が過ぎ、現在ありがたいことに
### NUTMEGの副局長兼SeeFTのPMをさせて頂いています！
(前回のブログ：[新入生が新企画を作ろうとしてみた！](https://blog.nutmeg.cloud/blog/post-20240627/))

NUTMEGには今まで局長しかいなかったのですが、人数が増えてきたこともあり局長だけでは手が回らない箇所が増えてきたということで今年度から副局長を置くことに決まりました！

↑断られる可能性を全く考慮していない前局長と、断る選択肢など頭にない現副局長

初代副局長ということで色々手探り状態ですが、他局の副局長とよもやまもしたりしながら活動しております！
とりあえず外部イベントなどは局長、内部イベントは副局長という形で役割を分担しています。
ドンドン局内イベントを開催して技術力の向上や局内の交流の活性化を目指していきたいと思っています！

## デザインコンペ開かれる！
技大祭が終わり、局長・副局長以外だけではなくPM・TMも総入れ替えが行われました！
前局長のつっきーさんの意向で、今年度のPM・TMは**全員3年生から選ばれることになりました！**
理由としては、局長や執行部と学年が同じ方がコミュニケーションを取りやすいこと、4年生がPM・TMになると実務訓練があって2学期ほぼ活動ができなくなってしまうことなどが挙げられました。

個人的にも今のところは非常に良いなと思っています！
全員が同学年なので、互いに変な気遣いなどをせずに接することができているように感じます！

さて、そんな折に開催されたのが以前のブログでも紹介されていた
### デザインコンペです！
これは新体制になったデザインチームにて、
**「あ～デザインしてぇ...」** という欲求が高まってきた時に突発的に開催されている企画です！
(デザインコンペのブログ：[そうだコンペやろう](https://blog.nutmeg.cloud/blog/post-20241114/))

なぜか参加賞としてステッカーが貰えるというのがお決まりになっており、光り物を好むNUTMEGメンバーは狂気乱舞して参加しています！
(全ての始まり：[Hackathonステッカー作成記](https://blog.nutmeg.cloud/blog/post-20241005/))

## デザインコンペ参加する！

SeeFTのPMになったことと、元々フロントエンドに興味があったので「デザインもぼちぼち勉強しないとなぁ...」と考えていた折のデザインコンペだったので、自分も動機付けに参加することにしました！

なお、この辺りの時期は企画局に凸ったり引き継ぎ直後のPMに苦戦したり課題大量にあったりで余裕がなく、一度参加を取り消したものの主催者に見逃してもらえなかった模様(今となっては感謝しかない)

## ハイレベル過ぎる戦いに巻き込まれた雑魚の末路
時間がなかったこともあり、**「ゆる募」** と書いてあったものだから、最悪「間に合いませんでした〜」でも許されるやろと舐め腐った根性で参加した僕はコンペ当日に絶望を味わうことになりました。
# なんか皆様 異様に気合い入ってらっしゃる
僕は忘れていたのです。NUTMEGは頭のネジが外れたイカれた人間の集まりであるということを...
特に今年のデザインチームの面々は平気で徹夜をするようなデザインジャンキーしかおらず、そんな奴らが
### 『デザインコンペやります！！』
と言ってゆる募で済むはずがなかったのです。

1. 新HomePagePM作: やけに旨そうな寿司のゲーム
2. 前DesignTM作: 意味わからんくらいカッコいいスライドデザイン
3. 新DesignTM作: 「使いたかったからアイソメトリック使ってみたよ〜」
4. なかたく作: プログラマー感の香り立つ名刺デザイン
5. 主催者作: しれっとお出しされたクソかっこいいステッカー
6. わい作: やっつけ感漂うポスターデザイン

### あまりにも場違い
皆様大変優れたデザイン案をお出しになられておられまして、対照的に私めにおきましては発表用のスライドすらコンペ中に作成していた有様でございました。

ゆる募とはなんだったのか・・・
副局長として・SeeFTPMとしての矜持を木っ端微塵にされてしまいました。
ただただ自分が情けなくて仕方がなかった次第です。

というのも、コンペの期間中みんな**命を燃やして** デザインをしていたからです。
- 午前5時に更新されるslack
- 人語を逸脱した投稿

極め付けは仕事量も課題の量も自分より多いのにちゃんとデザイン作ってきたなかたく

タイムマシンが発明されたら「最悪できなくても良いや」とか舐めた気持ちで参加した自分をぶん殴りにいくことを心に誓ったのでした。

## 『衝動』を得る
さて、恥もプライドも地の底に沈んだデザインコンペでしたが、僕は
### 参加したこと自体は全く後悔することはありませんでした！

それはなぜかというと、強烈な『衝動』を得ることができたからです！

### あかりさん作の「NUTMEGの部屋」に出会えたからです！
(あかりさんのブログ: [情報局に入って](https://blog.nutmeg.cloud/blog/post-20240711/))
こちらのデザイン、どこに衝動を掻き立てられたかというとズバリ『**素材**』です！

### なんとPMの顔面が全部素材になったのです！
こんなのおもろいやないかと！
使うしかないやないかと！
そう思ったわけです。

## ネタが降ってくる
「あの素材を使ってなんか作りてぇなぁ...」と思っていた時、ちょうど大型チームビルディングの時期がやってきました。
大型チームビルディングというのは、MTの時間を使ってみんなでワイワイ遊んで楽しいンゴするやつです。

何をやりたいかみんなで意見を出し合いました！
その結果、次のようなアイデアが好評でした
- 人狼ゲーム
- 雪遊び
- 石を探しに散歩
- 闇鍋

全体的にまともではなかったです。

最初に述べたように、今年度から内部イベントは副局長が担当することになっていたので、大型チームビルディングの運営も僕が担当することに。

イカれたアイデアの中で唯一まともなだったのが「人狼ゲーム」でした！
『よし！人狼ゲームをやろう！』僕はそう決めました。
その時です！

# アッ！！
# これ自分で作ったらクッソおもろいやん！

まさに天啓！
まるで運命のように素材の使い所とお披露目の場が同時に転がり込んできたのです！
**これはやるしかねぇなと思いました**
大型チームビルディングの開催は1週間後...
ハッカソンの期間としても実にちょうど良い！
今週は土日も課題ないしやってみよう！と僕は決意したのでした。

## デザインコンペよりデザインコンペしてる
金曜日の授業後、速攻で帰宅した僕はニタニタしながらNUTMEGの部屋のFigmaを眺めていました。
こちらのFigma、コンポーネントのデザインなんかも決めてあって「もう作れるのでは？」というレベルになっていました。
そんなものを眺めていたら自分でも作りたくてしょうがなくなって来るのが人間という生き物です！

というわけでFigmaを触り始めました。
Figmaはデザインチームの作業会で何度か教わったのですが、普段趣味などでも全く使っていなかったので、デザインチームの先輩や他のデザインチームの人が教わっているのを横で聞いていた内容を思い出しながら手探りでデザインを作っていきました！

### これが実に楽しかった！
今まではプログラミングは楽しい楽しいと感じていましたがFigmaではそのような体験はなかったので、特にFigamやデザインが好きという感情は持っていなかったのですが、
- コンポーネントとかまんまコンポーネント指向やん！
- コンポーネントとインスタンスはオブジェクト指向ですか！？
- 長方形ってdivやん！
- ファイルの構造もコーディングする時のことを意識して整理して〜
- セクションでディレクトリ構造みたいに分けれないか？

など次々とFigmaとプログラミングの共通点が見つかっていくと楽しくて仕方なくなっていきました！
コンポーネントを作りながら頭の中で「これはこんな感じのコードで書けそうだなぁ」とか考えながらやるともうダメでした。Figmaでコンポーネント作りながら脳内でプログラミングもやっているような感覚で楽しさが倍々になるのです！

さらに都合の良いことに、ちょうどやまはがAtomicDesignのブログを書いてくれていたのでそちらも大いに参考に！
([コンポーネントをいい感じに整理しよう（Atomic Design)](https://blog.nutmeg.cloud/blog/post-20241107/))
「あ〜まずは小さいコンポーネントから作って、それ組み立てておっきいコンポーネント作っていって最終的にページに辿り着けばええんかな〜」みたいな気持ちでコンポーネントを作っていきました。

さらにさらに都合の良いことに、ちょうど1週間前くらいに授業の課題でこれまたやっつけでデザインをFigmaで作っていた時に、5884さんがFigmaのオートレイアウトについて教えてくれていたため、「使ってみるか〜」という気持ちでオートレイアウトにも挑戦。
これがまたとても便利！
位置を変えると自動でニュインッと配置が入れ替わるのがとても気持ち良い！
配置の方向を縦向き・横向き・折り返しを設定できるなどはCSSのdisplay: flexやグリッドレイアウトで実装できそうだなぁとか考えるとたまらなくなります！

他にもshift + Gでグリッドが見れるようになるよ〜とか、コメントでどんどんメモ書き残していけるやん！とかローカルカラー登録できるんか！？など使えば使うほど新しい機能が見つかりどんどんのめり込んでいきました！

今から思えば、技大祭前日にHomePageのマップ作成のためにFigamのコンポーネントのファイル構造を修正するというタスクをやっていたことも、ファイルの構造を考える上で大きく役に立っていたと感じます！

今までの記憶を辿りながらFigmaに没頭していき、気づいたら9時間くらいぶっ続けで作業していました！
そこからさらに3時間ほど多少グダリながらも作業を続けたところ...
### なんかそれっぽいデザインを完成させることができました！
- ローカルカラーのカタログ
- モーダルのコンポーネント
- ボタンとタイポグラフィのコンポーネント
- 画面遷移

何が良いって、思い出したことや学んだこと、こうやってコーディングしようって思いついたことをコメントで残しておけること。
また、「ここはこういう意図でこうしたんやで〜」というのもコメントで残せるため非常に気持ちが良い！
自分はかなりのメモ魔なので、手軽にメモが残せるというのは非常にありがたかったです！

ほぼ手探りなので最適化できる部分はたくさんあると思われますが、めっちゃ楽しかった上に「自分でもこんなデザインが作れた！」という感動がめちゃくちゃ大きかったです！
(5884さん曰く、開発者モードを始めStoryBookやFigmaからのReactコードの生成などまだまだ奥が深そうで楽しみは尽きません）

こうして僕はリンボに沈んだ自信を一部取り戻したのでした

## もう作るしかない
さぁ、デザインが出来てしまったのです！
しかも作りながら「こうやって書けそう」だとか「ここのセクション分けはそのまんまディレクトリ構成に使えて〜」だとかを脳内やコメントで妄想しまくっていたものがです！
しかもまだ日曜日！
まだ１日しか経ってません！あと6日も開発期間がある！
ニタニタしながらFigmaを眺めるほどに『これもう作れるんだよなぁ』という衝動が心身を覆っていくのです！

しかもしかも最近触り始めたNext.js
こいつ、なんかGitHubのリポジトリ立てるだけでなんかVercelとかいうのでデプロイできちゃうんです！
あ〜もうやるしかねぇわと思いました。
しかもしかもしかも、なかたくからおすすめされていた**Material UI**というコンポーネントライブラリ
こいつも非常に使いたいなぁ...と日頃考えていたのです！
Material UI(以降MUI)はGoogleが提唱しているMaterialDesignというデザインシステムに基づいて作成されたReactのコンポーネントのライブラリです！
(Material UI components: https://mui.com/material-ui/all-components/)
要するにGoogleさんがデザインした良い感じのコンポーネントをもうそのまま使えちゃうっていう夢みたいなライブラリです！
一からモーダルとかボタンのコンポーネントをdivとかをコネコネして作らなくて良いのです！
(なおいまいまいさんからの評価は低い模様。次は違うコンポーネントライブラリ使ってみたくなった！)
スタイルを当て直すことになったら面倒かもだけど、きったねぇデザインでも良いならMUI使えばすぐ作れるんちゃう？みたいに調子こきながらコーディングに入っていきました。

## バックエンド「ｺﾝﾆﾁﾜ」
作り始めてから気づきました
# これバックエンドどうすんの？

僕は今までフロントしか触ったことがなく、バックエンドに関しては「API？そんなのもあるんや」くらいの知識量でした。
とはいえここまで来たからには引き下がれません！
GPTに「Next.jsでapi作るにはどうしたら良いですか？」と聞きながらバックエンド制作に着手！

### この時役に立ったのがNUTMEGハッカソンの経験と成果物でした！
NUTMEGハッカソンにてFESNSというアプリケーションを作成したのですが、この時にデータベース構築からコメントのPOSTとGETまで、一通りのバックエンドの処理を行っていたのです！
(こちらで紹介されています: [NUTMEGに入って５ヶ月経ったのでどれくらい成長できているのか振り返ってみた](https://blog.nutmeg.cloud/blog/post-20241003/))
とはいえバックエンドを担当していたのは僕ではなく、准教授だったので、僕はくぼにいの残していたサンプルコードをパクる所から始めました。それでも同じNext.jsのプロジェクトであり、当時のslackでのやりとりなども残っていたため非常に参考になりました！

特に行き詰まった時に『確実に動く手本』があるのとないのとでは大きく違うと個人的に思っています。
最悪コピペすれば動かせるものが手元にあるというのは非常に心強いのです！

本当ならSeeFTに合わせてデータベースにはPostgreSQLを使い、APIにはGOを使いたかったのですが、1週間では流石に無理だと判断してフロントの言語でデータベースの操作ができると聞いたPrismaなるものを採用することに

そしてめんどくさいなぁと思いながら、ハッカソン後に自力でVercelデプロイまで漕ぎ着けた時のNotionと睨めっこしながら制作を開始！
プロジェクトフォルダの中にnext-projectを作って、dbのフォルダを作って、docker-compose.yamlを作って...と頑張って作りました。
docker-compose.yamlの中身も数時間かけて書きました。
そして書いてから分かったのです。
### Prismaとvercel-postgres使うならnext-projectだけでええんや
結論から言うと、数時間かけてただただディレクトリ構成をややこしくしただけだったという...
dbも要らなければdocker-dompose.yamlも不要でした・・・
開発時間の限られている中で貴重な時間を粉砕される中々に厳しい成長痛でございました。
数時間かけて作り上げたdocker-compose.yamlを削除したcommitをpushした時は胸が張り裂けそうでした。

まぁややこしいSQLだかなんだかを書かなくて良くなったんやとポジティブに考えることにしました。
そしてさらにchatGPT大先生とGitHubMainpilotに導かれて作業すること数時間。
ぼんやりと「こうすれば通信できるんじゃね？」みたいなのがつかめてきました。

next-projectのappディレクトリの中にapiというディレクトリを作り、その中にまたよしなにディレクトリを作成。(初心者のくせにappRouterを使っていました)そしてディレクトリの中にroute.tsを作る。
なんかこれだけでNext.jsってAPIエンドポイントになるみたいだぞと。
まだ知識ガバガバですが、一度POSTとGETが出来てしまうととても簡単にAPIは作れると分かりました！

Vercelなどでデプロイしていれば、
https://nutmeg-wolf.vercel.app/api/rooms/players/alives?roomId=2884 のような"URL"にアクセスすると、↓の画像のようにレスポンスが返ってくるのです！
これが分かれば、あとはフロントの方からこのURLにアクセスし、レスポンスを格納すればええんやなと。

エンドポイントに関してはディレクトリ構造がそのままURLになるみたいな感じで慣れれば非常に分かりやすいと感じました。
APIのコード自体はtypescriptで書くことができたので技術的な負担はほとんどありませんでした！あとcopilotが優秀

<!-- POSTの時とかはbodyに色々情報を詰めれるから良いけど、GETの時ってどうやって指定するんや？とか -->

また、データベースに関しても、vercel-postgresというものでVercelの方でPostgreSQLのデータベースを使えるようで、なんとかできました！
(こちらの記事を参考にさせていただいていました！https://qiita.com/KokiSakano/items/21d72a4ca244ef4704f2)

schema.prismaもGPTに聞きながらそれなりに書けるようになりました！
ORMというズルを使うことでなんとかバックエンドの課題を解決することに成功したのです！

ちなみに、本アプリではポーリングを使用しています。
コメントの取得などを毎秒GETリクエストを飛ばして行っているという極めて頭の悪い実装になっているのですが、どうやらvercelがwebsocketに対応していないこと、SSEを試そうとしたら改修時間とエラーが爆増しそうなことなどからポーリングのままとなっております。悔しい。
なお、ポーリングを使えば良いというのもハッカソンで使った手法だったために採用した面もあり、あらゆる点でNUTMEGハッカソンで一回フルスタックのWEBアプリを作れたという経験が大きかったなと感じています。

## そして爆散
さて、そんなこんなで、デザインに対する自信が地に落ちた段階からFigmaでデザイン案を構築し、全くの無知の状態からバックエンドの構築に成功した僕は、なんとか大型チームビルディングまでに最低限アプリとしての体裁を作り上げることに成功しました！
(完成したのは大型チームビルディング10分前でした...)

そして満を持して大型チームビルディングに臨んだのです！

また、この1週間僕は誰にも人狼ゲームを作っていることを教えていませんでした。
理由は特にないですが、単純にサプライズにした方が盛り上がりそうだなと思ったのと、「櫻井政博のゲーム作るには」という神動画の『内圧をカンカンに高める』というのを一回やってみたかったからです。
([内圧をカンカンに高める 【仕事の姿勢】](https://youtu.be/X6FcraeKrSM?si=linqTl5AsQE_zzny))

実際誰にも言わずに作業するというのは、何か聞きたいことがあっても周りくどい聞き方になって気味の悪い生物になってしまうものの、謎のドキドキとワクワクに包まれてとても楽しかったです！
(授業中にPCで作業しようとすると後にいる友達にバレないかなとかいうスリルが味わえました)
何より、完成させないと『あ...そっすか...』というリアクション以外期待できないためなんとしてでも完成させなくては！という感じで勝手に自分自身を追い込むようになるのかなと感じました！

そうして当日に初めてお披露目した人狼ゲーム！
どよめく302に優越感を感じながらリンクを共有していざゲームスタート！

はい
# およそまともにプレイできる完成度ではありませんでした
実際の所、一番最後に問題となったのはロジックの部分でした。
主にゲームの進行度の同期に関してです。今のところ、phaseという変数を使って管理しているのですが、調べたらちゃんとした手法みたいなものがあると思うので時間ができたり、次アプリを作る際はもっと設計段階に気合いを入れたいと思っています。
(イベント駆動とかなんとかもあるらしいし、そもそもweb-socketやSSEにするべきだろうし)

高専の友達でゲーム開発の経験がある人が言っていたのは、『ゲーム開発はプログラミングの総合格闘技』というものでした。つまり、一番難易度が高いのです。
それをずぶの素人が、初めてづくしの技術で、しかも人狼ゲームとかいうそこそこややこしいゲームを1週間で作ろうとしたらどうなるか...
### こうなるのです！
結局この日は予備で調べておいたまともなWEBの人狼ゲームで遊びました。

## 最後に
# 楽しかったからOKです！
ひたすらに楽しい1週間を過ごせました！
土日があればいつだってハッカソンできるじゃん！という気付きも得ることができました！
成長にしかならなかったですし、できなかった部分もむしろ次のモチベーションとなって僕の中に渦巻いています！授業課題が手につかなくてまずい！
あとNUTMEGという色々な技術と自然に触れ合うことができ、強烈な衝動とも出会える『環境』も非常に大きかったんだなとこうして振り返ってみると感じます！

次こそは自作のゲームで大型チームビルディングをやりたいなぁと考えている副局長でした！

## 作ったやつ
NUTMEG WOLF
https://nutmeg-wolf.vercel.app/
先生にバレたら単位落とされそうで怖い...

## 使用技術
- Next.js(ver14, appRouter)
- React
- TypeScript
- Material UI
- Prisma
- GitHub
- Vercel
- Vercel-Postgres