1.はじめに

地方の大学に通う文系大学生です。4月から新4年になります。
今回開発したアプリの概要や苦労した点をつらつらと書いていきたいと思います。

2.アプリの簡単な概要

同時記録型シフト管理アプリ「shifty」です。カレンダーをチーム全員で共通管理することでシフトの調整が楽になることがメインコンセプトになります。

詳しい概要や動作デモは後ほど書きます。

3.なぜ作ったか

バイト先のシフトに全く入れなくなったからです！！（泣）

元々就活の時期で忙しかったのも要因としてはありますが、提出したシフトの1/3しか入れないくらいひどい状態でした。
シフトを削られてたのは自分だけでなくスタッフ全体だったようで、おばちゃんパートさんと一緒にいつも愚痴を言っていました。

そんなこんなで「もう耐えられない！」というわけでそのバイトを辞めることになったのですが、最終日の際に店長から「シフト調整むずすぎる云々」の話を聞いて開発欲が高くなったのを覚えています。

紆余曲折ありましたが、この問題を解決するアプリを自分で作っちゃおうとなりました！

振り返ってみると、自分が当事者意識を持って関われるこの課題はすごく最適だったなと思います。

他には、就活で使えるポートフォリオとして作りたいという思いもありました。今後ブラッシュアップしながら就活でも活用していきたいと考えています。

4.開発日誌

少し余談ですが、今年の1月から書き始めた開発日誌を紹介します。

ひよっこエンジニアによる個人開発日誌 by @udonrm

1/23から記事を書き始めて3/22に筆を置いたので開発期間は2ヶ月となりますね。
途中めちゃくちゃ寄り道したので振り返って読んでみると意外と面白いです。
最初はDjangoを使って開発しようとしてたり、インターンに熱中しすぎて開発を放棄してた時期もありました。。

技術的には1mmも参考になりませんが、個人開発に興味のある初学者の方や未経験エンジニアの方にはぜひ読んでもらいたいです。

5.アプリの詳しい概要

ここから、このアプリが解決する課題や使用技術について書き連ねたいと思います。

解決したい課題

シフトに入れないこと（泣）

さらに言語化すると、具体的には主に以下の2点になるかなと思います。

シフト作成者の負担が大きすぎること（調整、リマインドなど）
スタッフが希望通りにシフトに入れない不公平さ

実体験に基づくものなので、明確な課題を定義できたのはすごく良かったなと思います。

課題の発生原因

この課題が起こる原因を分析してみました。

従来のシフト確定までの流れ

①シフト作成者が従業員にシフトの提出を求める

②スタッフはシフトを提出する

③その後のシフト作成や調整は全て作成者の責任になる

この流れによって起こる弊害
シフト作成者：負担が大きすぎる。各スタッフの希望のバランスを汲むのが大変

スタッフ：シフトが確定するまでシフトの作成状況がよくわからない。
なので、スタッフ補充の連絡を後出しされても対応できない。（実体験に基づく）

ザッとこんな感じかなと思います。

課題の解決方法

【シフトの入力状況をスタッフ全員が見られるようにする】

店舗スタッフ全員でカレンダーを共有する
各自入力したシフトの状況がリアルタイムで確認できる

→

定員に達した時間帯のシフトは自動で確定される
人のいない時間帯を狙ってシフトを出そうという心理が働くので人手不足も解決できそう
シフトが確定するまでのふわふわした時間がなくなる
シフト作成者は調整が楽になる

6.動作イメージ

sifty動作イメージ-ログイン後から基本操作まで

ログイン後からシフトの入力、シフトの確認までの動作イメージです。

直感的なドラッグ＆ドロップ操作でシフトを簡単に追加、編集することができます。

機能も最小限まで絞ったため、誰でも簡単に使えるアプリになっています。

shifty動作イメージ-チームでの運用場面.mp4

実際にチームの複数人でアプリを運用する場面を想定した動画です。

左画面がユーザー1で右画面がユーザー2の操作画面です。

全員のシフトの入力状況が即座にリアルタイムで更新され全員が確認できるようにこだわりました。

自分のシフトはオレンジ色で目立たせ、他の人のシフトと区別しやすいように設定しています。当然ですが、他のスタッフのシフトは勝手に編集できないように設計しました。

このようにシフト提出を管理することで、人の足りていない時間帯や人の多すぎる時間帯が全員に共有される（管理者が知らせる必要がない）ため効率的なシフトが組まれることが期待できます。

7.使用技術

フロント：HTML/CSS , JavaScript

サーバーサイド：PHP/Laravel

認証、ログイン関連：Laravel Jetstream

データベース：MySQL

カレンダー：FullCalendar

開発環境:MAMP

エディタ：Visual Studio Code

本番環境：エックスサーバーでデプロイ

8.個人開発を経験してみて思ったこと

個人開発をする前は「アプリ１個作れたらもう一人前だ！無敵！！！！」くらいに思っていましたが、
全然そんなことはありませんでした。

むしろ自分の技術力の低さを自覚して相当凹むことになると思う。（少なくとも初学者の方は）

ただ、自分の立ち位置やレベル、ひいては今後どういうキャリアを歩みたいのか（バックエンドかフロントか、もうコード書きたくない！、とか）を嫌でも知らされることになるのでいい経験になりました。

なので、個人開発はハードルが高い！と思っている初学者の方はいますぐでも個人開発を始めた方がいいと思ってます。
フレームワークやライブラリに依存したアプリとかなら、基礎を固めれば無理なく作れると思うのでUdemyとか参考にしながら作りましょう。

9.参考資料

UdemyのLaravelの講義から公式ドキュメント、ネットでの技術ブログが中心です。

備忘録と感謝の意味も兼ねて以下にまとめます。

……長い間!!! くそお世話になりました!!! この御恩は一生…!!! 忘れません!!!!

ちゃんと学ぶ、PHP+MySQL(MariaDB)入門講座
PHPからLaravelまでサーバーサイドをとことんやってみよう【初心者から脱初心者へ】【わかりやすさ最重視】
Laravelでaccess deniedが表示された時の対処法
npm update
日本語ドキュメント
tailblocks
Tailwind
【初心者必見】Laravelを1から入門してTodoアプリを作ってみよう
【Laravel入門】MacにLaravelをインストール – プロジェクトの作成
MVCパターンについて
Laravelの構造と処理の流れを【MVCモデル】で初心者向けに解説【model,view,controller】
はじめてのLaravelアプリケーションガイド
【Laravel】"{{ }}"二重括弧は何に使うの？
Laravel – フォーム入力・データ登録
圧倒的に開発をラクにできる Laravel を使ったアプリケーション開発入門｜研修コースに参加してみた
Laravel9でLaravel UIパッケージを利用して認証設定
laravel Breeze
ミドルウェア
【Laravel】Eloquent(エロクアント)の使い方やモデルとの紐付け方法
Jetstream
Laravel Jetstreamチーム版でユーザーの役割と権限を簡単に設定する
Laravel8でLivewireの使い方を学ぶ
LaravelでTailwindCSSを使う方法
Vite
LaravelでレスポンスをJSON形式で返す
【FullCalendar】導入とスケジュールの登録【実装】
【Laravel】FullCalendarでカレンダーを導入しよう！
【Laravel × livewire × FullCalendar】動的なスケジュールアプリを作ろう。Part1【予定表示〜作成編】
Laravel 9 Fullcalendar Ajax Tutorial Example
Laravel9にJetstream Livewire版をインストールする方法と注意点・初期設定を解説
FullCalendar Docs
【エックスサーバー】Laravelで作成したWebアプリを公開
Mailtrap
【Git】Laravel×Vue.jsアプリをXserverにデプロイする方法！500エラー解決
LaravelプロジェクトをGitHubにpushする方法と注意点
XServerにSSH接続してLaravelプロジェクト(ないしデプロイ)を作成する手順
【Mac】秘密鍵でSSH接続しリモート操作
【エックスサーバー】LaravelをGitHubからデプロイして公開
XSERVERにlaravelのwebアプリをgitからデプロイ
【Laravel】開発用のメールサーバーを使おう【MailHog】
本番環境のメール設定

10.最後に

質問やアドバイス等あればめちゃくちゃ喜びます！ぜひリアクションお願いします！！！