2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【初心者】初めてWebアプリを作ってデプロイするまでにやったこと

Posted at

はじめに

この記事では、初めての個人開発としてWebアプリをデプロイまで進めた経験をまとめます。
Webアプリ開発はインターンやUdemy、技術記事などで学習してきましたが、
実際に手を動かしてアプリを作ってみる中で学んだことや感じたことを整理しました。
同じようにこれからWebアプリ開発に挑戦する方の参考になれば嬉しいです。
何かご指摘等ありましたらコメントをいただけますと幸いです。

アプリの概要

ポモドーロ手法をベースに、ユーザーが作業時間を調整できるタイマーとタスク管理を組み合わせた生産性アプリを作成しました。以下アプリケーションのホーム画面になります。
スクリーンショット 2026-01-13 18.49.59.png

アプリを作った背景

資格勉強をしている際に、Webアプリのポモドーロタイマーを使って学習していました。
その中で、自分がどのくらい勉強したのかを可視化できれば、満足感を得られ、モチベーションの維持につながるのではないかと感じ、学習時間をその都度メモしていました。
そこで、使った時間に応じて「どのタスクをどれくらい勉強したか」を自動で記録してくれるWebアプリがあれば便利だと考え、自分で制作してみようと思いました。
また、これまでインターンやUdemyなどで学んできた内容を、実際にアウトプットしてみたいという思いも制作の理由の一つです。

使用技術

【フロントエンド】

  • React
  • TypeScript

【バックエンド】

  • Node.js
  • JavaScript

【インフラ・その他】

  • フロントエンド:Vercel
  • バックエンド:Render
  • 認証:Firebase Authentication
  • データベース:MongoDB
  • デプロイ:GitHub連携による自動デプロイ

くふうした点

コードをただ書くのではなく、一つ一つの処理を自分で説明できるように理解しながら実装を進めました。
また、初心者なりに、後から読み返したときにも理解しやすいコード構成を意識して開発しました。 

今後の改善点

今後の改善点として、タイマーのスタート/ストップを、ボタンにカーソルを合わせなくても、画面をクリックするだけで操作できるようにしたいと考えています。
実際に使ってみて、毎回ボタンにカーソルを合わせる操作が少し手間に感じたため、設定で切り替えられるようにすることで、より使いやすくしたいと考えています。

また、友人などにも使ってもらい、フィードバックをもとに今後も改善を重ねていく予定です。

おわりに

初めての個人開発でしたが、デプロイまで経験できたことで多くの学びがありました。
今後も改善を重ねながら、個人開発を続けていきたいと思います。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?