はじめに
私は駆け出しのフロントエンドエンジニアです。
これまで、HTML/CSS/JavaScriptを学習してポートフォリオとして静的サイトの作成に取り組んだ経験があります。
その後、会社内でフロントエンド開発を行っている部署に異動し、今年の3月頃から、その部署で使用しているVue.js/Nuxtについても学習を進めており、そのアウトプットとして、Webアプリケーションの開発に取り組むことにしました。
この記事は、フロントエンドエンジニアになって4か月ほどの初心者がWebアプリケーション開発に取り組んだ記録です。
アプリケーションの題材選定についてですが、音楽好きが高じて、ライブに特化した予定管理アプリが欲しい！ライブを観に行くアーティストの周辺アーティストについても知りたい！そんな思いから、ライブ予定管理アプリ「GigDig」の個人開発に取り組みました。振り返ってみると、これが初めての1人でのWebアプリケーション開発。右も左も分からない状態からのスタートでしたが、多くの学びと発見がありました。本記事では、GigDigの開発の記録を備忘録も兼ねて記します。同じようにWebアプリ開発に挑戦する方、特に初めてのWebアプリ開発に挑戦する方の参考になれば幸いです。
会社の勉強会でもこのトピックで発表しており、その際の資料も掲載します。
本記事の内容と重複している部分もありますので、どちらかを読んでいただくだけでも大変幸いです。
GigDigについて
GigDigは、「Gig: ライブ」と「Dig: （音楽やファッションを）深堀りすること」を組み合わせた造語で、「ライブを通じて音楽を更にディグろう！」というコンセプトのアプリです。私自身がライブによく行く中で、「もっとライブに特化した予定管理アプリがあれば面白いのに」「知らないアーティストを効率よく知りたい」と感じたのが開発のきっかけでした。
また、学習が目的であることを考慮すると、自分が使いたいと思えるものをつくるほうがモチベーションアップにも寄与すると考えました。
GigDigのターゲットユーザーは、私と同じように音楽好きで、ライブによく行く人です。お気に入りのアーティストのライブ情報を簡単に登録・管理し、アーティスト情報（アーティスト画像、トップトラック等、関連アーティスト）をすぐにチェックできます。まさに、音楽オタクのためのアプリを目指しました。
実際にデプロイ済みのアプリケーションはこちらです。
主な機能
-
ライブの予定登録、編集、削除: Googleカレンダーのような感覚で、ライブの日付とアーティスト名を登録することができます。また、日付の編集、予定の削除をすることができます（日付の編集はライブの詳細モーダルで日付を押下。予定の削除はカレンダー画面にてPCは左クリック、SPは長押し）。
-
アーティスト情報の表示: ギグを登録する際のアーティスト名のサジェスト表示、および登録したギグに紐づくアーティスト情報の表示にSpotify Web APIを利用しています。APIレスポンスからアーティスト情報を取得・表示します。
-
ユーザー管理: ユーザーごとにライブ情報を管理するために、Supabaseを利用してGoogle認証および匿名ログインによる認証機能とusersテーブルとgigsテーブルを実装しました。
使用技術
GigDigでは、以下の技術スタックを採用しました。
-
フロントエンド: Vue.js 3.5.14 / Nuxt 3.17.4
-
CSSフレームワーク: Tailwind CSS 3.4.17
-
BaaS: Supabase
-
ホスティング: Vercel
技術選定
Vue.js/Nuxt
こちらを採用した理由は業務で使っている技術のキャッチアップをするためという理由に尽きます。
実際学習するとHTML/CSSの延長線上にあるように感じましたし、初学者にとっても非常にとっつきやすいように思いました。
ただ、それゆえかと思いますが、JavaScriptへの理解が曖昧なままでも書けてしまう危うさがあるなとは感じました（現在学習しているReactではJSXという記法ゆえにJavaScriptへの理解が確かであることを求められるように感じています）。
Tailwind CSS
Tailwind CSSは、かなり流行っているのでここで取り上げるまでもないですが、HTMLだけでスタイリングが完結するユーティリティファーストなCSSフレームワークです。
選択した理由としては流行っている技術を試してみたかったということも大きいですが、業務ではBootstrapベースの社内デザインシステムを利用しており、ユーティリティファーストなフレームワークを使ってみたかったため、AIを活用して開発を行う上で、ユーティリティファーストである方が相性が良いのではないかと考えたため、また、CSSを書かないでよいことに魅力を感じたためです。
Supabase
Supabaseは、こちらも現在かなり流行っているので言うまでもないですが、Firebaseの代替として注目されているオープンソースのBaaSです。
FirebaseとSupabaseのどちらを使用するかについては迷いましたが、Supabaseの勢いが現在すごいことと、私はMySQLを使用した経験があったので、NoSQLベースのFirebaseよりは、PostgreSQLベースのSupabaseのほうがとっつきやすいのではないかと考えたため、Supabaseを選択しました。
GigDigでは、Supabaseによって認証とDBを実装しました。
アプリケーションの詳細
認証
アプリケーションにアクセスしたユーザーは、まずログインをする必要があり、Google認証または匿名認証のどちらかを選択します（middleware/auth.global.tsの処理により、未ログインのユーザーはログインページにリダイレクトされる）。
認証が完了すると、初回のユーザーはユーザー名登録画面にリダイレクトされます（登録後にトップページへ遷移）。登録済みであればトップページへ遷移します。
ギグの登録
カレンダーの任意のセルをクリックすると、モーダルが表示され、日付とアーティストを選択してAdd Gigボタンをクリックすることで、ギグを登録することができます。
アーティストの選択の際は、input要素に入力されたアーティスト名でSpotifyのAPIを叩き、そのレスポンスをアーティスト名のサジェストとして表示しており、そのサジェスト結果の内から追加したいギグのアーティストを選択する必要があります。
ギグの登録が完了するとカレンダーが再レンダリングされ、その日のセルにアーティスト名の記載されたラベルが表示されるようになります。
ギグの詳細表示
カレンダーに表示されているラベルをクリックすることで、ギグの詳細がモーダルで表示されます。
現時点で表示される内容は、アーティスト名、アーティスト画像、日付、トップトラック10曲、関連アーティストです。
ギグの日付の編集、ギグの削除
ギグの詳細がモーダルで表示されている際に、日付を押下することで日付を編集することができます。Saveボタンを押下すると新たな日付が保存され、カレンダーが再レンダリングされます。
また、カレンダーに表示されているラベルを、PCの場合は左クリック、SPの場合は長押しすることで、Deleteボタンが表示され、それを押下することでギグを削除することができます。確認のダイアログが表示され、OKを押下して削除をすると、カレンダーが再レンダリングされます。
振り返り
良かった点
-
デプロイできたこと: 実際に動くWebアプリを世に出せたことは大きな達成感でした。
-
キャッシュ機能の実装: Spotify APIのレスポンスをキャッシュすることで、APIリクエスト数を削減し、パフォーマンスを向上させました。
-
AIツールの活用: GitHub Copilot (Claude Sonnet4) 、Clineを活用することで、効率的に開発を進めることができました。またGitHubのMCPサーバーを活用して、Issueの取得からPRの作成までをLLMに行わせることも試してみてたところ、とてつもないスピード感で開発を進めることができました。今後これが当たり前になるんだろうなと痛感しました（というよりはもはやなっている？）。
特に3点目のAIツールの活用について、UIデザインのほとんどは、AIに自然言語で指示を与えて作成してもらう → 確認して指摘 という流れを繰り返して構築していたのですが、コンポーネントやページが増えるにつれて統一感を失ってしまう恐れがあったため、以下のようなデザインルールをAIに作成してもらい、新たなUI要素を作成する際や、デザインを改修する際は必ずAIに確認させるようにしていました。
それによって、かなり統一感のあるデザインを実現することができたのではないかと思っています。
## 色彩システム
### メインカラーパレット
GigDigでは以下の色彩体系を使用します：
#### プライマリカラー
- **Emerald**: `emerald-500` (#10b981) - メインアクション、成功状態
- **Blue**: `blue-500` (#3b82f6) - 情報、リンク、セカンダリアクション
/* （中略） */
### グラデーション
```css
/* メインブランドグラデーション */
bg-gradient-to-r from-emerald-500 to-blue-500
/* 背景グラデーション */
bg-gradient-to-br from-emerald-100 via-blue-50 to-purple-100
/* ボタンホバー */
from-emerald-600 to-blue-600
/* （中略） */
## コンポーネント
### ボタン
#### プライマリボタン
<button class="backdrop-blur-lg bg-gradient-to-r from-emerald-500/80 to-blue-500/80 hover:from-emerald-600/90 hover:to-blue-600/90 text-white border border-white/30 px-3 py-2 md:px-6 md:py-3 rounded-xl md:rounded-2xl transition-all duration-300 font-semibold cursor-pointer hover:shadow-2xl transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none relative overflow-hidden">
<!-- ボタン内のグラデーション効果 -->
<div class="absolute inset-0 bg-gradient-to-r from-white/10 via-transparent to-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
<span class="relative z-10">Button Text</span>
</button>
/* （以下略） */
改善点
-
アプリケーションの機能追加: ライブ会場の登録、ライブ後のセットリストのプレイリストとの紐づけなど、まだまだ機能追加の余地があるため、改善を続けていきたいです。
-
コンポーネントベースの開発: pagesディレクトリのvueファイルに記述し、それをコンポーネントに切り分けるという順序で開発を進めていましたが、煩雑になってしまうなと感じたので、最初からコンポーネントを意識したボトムアップな開発を行ってみたいと思いました。
-
JavaScriptの基礎知識: フレームワークによってJavaScriptに曖昧な部分があっても書けてしまうと感じたので、今後も基礎は疎かにせず学習を続けていきたいと思います。
最後に
GigDigの開発を通して、Webアプリ開発の楽しさと難しさを改めて実感しました。特に、Nuxt、Tailwind CSS、Supabase等のモダンな技術スタック、GitHub CopilotやCline等のAIツールを活用することで、効率的に開発を進めることができたことはとても良かったと思います。初めてのWebアプリ開発でしたが、多くの壁にぶつかりながらも、なんとか形にすることができました。この経験を活かして、今後もWebアプリ開発に挑戦していきたいと思います。この記事が、同じようにWebアプリ開発に挑戦する方の、少しでも参考になれば幸いです。
完成したアプリはこちら: https://gigdig.vercel.app