はじめに
私はアコースティックギターを約5年間、ピアノを数ヶ月ほど演奏してきました。
楽器を長く使う上では、
・弦交換
・掃除
・メンテナンス
などの管理がとても重要です。
しかし実際には、
- いつ弦交換をしたのか
- いつ掃除をしたのか
といった履歴を記録しておらず、メンテナンス管理が曖昧になっていることに不満を感じていました。
この経験から、
楽器のメンテナンス履歴を簡単に管理できるアプリがあれば便利なのではないかと思い、
「音楽機材メンテナンス管理アプリ」を開発しました。
また、楽器のメンテナンスは自宅だけでなく外出先でも行うことがあるため、
スマートフォンからでも利用できるようにWebアプリとして開発しました。
作成したアプリ
楽器のメンテナンス履歴を管理するWebアプリです。
主な機能
・ユーザー登録 / ログイン（JWT認証）
・楽器登録
・メンテナンス開始
・メンテナンス完了
・メンテナンス履歴管理
デモ動画
楽器詳細画面から、メンテナンス開始・完了・履歴反映までの流れです。
GitHub
アプリURL
テスト用アカウント
ユーザー名: test111
パスワード: 111
使用技術
Frontend
・Vue3
・JavaScript
・CSS
Backend
・Spring Boot
・Spring Security
・JWT認証
Database
・PostgreSQL
Infrastructure
・Render
・Docker
CI/CD
・GitHub Actions
技術選定理由
Vue3
フロントエンドとバックエンドを分離した構成にしたかった背景があります。
また、SPA（Single Page Application）として快適なUIを実現することや、
モダンなフロントエンドフレームワークを学習する目的もありました。
Spring Boot
JavaSilverを取得している事と大学生の頃にPaiza等でJavaを学習をした事もあり、
これまでの知識を活かせる言語としてJavaを選択しました。
また、Spring BootはREST APIの構築が比較的容易であり、Webバックエンド開発の学習にも適していると考え採用しました。
Render
インフラにはRenderを採用しました。
個人開発でも利用しやすい無料プランがあり、Dockerによるデプロイが可能であること、またPostgreSQLのManaged Databaseを利用できる点が魅力だったためです。
Docker
開発環境と本番環境の差異を減らすことを目的としてDockerを使用しました。
また、PostgreSQLのデータベース環境を簡単に構築できる点も採用理由の一つです。
JWT
認証方式にはJWT（JSON Web Token）を採用しました。
SPAと相性が良く、サーバー側でセッション管理を行う必要がないため、REST APIベースのアプリケーションと相性が良いと考えたためです。
苦労した点
Web開発の知識不足
これまで個人開発ではデスクトップアプリケーションしか作ったことがなく、
本格的なWebアプリケーションの開発は今回が初めてでした。
そのため、
・SPAとは何か
・REST APIの設計
・フロントエンドとバックエンドの通信
・CORSの設定
など、Web開発の基礎知識を調べながら実装を進める必要がありました。
実装だけでなく、Webアプリケーションのアーキテクチャを理解することにも時間を使いながら開発を進めました。
REST API設計
APIを実装するにあたり、REST APIの設計について基礎から調べながら実装しました。
特に意識した点は以下です。
・HTTPメソッドの使い分け
・HTTPステータスコードの適切な利用
・リソース指向のURL設計
例えば、リソースが存在しない場合には 404 Not Found を返すなど、
HTTPの仕様に沿ったレスポンスを返すように設計しました。
エラーハンドリング
API開発ではエラーハンドリングの実装にも苦労しました。
最初は例外処理を各コントローラーに書いていましたが、
コードが煩雑になる問題がありました。
そのため @ControllerAdvice を利用し、
共通の例外ハンドリングクラスを作成することで、
エラー処理を一箇所にまとめるように改善しました。
DB設計変更によるエラー
開発途中でテーブル設計を変更することがあり、
カラムを追加した際に column not found のエラーが発生しました。
原因は、エンティティクラスとデータベーススキーマの不整合でした。
開発途中でDB設計を変更する場合は、
エンティティとDBスキーマの整合性を意識することの重要性を学びました。
工夫した点
RESTful API設計を意識した実装
APIを実装する際には、RESTfulな設計を意識しました。
具体的には以下を意識しています。
・HTTPメソッドの適切な使い分け
・HTTPステータスコードの適切な利用
・リソース指向のURL設計
例えば、リソースが存在しない場合は 404 Not Found を返すなど、
HTTPの仕様に沿ったレスポンスを返すように実装しました。
例外処理の共通化
API開発ではエラーハンドリングが煩雑になりやすいため、
@ControllerAdvice を利用して例外処理を共通化しました。
これにより、コントローラーごとに例外処理を書く必要がなくなり、
コードの可読性と保守性を向上させることができました。
SPA構成によるフロントエンドとバックエンドの分離
フロントエンドとバックエンドを分離した構成にすることで、
役割を明確にした設計を意識しました。
フロントエンドはVue3によるSPAとして実装し、
バックエンドはSpring BootでREST APIを提供する構成にしています。
CIによる自動テスト
GitHub Actionsを利用し、CIを構築しました。
これにより、コードをPushした際に自動でビルドとテストが実行されて、
品質を維持しながら開発を進めることができるようにしました。
今後の改善
・テストコードの拡充
・UI/UXの改善
・お問い合わせフォームの実装
・メンテナンス履歴を「1ヶ月」「1年」単位で管理する機能
まとめ
今回、Vue3 + Spring Bootを用いて楽器メンテナンス管理アプリを開発しました。
個人開発としては初めての本格的なWebアプリケーション開発だったため、
REST API設計やSPA構成、認証処理など多くのことを学ぶことができました。
今後も改善を続けながら、Webバックエンド開発の理解を深めていきたいと考えています。