アプリ概要

ToDoリストのページ

ToDoリストを表示するページです。 適宜、ToDoを追加することができ、一括で削除することができます。

こだわりポイント

• カラーを青に統一
  • 青は集中力をあげるカラーだそうなので、青色にしました🟦
• 完了したToDoの表示・非表示の切り替え
  • チェックしたToDoは非表示にすることができるようにしました。これにより、ToDoリストがスッキリします✨

ポモドーロタイマーのページ

各ToDoの作業ページです。 中央にタイマーが表示されています。タイマーの終了時には音声で知らせてくれます♪ また、ポモドーロタイマーは自分でタスク時間と休憩時間を設定することができるようにしました。

こだわりポイント

• タイマーの残り時間を円形のプログレスバーで表示
  • タイマーの進行状況が視覚的に分かりやすくなるよう工夫しました。
• 作業の総時間の表示
  • 作業にどれくらいの時間を費やしたのかを振り返ることができるよう工夫しました。
  • 自分は「キリがいいところまで！！」という考えで、作業を続けてしまい、予定よりも時間をかけてしまった🤦‍♂️ということがあるので、これがその抑止力になればいいなと考え、作りました。

さらに、おまけ的な機能で、YouTubeの動画を見られるようにしました。（自分が作業するときに作業用のBGMをかけることが多いので🎧） 上で流してる動画はこちら。

技術

• Vue.js
  • インターンシップで使用したこともあって、そのまま使用しました。1人だとわからないことも多かったですが、調べながら📚
• FastAPI/sqlalchemy
  • 経験のあるPythonであるため。ある程度使用したことのある言語がC/C++, Pythonと少なく、また初めてのことが多く、学習コストの面からバックエンドは使用したことのあるPythonに決めました。
  • Pythonのフレームワーク（Flask, Django）の中でも、比較的学習が容易であり、ドキュメントが豊富であること、またAPIドキュメントが自動生成され、開発したAPIを簡単に試すことができるため、使用しました。
  • sqlalchemyは、FastAPIの公式ドキュメントで使用するように言及されていたため、使用しましたが、標準でSQLインジェクションへの対策がされており、セキュリティ的にメリットがあります。
• MySQL🐬
  • データベースは初めてですが、他のPostgreSQLなどと比較してQiitaでのヒット件数が多かったこともあり、トラブルシューティングを考慮して、MySQLを使用しました。（今回のアプリ開発に適していたかは定かではありませんが、調べて、少なくとも問題なく開発はできると考えました。）
  • その他に、SQLiteは使用したことがあるのですが、公開した場合、セキュリティ的に不安があったので、使用しませんでした
• Docker/docker-compose🐳
  • まだ勉強中でわからないこともありますが、公開する場合、開発環境と本番環境が違うことで動かないなど困ることがあると思ったので、Dockerを使用しました。
  • また、何よりローカルPCを綺麗に保つことができますし、使用したライブラリやパッケージが明示できるのもメリットかなと思いました！
• Git/GitHub🐙🐱
  • 言わずもがな、バージョン管理です。Gitは今まで何度か使用してきましたが、今回初めてissueやpull-requestを活用して、本格的に使用しました。

振り返り

個人開発を経験して

ToDoアプリを開発してみて思ったのは、やはりものづくりは楽しい😆 インターンシップの時と違って、1人での開発は何でも自分の思ったようにできて、自由度が高いとは感じましたが、やはりチーム開発の方が自分には向いてそうです（チーム開発では、自分の考えを相手にうまく伝える能力が必要だとは思いますが）

開発の学び、反省点

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

GitHubを使いこなす

DBとバックエンドの接続が上手くいかず、苦労しました。しかし、ここでかなりの時間を費やしましたが、GitHubを見ると最初から問題なくできていたみたいになっています。上手く使いこなせていませんでしたが、振り返ってみると、issueをたてて、何が問題だったか、なぜ解決に至ったかをわかるように記録しおてく方がいいと思いました。

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

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

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

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

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

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