はじめに
記事の目的
ポートフォリオとして作成したWebアプリケーションと作成過程の紹介記事です。
アプリの紹介だけでなく、どのような考えで作成していたのかもお伝えできれば幸いです。
以下、目次となります。
1. 作成したアプリについて【概要と機能】
2. 作成したアプリについて【技術】
3. 作成した目的・背景について
4. ポートフォリオ作成で意識したことと今後の展望
5. 作成のための学習について
1. 作成したアプリについて【概要と機能】
(1) アプリの概要
(2) アプリの特徴
(3) アプリの主な機能一覧
(1) アプリの概要
- 備品の管理者だけではなく、従業員も参加できる備品管理システムです
- システム名は「ItemNavi」としました
私が以前働いていた事業所で感じていた下記の問題を解消し、生産性と満足度を向上することを目指しました。
①必要な時に手元に必要な消耗品の在庫がない
②従業員が業務に必要だと感じる備品を上司に伝えても、その後の状況が分からない
③備品の点検と廃棄作業の管理の煩雑さ
- こちらのURLで公開中です
▶︎https://itemnavi.biz - GitHub
▶︎https://github.com/waya-kkazuya/item-navi
ログイン画面からのゲストログインでパスワードの入力なしにログインできますので、是非操作していただけますと幸いです。
（※ゲストログインではデータ保存処理は行うことが出来ません、機能をお試しになりたい場合は、お送りいたしますユーザー名とパスワードでログインいただければ幸いです。）
(2) アプリの特徴
コンセプトは「管理者だけでなく従業員も参加できる備品管理システム」です。
管理者と従業員のユーザー権限を設けることで、管理者だけでなく従業員も備品管理に参加できる仕組みを作りました。以下は管理者権限での画面と従業員権限での画面になります。
管理者画面(すべての機能)
従業員画面(限定的な機能)
(3) アプリの主な機能一覧
| 機能 | 管理者 | 従業員 |
|---|---|---|
| ①備品登録・編集 | ○ | |
| ②備品編集履歴表示 | ○ | |
| ③備品の点検・廃棄 | ○ | |
| ④消耗品入出庫（QRコード読取対応） | ○ | ○ |
| ⑤消耗品在庫履歴表示 | ○ | ○ |
| ⑥QRコードPDFダウンロード | ○ | ○ |
| ⑦点検と廃棄の予定・履歴の表示 | ○ | |
| ⑧備品のリクエスト作成 | ○ | ○ |
| ⑨備品のリクエスト評価機能 | ○ | |
| ⑩通知機能（3種類の通知） | ○ | |
| ⑪ダッシュボード表示 | ○ |
①備品登録・編集
プルダウンで消耗品などのカテゴリを選択できます。
消耗品の場合は通知在庫数を設定できます。在庫数が通知在庫数以下になると通知を受け取れます。
②備品編集履歴表示
備品の編集、点検や廃棄の履歴を確認できます。
③備品の点検・廃棄
備品の点検と廃棄を実行できます。
誤って廃棄した場合でも備品は復元可能です。
④点検・廃棄の予定と履歴の表示
備品の点検・廃棄の予定と履歴を確認できます。
⑤消耗品入出庫（QRコード読取対応）
消耗品の入出庫をモーダルで実施できます。
消耗品の入出庫処理は従業員も実施可能です。
スマホ・タブレットでのQRコード読み取りで入出庫のモーダルウィンドウを開く
スマホ・タブレッでQRコードボタンを押すことでカメラが起動し、該当の消耗品のQRコードを読み取ることで、一発で入出庫のモーダルウィンドウを開くことが出来ます。
⑥消耗品在庫履歴表示
モーダルウィンドウで消耗品の入出庫の履歴とそれに対応した線グラフを確認出来ます。
⑦QRコードPDFダウンロード
カテゴリで消耗品を選択した備品のQRコードのラベルがPDFでダウンロードできます。
A4用紙の名刺サイズのカードやシールに印刷して使用できます。
⑧備品のリクエスト作成
従業員の権限で備品のリクエストを作成出来ます。
⑨備品のリクエスト評価機能
管理者は作成された備品のリクエストをプルダウンで評価出来ます。
評価のステータスには、「未確認」「検討中」「採用」「見送り」があり、従業員は備品のリクエストの状況を確認出来ます。
⑩通知機能（3種類の通知）
以下のタイミングで通知が送られます。
- 消耗品在庫数が少なくなったとき
- 備品の点検・廃棄の予定日が近づいたとき
- 備品のリクエストが作成されたとき
⑪ダッシュボード表示
備品の登録件数と備品の編集履歴の確認が可能です。
（参考）備品管理の表示切り替え
（参考）レスポンシブ対応
タブレット
スマホ
※「Google Chrome」「Safari」でのみ、動作確認しています
2. 作成したアプリについて【技術】
(1) 使用技術
使用技術はバックエンド、フロントエンド、インフラ、CI/CDなどで分けると以下の通りです
①フロントエンド
- HTML
- CSS
- TailwindCSS 3.2.1
- TypeScript 5.6.3
- Vue.js 3.4.29
- inertiajs/vue3 1.0.0
②バックエンド
- PHP 8.2.26
- Laravel 10.48.27
- inertiajs/inertia-laravel 0.6.8
- PHPUnit 10.0
③インフラ
- Docker 27.4.0 (開発環境)
- AWS(VPC, IAM, ECS, Fargate, S3, RDS, ALB, Route53, ACM, CloudWatch, ECR)
④CI/CD
- GitHub Actions
(CIではLaravelのFeatureテストを行い、コードカバレッジレポートをアーティファクトに保存する)
⑤その他開発環境
- Git/GitHub
- phpMyAdmin
- VSCode
- ExcelVBA（ダミーデータ作成に使用しました）
(2) インフラ構成図
- ポートフォリオ用の環境なので、出来るだけコストを抑える構成にしました
- 本来であれば2つのAZに同一のシステムをでデプロイして、耐障害性の向上や負荷分散によるパフォーマンスの向上を目指すべきものだと考えています
(3) DB設計
ER図
- 全体的に１対１や１対多の関係のシンプルな構成になりました
- 今後実装予定の棚卸し機能では、多対多の関係で中間テーブルを使用した実装も考えています
各テーブル
| テーブル名 | 説明 |
|---|---|
| users | ユーザー情報 |
| items | 備品情報 |
| categories | 備品のカテゴリ |
| locations | 備品の利用場所・保存場所 |
| units | 在庫数の単位 |
| usage_statuses | 使用状況 |
| acquistion_methods | 備品の取得方法 |
| edithistories | 備品の編集履歴 |
| edit_reasons | 備品の編集理由 |
| inspections | 備品の点検情報 |
| disposals | 備品の廃棄情報 |
| stock_transactions | 消耗品の入出庫履歴 |
| item_requests | 備品のリクエスト情報 |
| request_statuses | リクエストの状態 |
| notifications | 通知情報 |
3. 作成した目的・背景について
(1)なぜポートフォリオを作ろうと思ったか
(2)独学を選択した理由
(3)なぜItemNaviを作成したのか
(1) なぜポートフォリオを作ろうと思ったか
ポートフォリオを作成すれば、自身が持つスキルの証明に役立てられると考えました。
未経験で求人に応募するには実務レベルのスキルが必要だということを知り、また私の36歳という年齢を考えた時に、レベルの高い技術に挑戦し出来る限りのことはすべてやろうと決心しました。
(2) 独学を選択した理由
私が独学でのポートフォリオの作成にチャレンジしたのは、「自走力」を養うためでした。
プログラミングスクールに通うことも検討しましたが、いつでも何でも質問できる環境に身を置いてしまうと、エラーなどの困難に直面した際に自分で問題を解決する力が付かないのではないかと考えました。
(3) なぜItemNaviを作成したのか
ItemNaviを作成したは、私が以前勤務していた事業所で感じていた備品管理に関する問題を解決したいと感じたためでした。
管理者は忙しさのため、従業員が使用する備品に関してそこまで気を配る余裕はなさそうでした。従業員は必要な時に必要な備品が手元にないと仕事にならなかったり、不便やストレスを感じるタイミングが少なからずありました。
そこで管理者も従業員もWin-Winになれるようなシステムを作れたらと考えたのが始まりでした。
4. ポートフォリオ作成で意識したことと今後の展望
(1) ポートフォリオ作成時に意識したこと
私は今回のポートフォリオ作成で「実務を想定して開発する」ことを意識しました。
そのため、以下の５つの点を特に重視しました。
①Git/GitHubの活用
取り組んだこと
- Issueを作成し、それに対応するブランチを分けて管理
- プレフィックス付きのブランチ運用（feature/ や fix/ など）
- プルリクエストを作成し、自己レビューを実施
今後の課題
Git/GitHub の使い方はまだ課題が多いと感じています。特に「ブランチのプレフィックスのルール」「コミットの粒度」「プルリクエストの書き方」に改善の余地があります。チーム開発では必須のスキルなので、実務を通して磨いていきたいです。
②Laravelのテストコードを書く
取り組んだこと
- Featureテストを作成し、Xdebugでコードカバレッジを測定
- テストケースをExcelに整理
- 境界値分析・同値分割や正常系・異常系を意識
今後の課題
現在はコードカバレッジのみを指標にしていますが、より実践的なテスト方法を学んでいきたいです。また、Vue側のテストやE2Eテストにも挑戦していきます。
③Dockerを使用した開発環境の構築
取り組んだこと
- ローカル開発環境でDockerを利用（Laravel Sail環境）
- AWSへのデプロイにECRによるコンテナデプロイを採用
今後の課題
Dockerの基本的な使い方は理解したため、より実践的な運用スキルを伸ばしていきたいです。
④CI/CDパイプライン構築
取り組んだこと
- GitHub Actionsを使用してCI/CDパイプラインを構築
- プルリクエスト作成時に自動テストが実行（CI）
- mainブランチにプルリクエストがマージされたら自動でプロイする（CD）
今後の課題
CI/CDの導入により開発フローの効率化を実現できましたが、維持するために継続的な改善が必要だと感じました。実際に、依存ライブラリの更新により時間経過でテストが失敗するようなことがありました。
⑤読みやすいコード・コード設計
取り組んだこと
- 他の人が読みやすいコードを書く
- 変更容易なコードを書く
- 一貫したコーディングスタイル を維持する（フォーマッターを使用）
今後の課題
まだまだコードには改善の余地があるため、原則や設計を学びより良いコードを目指していきます。また同時にリファクタリングのスキルも磨いていきたいです。
(2) 今後の展望
基本情報技術者を取得することで、学習の基礎が出来たと感じています。
これからは以下の内容について、理解を深めていきたいと考えています。
- セキュリティ
- パフォーマンスチューニング
- アーキテクチャ
- ドメイン駆動設計
- ネットワークに関する知識
5. 作成のための学習について
(1) 作成・学習期間
作成期間（2024年7月～）
ここから実際にポートフォリオを作成し始めました。
一度Udemyで学習した内容を復習しながら、ポートフォリオを作成していきました。
テストコードを書く時、CI/CDパイプライン構築する時などそのときのフェーズに合わせて、書籍やUdemy講座で学習して実装していきました。
学習期間（2023年5月～2024年6月）
PHPとLaravel、JaLaravel・TypeScriptとVue.js、CSS・TailwindCSSは書籍やUdemyの講座で基礎を固めました。
【勉強＆開発記録624日目】
— waya (@8zBA40yLA6Hpgrl) March 6, 2025
今日はCronによる定期実行の部分を修正していました。
CloudFormationに登録するAmazon EventBridgeのルールでは、Cronで設定したタイミングでphp artisanコマンドを実行してくれるため、シンプルで分かりやすいです。
(2) 参考にした学習教材
ポートフォリオを作成前、作成中に使用した教材は以下のとおりです。
主に書籍とUdemyの講座を使用しました。
メインはUdemyの講座でしたので、学習順に以下に記載しました。
Laravel テスト実践入門！ ～ Laravel 9 で始めるTDDテスト入門講座 ～（現在受付停止中）
さいごに
今回のポートフォリオ作成を通して、エンジニアに必要な知識の膨大さとタスクの多さに圧倒され、途方に暮れたこともありました。
一方でそれを乗り越えられたのは、やはり技術を学ぶことが楽しく、自分が作ったものが動くことに感動したからだと思います。
これから自分がこの技術を通じて、誰かの役に立つことができるかもしれないと想像するとワクワクします。
これから転職活動を始めますが、採用していただいた場所で貢献していけるよう、努力を惜しまず日々成長をしていきたいと思います。
最後までお読みいただき、ありがとうございました！！🙇
こちらはやまてさんの記事を雛形として参考にさせていただきました。
(https://qiita.com/ryamate/items/c3b4f63f8d94ab090bf8)