【個人開発】ハルカミライ（バンド）の履歴書を作るアプリを作成しました！

はじめに

はじめまして！りくと申します！
2024/08/21 ~ 2025/05/20の期間でプログラミングスクールRUNTEQにて未経験として学習をしてきました。
2025/06/16日に個人開発アプリ「ハルカミライ履歴書」をリリースしたので紹介と振り返り記事になります！

サービス

GitHub

サービス概要

ハルカミライ（バンド）の履歴書（好きになったきっかけ、聞いたことのある曲など）を作成できるサービスになっています！また、ライブ、セトリ情報を投稿できたり、オープンチャットによる交流もできるオールインワンアプリになっています。

開発背景/作ろうと思った理由

いままでライブでどの曲を聴いたことがあるか、どのライブに参戦したいかなどをまとめたいと思い、音垢界隈にあったOOO履歴書（履歴書例①、履歴書例②）というものに目をつけてWEBアプリとして手軽に簡単に作成できればと思ったのがきっかけです。またOOO履歴書は基本的書く項目が決められてしまっているので自由にタイトルをつけ、ドラッグ＆ドロップでカスタマイズ性をあげることができれば自分だけのオリジナルの履歴書テンプレートができると思いました。

サービスの機能/利用イメージ

ホームページ	トップページ
ハルカミライのCDジャケットが表示され使い方を見ることができます	歌詞をランダムに表示し、ハルカミライの世界に没入できます

履歴書一覧	履歴書詳細
みんなの履歴書一覧と自己紹介が閲覧できます。また検索もできます。	みんなの履歴書の細かい内容が閲覧できます

ドラッグ＆ドロップ機能	オープンチャット
ドラッグ＆ドロップによって履歴書の自由なカスタマイズが可能です	リアルタイムチャットで交流できます

ライブ一覧	ライブ詳細
過去のライブ一覧が閲覧できます。また検索によってスムーズに見つけることができます	ライブ情報とセトリを閲覧できます。

セトリ投稿	マイページ
自動フォーカスと楽曲リストからの追加によりストレスなくセトリを登録できます	いいねした履歴書とライブを見ることができます

技術スタック

カテゴリ	技術
フロントエンド	react18.2.0 / TailwindCSS / daisyUI
バックエンド	Rails 7.1.5 (Ruby 3.2.2)
データベース	PostgreSQL / Redis
開発環境	Docker
インフラ	Render / Vercel / Neon / Upstash / AmazonS3
Gem	devise / devise_token_auth / devise-i18n / redis 4.0 / aws-sdk-s3 google-id-token
ライブラリ	react-beautiful-dnd 13.1.1 / react-icons 5.5.0 / react-router-dom 7.3.0 / axios 1.8.2 / @react-oauth/google / framer-motion / swiper
テスト・リファクタ	ESLint / Prettier / rspec / rubocop / simplecov

ER図

ER図はこちら

開発の流れ/機能

開発期間

・2025/3/11~2025/6/14　実働54日で約300時間ほどでした
・設計からreactのキャッチアップまでを含めると2025/1月半ばからになり600時間ほど費やしてると思います。

設計段階

・READMEの作成
・ER図の作成
・画面遷移図の作成

reactキャッチアップ/railsAPI+react技術検証/デプロイ

・react+railsでミニアプリ（履歴書のCRUD、認証関係）を作成しながらフロントとバックの連携のキャッチアップ
・デプロイしたことがなかったのでrender,Fly.io,Heroku+vercelでデプロイしてました。
※ローカル環境のバージョンと環境変数の設定で苦しんだ

MVP時

・環境構築（Docker使用）
・認証関係（メールアドレス認証）
・ヘッダー/フッター/基本レイアウト
・履歴書CRUD、いいね、コメント
・履歴書のドラッグ＆ドロップのキャッチアップと実装
※バックエンドとの連携ではpositoinカラムを使用してフロントで順番を割り振りなおしてからそれをバックエンドに送信して保存しています。
・お問い合わせ/利用規約/プライバシーポリシー

ライブ・セトリ投稿機能

・ライブのCRUD、いいね、コメント
・セトリのCRUD
→本番曲とアンコール曲を同じカラムしたため保存時や表示の際のロジックに苦労しました
※まだバグが出ます

タグ機能、検索機能

・タグ機能はモデルでeventテーブルtagテーブルとでアソシエーションを作成してeventコントローラでタグ情報をまとめて取得するようにしています。フロントでもeventテーブルと同時に取得＆送信＆表示を行っています。
・検索機能はデータのやり取りが必要なかったのでフロントでfilterメソッドを使用してフィルタリングしています

オープンチャット機能

・ActionCableのキャッチアップ
・redisの環境設定
・チャット取得、作成、編集、削除機能リアルタイム
・夜明け前をコンセプトにデザイン
※redisやactioncabeleについてはまだ理解が浅いので勉強していきます

通知機能

・通知送信のみリアルタイム、取得はAPI通信、既読/未読と画面遷移の実装
→通知を見る際は通知ボタンをタップして情報を取得することになりリアルタイムな情報取得は必要ないと考えたため。
※現在は通知の件数を表示しているためリアルタイム化を検討中

S3画像アップロード機能

・ActiveStorageとCarrierWaveとS3他画像保存ロジックについてキャッチアップ
・reactを使用していれば二つとも使用しなくても実装できるとわかったため以下のように実装しました
①フロントからバックエンドにAWS用の署名付きURLを作成するように処理を設定
②フロントからS3にそのURLを使用してアップロード
③画像のURLをバックエンドでデータベースに保存

パスワードリセット機能

・カリキュラム復習
・devise+devise-taken-authについて深堀り
→gemをインストールすると目に見えない処理が追加されてしまうためソースコードを見に行きました
・メールに関してはgmailを使用しました。

Google認証

・gem 'omniauth-google-oauth2'を使用して実装しようとしましたがrequest.env['omniauth.auth']=nilとなってしまいミドルウェアとomniauthの設定がうまくできずに沼ってしまいました。devise-taken-authとの相性が悪いのかなと勝手に思っています。
・gem 'google-id-token'と@react-oauth/googleライブラリを使用した方法に切り替えて実装しました
※これに関しても完全に理解できていないので復習します

ホームページ/トップページ作成

・ホームページはBUMP OF CHICKENのbe thereというアプリを参考に作成しました。
・歌詞が出てくるデザインは完全思い付きで我ながらナイスアイデアだと思っています！
・ホームページをおしゃれにすればエンジニアでない人でもアプリを抵抗なく使ってくれるのではないかと思って力を入れました

全体的にデザイン作成

・できるだけユーザ目線を心がけてデザインしていきました。
・デザインに関してはAIに投げて微調整を自分でするという流れで実装しました。
・プレビューモード用意。

動的OGP

・フロントでXにアクセスしてバックエンドのコントローラでクローラと人間かを判別してviewでmetaデータを表示する形をとりました
・railsAPIモードを使用しているためコントローラのクラスの引継ぎをActionController::Baseに変更しなければviewを読み込んでくれないとうところで詰まりました。

独自ドメイン、グーグルアナリティクス

・お名前.comで独自ドメイン取得
・renderとvercelで独自ドメイン反映、コード上でも修正
・グーグルアナリティクス設定

テスト、リファクタ

【バックエンド】
・rspecカリキュラム復習
・RSpec、FactoryBot、simplecovの導入
・Robocopの導入
※Robocoの自動修正を使用したらコントローラのクラスの引継ぎまで変えてしまうことがあり動的OGPが機能しなくなってことがあった。

【フロントエンド】
・Jest、ESlint、Prettier導入
※ESlintに関してはbuild時に動作してしまうので開発環境でコマンド入力した場合のみ動作する設定に変更しました。

レスポンシブ対応/細かいバグや気になる点修正

・レスポンシブ対応に関してもAIに投げて微調整する形をとりました。
・履歴書のドラッグ＆ドロップ、セトリ作成部分に関してスマホで使用すると操作性が悪く課題が残っています。

開発を振り返って

よかったこと

・技術のキャッチアップを短期間で終わらせて技術検証をしてから本番環境に反映できたこと。
・常にユーザ目線でUI/UXを考えられたこと。
・ファンに使ってもらってアプリが拡散されていくのを想像しながら妥協せずに実装することができた
・react+railsでフロントとバックを分けたことで知見を得られた
・終始技術のキャッチアップを楽しみながらアプリ開発ができた

反省点

・機能はメイン機能だけに絞ればよかった。
→セトリ投稿機能とオープンチャットは後付けでよかったのかなというのが本音です。機能もりもりにした方がアプリとして完成度がよく見えるのではないかなと理由で実装をしていしまい、アプリのコンセプトからは少しずれてしまいました。特にセトリ投稿機能は欲張ってつけてしまい普通のCRUD機能なので作業量が増えただけだなと感じています。
また、オープンチャット機能に関してはactioncableを使用したチャット機能を作成してみたいという理由でした。
・githubの使い方が適当だった
→ブランチの切り方がmainブランチから直接開発用のブランチを切っていたこと、プルリクエストのコメントの作成を途中から怠ってしまったことです。
・広報が難しいと思った
→ハルカミライというバンドのアプリなのでどこまで趣味垢で宣伝していいのかと投稿やDMを送りすぎてもエンジニアでない人からしたら変なURL送られてきたと思われてしまう点
自分含めてファンは「ハルカミライ　セトリ」と検索する機会が多いと思うのでアプリ自体の広報はセトリ投稿を使用して履歴書機能までユーザを伸ばしていきたいと考えています。

実装予定の機能

・履歴書とセトリの画面を写真にして保存できるようにする機能
・動的OGPの画像に上記の内容を設定できるようにする
・履歴書のテンプレートを複数用意して切り替えられるようにする
・ゲストログイン機能作成
・フィードバック反映
・ドラッグ＆ドロップした時点で保存されてしまうのを保存ボタンで保存できるようにする

今後の展望/終わりに

・ハルカミライのツアーは来年まで続くので少しずつアップデートを繰り返していって長期的に見て使われるアプリを目指していければと思っています！
・プログラミングを勉強し始めてから学ぶことの楽しさを改めて実感しています。またエンジニアのコミュニティの活発さ、周りの人たちのモチベの高さに日々刺激されています！今後も技術について貪欲に楽しく学び続けていきたいと思います！ハルカミライも聞いてみてくださいね！

最後まで読んでいただき、ありがとうございました！