はじめに
今回はJISOUの自由課題として、大学で授業の課題や定期テストの過去問を共有し合えるアプリ「KakomonShare」を開発しました。開発期間は1ヶ月ほどの小規模なアプリではありますが、アイディアや機能を考えるところから自分で行うのは初めてだったのでかなり苦労しました。今回は初めての個人開発で取り組んだことや苦労したこと、反省点や得た学び等を共有していきます！
そもそもなぜこのアプリ案にしたのか
自分の学部では中間や期末試験、課題がほとんど過去のものと同じまま出されることが多く大体の過去問は先輩を探せば手に入ります。もちろんすでに先輩の知り合いがたくさんいればいいのですが、大学に入りたての1,2年生はまだ知り合いの先輩が少ないと思うので、気軽にweb上で過去問の募集や誰がどの過去問を持っているかを閲覧・コンタクトできるような場所を作りたいと思い今回のアプリ案に至りました。
今回はあくまで自分のアイディアを形にすることが目的のため、現状実運用とかはしておりません。
機能一覧
gifの画質がなぜかよくならなかったので画像で紹介します🙏
認証機能
firebase authを利用してgoogleとgithubでサインインできるようにしました。
過去問の募集投稿ができる機能
過去問の募集投稿ができ、詳細ボタンからそれに紐ずく掲示板で話せるようになっています。
過去問募集投稿フォーム(左)と募集投稿に紐ずく掲示板(右)
自分が持っている過去問を登録できる機能
学部の各授業ごとに自分が持っている過去問などの情報を登録できる機能です。
先程の過去問募集投稿のフォームもそうですが、必須項目を入力しないとバリデーションエラーが出るようになっています。
過去問が無事登録できると以下のように科目ごとにテーブル表示されます。firebase authのユーザーidを利用して投稿者本人なら編集できるようにしています。
- 投稿者本人の場合
- 本人以外の場合
管理者ページ(機能ではないですが)
今回のアプリは過去の募集投稿や登録が増えて情報が溜まれば溜まるほど価値が出るアプリだと思ったので、投稿や登録の削除機能はあえて実装しませんでした。(どうしても削除したい場合は管理者ページから伝えてもらうことになりますが、現状は実運用していないので投稿内容は定期的に削除しています)
使用技術一覧
- React(Typescript)
- Chakra UI
- React hook form
- Supabase
- Firebase
- Jest / Testing library
- Github actions
今回新しく取り入れたこと
Firebase Authを導入
機能説明の際にも出てきましたが今回は新しくFirebase Authを取り入れました。jsとtsで若干書き方が変わるので少し大変でしたが、認証処理をかなり簡単に実装できるのですごい便利でした(セキュリティ周りをプロバイダに任せられるのも便利)。また認証機能をつけることで投稿した本人だけが投稿を編集したりもできるのでアプリとして完成度を上げることができると思います。
ER図を書いてみる
vscodeの拡張機能であるdraw.ioを使ってER図も書いてみました。たった5つのテーブルでしたがER図を書くのが初めてだったのもあり意外と時間かかりました。1対多や多対多のような概念も知れたので勉強になりました。今後はインフラ図にも挑戦していきたいです。
反省点
UIがあまりモダンな感じではない...
今回自分の現状の技術力と時間制限の都合上ChakraUIのコンポーネントをたくさん利用してUIを構築したため、若干ありきたり目なデザインになってしまいました。当たり前ですがChakraUIが悪いのではなく自分がUIフレームワークに頼りすぎていたためもう少しpinterestとかからモダン目なデザインを探して近づけていければ良かったと思います。
もっと技術的なチャレンジをしても良かった...
今回のアプリは基本的に以前までの学習記録アプリやデジタル名刺アプリとほとんど同じ技術スペックで作ったため、もう少し技術的なチャレンジを増やしても良かったなと思います。例えばUIフレームワークは使ったことのないMUIを使ってみるだとか、機能面では生成aiやグラフ描画等のライブラリを利用しても良かったかなと思います(今回はアプリの機能要件的に必要ない感じでしたが)。
ちゃんと設計をしてから開発を始めるべきだった...
開発が始まってもテーブルやUIの設計(?)が決まりきらず、なかなかMVP通りに開発が進みませんでした。アプリの機能だけでなく、その他設計周りも実装を始める前にしっかり決めておくと開発がスムーズにいきそうだなと思いました。
大変だったことや学んだこと
そもそもアイディアが思いつかない
そもそもユーザー価値に繋がるアプリ案が思いつかず開発に着手するまで少し時間がかかってしまいました。アイディアはなかなかパッと出るようなものでもないと思いますし、すぐ思いつくようなアイディアはすでに世の中にありふれていたりするので普段からアプリで何か解決できる問題はないか考える習慣が大事だと思いました。
実装の壁打ちはAIをどんどん使う
過去問登録でアコーディオンの中にテーブル表示させる箇所は中間テーブルを用いているのですが、このあたりのデータの持ち方の実装にかなり悩みました。またテストでも指定した要素が取得できなかったり、firebase周りでエラーが出たりしてかなり苦戦しましたがこのような実装の壁打ちにはやはりAIが便利だなと思いました。もちろんちゃんとコードを理解して使うことは前提だと思いますが生成AIによって自分のアイディアを形にしやすくなったなと思います(今更感)。
アウトプットを積み重ねる重要性を再確認
開発しながらこれまでの学習記録アプリやデジタル名刺アプリで作ってきた処理やテストのコードを使い回せる部分が多くありました。またエラーが出た際に過去の自分の記事に助けられることも少なからずあり、改めてアウトプットを積み重ねることの重要性を実感できた気がします。
自分でアプリを作る大変さ
冒頭でも書きましたが今回は自分でアプリ案や機能、デザインなども考える必要があったのでかなり大変でした。それもあり普段自分が利用しているアプリのデザインがどうなっているか意識するようになったり、この機能をReactで実装するならどうすればいいか考えるようになってきたので非常に良い経験になりました。また本格的に実運用をしていくならUI/UXはもちろんのことセキュリテイや費用面にも気を遣う必要があると知り、webサービス1つ作るのも簡単じゃないと実感できました。今回はこのあたりまでは考慮していないので今後作るアプリでは取り入れていきたいです。
アプリの展望
今後はユーザーが増えてきた時のために機能追加(検索,ページネーション,レスポンシブ対応等)をしても良いと思いましたが、やはりちゃんと実運用していくなら学部のメンバーと一緒に開発したい感があるので学部内でチーム開発をしてくれる方を募集したいなと思いました。その場合は今回作ったものをベースにまた１から設計し直してアプリをフルリニューアルしたいです。
(もっと書きたいことがあった気がしますが、忘れてしまったので今回はここまでにします)
おわりに
初めての個人開発で大変なこともたくさんありましたが、無事に最後まで作りきれて良かったです！今後はNext.jsや外部apiなどもっと色々な技術にも触れていき領域を広げていきたいと思います！長々と書いてしまいましたが、ここまで読んでくださりありがとうございました🙇
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします