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

作品

GitHub

サイトURL

自己紹介

こんにちは、プログラミングを学び転職を目指している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へアップロードするまでの手順を非常に簡単にすることができます。

全体設計

アプリについて

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

開発にあたって

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

機能紹介

Topページ
・カレンダーで本日予約している内容がすぐにわかります。

ログインページ
・firebaseを使用したログイン機能です。ゲストログイン,メールアドレスログイン、グーグルログインを実装。ログイン後、rails側にユーザー情報を送信します。

施設登録
施設を登録することができます。

予約登録
登録した施設をもとに、施設を予約することができますカレンダーを使用し、他の利用者との兼ね合いをみます。

施設検索
施設が増えてきた場合、検索機能が役立ちます！

機能一覧

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

作成の流れ

~3月

• 働きつつ、ポテパンを受講

4月

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

5月

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

6月

• 各種機能の作成

参考書籍や記事

名前	説明
ポテパンキャンプ	ゼロの初心者からお世話になりました。特に、現場で使われているRailsについて深く学ぶことができました。
作って学ぶNext.js/ReactWebサイト構築	next.jsについて勉強になりました。
AWSではじめるインフラ構築入門 第2版 安全で堅牢な本番環境のつくり方	AWSの考え方について、難しいかったのですが、VPCなどの設計の考え方を学ぶことができました。

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

今後について

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