はじめに
以前ポートフォリオ作成時の記事リンクhttps://qiita.com/sapphire_19/items/2f4a6aad7569a38a39ae
2年前に作成した学習記録アプリ「StudyTime」を、
さらにブラッシュアップしました。
本記事では、実施した改修内容についてまとめています。
1.作成PF紹介
タイトル「StudyTime」
URL：https://studyrecord.netGitHub：https://github.com/redeye0077/study_record
トップページ
使用技術
1.フロントエンド- HTML
- CSS
2.バックエンド
- PHP 8.4.6
- Laravel 11.44.7
- JavaScript
3.使用ライブラリ
- Chart.js
- FullCalendar
- Laravel Breeze
4.データベース
- MySQL
5.インフラ
- AWS(VPC / EC2 / Route 53 / RDS)
- Let's Encrypt
機能一覧
| 機能 | |
|---|---|
| 1 | アカウント登録機能 |
| 2 | アカウント削除機能 |
| 3 | ログイン機能 |
| 4 | ログアウト機能 |
| 5 | 学習記録機能 |
| 6 | 学習記録表示機能 |
| 7 | 月間目標機能 |
| 8 | 掲示板機能 |
| 9 | ログインID変更機能 |
| 10 | パスワード変更機能 |
ER図
インフラ構成図
工夫点
インフラ・運用面
- Mailgun の導入により、Gmail の SMTP 設定不要でメール送信可能に
- AWS（VPC＋EC2＋RDS＋Route 53）へ移行し、インフラの柔軟性とセキュリティが向上
テスト設計
- Feature テストで正常系だけでなく異常系も丁寧に検証
苦労した点
テストコードの設計
- テストの粒度や構成に迷いがあり、どこまで検証すべきか判断が難しかったです
特にデータプロバイダーの使い方に苦戦し、引数の渡し方や書き方で何度もエラーが発生しました。
具体的には、引数の数が一致していなかったり、返却形式が array[] になっていないといった形式ミスにより、PHPUnit の実行時にエラーが多発しました。
最終的には、PHPUnit の公式ドキュメントや、同様のケースを扱った技術ブログを参考にしながら、一つひとつ検証・修正を行い、構文の正しい理解と実装にたどり着きました。
2.今回の改修ポイント
-
Laravelのバージョンアップ
Laravel 8 → Laravel 11 にアップグレードし、セキュリティ性・保守性・パフォーマンスを向上 -
セキュリティ対応
Cookie に Secure 属性を付与し HTTPS 通信時の安全性を向上
パスワードバリデーションを記号含む形式に変更
データベースの charset を utf8mb4 に変更し、🍣 や 🍺 などの絵文字も投稿可能に
Apache/OS/SSL のバージョンアップ（Amazon Linux 2023 により自動的に対応） -
メール送信手段の変更
以前は Gmail を使用していましたが、外部 SMTP を使わず Mailgun を導入 -
掲示板機能の新規追加
ユーザーが自由に投稿・閲覧できる掲示板を実装-
掲示板一覧表示機能
投稿日時の昇順に並び替え。
ページネーション対応により、快適に閲覧可能。 -
掲示板投稿機能
投稿フォームからメッセージ送信。
バリデーションチェックあり（未入力・長文など）。
-
-
テストコードの追加
掲示板機能に対してテストを追加し、品質保証を強化
詳細は3.テスト項目にて -
デプロイ環境の移行：さくらのVPS → AWS
旧環境： さくらのVPS
新環境： AWS（VPC + EC2 + RDS + Route 53)- セキュリティ強化：Amazon Linux によるセキュリティアップデートの自動適用
- スケーラビリティ：将来的なサービス拡張を見据えた柔軟な構成に対応
3.テスト項目
掲示板機能に対して以下の Feature テストを実装し、バリデーションや表示順、認可制御、ページネーションの挙動を網羅的に検証しました。1.メッセージ投稿機能
✅ 認証済みユーザーが100文字のメッセージを投稿できる
ステータスコード：302（リダイレクト）
messagesテーブルにレコードが保存される
✅メッセージ投稿時、messagesテーブルに期待通りのレコードが保存される
❌ 空のメッセージを投稿した場合
required バリデーションエラーが発生し、セッションに格納
ステータスコード：302
❌ 101文字以上のメッセージを投稿
max バリデーションエラーがスローされる
ステータスコード：302
❌ message にnullを送信した場合
required バリデーションエラーが発生
ステータスコード：302
❌ 未ログインユーザーが投稿リクエストを送った場合
ログイン画面へリダイレクト
ステータスコード：302
2.メッセージ表示（取得）機能
✅ ログイン済みユーザーが掲示板画面にアクセス
ステータスコード：200
メッセージ一覧が表示される（投稿日時の昇順）
✅ 1ページに10件のページネーション表示
✅ /chat?page=Nの形式で任意のページにアクセス可能
✅ 最終ページにメッセージが10件未満でも正しく表示
❌ 未ログインユーザーが掲示板画面にアクセス
ログイン画面へリダイレクト
ステータスコード：302
4.最後に
- 今後やりたいこと
掲示板画面のメッセージ削除機能の追加や
ルーム機能の追加を行い、それぞれの部屋ごとにメッセージができるような状態にしたいです。 - 改修を通じて得た学び
- セキュリティの観点を意識した実装
Secure属性の付与、パスワードのバリデーション強化、絵文字によるDBクラッシュ（utf8 → utf8mb4）といった課題を通して、セキュリティ要件への理解が深まりました。
動くものだけを実装するのではなく、セキュリティ面を意識した実装をしなければならないと認識しました。 - テストコードを書くことの重要性
テストを書くことで、「この機能は正しく動いている」と自信を持って言えるようになりました。
バリデーションや異常系も含めてカバーすることで、安心して機能追加や修正ができるようになったと実感しています。
- セキュリティの観点を意識した実装