こんにちは！
今回は、個人開発で制作したDTM（デスクトップミュージック）特化型のキュレーション＆ブックマークサービス「MusicMachine」について、開発の背景やこだわった技術ポイントをご紹介します！
1. なぜ「MusicMachine」を作ったのか？
普段から音楽制作（ギター演奏など）に触れる中で、「DTMのプラグインやフリー音源、最新ニュースをサクッと効率よく集約して、お気に入り管理できる場所があったら便利だな」と思ったのが開発のきっかけです。
単にチュートリアルをなぞるだけでなく、「企画・設計・実装・インフラ構築」までを一人でやり切り、実務で使えるレベルのWebアプリとして形にすることを目標に開発に取り組みました。
2. こだわった技術選定と設計のポイント
外部APIサーバーをわざわざ立てず、軽量かつスピーディーに開発することをテーマに以下の技術スタックを選定しました。
- Frontend: HTML5, CSS3, Vanilla JavaScript (ES6+)
- あえて巨大なフレームワークを使わず、バニラJSとSupabase SDK（CDN）を組み合わせることで、シンプルで軽快なSPA風のアプリケーションを実現しました。ダークモード基調の「DTMソフト風」なUIデザインも自作しています。
- Backend / BaaS: Supabase (PostgreSQL, Supabase Auth)
- ユーザー認証（ログイン・新規登録）や、記事データとユーザーのお気に入り情報を結びつけるリレーショナルデータベース設計を行いました。
🛠️ 特に工夫した技術的アピールポイント
ただデータを保存・表示するだけでなく、セキュリティ面も意識しました。 Supabaseの RLS（行レベルセキュリティ） を設定し、データベース層で「認証済みのユーザー本人のみが自分のお気に入りデータを操作できる」ような厳格なアクセス制御を実装しています。
3. 開発を通して得た学びとこれから
フレームワークを使わずに生のJavaScriptで状態管理やDOMの動的レンダリングを実装したことで、非同期処理（Async/Await）やイベントハンドリングの仕組みへの理解がより深まりました。
今後は、この経験をベースにモダンなフロントエンドフレームワーク（React / Next.jsなど）への展開や、よりリッチな機能の追加に挑戦していきたいと考えています！
