【未経験 / 独学】ポートフォリオ『チャレコ』を開発しました【Laravel / Vue.js / Docker / AWS】

# はじめに
こんにちは！りあるぱ([@realpa931](https://twitter.com/realpa931))と申します。

私がWebエンジニアへの転職過程で作成したポートフォリオを紹介します。

### 自己紹介
大学卒業後、新卒でメーカーに入社。技術職として機械部品の設計や評価に従事。
退職を機に、プログラミング学習を開始(2022年11月〜)。
2024年3月からWeb系企業(自社/受託/SES)で受託開発に従事予定。

# 目次
[1. ポートフォリオの紹介](#1-ポートフォリオの紹介)
[2. 選定技術の採用理由](#2-選定技術の採用理由)
[3. ポートフォリオ作成までに学習したこと](#3-ポートフォリオ作成までに学習したこと)
[4. ポートフォリオ作成の進め方](#4-ポートフォリオ作成の進め方)

# 1. ポートフォリオの紹介
### チャレンジャーが集うポジティブSNS『チャレコ』

![chalreco.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3113088/80eadd40-c62d-a4d6-7e24-9fff3baefcb1.png)


### (1)アプリ概要
①開発目的
* チャレンジは人生を彩り、心を豊かにする
* しかし、身近な人が自分のチャレンジを肯定してくれるとは限らない(中には批判する人もいる)
* チャレンジャー同士が互いを高め合え、自己成長を実感できるプラットフォームを作りたかった

②コンセプト
* チャレンジ特化型SNS
* チャレンジャー同士が互いを高め合える
* 自己成長を実感できる

(アプリ名の『チャレコ』は、Challenge Records(挑戦の記録)から名付けました)

③特徴
* 自身のチャレンジを投稿 / 閲覧できる
* 他ユーザーのチャレンジを閲覧 / 応援できる
* チャレンジ中のチャレンジ / 過去のチャレンジを管理できる

④URL
https://chalreco.net/

⑤GitHubのリポジトリ
https://github.com/yamamoto117/chalreco

⑥実装期間
約6ヶ月

### (2)主な機能
<table>
	<tr>
		<th style="text-align: center">チャレンジ投稿</th>
		<th style="text-align: center">チャレンジ閲覧(検索)</th>
	</tr>
	<tr>
		<td><img alt="post" src="https://github.com/yamamoto117/chalreco/assets/99392507/deabb995-5771-42ea-a48f-4e96cc971625"></td>
		<td><img alt="view" src="https://github.com/yamamoto117/chalreco/assets/99392507/e73736ce-c220-49ba-a54f-f3ab28252dfe"></td>
  </tr>
</table>

<table>
	<tr>
		<th style="text-align: center">チャレンジ応援</th>
		<th style="text-align: center">チャレンジ管理</th>
	</tr>
	<tr>
		<td><img alt="good" src="https://github.com/yamamoto117/chalreco/assets/99392507/9398556c-0611-4a21-a561-7301809e01bb"></td>
		<td><img alt="management" src="https://github.com/yamamoto117/chalreco/assets/99392507/b29a1cb3-bed4-4230-9ed4-e6d3ec909d7c"></td>
  </tr>
</table>


### (3)機能一覧
①メイン機能
* チャレンジ投稿(テキスト / 画像)
* チャレンジ閲覧
  * 注目のチャレンジ / フォロー中のユーザーのチャレンジ
  * 検索(投稿 / ユーザー)
* チャレンジ応援(いいね)
* チャレンジ管理(チャレンジ中のチャレンジ / 過去のチャレンジ)
* フォロー

②認証機能
* ユーザー登録
* ログイン / ログアウト
* ゲストログイン
* プロフィール編集
* 退会

### (4)使用技術
①フロントエンド
* HTML
* CSS
* JavaScript
* Tailwind CSS 3.3.3
* Vue.js 2.7.14

②バックエンド
* PHP 8.0.30
* Laravel 8.83.27
* MySQL 8.0.34
* Composer 2.6.5
* Node.js 16.20.2 / npm 8.19.4

③インフラ
* Docker 20.10.21 / docker-compose 2.13.0 (開発環境)
* AWS (EC2 / ALB / ACM / S3 / RDS / Route53 / VPC / EIP / IAM / CloudWatch)
* nginx 1.22.1

④その他
* Git 2.40.1 / GitHub
* Visual Studio Code
* macOS

### (5)インフラ構成図
![infra](https://github.com/yamamoto117/chalreco/assets/99392507/4c519975-a81a-42f0-b5fa-e71dca95fdb5)

### (6)ER図
![er](https://github.com/yamamoto117/chalreco/assets/99392507/59f990c5-3fd3-4576-8662-cefc14137d01)

# 2. 選定技術の採用理由
### CSSフレームワーク：Tailwind CSS
**検討技術：** Bootstrap
**採用理由**
* おしゃれなデザインが容易に作れるため

### JavaScriptフレームワーク：Vue.js
**検討技術：** React
**採用理由**
* Reactに比べて学習コストが低いため

### バックエンド：PHP / Laravel
**検討技術：** Ruby / Ruby on Rails
**採用理由**
* 求人数の多さ

### データベース：MySQL
**検討技術：** PostgreSQL
**採用理由**
* シェアが高く馴染みがあったため

### インフラ：Docker / Docker Compose
**採用理由**
* 多くのWeb系企業が採用しているため

### インフラ：AWS (Amazon Web Services)
**採用理由**
* インフラを学習したかったことに加えて、多くの企業が採用しているため

### Webサーバー：Nginx
**検討技術：** Apache
**採用理由**
* Apacheと比較してシェアが高いため

# 3. ポートフォリオ作成までに学習したこと
### Progate
* HTML&CSS
* JavaScript
* PHP
* Command Line
* Git
* SQL
 
https://prog-8.com/

### ドットインストール
* Laravel 8入門(基本機能編 / データベース編 / CRUD処理編 / リレーション編)

https://dotinstall.com/

### Udemy

https://www.udemy.com/course/unscared_linux/

https://www.udemy.com/course/unscared_git/

https://www.udemy.com/course/aws-and-infra/

### 独学エンジニア

https://dokugaku-engineer.com/

### Techpit

https://www.techpit.jp/courses/11

### 書籍
* 「おうちで学べるデータベースのきほん」/ ミック , 木村明治
* 「プロになるためのWeb技術入門」/ 小森裕介
* 「リーダブルコード」/ Dustin Boswell , Trevor Foucher
* 「Docker/Kubernetes実践コンテナ開発入門」/ 山田明憲
* 「体系的に学ぶ安全なWebアプリケーションの作り方」/ 徳丸浩

# 4. ポートフォリオ作成の進め方
### (1)アプリ検討(2023年5月)

### (2)アプリ開発(2023年6月上旬〜11月下旬)
* Herokuへのデプロイ(2023年8月下旬〜9月上旬)
* AWSへのデプロイ(2023年10月上旬)

### (3)README更新(2023年12月〜2024年1月)

# おわりに
本アプリを開発するにあたり、以下に注力しました。
* 必要最小限の機能
* 親しみやすいデザイン

その結果、シンプルで馴染みやすいものになったのではないかと思います。

以上、参考になれば嬉しいです。
ご覧いただきありがとうございました。