[Laravel / Nuxt.js / Docker / AWS / CircleCI] 独学・実務未経験がポートフォリオ作成

# はじめに
タイトルの技術を用いてポートフォリオを作成したのでご紹介させて頂きます。

#### 関連リンク
- [Github](https://github.com/HuntingRathalos)
- [Wantedly](https://www.wantedly.com/id/ryousuke_yokogi)


## 1. サービス紹介
#### タイトル 「save for happiness」
- [サイトURL](https://web.save-app.net/)(夜間などは配信停止しますがご了承ください。)
- [GitHubリポジトリ](https://github.com/HuntingRathalos/portfolio)
![スクリーンショット 2022-09-12 6.57.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2265325/62c9f89f-dd24-0a52-b8da-a72762c12437.png)

## 概要
「継続できる 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

### 機能一覧

| 機能名                 | 説明                                                                         |
| ---------------------- | ---------------------------------------------------------------------------- |
| ユーザー機能           | 会員登録、ログイン、ログアウト、ゲストログイン                               |
| ユーザーフォロー機能   | フォローしたユーザーのプロフィール閲覧可能                                   |
| 貯金記録機能           | 作成、編集、削除                                                             |
| 貯金記録表示機能       | グラフ、ランキング形式で表示                                                 |
| 目標作成機能           | 作成、編集、削除                                                             |
| 振り返り作成機能       | 作成、編集、削除                                                             |
| 振り返りお気に入り機能 | 他のユーザーの振り返りをお気に入りできる<br>お気に入りした振り返りを一覧表示 |
| 通知機能               | フォロー、お気に入りされたときに通知を取得                                   |
| ニュース閲覧機能       | NewsAPI から取得したニュースを表示       

#### インフラ構成図

![AWS3 drawio](https://user-images.githubusercontent.com/92079024/189545358-0a60551f-cc76-4593-8a63-e567dbca84e9.png)

#### ER 図

![ER図_portfolio](https://user-images.githubusercontent.com/92079024/189545324-d122ed73-5474-479e-933e-ba1a7cab7ed8.png)

## 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. 終わりに
これからも学習を続けながら転職活動に望みたいと思います。
最後まで見ていただきありがとうございました。