# 【個人開発】水瀬いのりさんのライブで聴いたことのない曲を一覧表示するぞ

  ## 目的

水瀬いのりさんのライブで自分が聴いたことのない曲を一覧で表示する

## 経緯

[水瀬いのりさん](https://www.inoriminase.com/)、ご存知ですか？

声優でアーティストとしても活動していますが、筆者は2017年くらいから応援しています。
ライブも数回行きましたが、本人名義の曲が75曲あり自分の中で課題が生じました。

- 聴いたことある曲は分かるけど、逆にどの曲を聴いたことないのかが分からない

ということは**ライブ名と会場名から歌った曲を検索し、そのあと全曲から検索で取得した曲を引けば良い**のでは？と思ったのが出発点になります。

## 成果物

## URL

[https://inori-track-Suntory-N-Water.vercel.app](https://inori-track-Suntory-N-Water.vercel.app/)

## 機能説明

## ライブ選択画面

個人名義のライブか町民集会かを選択する画面

## 会場選択画面

ライブ選択画面から参加した会場を選択する画面

## 結果画面

会場選択画面で選択した会場から歌唱曲を検索し、検索結果からまだ聴いたことがない曲を表示する画面

## 使用技術

フロントエンド: Next.js 13
バックエンド: Node.js
スタイリング: Tailwind CSS
ORM: Prisma
データベース: Vercel Postgres
ホスティング: Vercel

リポジトリ: https://github.com/Suntory-N-Water/inori-track

https://github.com/Suntory-N-Water/inori-track

## 実際に使ってみる

初参加が2019年なので、少し前の曲は聴けてない印象ですね、、、

![IMG_5864.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3351724/097b4130-f971-4e15-9e8b-ca7a5b4d8d01.png)


## 今後

## 改善すること

### 町民集会の会場を昼夜公演で分離する

同じにしてしまった影響で、町民集会で歌ったはずなのに結果画面に表示される不具合が出ています…

ひとまずは会場を分離させることでfixできるはず

### Next.js 13への理解

ChatGPTとペアプロしていましたが、彼はNext.js 12までしか知りません
一本Udemyなどで体系的に知識をつけたいと思います…

## 追加したい機能

### 結果共有機能

画面スクショでしか共有する方法がないため、ボタンを押すことでTwitterへの共有 + 結果画面の共有を実施したい

### デザイン

機能というかデザイン全般
オシャレなものを作るよりも動くものを作るに特化しました
最低限アイコンくらいは追加したい

### フォームの再送信

会場選択画面と結果画面が前画面に依存している状態のため、場合によっては画面になんも表示されなくなる

フォームが切れたときはトップページに戻るようにpopupを表示させるか、データを端末内に保持させるようにしたい

### 注意書き

一部のライブは選択対象にしていないため、注意書きとして画面を用意する

## なんでバグあるのにデプロイしてんの？

投稿当日が「Inori Minase LIVE TOUR 2023 SCRAP ART」の神奈川公演2日目(千秋楽)だからです！！

当日にそれっぽく試せたほうがなんか楽しいと思うんですよね？

**？？？「完璧を目指すよりまず終わらせろ」**

とは言いつつ時間があったのにテストもしなかったのは明らか悪いので、遅くても来年2月の町民集会までにはバグは最低限治します…

終わり