TL;DR
- オンラインゲームのギルドで需要があったのでノリで個人開発をしました
- どんなものを作ったかというより、どのようなノリで作ったかのお話です
- とりあえず個人開発をノリで作ると楽しいから作ろう！
概要
作ったものは単純に名前を入力して順番を決定するだけのサービスです。
ざっくりいうと「TODOアプリ + 項目のランダムな順位付け」だけの1ページで済むような個人開発です。
URL: https://midnight-prism.vercel.app/
普段クラウドをメインでお仕事をしているため、「コードを書くと画面が変わる」というアトミックな喜び、久しぶりにフロントエンドを触るというRelearnができるということで、ノリと勢いだけで小さなものを作る楽しさがあるよというお話になります。
動機（ポエム）
オンラインゲームで所属しているギルドで。RTAをするイベントが開催されることになりました。いわゆるギルイベというやつですね。
そのときのVCで走る順番決めたいねという話になり、Web上に様々なサービスが有るのですが「私が作る！」と宣言したことがはじまりです。
単純に、ギルド固有の機能要件などを汲み取りたいなどの理由がありましたが、久しぶりにフロントエンドを書く機会になるという欲求（と自分がエンジニアであるという謎の証明をしたかった）ことが主な理由です。
固有の機能要件といっても大げさなものではなく、RTAは定期的に開かれるであろうギルドイベントになりそうで、半永久的に使用可能なローカルストレージにギルドメンバーの名前を保持しておきたかったということが理由です。ローカルストレージであれば間違えてブラウザを閉じたりリロードしても復帰が楽なこともあります。
また、度々「誰が最初にxxxやる？」みたいな順番を決める機会が多く、その際に再利用できると思ったこともポイントになります。例えば「ガチャ誰から引く？」「スクショの並び順どうする？」みたいな話をよくしていました。そのため順位付けをするサービスがあると再利用性が高いこともありました。
Version/Tool
- vite
- v4.4.5
- React
- v18.2.0
- recoil
- v0.7.7
mui
- v5.14.1
Vercel
- ChatGPT
- Jamboard
流れ/試行錯誤
とりあえず画面のお絵かき
とりあえずラフを書きます。
当方めっぽうデザインが下手。絵心ゼロ。とりあえずJamboardできたものが下です。以上。
左にユーザー一覧があり、ボタンを押すと右に優先順位が並べばいいだろうという画面配置です。
今見るとヘッダーすら無いし線がブレブレですが、 自分がわかればオッケーです！ 。だって個人開発ですから。
以下も同じノリで開発を続けます。
色を決めます
難しいです。
なんならブルーライトカットの眼鏡と常時Night Shiftで画面を見ているため色感が無いまであります。
そんな私はいつも Adobe Color を使用して色を決めます。
ギルド名に「夜」という名前が入っていいるためダークカラーにしたかったので、AdobeColorの真ん中の色をそれっぽそうな色にするとAdobe Colorが自動4色提案してくれます。
色決めはこれで終わります。
技術選定
1ページで完結するため、まず、Reactでやろうと考えました。
create-react-appからViteへ推奨されたことが頭にあり、Reactを採用したところもあります。
そのためVite x Reactは決めました。
その後、インフラをどうするか考え、特に何も考えること無くVercelを使用しました。
Viteに対応していること、Vercelはわかりやすいサブドメインを付けれることが理由です。
この技術選定時間、5分です。
個人開発をノリと勢いでやっていることがよくわかりますね。
好きな技術、最近話題の技術を誰の迷惑にもならずに自分の気分で採用できることはノンストレスですね。
その他ライブラリ
mui
デザインをいい感じにしてもらうためにmuiを使用しました。
tailwindの自由度とclassを多数定義するよりmuiが用意してくれるコンポーネントを使いたかったことが理由です。
また、svg iconもmuiが用意してくれる点も魅力的です。
recoil
これは使い慣れているという理由です。
ささっと状態管理ができてローカルストレージに保管しやすいという点で採用しました。
リポジトリ作成
ペライチで お遊び 個人開発のリポジトリなので非公開リポジトリで作ってしまいます。
「ノリと勢いだけでやる」以上きれいなコードを書く気がなく、人に突っ込まれたくないからですね。
今思うと開発の開発だけに集中するためのTipsの1つでした。
適当にコードを書く！
Viteの初期構築コマンドでReact + TypeScriptを指定して、プロジェクトを作成します。
$ npm create vite@latest turn-twist ✔ Select a framework: › React ✔ Select a variant: › TypeScript
このタイミングでgitのリポジトリへpushします。
以降commitもpushもしません。ノリと勢い駆動を意識しているため、全て試行錯誤です。commitをrevertするなんて考えたら勢いが落ちます。
この際役に立ったツールが、Chat GPTv4（とbard）です。
恥も外聞もなく検索感覚で対話ができ、そこからコードの提案をしてくれることに感動を受けました。
この個人開発はChat GPTがなければ倍の時間がかかっていたのかなと思っています。
なんとなく形にできてきた
手を動かせば動くのがフロントのすごいところだなと実感です（改めて普段クラウドメインの人間です）。
とはいえ悲しいかなデザインのセンスがない。色彩も余白もなにもかもわからない。
背景は黒、ヘッダーは青黒、ペーパーコンポーネントは白、marginは近すぎるなどなど、上げれば切りがないですね。
とはいえゴールが見えてきたことは確かです。進捗が見えることは良い！ノリノリしてきて勢いが上がってきました！
デザインで疲弊し始めたので「個人開発だし、デザインを諦めるか」ということで諦めました。
機能が増えるとデザインが増えるため機能を削る。色彩が苦手なのでダークモードから白でごまかせるパステルカラーへ方針転換しました。
この際の色の決定にもAdobe Colorを使用しました。
Deploy
それっぽいものがノリと勢いでできたので、gitにpushし、Vercelをポチッとしてデプロイして終わりです。
所感
普段触らない領域のプログラミングをする機会を見つけ出し、「ノリと勢い」という言い訳と期限（ギルドイベントまで）を決めてやることは普段チャレンジしない領域への良い言い訳になりました。
また、自分の所属しているコミュニティーメンバーに直に使ってもらえる凄く純粋な喜びを感じられました。
今回はデプロイ済みだったため自分の画面ではなくDiscordの画面共有でギルドマスターがギルドメンバーの名前を登録していき、シャッフルして順番決めするといういちエンジニアとして嬉しさと満足感が高かったです。
普段個人開発しない方は「なにしらの言い訳」をみつけて、「ノリと勢い」を勢いに恥も外聞もない開発をするとスキルアップや素振りに良いよ！というお話でした。
