Kentaro Takahashi

Daisuke Suzuki

友人が参加している音楽バンドのWebサイトへの機能追加として「自分たちの楽曲をWebサイト上で聴いてもらいたい」、「楽曲の歌詞をWebサイト上で閲覧できるようにしたい」との要望を受け、また、Webサイトの開発者が都合によりWebサイトの保守開発ができなくなったことを受け、Webサイトを運用する音楽バンドのメンバーがソースコードを直接操作する事なく、曲のアップロードと歌詞の作成・編集が行えるように必要なデータをサーバ上にあげ、そのデータをWebサイトで参照できるようにするためにアプリの作成を行いました。

バンドのWebサイト管理ページ

フロントエンドを勉強するに当たり個人開発したプロジェクト。
友人が参加している音楽バンドのWebサイトへの機能追加として「自分たちの楽曲をWebサイト上で聴いてもらいたい」、「楽曲の歌詞をWebサイト上で閲覧できるようにしたい」との要望を受け、また、Webサイトの開発者が都合によりWebサイトの保守開発ができなくなったことを受け、Webサイトを運用する音楽バンドのメンバーがソースコードを直接操作する事なく、曲のアップロードと歌詞の作成・編集が行えるように必要なデータをサーバ上にあげ、そのデータをWebサイトで参照できるようにするためにアプリの作成を行いました。

○コードの詳細
・フロントエンドにReact、Redux、reacr-routerを使い、バックエンドにfirestoreを使って開発し、firebase hostingにデプロイしました。
・管理者の権限レベルを設定し、firestoreを使用して適切にアカウントの作成・削除を行えるようにしました。
・firebase authenticationを使い、ユーザーのログインをできるようにしました。
・firebase storageに楽曲のアルバムイメージをアップロード・削除する機能を作成しました。
・楽曲のオーディオファイルをfirebase storageにアップロードし、参照するURIをfirestoreに保存することでWebサイトから音声ファイルの再生ができるようにしました。

○開発時の取り組み
・初期はreact-routerのwithRouterを使いコンポーネントをラップしていましたが、途中でreact-routerのhooksに置き換えました。
・redux-thunkを使って非同期関数内にfirestoreからデータを取得する処理とstoreに登録する処理をまとめて書いていましたが、役割を適切に分割した上で、コンポーネントのuseEffect内で非同期処理を行うようすることで、redux-thunkを使った非同期処理が不要になったためを取り除きました。
・redux-thunと組み合わせて非同期処理の中で画面遷移を行いたかったため、connected-react-routerを使っていましたが、上記の通りコンポーネントに処理を移すことによりコンポーネント外での画面遷移が不要になったので、connected-react-routerを取り除きました。
・redux-loggerを使いreduxのstoreをコンソールで確認し、デバッグ作業を行いました。
・ESLintを導入することでコード規約に沿ったコードを書くことができました。

○開発を通しての成長
Webアプリの開発と同時進行でフロントエンドの勉強を行っていましたが、初めのうちは、ブログなどの記事を参考に、見様見真似で実装することがほとんどでした。
しかし勉強の仕方自体を学ぶうちに、公式ドキュメントの一次情報を参考にするのが良いというアドバイスを見つけました。
公式ドキュメントを読むようにして、理解するのに時間はかかるようにはなりましたが、より深い理解の上で実装することができたという手応えがありました。
そのため初めの頃はコピペを含むコードや、曖昧な理解のまま実装した最適ではないコードが大き含まれていました。
しかしレビューを受けながらコードを書くにつれて理解が深まったため、随時リファクタリングを行うことができ、見通しの良さや責務の分割を意識し始めることができました。
その際にGitHubのpull requestを用いて開発を行い、ソースコードの変更時の差分を十分に確認できたため、あまりバグを生まず進めることができました。
開発中はテストへの理解が不足していたため、手作業での動作確認をしていましたが、今後はテスト駆動開発やCIの整備を行おうと思います。

バンドのWebサイト管理画面

Kenji Rikitake

Yuka Ouka

株式会社グロービス, フロントエンド監修

Keita Kawamura

ファインディ株式会社, ハイレイヤー特化のエージェント事業立ち上げ