はじめに
タイトルの技術を用いてポートフォリオを作成したのでご紹介させて頂きます。
関連リンク
1. サービス紹介
タイトル 「save for happiness」
- サイトURL(夜間などは配信停止しますがご了承ください。)
-
GitHubリポジトリ
概要
「継続できる 500 円貯金」をテーマとした日々の貯金を記録する Web アプリケーションです。
作成背景
ITの力で友人の悩み解決に貢献できると考え開発に至りました。
私の友人に「貯金が続かない。」という悩みを持っている人がいました。話を聞くうちに何に浪費しているのかが把握できていない、モチベーションが維持できていないという課題が見つかったため、それらの解決に貢献できるようなアプリケーションを作成しようと考えて、開発に至りました。
使用技術
バックエンド
- Laravel 8.83.4
- Laravel Sanctum
- Laravel Fortify
- Laravel Telescope
- MySQL 8.0
- PHP CS Fixer
- PHPUnit
フロントエンド
- Nuxt.js 2.15.8（SPA モード）
- Vuetify 2.6.1
- ESLint/Prettier
インフラストラクチャー
- AWS(ECS-FARGATE/ALB/Route53/VPC/RDS)
- CircleCI (CI/CD)
- Docker/docker-compose
機能一覧
| 機能名 | 説明 |
|---|---|
| ユーザー機能 | 会員登録、ログイン、ログアウト、ゲストログイン |
| ユーザーフォロー機能 | フォローしたユーザーのプロフィール閲覧可能 |
| 貯金記録機能 | 作成、編集、削除 |
| 貯金記録表示機能 | グラフ、ランキング形式で表示 |
| 目標作成機能 | 作成、編集、削除 |
| 振り返り作成機能 | 作成、編集、削除 |
| 振り返りお気に入り機能 | 他のユーザーの振り返りをお気に入りできる お気に入りした振り返りを一覧表示 |
| 通知機能 | フォロー、お気に入りされたときに通知を取得 |
| ニュース閲覧機能 | NewsAPI から取得したニュースを表示 |
インフラ構成図
ER 図
2. 技術の選定理由
バックエンド：Laravel
役割: フロントからのリクエストを返すAPIサーバ
選定理由:
・PHPを学んでいたので学習コストが低いと考えたから
・MVCモデルを採用しており、初学者の私でも作業内容がわかりやすいから
フロントエンド：Vue.js
役割: フロントエンドを開発する
選定理由:
・構文がシンプルでわかりやすく、ドキュメントが豊富だから
・状態管理、コンポーネントの再利用が比較的簡単に行えるから
フロントエンド：Nuxt.js(SPAモード)
役割: フロントエンドを効率よく開発する
選定理由:
・ルーティングが簡単に作成できるから
・将来的にSSRでも何か作成したいと考えているので、練習も兼ねて使ってみたかったから
UIフレームワーク：Vuetify
役割: 見た目を整える
選定理由:
・モーダルやカードなど実用性のあるものを簡単に実装できるから
・情報量、実装例が多く学習しやすいと感じたから
開発環境：Docker/Docker-compose
役割: 開発環境の構築
選定理由:
・短時間かつ正確に同じ環境を再現できるから
・VirtualBoxなど、他の選択肢に比べて軽量だから
デプロイ先：AWS（ECS Fargate）
役割: 本番環境の運用
選定理由:
・Herokuと比較して起動が早いから
・コンテナのデプロイ先ホストとしてEC2よりも相性が良いと考えたから
・OSやミドルウェア、スケールなどの管理が不要だから
CI/CDツール：CircleCI
役割: 自動テスト・自動デプロイ
選定理由:
・テスト、デプロイの自動化により効率的な開発につながると考えたから
・情報量が多く、学習コストが低いと感じたから
3. 開発を通して
工夫したこと
バックエンド
- APIサーバーとしてフロントエンドからのリクエストに対してJSONデータを返している点
- サービスに処理を分割し、コントローラーを薄くしている点
フロントエンド
- モーダルやボトムナビゲーションを使って直感的に操作できるよう意識した点
学んだこと
-
webアプリケーションの全体を構成する大変さや視点
開発前は、エンジニア＝コードを書くのが仕事という印象が強かったので、開発を通して、小規模ではありますが、全体の流れを学べたことが収穫だと考えています。 -
ユーザーの意見を聞くことの大切さ
開発途中に友人からの要望によって機能の追加をしたことがあり、開発者が望む機能だけを実装するのでは不十分だと感じました。よりユーザーファーストなサービスを作るために、ユーザーの声を意識していきたいと考えています。
苦労したこと
- エラー解決
サービスの課題
- テストやリファクタリングが不十分な点
- デザインの見栄えが良くない点
4. 終わりに
これからも学習を続けながら転職活動に望みたいと思います。
最後まで見ていただきありがとうございました。