【個人開発】K-POP好き必見！推しの服装を探せるアプリを作成【React/Supabase/Chakra UI】

はじめに

アイドルや芸能人の服装が気になったことはありませんか？

特にK-POPアイドルが好きな人は推しのアイドルがどのような服装なのか気になることがあると思います。今回は推しのアイドルの服装情報を共有できるアプリ（アプリ名：K-Style Finder）を開発しました。

初の個人開発ということもありアイデア出しから実際に実装するまで大変でした。こちらの記事ではアプリの紹介と開発の過程を紹介します。

K-Style Finderについて

開発理由

今回作成したのは自分の好きなアイドルの服装を調べることができるアプリです。ユーザーは調べたいアイドルの服装の画像を登録することができ、それに別のユーザーが回答をすることができます。このアプリは、ファン同士が互いにアイドルの衣装に関する情報を共有し、活発なコミュニケーションを図ることを目的としています。

SNS上には、K-POPアイドルの衣装に関する情報が数多く存在します。しかし多くの場合、特定のアカウントからの情報を受け取る一方的な状況です。本アプリでは、ユーザー同士が主体的に情報を探し、共有することで、より深いレベルの交流を目指しました。共通の興味を持つファンが集まり、一緒に情報を探求していく、そんな活気あふれるコミュニティの形成を目指していきたいという思いから制作しました。

機能

今回は実装した機能は以下の3つになります。

1. アカウント作成、ログイン機能
2. 探したい服の画像の登録機能
3. 探している服の詳細回答機能

アカウント作成、ログイン機能

ログインとアカウント作成ができます。Supabaseを使用してユーザーのデータを保存していますが、今回はSupabase Authを使った認証ではなく、Supabase上に存在するデータとの一致を確認することでログイン機能を実現しています。アカウント作成も実際にはユーザー情報をSupabaseに保存するだけの簡易的なものです。

探したい服の画像の登録機能

ユーザーは自分が探したい推しの服装の画像をアップロードすることができます。この際、必要なのは画像のみで、詳細な情報を入力する必要はありません。そのため、K-POPに詳しくない人でも可愛い服を見つけた場合、その詳細を知りたいといった用途で使用可能です。

探している服の詳細回答機能

他のユーザーがアップロードした服装の詳細情報を回答することができます。

構成・使用技術

- 環境
vite: 5.4.1
firebase: 13.16.0

- 言語
typescript: 5.6.2

- ライブラリ
react: 18.3.1
react-hook-form: 7.53.2
react-router-dom: 6.28.0

- DB
supabase/supabase-js: 2.46.1

- CSS
chakra-ui: 3.1.1

- Test
testing-library/dom: 10.4.0
testing-library/jest-dom: 6.6.3
testing-library/react: 16.1.0
testing-library/user-event: 14.5.2
types/jest: 29.5.12
types/react: 18.3.12
types/react-dom: 18.3.1

技術の選定理由と用途

React + TypeScript

• 選定理由
  • JavaScriptに静的型付けを追加することで、コードの可読性と保守性を高めるため
  • 型チェックによるバグの早期発見が可能なため
• 用途
  • 型安全なコードの記述

Chakra UI

• 選定理由
  • React用のUIコンポーネントライブラリとして、シンプルで使いやすく迅速な開発を可能にするため
• 用途
  • UIコンポーネントの作成

Vite

• 選定理由
  • 高速な開発環境の構築が可能なため
  • ホットモジュールリプレイスメント（HMR）が非常に高速で、開発中のコード変更が即座に反映されるため
• 用途
  • 開発環境の高速化、生産性の向上

React Hook Form

• 選定理由
  • React用のフォームライブラリとして、バリデーション、エラーハンドリング、サブミット処理などを容易に行うことができるため
• 用途
  • フォームの作成、入力値の検証、フォーム送信処理

Supabase

• 選定理由
  • サーバーサイドの開発を簡略化したかったため
• 用途
  • データベース、ストレージ

Firebase

• 選定理由
  • サーバーサイドの開発を簡略化したかったため
  • Hosting機能が揃っているため
  • 無料枠での開発が可能なため
• 用途
  • ホスティング

技術選定の反省点

今回Chakra UIを使用してスタイリングを行いました。Chakra UIのコンポーネントを使用することで高速にスタイリングすることを目的としましたが、Chakra UIのバージョン3への移行に伴い大幅な仕様変更があり、エラーが多発しました。その結果、高速なスタイリングという目的からは外れる形になってしまいました。

今後はChakra UIの古いバージョンを使用するか、別のコンポーネントライブラリを使用することを検討した方が良いと思いました。

工夫したところ

• UI部分
  • K-POPアイドルの服装をテーマにしたアプリとして、ピンクやパープルのパステルカラーを基調にした可愛いデザインを採用しました。K-POPファン層は女性の割合が多いことから、女性に好まれるデザインを意識し、柔らかいトーンと丸みを帯びたボタンなどを取り入れることで、親しみやすさと使いやすさを両立させています。また、堅苦しさを感じさせない見た目で、アプリ全体の雰囲気を軽やかに仕上げました

• ユーザー主体的な情報交換
  • 他のSNSが一方向的な情報提供に偏りがちな中、ユーザー同士が主体的に情報を交換できる仕組みを目指しました。ユーザーが相互にやり取りを行うことで、ただの情報収集アプリにとどまらず、コミュニケーションを促進する場としても機能します。この設計により、ユーザーが自然と積極的に情報を共有・提供し合う環境を作り出しています

• アプリの手軽さ
  • アプリの登録時に画像をアップロードするだけで利用できるシンプルな仕様を実現しました。これにより、K-POPに詳しくない方や初心者でも手軽にアプリを利用できるように工夫しています。特に、情報を知りたい人が画像を登録するだけで完結する仕組みは、煩雑さを排除し、ユーザー体験を向上させる重要な要素となっています

難しかったところ

1. アイデア出し
   今回の開発で最も難しかったのは、ユーザーに価値を届けられるアプリを考えることでした。アプリのアイデアを決めるまでに約10個の案を出しましたが、その多くが「私が作りたいアプリ」でした。もちろん、自分が作りたいものを形にするのも重要ですが、実際に使ってもらえることがアプリ開発の本質です。この「使ってもらえる価値」を考えるという視点は、これまで意識していませんでした。この経験を通じて、今後はユーザー視点を意識しながらアイデアを練ることを心がけたいです。

2. モチベーションの維持
   これまでは与えられた課題をもとにアプリを開発していたため、進むべき方向が明確でした。しかし、今回のようにオリジナルのアプリを開発する場合、正解がないため、自由度が高い反面、実装がうまくいかないと大きなストレスを感じることもありました。そのようなときには、難しい機能の実装にこだわりすぎず、簡単なUI部分を進めるなど、少しでも前進することを意識しました。この方法が功を奏し、無事に最後までアプリを完成させることができました。

3. 画像の保存機能の追加
   今回の開発では、Supabaseのstorage機能を利用して画像の保存を実現しました。この機能を活用することで、アップロードされた画像を管理できるように設計しました。しかし、実装過程では多くの困難に直面しました。Supabaseのstorageに関する情報がまだ多くなく、実装方法を調べるのにかなり時間を要しました。特に公式ドキュメント以外の情報が限られていたため、試行錯誤する必要がありました。またアップロード後の画像URLが正しく取得できず、表示に失敗する問題が発生しました。画像のパスやURLの取得方法をSupabaseのドキュメントで確認し、適切なコードに修正しました。

今後の改善点

今回はメインの画像アップロードと回答機能に絞って実装しましたが改善したい箇所がいくつかあります。

1. 認証機能の追加
   Supabase Authを活用した本格的な認証機能を実装したい。
2. ユーザー別のデータ管理の追加
   マイページ機能を追加してユーザーごとにデータを管理できるようにしたい。
3. 検索機能の追加
   グループやアイドルごとのソート機能を実装予定。
4. ポイント機能の追加
   回答時にポイントを付与し、活発なユーザーや人気のあるアイドルのランキング表示する仕組みを検討中。

個人開発をしてみて

今回のアプリ開発を通じて強く感じたのは、個人でアプリを開発する経験が自己成長に直結するということです。この成長は、単なるプログラミングスキルの向上にとどまりません。アプリのアイデア出しや、作ったアプリがどのような価値を提供できるかを深く考えるプロセスは、個人開発でしか得られない貴重な体験でした。

思考面の成長

特にアイデア出しでは、身の回りの困りごとや、「あったら便利だ」と感じるものを軸に考えました。この過程で、自分の視点をユーザー視点に切り替える重要性を学び、「価値あるものを作る」という意識を持つことができました。また、社会における不便や課題に目を向け、それを解決することでユーザーに価値を提供する意識も身につけました。

これらの過程を通じて、「自分が普段どのようなことに関心を持ち、何を課題と感じているか」という自己理解が深まりました。こうした自己理解は、今後のアイデア発想や問題解決においても役立つと感じています。

技術面での成長

今回の開発では、Supabaseのstorage機能やReact Hook Formのwatch機能など、初めて触れる技術を習得しました。特にReact Hook Formについては、業務での利用経験を活かしながら個人開発に応用することで、理解がさらに深まりました。逆に、個人開発で得た知識を業務に還元することもでき、学びの良い循環を生むことができました。

また、Chakra UI v3の新しい実装方法に直面したことも貴重な経験でした。バージョンアップによる変更への対応は今後も避けられない課題ですが、今回は情報が少ない状況下で公式ドキュメントを読み解きながら適切な実装方法を模索しました。このプロセスを通じて、新しい技術への対応力や自己解決能力が大きく向上したと感じています。

感想

正直なところ、他のJISOUメンバーが制作したアプリと比べると、完成度の面で劣る部分があると感じました。しかし、一からアイデアを考え、実装し、課題を解決しながらアプリを完成させるという経験は、私にとって大きな成長の一歩となりました。

また、今回の経験を通じて、自分のスキルや視点の不足点を実感するとともに、今後さらに改善できる余地が多いことに気づきました。この気づきは、次の個人開発やチーム開発でさらに成長するための糧になると信じています。

さらに最初から完璧を目指す必要はないということを強く実感しました。むしろ、進める過程で得られる学びや改善の積み重ねこそが、次のステップにつながる重要な鍵です。この考え方は、個人開発に限らず、業務や他のプロジェクトでも活かせるものだと思います。

終わりに

今回制作したアプリは、現時点ではまだ改善の余地が多く残されています。しかし、この「未完成さ」をポジティブに捉え、今後の成長の余地として活用したいと考えています。具体的には、新たな機能を追加したり、UI/UXを改善することで、アプリの価値をさらに高め、より多くのユーザーに喜ばれるものにしていく予定です。

また、このアプリを継続的に成長させるプロセスを通じて、自分自身のスキルアップを図るだけでなく、ユーザーにとってより良い体験を提供できるよう努力を続けていきます。特に、ユーザーのフィードバックを積極的に取り入れることで、実際のニーズに応えるアプリへと進化させたいと考えています。

今後も、挑戦を続けながら自分の限界を広げ、さらに高いレベルのものづくりに取り組んでいきたいです。

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼