はじめに
私は20258年7月よりアプレンティスシップ生10期として、日々エンジニアになることを目指して独学を頑張っています。
今回は一通りカリキュラム内容を終えたうえで、初めてオリジナルプロダクトを開発したので、組んだ内容についてお話いたします。
目次
1.テーマ
2.要件定義
3.業務フロー図
4.画面遷移図
5.デザインカンプ
7.ER図
8.技術スタック
9.システム構成図
10.学んだこと
まとめ
1.テーマ
住宅購入の第一歩に迷っている初心者 に向けて、 基礎知識の整理、計画のサポート、土地探しの記録や住宅メーカーの比較をまとめて行えるアプリです。
マイホームは「一生に一度の大きな買い物」と言われますが、実際には 3 回建てないと理想の家は建てられないとも言われています。 だからこそ、最初の一歩を正しく踏み出すことが大切です。
このアプリでは、その“最初の一歩”を後押しし、家づくりのイメージを整理しながら住宅購入が安心して進められるようにサポートします。
2.要件定義
想定ユーザー（対象者）
- これから家を建てたいと思い始めた人
- 情報収集を始めたけれど、流れがよくわからない人
- 住宅メーカーや工務店の見学を始めたばかりの人
WHY：なぜそれを解決したいのか？
現在、東京都で新築一戸建ての建築を進行中
2025年8月頃から、住宅購入に向けた準備を開始し、
住まいを持つ目的の整理を行い、住宅メーカー・住宅ローン・土地について順次選定し、図面や外構工事の打ち合わせをしている状況です。
特に、補助金制度が充実しており、住み慣れた東京都に建築する方針に決定しました。
しかし住宅購入の過程で、ローン・土地探し・メーカー比較などに膨大な時間と労力を費やし、情報が分散していることに大きな不便さと不安を感じました。本来「家を建てる」という一つの目的なのに、銀行・保険会社・不動産・住宅メーカーと窓口が分かれているため、全体像を把握するのが難しく、納得のいく判断をするのが困難でした。だからこそ、同じ悩みを抱える人が安心して家づくりを始められるよう、情報を整理し一元管理できる仕組みを提供したいと思いました。
この軸を基に、住宅購入支援アプリというテーマでポートフォリオを制作しました。
HOW：どうやって解決するのか？
住宅購入を検討し始めたときから迷わずに行動・情報を管理できるアプリを作成する。
機能要件
- 認証機能
- ユーザー登録機能
- ログイン・ログアウト機能
- パスワード変更機能
- チェックリスト画面
- ユーザー登録と同時に、初期データが作成
- タスクを登録・編集・削除・完了
- メーカー訪問記録画面
- 住宅展示場や工務店訪問の見積もり・メモのログ記録
- 訪問記録を変更・削除
- 住宅ローンシュミレーション画面
- 住宅ローン・諸費用の目安・バランスをチャート化
- 住宅ローン完済年齢・月々の返済額が表示
- 建築可能面積シュミレーション画面
- 建築可能面積の計算バー
（建ぺい率と容積率・階数、坪単価を入れると建物面積と金額を教えてくれる） - 保存先の編集・削除
- 建築可能面積の計算バー
非機能要件
- DBへの直アクセスは禁止、必ずアプリ経由で行う
- スマホ/パソコン両対応、UIは直感的に操作できるように設計する
- ユーザーが誤った入力をした場合の挙動、バリデーション対応
3.業務フロー図
4.画面遷移図
5.デザインカンプ
7.ER図
8.技術スタック
PC
- Windows 11
Microsoft Surface Laptop 7th 16GB
プログラミング言語
- PHP 8.3.4
- Javascript
- MySQL 8.0.44
フレームワーク
- Laravel 12
- Vue.js 3.5.22
ライブラリ
- Apexcharts.js
- laravel-language-ja (日本語バリデーション)
Composerパッケージ
- Laravel Breeze
インフラ
- Apache 2.4.65 (Amazon Linux)
- AWS
AWS サービス
- VPC
- Public subnet
- Private subnet
- EC2 (Elastic Compute Cloud)
- ALB (Application Load Balancer)
- Route 53
- ACM (AWS Certificate Manager)
- RDS(Relational Database Service）
静的解析ツール
- PHP Code Sniffer
- PHPstan
- ESLint
ターミナルソフト
- RLogin
DB管理ツール
- Adminer
バージョン管理
- Git/GitHub
アプリケーション監視ツール
- sentry
9.システム構成図
10.学んだこと
優先順位は決めておいた方がいい
住宅購入支援を目的とした一元管理アプリの開発にあたり、多くの機能案が浮かびました。
既存の複数アプリを利用する中で、それらを統合したサービスがあれば便利だと感じていましたが、
それらを配置したり、取り入れるだけでは自分が肌で感じた「情報が分散して必要な情報が分からない」といった課題解決に直結するモノではないと思いました。
特に、メーカー見学記録に特化した機能や、建築面積に基づいて概算金額を即時に算出できる機能は探しても見つからず、これらの機能を優先して実装しました。
デザインの統一性、見た目
ダッシュボード風のUIを意識して設計しました。
情報の単なる羅列ではユーザーの利用意欲につながらないため、
使いたくなる見た目の重要性について、メンターから助言を受けました。
そのため、素材集めや参考になりそうなサイトを探しまくりました。
体験設計を重要視しつつ、開発工数がオーバーしないようライブラリの選定を行いました。
↓下記、素材集めで出会ったサプリやサイトの紹介をしています。
PC・タブレット
スマホ
使用技術選定
技術選定においては、「なぜその技術を使うのか」を明確にすることが重要だと学びました。
住宅ローンの返済額や月々の支出・収入を複合グラフで可視化するため、ApexCharts.js の利用を前提とし、Vue.js または React.js のいずれかを検討しました。
React.js は再レンダリング範囲を意識する必要があり実装コストが高くなりますが、
Vue.js は依存関係を自動追跡し、必要な部分のみ更新されるため、開発者の負担を抑えられる点が魅力でした。
本アプリは、住宅ローンシミュレーションページで複合グラフを表示することを目的としており、該当箇所のみ Vue.js を導入し、開発効率を優先しました。
Notionでタスク管理
これまでアプリ開発において、自分専用のタスク管理を行ったことがなかったため、今回はタスクをかなり細かく洗い出しました。
Notionのテーブルビューにタスクを整理し、カテゴリーや区分ごとに分類することで、まとめて進めた方が効率的な作業や、工程上関連性がある機能にも気づくことができました。
また、不測の事態に備えて余裕を持った日数を確保するようにしました。
さらに、週に一度進捗を確認し、途中で追加されたタスクも反映させながら、以降のタスクの予定日の軌道調整を習慣化しました。
初期設定の重要性
オリジナルプロダクト作成前までは、チーム開発1回、PHPでアプリ作成が1回、Laravelアプリインストール2回ほどでしたので初期設定の重要性はとても理解していました。
そのため、まずは環境構築を丁寧に行い、確実に動作する状態を整えた上でコードを書く方針としました。
ライブラリの追加やComposerの設定、日本語バリデーションの導入など、必要になりそうな作業を漏れなく行えるよう、細かく洗い出して進めました。
ただし、認証機能については Laravel Breeze を用いれば容易に実装できると考え、コア機能の完成後に導入することとしました。
結果として、Web.phpのルート設定が初期化されたり、app.php が書き換えられたりする影響があり、もっと早い段階で導入しておくべきだったと反省しています。
まとめ
本当にアプリ開発していくんだなと気持ちが入り、不安と期待が入り混じったスタートでした。
Figmaの扱いに戸惑い、技術同士のつながりが見えず、インフラ構築はしたことがありませんでしたので「本当に完成させられるのだろうか」という不安を常に抱えていました。
それでも、継続することにこそ意味があると考え、気持ちが乗らない日でも少しずつ作業を積み重ね、完成へ近づけていけた経験は大きな糧になったと感じています。