転職を目指す初学者のポートフォリオ紹介


# 作品
**GitHub**

https://github.com/ccbc7/Time-table

**サイトURL**

https://prod.time-table01.com/

# 自己紹介
こんにちは、プログラミングを学び転職を目指している28歳未経験者です。
私は、3年間小学校の教員をしていました。
プログラミングを学ぼうと思ったきっかけは、教員をしていたときにICT担当をすることになり、シンプルな会計用のエクセルや新学習指導要領にのっとった通知表を作って提供したところ、多くの周りの人たちにとても喜んでもらえたことがきっかけです。そこで、プログラミングを活かした職業に本格的に挑戦してみたいと思い、挑戦することに決めました。


# 技術
**フロントエンド**
| 使用技術 | 詳細 |
|-----|-----|
| Next.js (13.4.3)| フロントエンドフレームワーク |
| Firebase|外部APIと連携|
| Tailwind CSS | CSSフレームワーク| 
| Tailwind UI | UIコンポーネント| 

**バックエンド**
| 使用技術 | 詳細 |
|-----|-----|
| Rails7 (7.0.4.3)|  APIモード |
| MySQL | データベース| 
| RSpec | リクエストスペック・モデルスペックのテストを実行します。| 
| RuboCop | コードスタイルの一貫性を維持してくれます。| 

**インフラ**
| 使用技術 | 詳細 |
|-----|-----|
|ECS|AWSの強力なコンテナオーケストレーションサービスです！|
| RDS | AWSのデータベースで、MySQLをRDSで管理します。| 
| S3 |画像を保存するために使用します。 | 
| Route53 | お名前.comで登録したドメインのドメイン登録と管理を行います。| 
|ACM|取得ドメインに対してSSL/TLS証明書を発行してくれます。|
|AWS Systems Manager|パラメータストアで機密情報を安全に保存・管理できます。|
|AWS Copilot CLI|AWSのコンテナ化されたアプリケーションを簡単にデプロイ・管理できます。|
|Terraform|VPCやRDSなどの設定のコード面での可視化を目指しました。|
|Docker|バージョン管理やビルド手順の定義が非常に開発に助かります。|
|docker-compose|フロントエンドとバックエンド両方のコンテナを扱う上で重宝しました。|
|GitHub Actions|GitHub上でスムーズにCI/CDフローを構築し、ECSへアップロードするまでの手順を非常に簡単にすることができます。|

**全体設計**
![名称未設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304584/89523988-8dd7-8a00-86b9-8893eb689d00.png)
![名称未設定 (2).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304584/316f9395-4598-73bc-7944-2e4178d4072e.jpeg)

# アプリについて #
https://prod.time-table01.com
施設の中で、いつ、誰がどの施設を使っているのかがわかります。また、自分が使用したい施設を予約し、カレンダーに合わせて自身の予定を確認することができます。

#### 開発にあたって
学校に勤めていたときの経験をもとに、以下のような背景がありました。
・総合学園だったので、幼稚園から高校まで多くの団体があり、それぞれの団体が同じ場所を使いたいときがある。ときによっては、団体同士が鉢合わせし、施設の使用に支障がでてしまうときがありました。
・学校現場では職員室内の黒板に、その日の施設の使用申請が書かれていました。しかし、施設内で自分が確認したいときに毎回職員室へ行き、予定を確認しなければいけないという状態でした。教員は基本的に時間がないので、すぐに予定を確認でき、施設使用を申請できたらいいなと感じていました。
そこで、本アプリの作成を決めました。

#### 機能紹介
**Topページ**
・カレンダーで本日予約している内容がすぐにわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304584/de6f47d9-6292-d265-4251-03cde4efe0d6.png)

**ログインページ**
・firebaseを使用したログイン機能です。ゲストログイン,メールアドレスログイン、グーグルログインを実装。ログイン後、rails側にユーザー情報を送信します。
![画面収録_2023-07-05_22_22_42_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304584/25975a81-7903-0fb4-5f58-b35f8bdcdbaa.gif)

**施設登録**
施設を登録することができます。
![画面収録_2023-07-05_22_35_34_AdobeExpress (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304584/c4667a4e-2199-416d-4c96-f2f1d0e34014.gif)

**予約登録**
登録した施設をもとに、施設を予約することができますカレンダーを使用し、他の利用者との兼ね合いをみます。
![画面収録_2023-07-05_22_46_22_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304584/102470e0-8550-2997-1652-07d5a6f075c3.gif)

**施設検索**
施設が増えてきた場合、検索機能が役立ちます！
![画面収録_2023-07-05_22_57_18_AdobeExpress.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3304584/b8f7078b-0b83-0bb9-4cb4-bddaff46f420.gif)

# 機能一覧
| 機能名 | 説明 |
|-----|-----|
|ログイン機能|サインアップ・サイインイン・ログアウト|
| 施設登録機能|施設を登録できます。|
| 施設検索機能|登録した施設を検索できます。|
| 予約機能 |登録した施設を予約できます。| 
| 予約確認機能 |登録した予約を確認できます。 | 
|プロフィール機能|プロフィール情報を編集できます。|
| 通知機能 |ベルアイコンを押すと最近の予約5件を確認できます。| 
|コメント機能|施設ごとに施設に対してのコメントを登録できます。|
|時間設定機能|時間割に使うワードの登録と変更ができます。|

# 作成の流れ
~3月
- 働きつつ、ポテパンを受講

 4月
- 作品テーマを考える
- インフラの学習
  - 主にAWSとGitHubactionsの学習を開始しました。インフラについては、herokuと CircleCIを触っただけだったので、うまくいかないことも多く、あきらめかけました。
- Dockerとdocker-composeの学習
  - こちらは触ったことはあったのですが、自分で使いこなせるようになりたいと思い、学び始めました。

5月
- AWS copilot CLIの学習
  - AWSのデプロイを中心に学ぶことができました。
- Next.jsの学習
  - こちらもjQueryを学んだだけだったので、Reactの勉強から始めました。
- SPAの学習
  - AxiosとCORSを使ったフロントエンドとバックエンドの分離に挑戦しはじめました。
- Firebaseの学習
  - ログイン認証機能を作り始めました。

6月
- 各種機能の作成
 

# 参考書籍や記事

| 名前 | 説明 |
|---|---|
|[ポテパンキャンプ](https://camp.potepan.com/)|ゼロの初心者からお世話になりました。特に、現場で使われているRailsについて深く学ぶことができました。|
|[作って学ぶNext.js/ReactWebサイト構築](https://www.amazon.co.jp/gp/product/B0B5YSFYY9/ref=ppx_yo_dt_b_d_asin_title_o00?ie=UTF8&psc=1)|next.jsについて勉強になりました。|
|[AWSではじめるインフラ構築入門 第2版 安全で堅牢な本番環境のつくり方](https://www.amazon.co.jp/gp/product/B0BN9XD2NQ/ref=ppx_yo_dt_b_d_asin_title_o02?ie=UTF8&psc=1)|AWSの考え方について、難しいかったのですが、VPCなどの設計の考え方を学ぶことができました。|

その他、様々なQiitaの記事,web上の記事を参考にさせていただきました。

# 今後について
まだまだ作りたい機能があるので、TypeScript を学んだり、JWTについて学んだりしていきたいです。転職し将来、多くの人に喜んでもらえる安全なアプリを作っていくことが今後の目標です。記事を読んでいただきありがとうございました。