はじめに

初めまして。最近Web開発を始めた情報系の大学に通うM1です。
今年、夏のインターンシップに向けて、様々な企業さんの選考を受けたのですが、面接はもちろんのこと、自身の技術力の無さをとても痛感しました。

そこで、個人でWebアプリ開発に取り組んでみました。

今回は初めての個人開発で学んだことや苦労したこと、反省点を書き溜めておきたいと思います！（これからWeb開発をする方の参考にもなれば嬉しいです🙌）

背景

「自分の技術力の無さを痛感した」というのも、インターンシップの選考で応募しようとすると、応募資格の欄に「アプリ開発・運用の経験がある方」という記載があるのを目にしました。私は自分の作品を一つも持っていなかったので、そもそも応募する資格すらないという状況でした。なんとか1社短期間のインターンシップに参加させていただけることになりましたが、技術力の無さを痛感し、成長したいと思い、個人開発に取り組みました。

参加させていただいたインターンシップでは、Webアプリ開発をしました。メンターの方に教えていただきながら、開発をし、とても楽しかったです。（社員の方々も働くのが楽しそうでとても憧れを持ちました）特に、初めてのWebアプリ開発で、ものづくりの楽しさをとても実感しました。
今回は、このインターンシップで学んだことも活かしながら、Webアプリを開発しました。

初めての自作アプリですが、今回はTodoアプリを作ることにしました。
いつもタスクはNotionで管理していたのですが、Notionでタスクを書き出して終わってしまうことが最近増えてきていました。作業をするときはyoutubeのポモドーロタイマーを流すんですが、タスクを書き出して、いざ作業を始めようとすると、スムーズにいかないんです。（Youtubeの動画に誘惑されてしまうので😅悪いのは誘惑に負ける僕なんですけどね）私と同じような人がいるかもしれないですし、あったら便利なのでは💡と思ったので、タスク管理とポモドーロタイマーが一体化したアプリを作ることに決めました。

アプリ概要

ログイン・新規登録のページ

ログインページです。
作成したアカウントのユーザ名とパスワードを入力するとログインできます。

新規登録ページです。
ユーザ名とメールアドレス、パスワードを入力し、アカウントを作成します。
ユーザ名とメールアドレスは重複して使用できず、ユーザ名は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を綺麗に保つことができ、使用したライブラリやパッケージが明示できるのもメリットだと考えました！
Git/GitHub
- 言わずもがなかもしれませんが、バージョン管理です

振り返り

個人開発を経験して

ToDoアプリを開発してみて思ったのは、やはりものづくり楽しいということです。
インターンシップでは、チーム開発でしたし、メンターの方にたくさん助けていただいきましたが、今回のアプリ開発は全て1人だったので、始める前に、「楽しいと感じなかったら、どうしよう」と思っていましたが、1人でも楽しいと感じられたのでよかったです。
しかし、インターンシップの時と違って、開発で行き詰まったところがあっても、誰にも頼ることができない上、1人でずっと調べることになるので、少し孤独感がありました。1人での開発は何でも自分の思ったようにできて、自由度が高いと感じましたが、チームで開発をする方が自分には向いていると感じました。（チーム開発では、自分の考えを相手にうまく伝える能力が必要だとは思いますが、それはこれから鍛えていきます🔥）

開発の学び、反省点

今回のアプリ開発では、初めての技術がほとんどでした。そうした理由もあって、多くの場面で苦戦しました。しかし、たくさん失敗した分、学ぶことも多くありました💪

GitHubを使いこなす

DBとバックエンドの接続が上手くいかず、苦労しました。（しかし、これを解決するための調査のおかげで、docker-composeへの理解が少し深まりました。原因はそこじゃなかったですが）しかし、ここでかなりの時間を費やしましたが、GitHubを見ると最初から問題なくできていたみたいになっています。上手く使いこなせていませんでしたが、振り返ってみると、issueをたてて、何が問題だったか、なぜ解決に至ったかをわかるように記録しおてく方がいいと思いました。

開発前に要件定義等をきちんと行う

今回の開発では、作りたいものが決まって、すぐに開発を進めていきました。画面設計に関しては、インターンシップでの経験もあって、開発前に行いました（手描きのとても簡易的なものでしたが…）が、アプリに必要な機能の設計については、大雑把に、ToDoの追加や取得など基本的な機能しか考えていませんでした。そのため、後から「あ、この機能いるやん！！」みたいになって追加した機能もあり、それに伴って修正が必要な箇所もあったので、開発前にしっかり機能設計をしておく必要があると思いました。
開発のプロセスについては、まだまだ勉強中ですが、これらに加えて、画面遷移図等も取り入れていきたいと思います。（こうした工程はどのようにして学んでいくのでしょう？やはり実務経験を積む必要があるのでしょうか😥）

QiitaやZennなどを使用して、開発の学びを記録しておく

開発中に行き詰まった時、公式ドキュメントを調べたり、QiitaやZennなどの記事を参考にしたりしました。しかし、どういった場面でどの情報を参考にして、コードを書いたかはわからなくなってしまいました。コードを読み返した時に、なぜこのコードを書いたのかがわかるようにしておくべきだと思いました。（今覚えていても、いずれ忘れてしまうかもしれません）自分が再び同じ技術を用いて、似たような問題に直面した際、参考になるかもしれませんし、自分以外の人が参考になるかもしれませんよね。なので、QiitaやZennで記録するようにしようと思いました。特に、Zennのスクラップが使いやすいのではないかと思います。今更ですが、覚えている分を書き出しています✍️

作成したものを使ってみて

早速作成したToDoアプリを使っていますが、とてもいいです！！👍
ToDoリストとポモドーロタイマー（作業ページ）が集約されているので、作業に入るハードルが下がったように感じます。（自分で作成したアプリを使いたいだけかもしれませんが笑）でも一つのタスクが終わって戻ると、次やらないといけないことがすぐ把握できるのもいいと思いました。本当に作ってよかったです。たくさん苦労したこともありましたが、とても勉強になりましたし、何よりも使ってみて、作ってよかった！と思える瞬間が、（他の人に使ってもらってポジティブな評価を得た時とかも）一番やりがいを感じます。また何か時間が許せばアプリを作りたいと思います。

先日研究室の人たちに向けて、開発したアプリについて発表しました！！
色々追加機能のアイデアをいただいたので、もっと機能を追加していけたらなと思います！

アプリ公開

実は、まだアプリを公開できていません。
公開するのも簡単ではないですね！たくさんの方に使っていただ期待ですし、公開もできるように引き続き勉強頑張ります🔥💪

アプリ公開しました🚀
スマホの表示もできるようにデザインしましたので、ぜひ見てみてください。

PCはChromeとSafariで動くことを確認しました。スマホは、iPhone上のSafariで動くことを確認しました。（トラッキング防止は解除してください。iPhone上のChromeではCookieがうまくいかないようで、動きません）