はじめに
はじめまして、ともぼーと申します！
私は組み込みソフトエンジニアとして3年間働いてきましたが、フロントエンドエンジニアにキャリアチェンジしたいという思いから、今年の4月よりReactの学習を始めました。
その学習の成果として、約2カ月かけて今回のアプリを制作しました。
もともとK-POPアイドルが好きで、「推し活」をもっと世の中に広めたいという気持ちから、K-POPカードアプリを作ることにしました。
作成したサービス
好きなK-POPアイドルやグループの「推しポイント」を自由に表現できるオリジナルカードを作成・共有するアプリを作成しました。
なぜ作ったのか
■推しの話題で盛り上がるのは楽しい
私はKPOPが好きで、毎日アイドルのダンス動画や曲を聴いたりするいわゆるオタクです笑。基本的には1人で動画を見て推し活を楽しんでいるのですが、友人と同じ好きなグループやアイドルのことについて語り合う時の方がより楽しくて盛り上がるなと感じていました。話が盛り上がるきっかけになるモノが作れないかという考えがここで浮かびました。
■ファン同士で気軽に関われる場所が欲しい
SNSや公式ファンサイトなどでなら他のファンと関われたりするのですが、手軽に自分の推しを紹介したりすることが難しい・自分から交流を積極的にしなければならないなどが私は嫌だなと思っていたので、気軽に推しの写真や好きなポイントをシェアできたらと思っていました。
■推しをコレクションにしたい
好きなアイドルをPinterestやネットで調べたりするだけではなくて、コレクションのように自分の推しを表現できて毎回見ることが出来たら楽しいだろうなという思い。
これらの理由から、推しを共有できるアプリが欲しいと思った。
アイドルはその見た目から人に興味を持たれる存在なので、アイドルの写真を全面的に見ることが出来るようにした上で推しの好きなところを表現できるカード系のアプリを考えました！！
どんな機能を作ったのか
★カード化機能
好きな推しアイドルをカード化して、自分だけのオリジナル推しカードを作成することができます。
好きな推しを眺めれるだけでも最高なんですけど！！
カードには
- 作成者
- カード名
- グループ名
- メンバー名
- 画像
- いいねボタン
- YouTubeリンク
- YouTube Musicリンク
- 推しポイントメモ
があります。
YouTubeリンクには、推しアイドルが出演しているMVや番組などYouTube上の好きな動画の共有リンクを載せることができます。
Youtube MusicリンクにはYoutube Musicの曲リンクを載せることができます。
↓こちらの登録画面でそれぞれ入力して保存ボタンを押下することでカードを作成できます。
★いいね機能
好きなカードにいいねできるように、いいねボタンを追加しました。
いいねが多ければユーザから人気なカードだと分かるようにして、推しカードをもっと作りたくなるような要素を入れてみました！
★カード一覧＆カード検索機能
作成したカードを閲覧できる画面です。
左上の検索欄からメンバー名やグループ名で表示させるカードを絞ることができます。
ずっと見てても飽きないような、そんなコンテンツにしたい...
★カード編集機能
作成したカードを編集できる画面です。
カード一覧画面の右上にある「カードの編集をする」から編集画面に遷移します。
ユーザー本人が作成したカードのみ表示され、削除と作成したカード名を入力してカードを編集することができます。
技術スタック
- 言語
- React
- TypeScript
- DB設計
- Supabase
- フロントエンド
- Tailwind CSS
- shadcn/ui
- ビルドツール / 開発環境
- Vite
- テスト
- Jest
- React testing library
- CI/CD
- Firebase
- Github Action
個人開発を通して得た学び・気づき
使用する技術よりも、何を解決したいか
開発を始める当初は、せっかくの個人開発なのだから今後、役に立つ技術を使用してプロダクトを作るべきだと考え、AIを使った個人開発をしたいと思っていました。ですが、使いたい技術からアイデアを出すのはなかなか難しく、出てきたとしても自分が心の底から作りたい！と思うようなモノではありませんでした。今回、作成したKPOPカードアプリはAIを一切使わずに開発しましたが、それでも多くの学びと経験を積むことができました。 何より、開発することが楽しく、最後まで作成することができたのは、自分が作りたいと強く思えるアイデアだったからです。
解決したい課題や使ってもらいたいユーザーを第一に、個人開発はするべきだと学びました。もちろん、勉強のための技術習得も大事ですが！
最小限の価値を届けるプロダクトから完成まで持っていく
今回の開発では MVP という考え方を使用して、開発を進めました。
MVP とは Minimum Viable Product (MVP) 「最小実用製品」という意味で、スタートアップや新規事業の立ち上げでよく使われるアジャイル的な開発手法です。
- 製品やサービスのアイデアが「実際に価値があるかどうか」を早期に検証することを目的にする
- フル機能を作り込むのではなく、「コアとなる価値を実現する最小限の機能」だけをまず実装
- ユーザーに使ってもらい、フィードバックを得ながら改善していく
- リーンスタートアップの考え方（Build → Measure → Learn）に直結する
というように最小限の価値を作り上げ、ユーザーからのフィードバックを得て完成まで持っていくという開発手法です。
今回は MVP1 ～ MVP5 まで段階的にプロダクトを作り上げることにしました。
実施したMVP一覧
### MVP1カード登録と登録したカードが見れること。画像と音楽はリンクで飛べること。
TODO
-
開発の環境構築をする
- React+TypeScriptの開発環境をViteで用意する
- Firebaseにデプロイする（新規でプロジェクトを作成）
- Makefileを作成（make deployでデプロイできる）
- CI/CD環境を構築する（push時に自動デプロイ、自動テスト）
- Tailwind CSSの導入
- shadcn/uiの導入
- supabaseでユーザカードテーブルの作成（ユーザID、カード名、グループ名、メンバー名、画像リンク、動画リンク、楽曲リンク、推しポイントメモ）
- カード画面UI、登録画面UI、カード一覧UIの検討
-
カードに記載した情報が登録できること
- ユーザID、カード名、グループ名、メンバー名、画像リンク、動画リンク、楽曲リンク、推しポイントメモがsupabase上に登録されること
-
登録したカードを閲覧・操作できること
- カード一覧画面があること
-
カード画面の各UIをタッチして操作
- 画像は画像ボタンをタッチで画像ファイルをダウンロード
-
動画は動画リンクボタンをタッチでリンクを表示
- YoutubeAPI
-
音楽は音楽リンク入力欄にURLを記載で♬ボタンを押下で再生できるようにする
- YoutubeAPI, SpotifyAPI
- グループ名で検索すると、対象グループのカードを見れること
- 動画と音楽リンクで外部サイトに遷移すること
MVP2
カードに「いいね」ができるようになり、カード作成者に「いいね」が分かるようになること
TODO
- ログイン画面の作成
- ユーザカードテーブルにいいねカウントを追加する
- カードにいいねアイコンが表示されていること
- 画面をダブルタップorいいねアイコンを押下でいいね数をカウントUPできること
- いいね数はいいねアイコン横に表示されること
- いいねされた場合、ハートのマークがアニメーション表示されること
MVP3
カードにチュートリアルを追加すること
TODO
- チュートリアルボタン押下でチュートリアルが実施されること
MVP4
カードの削除/編集ができること
TODO
- 編集画面に遷移すると、作成者のIDとカードIDが合致しているカードを表示
- 右上の削除ボタンでカードを削除できること
MVP5
ログアウトができること
TODO
- ログアウト機能の作成
この MVP についても、開発当初に考えた内容から開発が終わる頃には色々と変更した箇所もあります。最小限の価値を届けることを意識していたのですが、あれも欲しい・これだけは追加したいという思いが出てくるので初めは1カ月で終わらせる予定が最初のMVP1を完成させるのに1カ月かかってしまいました。
ただ、完成したMVP1をコミュニティの人に使用してもらい、たくさんのフィードバックを得た結果、自分が考えていた以降のMVPの内容も変わり、プロダクトの価値に不足している部分がより明確になりました。
この経験から、価値のあるプロダクトを作成するにはユーザーの意見が第一だと学びました。
なるべく早くユーザーに届けるため、最小限の価値を自分なりに定義しておき、達成できていればその時点でMVPを完成させることを意識したいと思います。
計画通りに上手く進まない
本当は1カ月の予定だったのですが、モチベーション・開発中に内容を変えたくなる・バグの原因を探すなどで最終的に２カ月かかってしまいました。MVP ごとに少し早めの期限を決めて、タスク管理をしていたのですがそれでも計画的に進めることができなかったです。
一つは MVP ごとにこだわりすぎていたこと。もう一つは当初予定していたフロントエンドのCSSフレームワークを開発途中で他のフレームワークに変更することになり、大きなリファクタリングが発生したことです。
仕事においても、事前に選定していたライブラリから途中で変更することはあり得るので仕方ないことではありますが、もっと事前に調べておけば... 防げたと思っております。
また、調査も含めての計画を立てておけばそもそも、計画がズレることは無かったので次回以降は調査も含めての計画を立てることにします。
今後の開発について
色々、上手くいかなかった開発でしたがまだまだ改善の余地はあります。
- カードの編集を直接カードからできるように
- 作成者でカードを絞れるように
- 複数の画像を登録できるように
- ログインユーザーをGoogleなどのアカウントでログインできるように
- AIを使用した面白い機能を1つ追加すること
- ゲーム性のあるコンテンツにすること
できれば、スマホ版にも対応し収益化できるまでのサービスに育て上げたいです。より面白いモノになるのではないかと期待して今後も開発を続けたいと思います！！
おわりに
4カ月前までは React, Typescriptや DB も触った事がない。しかも デプロイ したことすらなかった初心者が継続してコツコツと開発を続ければ、個人開発で好きなものを作り上げることができるようになれることを実感しました。
モチベーションの上げ下げはありますが、諦めずコツコツが最強だと学びました！！
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼