【Next.js】Among Usが好きすぎて3日間でAmong Us用メモアプリを作りました【個人開発】
こんにちは。鈴木天音（@SakuEji）です。
今日はこの間作ったAmong Us NoteというAmong Us用メモアプリについて書きます。
Among Usが好きすぎて、Among Usのメモを手軽に取れるWebアプリを作りました🎉🎉🎉
— 鈴木天音｜Amane Suzuki (@SakuEji) 2021年2月19日
・遊びながらでもぽちぽち簡単メモ
・信用できる人と怪しい人をターンごとに整理
・議論のおともにどうぞ
拡散していただけると嬉しいです！#AmongUsNote https://t.co/AMIa4wTfzD
こんな感じ↓の雰囲気で、各ターンごとに怪しい人/信じられる人をぽちぽちメモする感じです。
PC上でAmong Usの画面に並べて使ってもいいですし、スマホでメモを表示しておいてもいいです。 どちらでもうまく表示されるようにレスポンシブで設計しています。良かったら使ってみてください！
このサービスを作った理由
最近知り合いのKagglerたちとわいわいAmong Usをやっています。 そのときに手軽でシンプルなメモアプリが欲しい場面（初日怪しかった人を忘れちゃうとか、自分自身の白要素を忘れてうまく弁明できないとか）があったので作りました。
使っている技術・サービス
使っている技術やサービスをざっとリストに書き出すとこんな感じです。
- 機能本体
- React
- Next.js
- 見た目
- Bulma (react-bulma-components)
- styled-components
- fontawesome
- figma
- ホスティング
- Vercel
- 開発まわり
- eslint
- prettier
- husky
- GitHub project
- その他
以下では主要なものについて紹介します。
Next.js
ReactをベースにSSR（サーバーサイドレンダリング）などの機能を足して使いやすくしたフレームワークです。
僕はフロントエンド初心者なのですが、 Reactを単独で使うよりNext.js経由で使うほうが（初動の学習コストは高くなるものの）コードを簡潔に保ちやすい印象です。
Typescriptは厳密さと書きやすさのバランスがちょうどよくて結構好きです。
Next.jsを使ってWebアプリを作った場合、Vercelでホスティングするのが断然おすすめ。 GitHubのリポジトリを指定すれば自動でビルドしてデプロイしてくれます。独自ドメイン対応も簡単。 masterブランチをproduction環境に、developブランチをdevelop環境にといった出し分けもやってくれるので、 Next.jsはVercel前提のフレームワークだと考えたほうがいろいろ幸せです。 個人開発だと無料で使えます。
Vercelに出会う前はFirebase hostingとFirebase functionsを併用してがちゃがちゃやっていましたが、もう面倒なことをせずにすみますね。
Bulma
シンプルできれいなCSSフレームワークです。 見た目をちゃちゃっと組み上げるのに使っています。
BootstrapやMaterial UIあたりと選択になるのかと思いますが、Bulmaはいちばんかわいくて親しみやすい雰囲気を出すことができます。 逆に管理画面チックな雰囲気が良ければMaterial UIを使うと思います。
そのまま使おうとするとjQueryとReactを両方入れる必要があって気持ち悪いので、react-bulma-componentsを経由して使いました。
styled-components
プレイヤーの生死に応じて背景色を変えたりといった、細かい見た目の処理を行うために採用しました。
開発の進め方
個人開発は熱意が大事です。
特に僕は作っているものがエターナる（永遠に完成しない）傾向があるので、作りたい気持ちが続いている間にある程度形にすることを大事にしています。
作りたい気持ちを維持する方法はいくつかあって、
あたりがおすすめです。
今回はGitHub projectの作業可視化と、ドメイン取得を行いました。
GitHub projectの使い方
GitHub projectを使ってカンバン的な進捗管理を行いました。ツールはなんでも良いので、やるべきことを全部目の前に並べて、進んでいる感を出すことが大事です。
個人開発で「issue立てて、PR切って、あれこれ」みたいにやっているとスピード感が落ちてやる気を失ってしまうので、簡易版issueであるカードを活用します。
だいたいの手順は以下のとおりです。
- 作りたいものが思いつく
- GitHub Projectを作る
- ユーザーストーリーを書き出す
- 使うキャラクター色を選べる
- ターンごとにぽちぽちメモができる
- メモをリセットできる
- 死亡したプレイヤーがぱっと見でわかる
- くらいが最低限
- プロジェクトの遂行に必要なものを書き出す
- Next.jsのstarter projectを作る
- ドメインをとる
- OGP画像を作る
- など
- ユーザーストーリーを書いたカードに具体的なTODOを書き込む
- なにか調べ物をしたときは、対応するカードにリンクを書き込む
- あとで振り返ったり、別プロジェクトをするときに便利
あとは「In progress」にあるカードを常に1〜2枚に保ちながらすぱすぱカードを移動していくだけです。
今後追加したい機能
Twitterに「リリースしたよ」的な投稿をしたところ、何人かの方にフィードバックをいただきました。
その中でも優先度高めに対応したいものとして、
- 名前を記入できるようにする（色と対応付けて覚えるのが大変なので）
- ボタンの消費状況をメモできるようにする
というものがあります。この記事を書き終えたら実装を始める予定です。
振り返り
実際の作業時間が3日ほどで、かなりスピード感良く1st releaseをすることができました。
今回はNext.js+Bulma+Vercelという組み合わせで技術を採用しました。見た目やインフラ、CI/CDといった考え始めるとキリがない部分をよしなに吸収してくれるため 本質的な部分に集中しやすく、個人開発にかなり向いていると感じました。
自分で使ってみてまだまだ使いにくいところは残っているので、自分の中のAmong Usブームが過ぎ去らないうちに機能改善を進めていきたいです。
