HapInSアドベントカレンダー2023、20日目！
こんにちは、ボクです！
受託部門でデザイナーをやっていたはずが、最近はFigmaよりVScode眺めている時間のほうが長いボクです！
いったいどうして…。
まあそんなわけでゆるっと開発にも参加させてもらっているわけですが
現状CSSの書き換えぐらいしかできないのでこの際ロジック周りも触れるように、勉強とアドカレのネタを兼ねてなにかアプリをつくってみようと思って作ってみました！ そしてできたのがこちら！
名前のとおり、ミュージックプレイヤーです。
せっかくなのでクリスマスっぽい曲と写真をセレクトしてみました（全部フリー素材、ありがとうフリー素材創造の神たち）。
開発期間は金曜の夜ほぼ徹夜して土日で完成させました（この記事は日曜の夜に書いてます）。 職業エンジニアのみなさんにコード見られるの恥ずかしいのですが、Git通してAWSにデプロイしたのでコードも載せておきます。
さて、今回の記事ではおおまかな制作工程と初心者すぎて沼ったところなんかをつらつらと書いていこうと思います。 せっかくなので曲を聴きながら読んでね～！
制作工程
1．デザイン
まずFigmaで雑にデザインしました。
なにかすでにデザインから抜け落ちてるものとかある気がしますが、気にしてはいけません。 今回は土日で終わらせると決めて始めたので工数かかりそうなものは落としました。
ミュージックプレイヤーにしたのは単にボクが音楽スキだからというのがきっかけでしたが、軽く勉強したTODOアプリなんかよりは、state管理が多かったので結果的に勉強になりました。
2．実装
次にどうやって実装するか検討しました。
React.jsのいいところはエコシステムが充実しているのでオーディオソースを再生するコンポーネントライブラリなんていくらでもあるのですが、それだとあまり勉強にならないのでフルスクラッチで1から作ることにしました。
機能はデザインの段階でシンプルに音源の再生、再生リストの行き来、ドロワーから選んだ曲の再生と決めていたのでこの3つを段階的に実装。
最初はあらかじめ作った再生リストを読み込んで再生ボタンを押したら、ハードコードしてある選択した曲を再生する、という感じで実装して音源の再生とリストにある曲名やアーティスト名を表示させるところからスタートしました。
audioRef.current.src = songs[0].audio;
audioRef.current.play();
で、この時点でだいぶ沼りました。
というのも、いままでjQueryとかだとdocument.getElementById()とかでDOMオブジェクトを拾ってきてobj.play()とかすればよかったんですが、ReactのJSX方式でどうやってeventやvalueにアクセスするのかまったくわかりませんでした。
ここで登場するのが、Reactの目玉機能、Hooksなんですね。
正直まだあんまり理解できてないのですが、超要約すると変数と変数の値をセットする関数のセットで、この関数をとおして変数に値をセットするとだいたいのHooksは画面がレンダリングされて、数値や画像が変わったりします。
useRefは値を参照するだけですが、useStateは名前の通りstate（状態）が変更されると画面がレンダリングされます。
今回だと再生リストのインデックスを管理するためにindexという変数をuseStateで宣言しています。
const [index, setIndex] = useState(0);
なので例えば
const newIndex = index + 1;
setIndex(newIndex);
とかしてあげると、画面が再レンダリングされて諸々表示が変わるわけですね！
…と、ここまできくと超便利じゃーんと思いますよね、ボクも思ってました…けど下みたら沼にはまってました。
3．Too many re-renders 地獄
タイトル通りなんですけど、要するに簡単に画面が再レンダリングされるということはコードも簡単に再実行されるわけです。
これが無限ループの温床になりやすくて、なってるとToo many re-rendersと怒られます。
他にも予期しないタイミングでレンダリングが走っていたりしてconsole.log("test")をいやというほど書きました…。
けどこのあたりのエラーは1から作ってないと遭遇しない沼（なにそれ？）だと思うので、結果的にはまってよかったです！（？？？）
みんなハマる沼のお陰で、退路がインターネットにいっぱいあって助かりました、ありがとう集合知！。
4．AWSにデプロイ
ここは意外とすんなりいきました。
公式ドキュメントもUIも全部日本語なので、みんなも気軽になにか作ってデプローイしよう！
おわりに
というわけで、大変勉強になりました。
課題としては最後の方の実装になるにつれて疲れて、関数化したほうがいいところとかコピペでコード貼り付けてたりしたので、その辺りまとめられるとよいですね！
まあ寄る年波には勝てないのだ、みなさまも年の瀬ですのでご自愛ください。
それでは明日もお楽しみに！
