12/21/2021
カラオケでよく歌う曲とキーを保存するアプリを作りました
2021年最後の個人開発です
今回はNext.jsとFirebaseでカラオケでよく歌う曲とキーを保存するアプリ eighteen を作りました
リポジトリはこちら
作ったきっかけ
今年の後半から仕事でNext.jsを書くようになり、もっと書けるようになりたくてNextを使ってなにか作りたくなりました
また、9月にFirebaseのv9がリリースされされ、それも触ってみたいなと思い、技術スタックを先に決めました
作るものは迷ったのですが、友達と話していて、カラオケに行くと歌いたい曲を思い出せなくて結局帰ってから思い出してあーってなる話を聞き、この課題を解決できるアプリを作ろうと思いました
スマホのメモ帳でもいいのですが、曲数が増えると検索性が低くなるのでそこをアプリの強みにしようと思いました
技術
技術構成はこのようにしました
・Next.js 12
・Chakra UI
・Recoil
・react-firebase-hooks
・Firebase v9
・Vercel
もっと慣れたい、名前は知ってるけど使えるようになりたい、というものを詰め込みました
振り返り
話題のNext.js 12やFirebase v9を触れてよかったです。Firebaseはmodularになり、必要なライブラリのみをインポートすればよくなったので、バンドルサイズが激減したのがとても良かったです。他のプロジェクトも徐々に移行していこうと思います
また、ずっと気になっていたRecoilも使えました。カスタムフックの中で呼び出すとすっきりして快適でした。普段はVuexをよく使っているので、Typescriptとの相性の良さも嬉しかったです。
最後に、思わぬ収穫だったのはhooksへの理解が深まったことです。「UIコンポーネントとロジックが切り離される」の意味が腑に落ちました。
今回も学びが大きくて、本業の合間を縫って作ってよかったと思います。
