はじめに
初めまして。最近Web開発を始めた情報系の大学院に通うM1です。
今年、夏のインターンシップに向けて、様々な企業の選考を受けました。しかし、思うように振るわず、面接はもちろん、自身の技術力の不十分さを痛感しました。
そこで、個人でアプリ開発に取り組んでみました。かなり遅いスタートになりましたが、精一杯頑張ります。
今回は初めての個人開発で学んだことや苦労したこと、反省点を書き溜めておきたいと思います！
私と同じような境遇の方へ参考になれば嬉しいです。
背景
「自分の技術力の無さを痛感した」というのも、インターンシップの選考で応募しようとすると、応募資格の欄に「アプリ開発・運用の経験がある方」という記載があるのを目にしました。私は自分の作品を一つも持っていなかったので、そもそも応募する資格すらないという状況でした。なんとか1社短期間のインターンシップに参加させていただけることになりましたが、そこでも技術力がまだまだであることを実感し、成長すべく、個人開発に取り組みました。
参加させていただいたインターンシップでは、Webアプリ開発をしました。メンターの方に教えていただきながら、開発をし、とても楽しかったです。（社員の方々も働くのが楽しそうでとても憧れを持ちました）特に、初めてのWebアプリ開発で、ものづくりの楽しさをとても実感しました。
今回は、このインターンシップで学んだことも活かしながら、Webアプリを開発しました。
初めてですが、今回はタスク管理アプリを作ることにしました。
最近、杜撰なタスク管理が多くなってきていたのと、研究室の同期も同じような状況だと耳にしたからです。
加えて、私はいつも作業をするときはyoutubeのポモドーロタイマーを流すんですが、タスクを書き出して、いざ作業を始めようとすると、スムーズにいかないんです。（Youtubeの動画に誘惑されてしまうので😅悪いのは誘惑に負ける僕なんですけどね）
私と同じような人がいるかもしれないですし、あったら便利だし面白いのでは💡と思ったので、タスク管理とポモドーロタイマーが一体化したアプリを作ることに決めました。
データベース設計
API設計
| パス | メソッド | 説明 |
|---|---|---|
| /todo-list | POST | タスクを追加する |
| /todo-list | GET | タスク一覧を取得する |
| /todo-list | DELETE | タスク一覧を削除する |
| /todo-list/{id} | GET | タスクを取得する |
| /todo-list/{id} | PATCH | タスク内容を更新する |
| /users/signup | POST | ユーザを登録する |
| /users/me | GET | ユーザ情報を取得する |
| /users/me | PATCH | ユーザ情報を更新する |
| /users/me | DELETE | ユーザを削除する |
| /users/me/password/ | PATCH | ユーザのパスワードを更新する |
| /token | POST | アクセストークンを発行する |
| /refresh | POST | リフレッシュトークンを発行する |
| /logout | DELETE | アクセストークン、リフレッシュトークンを削除する |
| /status | GET | ログイン状態かどうかを取得する |
アプリ概要
ログイン・新規登録のページ
ログインページです。
作成したアカウントのユーザ名とパスワードを入力するとログインできます。
新規登録ページです。
ユーザ名とメールアドレス、パスワードを入力し、アカウントを作成します。
ユーザ名とメールアドレスは重複して使用できず、ユーザ名は20文字以内、英数字、ハイフン、アンダーバーの使用が可能です。
🌟こだわりポイント
- 特定されやすいパスワードは使用されないように設計
- パスワードは8~20文字、英数字、記号を必ず含めるように設計しました
- 新規登録後をスムーズに
- 登録後ログインの必要なく、すぐに使えるようにすることで、ユーザ体験の向上を狙いました
タスク管理のページ
タスク管理ページです。
タスクを新しく追加し、タスク一覧を閲覧することができます。
また、タスクを完了して、チェックボックスを入力すると、画像のように真っ青になります。
🌟こだわりポイント
- ユーザが一目見ただけで残りタスクを判別できるように
- 完了したタスクを真っ青に変化させ、タスクの進捗度合いが簡単に分かるよう工夫しました
- ユーザがタスクに費やした時間を確認できるように
- 完了したタスクが完了までにかかった総時間を表示するようにしました
- 想定より早くできたか、または想定より時間がかかってしまったか、自己フィードバックできます
- タスク一覧をスッキリ
- 完了したタスクの表示・非表示の切り替えを可能にしました
ポモドーロタイマーのページ
ポモドーロタイマーページです。
中央にタイマーが表示されています。タイマーの終了時には音声で知らせてくれます♪
また、ポモドーロタイマーは自分でタスク時間と休憩時間を設定することができるようにしました。
さらに、YouTubeの動画を見られるようにし、作業用のBGMをかけることができるようにしました🎧
BGMを流すことで、より集中して作業できる人がいると考え、この機能を作りました。
参考動画：【勉強用・作業用BGM】α波で超集中・記憶力アップ【波の音×オルゴール】
🌟こだわりポイント
- タイマーの残り時間を円形のプログレスバーで表示
- タイマーの進行状況が視覚的に分かりやすくなるよう工夫しました
- 作業の総時間の表示
- 作業を始めてどれくらい時間が経ったかを確認できるようにしました
- （自分は「キリがいいところまで」という考えで、予定よりも時間をかけてしまった🤦♂️ということがあるので、作りました）
全体を通してのこだわりポイント
- カラーを青に統一
- 青は集中力をあげるカラーだそうなので、青色にしました🟦
技術
- Vue.js
- インターンシップでこちらを使用し、触ったことのある技術を使用することで、開発にかかる時間を短縮するねらいがありました
- また、インターンシップで学んだことをアウトプットし、より理解を深める目的もありました
- FastAPI/sqlalchemy
- Pythonは使用経験のある言語で、開発にかかる時間を短縮するねらいがあり、使用しました
- FastAPIを選択したのは、Pythonのフレームワーク（Flask, Django）の中で、とてもパフォーマンスが高く（GoやNodeJS並みのパフォーマンスが期待される）、また、比較的学習が容易であること、ドキュメントが豊富であり、Swagger UIが自動生成されることから、決定しました
- sqlalchemyは、FastAPIの公式ドキュメントで推奨されていたため、使用しましたが、標準でSQLインジェクションへの対策がなされており、セキュリティ的にメリットがあると考えました
- PostgreSQL🐘
- データベースは、SQLiteを使用したことがあるのですが、公開した場合、セキュリティ的に不安があったので、使用しませんでした
- PostgreSQLを選択したのは、アプリを公開するために利用するSupabaseがPostgreSQLのデータベースだったためです
- Docker/docker-compose🐳
- 公開する場合、開発環境と本番環境の違いにより、トラブル発生の可能性があると考えたので、Dockerを使用しました
- また、ローカルPCを綺麗に保つことができ、使用したライブラリやパッケージが明示できるのもメリットだと考えました！
振り返り
個人開発を経験して
アプリを開発してみて思ったのは、やはりものづくり楽しいということです。
インターンシップでは、チーム開発でしたし、メンターの方にたくさん助けていただいきましたが、今回のアプリ開発は全て1人だったので、始める前に、「楽しいと感じなかったら、どうしよう」と思っていましたが、1人でも楽しいと感じられたのでよかったです。
しかし、インターンシップの時と違って、開発で行き詰まったところがあっても、誰にも頼ることができない上、1人でずっと調べることになるので、少し孤独感がありました。1人での開発は何でも自分の思ったようにできて、自由度が高いと感じましたが、チームで開発をする方が自分には向いていると感じました。（チーム開発では、自分の考えを相手にうまく伝える能力が必要だとは思いますが、それはこれから鍛えていきます🔥）
開発の学び、反省点
今回のアプリ開発では、初めての技術がほとんどでした。そうした理由もあって、多くの場面で苦戦しました。しかし、たくさん失敗した分、学ぶことも多くありました💪
GitHubを使いこなす
DBとバックエンドの接続が上手くいかず、苦労しました。（しかし、これを解決するための調査のおかげで、docker-composeへの理解が少し深まりました。原因はそこじゃなかったですが）しかし、ここでかなりの時間を費やしましたが、GitHubを見ると最初から問題なくできていたみたいになっています。上手く使いこなせていませんでしたが、振り返ってみると、issueをたてて、何が問題だったか、なぜ解決に至ったかをわかるように記録しおてく方がいいと思いました。
開発前に要件定義等をきちんと行う
今回の開発では、作りたいものが決まって、すぐに開発を進めていきました。画面設計に関しては、インターンシップでの経験もあって、開発前に行いました（手描きのとても簡易的なものでしたが…）が、アプリに必要な機能の設計については、大雑把に、ToDoの追加や取得など基本的な機能しか考えていませんでした。そのため、後から「あ、この機能いるやん！！」みたいになって追加した機能もあり、それに伴って修正が必要な箇所もあったので、開発前にしっかり機能設計をしておく必要があると思いました。
開発のプロセスについては、まだまだ勉強中ですが、これらに加えて、画面遷移図等も取り入れていきたいと思います。（こうした工程はどのようにして学んでいくのでしょう？やはり実務経験を積む必要があるのでしょうか😥）
QiitaやZennなどを使用して、開発の学びを記録しておく
開発中に行き詰まった時、公式ドキュメントを調べたり、QiitaやZennなどの記事を参考にしたりしました。しかし、どういった場面でどの情報を参考にして、コードを書いたかはわからなくなってしまいました。コードを読み返した時に、なぜこのコードを書いたのかがわかるようにしておくべきだと思いました。（今覚えていても、いずれ忘れてしまうかもしれません）自分が再び同じ技術を用いて、似たような問題に直面した際、参考になるかもしれませんし、自分以外の人が参考になるかもしれませんよね。なので、QiitaやZennで記録するようにしようと思いました。特に、Zennのスクラップが使いやすいのではないかと思います。今更ですが、覚えている分を書き出しています✍️
作成したものを使ってみて
早速作成したアプリを使っていますが、とてもいいです！！👍
タスクのリストとポモドーロタイマー（作業ページ）が集約されているので、作業に入るハードルが下がったように感じます。（自分で作成したアプリを使いたいだけかもしれませんが笑）でも一つのタスクが終わって戻ると、次やらないといけないことがすぐ把握できるのもいいと思いました。本当に作ってよかったです。たくさん苦労したこともありましたが、とても勉強になりましたし、何よりも使ってみて、作ってよかった！と思える瞬間が、（他の人に使ってもらってポジティブな評価を得た時とかも）一番やりがいを感じます。また何か時間が許せばアプリを作りたいと思います。
先日研究室の人たちに向けて、開発したアプリについて発表しました！！
色々追加機能のアイデアをいただいたので、もっと機能を追加していけたらなと思います！
アプリ公開
実は、まだアプリを公開できていません。
公開するのも簡単ではないですね！たくさんの方に使っていただ期待ですし、公開もできるように引き続き勉強頑張ります🔥💪
アプリ公開しました🚀
スマホの表示もできるようにデザインしましたので、ぜひ見てみてください。
PCはChromeとSafariで動くことを確認しました。スマホは、iPhone上のSafariで動くことを確認しました。（トラッキング防止は解除してください。iPhone上のChromeではCookieがうまくいかないようで、動きません）