【個人開発】ポートフォリオ用webアプリ開発まとめ
はじめに
この記事は私が取り組んだポートフォリオWebアプリ「Todo-Gantt」の開発について、その動機から学びの過程、そして直面した課題までを共有するものです。
私と同じような初心者への何かに助けになれば幸いです。
なぜこのアプリを作ろうと思ったか
-
オリジナルアプリ開発体験：企画からデプロイまで一貫した開発体験をしてみたかったから
-
実践的なスキルの獲得：プロのエンジニアにコードレビューをしてもらい、「ただ動けばよい」から「パフォーマンスやチーム開発を見据えた実践的な開発スキル」を身に付けたかったから
アプリの概要
アイデアのきっかけ
現職でプラグインを導入したTrelloをtodo管理とガントチャートを一つにしたタスク俯瞰表として利用していたが、Trelloの無料枠縮小にともない利用ができなくなったのでそれなら自分で作ってみたらどうかと考えたことが開発のきっかけ
～～以下は企画当初の資料のため現状のアプリとは差異あり～～
アイデアノート
ER図
画面遷移図
開発期間
延べ時間
約180時間（18週×週平均10時間）
期間
2024年4月下旬～同年8月下旬
技術スタック抜粋
主要技術
- プログラミング言語: PHP 8.1+
- フレームワーク: Laravel 10.x
- フロントエンドフレームワーク: Livewire 3.x
- データベース: MySQL
-
開発環境:
- Windows
- WSL (Windows Subsystem for Linux)
- Docker
バックエンド
-
Laravel Framework: ^10.10
- Laravel Sanctum: ^3.3 (API認証)
- Laravel Socialite: ^5.13 (ソーシャルログイン)
フロントエンド
- テンプレートエンジン: Blade
- viewライブラリ: Livewire ^3.4 (動的UI)
- CSS フレームワーク: Tailwind CSS ^3.1.0
- ビルドツール: Vite ^5.0.0
-
JavaScript ライブラリ:
- Axios: ^1.7.3 (HTTP クライアント)
- Cropper.js: ^1.6.2 (画像クロッピング)
- Frappe Gantt: ^0.6.1 (ガントチャート)
開発ツール
-
パッケージマネージャー:
- Composer (PHP)
- npm (Node.js)
-
開発支援ツール:
- Laravel Breeze: ^1.29 (認証スカフォールド)
- Laravel Debugbar: ^3.13 (デバッグ支援)
-
コード品質ツール:
- PHPUnit: ^10.1 (テスティング)
デプロイメント
- ホスティングプラットフォーム: fly.io
認証
- Google認証 (Laravel Socialite使用)
開発環境設定
- パッケージマネージャー: npm
- ビルドツール: Vite
-
スタイリング:
- Sass: ^1.77.8
サンプル画面
todo
ガントチャート
開発の各段階で学んだこと
※リンクはその際にまとめた記事へのリンクです
1. 環境構築
-
WSLの設定
- WSLの導入・利用方法
-
Docker環境の構築
- Dockerの基本概念（コンテナ、イメージ、Dockerfile）
- WSLでDockerを利用する方法（DockerDesktop）
- Docker Composeを使用した複数コンテナの管理
-
Linux
- 基本コマンド
- ファイルパーミッション（ファイルのオーナーとグループ、スーパーユーザー）
2. バックエンド開発 (Laravel)
-
Laravelの基礎
- MVCアーキテクチャの基礎
- ルーティング、コントローラー、モデルの連携
- Eloquent ORMを使用したデータベース操作
-
認証システムの実装
- Google認証の実装（Laravel Socialite）
-
データベース設計と管理
- マイグレーションを使用したスキーマ定義
- リレーションシップの定義と活用
気付きや学び
バックエンド開発では特に「Eloquent ORMを使用したデータベース操作」と「ファットコントローラー回避の手法」に注力した。
開発初期では「Laravelを使うとSQLを直接書かずにDB操作ができる」という認識しかなく、それがEloquent ORMによって実現されているということを認識していなかった。そんな認識でコントローラーにDB操作のコードをバンバン書いていけば当然N+1問題やファットコントローラーなどのアンチパターンを量産していく。そういった点をメンターから指摘されていくうちに「Laravel = Eloquent ORM = DB操作」というぐらいにEloquent ORMが重要なものと認識するようになったため開発しながらEloquent ORMの基礎習得に注力した。
（このあたりで遭遇したアンチパターンのまとめ記事も執筆予定...）
3. フロントエンド開発 (Livewire)
-
Livewire
- コンポーネントの作成とライフサイクル
- リアルタイムバリデーションの実装
-
Blade.phpテンプレートエンジン
- blade Componentとスロットの活用
-
Tailwind CSSによるスタイリング
- カスタムスタイルの追加と設定
気付きや学び
本開発は「バックエンド開発」に注力するでフロントは簡素なものにする予定だったがbladeでも動的UIが実装できるライブラリLivewireがあることを知り使ってみることにした。以前にvue.jsを学習したことがありそれと似ていたことから比較的キャッチアップに時間をかけることなく導入することができた。
4. 機能実装
-
ファイル管理システム
- ファイルアップロードの実装
- Cropper.jsを使用した画像クロッピング機能
-
タスク管理機能
- CRUDの基本操作の実装
- Frappe Ganttを使用したガントチャートの実装
-
APIの設計と実装
- RESTful APIの原則に基づいたエンドポイントの設計
- Laravel Sanctumを使用したAPI認証
気付きや学び
ここではタスク管理機能で登録したデータをjsライブラリ（Frappe Gantt）に渡すにはどうしたらよいか、と一瞬迷ったが、以前にReact + Laravelで簡単なアプリを作った方法を思い出し「API経由でJSONを渡せばよい」ことを思い付いた。
5. API認証とセキュリティ
-
Laravel Sanctumを使用したAPI認証
- Sanctumのセットアップと設定
- APIトークンの生成と管理
- トークンベースの認証の実装
-
セッション管理
- Laravelのセッション機能の理解と活用
- セッションデータの保存と取得
気付きや学び
上記の4.機能実装で書いた「API経由でJSONを渡す」ためにAPIを作成してみたが401エラーに遭遇。エラーの原因は処理にAuth::user()を含んでいるにも関わらず認証ルートを通していなかったからだった。ここでは解決手段としてLaravel Sanctumを使用したトークンベースの認証を採用した。
6. テストとデバッグ
-
PHPUnitをテスト
- テストコードの作成と実行
-
Laravel Debugbarの活用
- クエリの最適化
気付きや学び
テストコードは書いたことがなかったので練習のつもりで記述を増やしていった。いきあたりばったりで書きながらも「テストってこういう意図で書くと良さそう」という勘所も見えてきたので、ここからはテストの理論を学習しつつ次は効果あるテストを意図的に書けるようになりたい。
7. セキュリティ対策
-
CSRF対策
- LaravelのCSRF保護機能の理解と実装
-
認証と認可のベストプラクティス
- 適切なパスワードハッシュ化の実装
気付きや学び
セキュリティに関しては正直手を回すことができずLaravelに備わっている機能をそのまま利用する程度に従事した。セキュリティについてはまずは徳丸本でインプットすることから始めたい。
8. パフォーマンス最適化
-
データベースクエリの最適化
- Eloquentの適切な使用とN+1問題の回避
-
アセットの最適化
- Viteを使用したJSとCSSの最適化
気付きや学び
2.バックエンド開発でも書いた通り、ここではEloquent ORMの理解とN+1問題の発見力を高めることに注力した。Laravelを使っていくにはこのあたりのベストプラクティス・アンチパターンの引き出しを大量に持っておくことが重要だと感じた。
9. デプロイメント (fly.io)
-
fly.ioの基本概念
- fly.ioのアーキテクチャと特徴の理解
- fly.tomlファイルの設定
-
デプロイメントプロセス
- fly.ioのCLIツールの使用方法
今後の私の展望
- プログラミング言語（PHP）そのものの理解を深める
- RDBの理論の勉強
本開発を通してwebエンジニアの基礎力である上記2つの強化が必要と認識。
→ 開発中にビジネスロジックやテストを書いているとよく「これがベストプラクティスなのか？」と疑問を抱くことがあったがそれを検証する知見がなく疑問止まりになりがちだったため、それを解消するべくプログラミング言語そのものやRDBでできること・立ち回り方の知見強化が必要と感じた。
まとめ
今ある限りの知識・スキルで開発に取り組み、それに対してメンターからレビューをもらうことで自分では踏み出しづらいさらに一歩先のことへ取り組むことができた。
やはりああでもないこうでもないと悩みながら書いたコードが自分が意図したように動いた時はうれしい。
たくさん課題も見えてきたが、焦って的を絞れず色々なことに手を出してしまうと非効率になるため、まずは展望にも書いた課題に取り組んでいきたいと思う。
Discussion