はじめに

Webエンジニアへ転職を目指し、自分が独学で実際にポートフォリオが完成したのでその紹介と作成した背景や
作成する上で意識していたことなどを共有しようと思いますので、こちらの記事を通して
これからエンジニアを目指される方に少しでも参考になれたらと思っております。

作成したアプリについて

作成したアプリについて説明したいと思います。

アプリ概要

このアプリは、収入と支出を簡単に記録し、管理することを目的としています。ユーザーは、入力フォームに収支の内容と金額を入力するだけで、一覧に反映されます。また、入力したデータは編集や削除も可能です。アプリはシンプルなデザインであり、誰でも直感的に操作でき、日々の収支を簡単かつ効率的に管理することができます。さらに、月ごとに収支を管理するため、ユーザーは毎月の収支を分かりやすく確認できます。

機能について

機能についての説明をしたいと思います。

一覧と金額の入力

入力欄に内容と金額を入力すると、一覧に反映します。
プルダウンを＋にすると収入一覧、-にすると支出一覧に表示され支出の際は入力された支出データに基づいて円グラフが表示されます。

月毎に管理

収入と支出を月毎に管理することができます。各月の収支を一目で把握し、予算を立てたり支出を調整したりすることが可能です

編集、削除　（CRUD処理）

編集した一覧を入力することで、編集と削除が可能なページに遷移できます。編集ページでは、選択した項目の情報を編集し、更新することができます。また、不要な項目を削除することも可能です。
さらに、編集した内容は即座に残高に反映されます。つまり、収入や支出の編集や削除が行われると、その変更が残高に反映されます。

現時点のアプリ機能一覧

2ヶ月で作成したポートフォリオの機能一覧です。
今後も機能は追加予定です。

機能一覧

収入、支出の表示、編集、削除　（CRUD処理）
支出のグラフ表示]
レスポンシブデザイン対応
月ごとの収支管理

使用技術

フロントエンド

Next.js "13.4.9"
React "18.2.0"
Tailwind "3.3.2"

インフラ

vercel

その他

Github

選定理由

メインのReact,Next.js ,Tailwindを作成した理由について述べていきたいと思います。

React :フロントエンド開発においてもっとも使用されてるライブラリの一つだという事と、学習コストが他の言語に比べて低いと思ったため。
Next.js:ファイルシステムベースのルーティングを提供し、ページの管理が簡単である事、Reactとの親和性が高い事、Vercelとの統合が簡単でありVercelを使用することで簡単にデプロイできる事を理由に選定しました。
*Tailwind:事前に定義された多くのクラスを使用することで、開発効率が向上する点とカスタマイズ性と柔軟性が高いため、あらゆるデザインに対応できるので選定しました。

このアプリを作成した背景

普段の生活での支出に目を向けると、思っていた以上にお金を使っていることに気付きました。日常的な買い物や娯楽、飲食など、細かな支出が積み重なると、意識しないうちに予算をオーバーしていることがあります。

収入を把握していても、支出が予想以上に高くなっていることに気付くことがありました。月末になると残高が思ったよりも少なくなっていることに驚かされます。

そこで、自分の収支をより詳細に把握し、無駄な支出を減らすための手段として、収支管理アプリの開発に取り組みました。このアプリは、支出をカテゴリー別に分類し、定期的な支出パターンを把握できるように設計されています。さらに、支出をグラフやチャートで可視化することで、どの部分にお金を使っているか一目瞭然になります。

このように、収支管理アプリは自分の財務状況を客観的に把握し、節約や投資などの改善策を見つけるための有用なツールとなると考えたので作成しました。

　作成時に意識していた事

タスクをばらして言語化
質問する前にまずは仮説を立ててやってみる

■とにかく小さく、タスクをばらして言語化

手を動かす前に、具体的に何をしたいのか、何を作りたいのかを明確にします。その後、それを細かく分解し、一つひとつのタスクに言語化して進めることを心がけています。機能を実装する際は、その内容をメモなどに書き出し、それを細かく分解してから、それをもとにコードを書いています。
エラーが発生した場合も、問題の箇所を一つひとつ言語化してから、それを一つひとつデバッグして原因を特定するようにしています。これにより、原因を追究するプロセスがスムーズになりました。

　■質問する前に仮説を立てて問題に取り組む

分からないことがあった時はMENTAを通じてメンターさんに質問していました。その際、質問する前に自分なりにまず何が分からないのか、どこまで理解しておりどこから分からないのかを把握し、言語化してから質問することを意識していました。

終わりに

最後まで読んで頂きありがとうございます。
ポートフォリオを完成させることができ、とても充実した経験でした。このプロジェクトを通じて、多くの学びを得る事ができました。特に、コードを書く際に小さくタスクを分解することの重要性や、エラーが発生した際に問題を一つずつ解決するアプローチが役立ったことを感じています。
ポートフォリオの内容やデザインについても改善の余地があると思うで改善しつつ学習を継続していきたいと思います。