こんにちは!モビリティサービス開発部の久恒です。
2025年1月に入社し、今では実際の業務に関わらせてもらうことが増えましたが、
実務未経験で入社をしたため、実務を行う前の練習として、アプリケーション開発の訓練の一環として、業務でOJT形式でWebアプリの開発を行いました。
今回は、どのようなWebアプリを作成したのかみなさんにお伝えしようと思います。
学習の目的
FuelPHPを使用したWebアプリ作ってみる。
Webアプリの基本であるCRUD機能(create, read, update, delete)の練習をする。
扱うデータ量が多すぎず少なすぎず、適度にデータ操作の練習ができる題材として家計簿アプリを作成する。
入社時のステータス
- 文系大学卒
- 前職は金融機関の窓口社員
- プログラミング経験:前職と並行しながら8か月間オンラインスクールで勉強
使用環境
今後実際に関わるプロジェクトで使用する技術の習得のため、以下の技術を使用しました。
- AWS EC2
- nginx
- PHP
- PostgresQL
家計簿アプリの機能要件
- 基本要件
- データの登録・読取・更新、削除ができる
- 収支閲覧画面、入出金明細画面、収支登録/編集画面がある
- 追加要件
- カテゴリや金額ごとにフィルターやソートができる
- 家計簿明細一覧をCSV出力できる
- CSVファイルアップロードで家計収支データをインポートできる
1か月の実装スケジュール
・1週目
まず、環境構築を行いました。ありがたいことに練習用のEC2インスタンスを作成していただき、LinuxコマンドでPHPのインストールやnginxの設定などを行いました。
最初はphp8をインストールしたのですが、FuelPHPが対応しておらずエラーが発生。結果的にインスタンスを削除して環境を再構築することになり、最終的には3回ほどやり直すことに。
想像以上に時間はかかりましたが、反復することでコマンド操作に少し慣れました。
・2週目
画面設計を考えて、初めてさわるFuelPHPのMVC構造を理解しながら画面遷移ができるようにコーディングをしました。
作成した画面は3つです。
- ダッシュボード
- 年月プルダウンで選択して月別収入・支出・収支の差を確認できる。
- 詳細画面
- 年月プルダウンで選択して月別の取引一覧を表示できる。
- 収支新規入力・編集画面
- 収入・支出、日付、カテゴリ、メモ、金額を入力して登録ができる。
ここでは、年月プルダウンで選択した月を遷移後の画面で反映させる、というのに苦戦しました。パラメータを受け取ってコントローラーで値を受け渡して…という操作が慣れていなくてむずかしかったです。
・3週目
2週目までで主要機能ができたので、ユーザビリティを考えた機能のアップデートを行いました。
これまでPHPの練習として素のPHPで書いていた部分を、Smartyを導入してviewを書き換えました。(すっきりかけて嬉しい)
また、ライブラリを使用せずにフィルターとソート機能を実装することで、SQLについての理解がより深まりました。
さらに、今後のプロジェクトで頻出するCSV出力機能、インポート機能を実装しました。コードを読むことにもだんだん慣れてきたため、実際のプロジェクトで使われているCSV出力のコードを探し、参考にしながら作成しました。
最後に仕上げとしてテスト項目と機能一覧をまとめ、所属する部署のメンバーに共有して終了です。
✔作成したアプリの画面はこのような感じです。




学び
今回の個人開発では、FuelPHPに慣れることが第一目標ではありましたが、Linuxのコマンド操作やSQLの習得にも役立ち、その後の実際のプロジェクト業務への導入をスムーズに行うことができたと思います。逆に、今回行わなかったこととしてユーザー管理機能、セッション、バリデーション、エラーハンドリング等があり、こちらは業務を行う上で学習しながら覚えていこうと思っております。
おわりに
私は中途入社だったこともあり、いわゆる集合研修のような機会はなく、今回のように個人で開発を進めながら学ばせてもらいました。
プログラミングスクールでの勉強経験があったおかげで、使う言語は違っても、コーディングに対する抵抗はあまりなく、Web開発の基本的な考え方や流れをざっくりとでも理解できていたのは、すごく助けになったなと思っています。
とはいえ、実際に手を動かしてみると「自分はまだまだだな…」と感じることもたくさんありました。進捗を共有するたびに、先輩方から的確なアドバイスや、見逃していたバグの指摘をもらい、その知識と経験の深さに何度も驚かされました。
このブログが、実務未経験の人がどんな気持ちで開発に取り組んでいるのかの参考になったり、集合研修がない環境での学び方のヒントになれば嬉しいです!
最後まで閲覧ありがとうございます。
また、エコモットでは、ともに未来の常識を創る仲間を募集しています。
弊社に少しでも興味がある方はぜひ下記の採用ページをご覧ください!
また、エコモットでは、ともに未来の常識を創る仲間を募集しています。
弊社に少しでも興味がある方はぜひ下記の採用ページをご覧ください!