Zenn
🦖

【独学】シフト管理サービス「ShiftPilot」をリリースしました

2024/06/16に公開
AWS
Docker
Laravel
PHP
ポートフォリオ
tech

0. はじめに

こんにちは。あーろです！
私は現在、新卒2年目23歳で都内SIer企業に所属し、データエンジニアをしています。
この度、独学にて未経験からWebエンジニアへの転職を目指し、ポートフォリオを作成しました。学習を開始して約6ヶ月が経過したため、その成果をご紹介させていただきます。
まだまだ学習段階のため、内容に誤りがある可能性があります。コメントにて教えていただけますと幸いです。

1. 作成したサービス

http://shiftpilot-1391980858.us-east-1.elb.amazonaws.com/
これだけでシフト管理が完結するシフト管理サービスです。

2. 開発の背景

大学時代に個人居酒屋でアルバイトをしていた際、以下のようなシフト管理に関する困りごとがありました。

  1. シフト作成・共有の遅れ
    マネージャーの業務過多により、シフト作成と共有が遅れがちで、スタッフが直前までシフトを確認できないことが多かったです。
  2. シフト表提出の失念
    スタッフがシフト希望を提出し忘れることが頻繁にあり、マネージャーがわざわざ声をかける必要がありました。

また、マネージャーがシフト作成に時間を要していた理由は以下の通りでした。

  • シフト表の収集と転記
    スタッフ各々からLINEにてシフト希望を収集し、一つのExcelに手動で転記していたこと
  • スタッフの仕事能力の考慮
    各スタッフの能力や希望を考慮しながらシフトを作成する必要があり、調整に多くの時間がかかっていたこと

これらの問題を解決するために、シフト管理サービス「ShiftPilot」を開発しました。
現在、元アルバイト先で実際にアプリを導入していただき、フィードバックをもらいつつアップデートを行なっています。

3. 実装機能

開発の背景で記載した困りごとを解決することを目的とし、以下の機能を実装しました。

  • ユーザー登録、ログイン機能
  • シフト提出機能
  • シフト作成機能
    • 下書き機能
    • 確定・共有機能
  • シフト締切のリマインド機能
  • スタッフ管理機能
    • スタッフ登録機能
    • スタッフ削除機能
  • ページネーション機能
  • お問い合わせ機能

4. 使用した技術

4.1. フロントエンド

  • HTML
  • CSS(Tailwind CSS)
  • Alpine.js 3.4.2

4.2. バックエンド

  • PHP 8.2.0
  • Laravel 10
  • MySQL 8.0

4.3. 開発環境

  • Laravel sail
  • Docker
  • PHPMyAdmin

4.4. 本番環境

  • AWS
    • IAM
    • VPC
    • Internet Gateway
    • ALB
    • ECR
    • ECS on Fargate
    • RDS

4.5. その他

  • ソースコード管理: Git/GitHub
  • IDE: VSCode
  • ER図, インフラ構成図作成: Draw.io

4.6. DB設計

4.7. インフラ構成

開発環境でDockerを使用していたため、本番環境のAWSでもECS on Fargateを利用しました。データベースはRDSでMySQLを使用しています。

5. こだわりポイント

こだわったポイントは、以下2点です。

5.1. シフト作成機能

  • シフト希望の反映
    スタッフが提出したシフト希望が、シフト作成画面にリアルタイムで反映されるようにしました。
  • データの保存
    作成したシフトデータをデータベースにまとめて保存できるようにし、スムーズなシフト作成を実現しました。
  • 保存確認のポップアップ
    シフト作成中にページ遷移を行う際には、保存確認ポップアップを表示することで、作業中のデータがリセットされないよう工夫しました。

5.2. リマインド機能

これまでは、スタッフがシフト作成者に個別にLINEで希望シフトを提出していましたが、提出忘れが頻繁に発生していました。そこで、シフト提出期限の直前にスタッフへ自動でリマインドメールを送信する機能を実装しました。また、管理者がリマインドメールを送信する日付を選択できるようにした点も、このアプリの大きな特徴です。

6. 今後の課題

課題は山ほどありますが、ひとまず優先的にやりたいことを記載します。

6.1. 自動シフト作成機能

本アプリ開発の目的の1つは、シフト作成者が早く楽にシフトを作成できることです。この目的を達成するためには、自動シフト作成機能が最も有効であると考えています。まずは、シフト作成時に必要となる要素を洗い出し、アルゴリズムから考えていきたいです。

6.2. テストコード

本アプリではテストコードを実装できませんでしたが、実務では必須のスキルであると考えています。今後、PHPUnitを使用したテストコードの実装を学習します。

6.3. Route53, ACM

現在はRoute53を用いたドメイン名での表示やACMを用いたSSL/TLS化ができていません。多くのユーザーに利用されるサービスにするためには、適切なドメイン名が必須であると考えます。また、SSL/TLSによるセキュリティ向上は、昨今のテクノロジーの観点から必須であると考えます。

6.4. Vue.js, React.js

本アプリではフロントエンドとしてAlpine.jsを使用しましたが、Vue.jsやReact.jsはより複雑な動作が可能であるため、汎用的なスキルになりうると考えています。バックエンドを習得した後、学習していきたいと思います。

7. 最後に

今回、初めて本格的なWebアプリを開発してみました！
この経験を通じて、独学では分からないことがあると自身で調べ、解決する能力が身につきました。学習フローや教材、技術的な記事については、今後更新していこうと思っています。

Discussion