福祉・介護システムのUI/UX事例：ドラッグ＆ドロップでシフト調整を劇的に効率化する仕組み

移動支援系『利用者×ヘルパー』のシフト調整システムの記事で、介護・福祉分野のシフト管理システムをドラッグ＆ドロップで操作するデモを紹介しました。今回は、そのの仕組みを、分かりやすく解説します。

シフト調整は、特に福祉・介護サービスにおいて、利用者様の希望とヘルパーの空き状況を照らし合わせる非常にデリケートで複雑な業務です。このプロセスをITの力で直感的かつスピーディーにするのが、ドラッグ＆ドロップのUI/UXです。

今回は、先の記事で紹介したデモのドラッグ＆ドロップが、どのような仕組みで作られているのか、この直感的な操作の裏側で何が起きているのか、具体的なコードの仕組みとともに解説します。

まず、システムが提供する理想的な操作の流れを見てみましょう。このダッシュボードでは、以下の2つのステップでシフト割り当てが完了します。

支援希望をカレンダーへ移動（ドラッグ＆ドロップ）:
- 画面左側の「未割り当ての支援希望」リストから、利用者様の希望をカレンダーの日付セルへドラッグします。
- これにより、その希望が「この日のシフト」としてカレンダーに登録されます。
- 💡 特殊なロジック: ドロップ先の日付が、希望アイテムに記載された日付と異なる場合、システムは「希望日の変更」をユーザーに確認し、変更を柔軟に受け付けます。
ヘルパーを割り当てる（クリック）:
- 希望をカレンダーにドロップすると、右側の「ガイドヘルパー」リストが自動的にその日付に切り替わり、対応可能なヘルパーが表示されます。
- カレンダーに置かれた希望に対して、対応可能なヘルパーをクリックするだけで割り当てが確定します。

このフローにより、管理者は紙や複数のExcelシートを往復することなく、画面上の直感的な操作だけで複雑なシフト調整を完結できます。

２. 背景にある技術とコードの仕組み

このシームレスな操作は、HTML5のDrag and Drop APIとJavaScriptのイベントリスナーを組み合わせることで実現されています。

未割り当ての支援希望アイテム（ドラッグ元）には、ドラッグ＆ドロップ機能の基本が設定されています。

コード要素	役割	仕組み
`draggable="true"` (HTML属性)	要素をドラッグ可能にする。	ブラウザに対して、この要素がドラッグ操作の対象であることを宣言します。
`dragstart` (JSイベント)	ドラッグ開始時の処理。	`draggedItemId = e.target.id;` のように、ドラッグ対象のIDをグローバル変数に保存します。これにより、ドロップ先でどの希望が動かされたのかを特定できます。
`dragend` (JSイベント)	ドラッグ終了時の処理。	ドラッグ中に表示していた視覚効果 (`.dragging` クラスなど) を削除し、状態をリセットします。

カレンダーの日付セル（ドロップ先）には、ドロップを受け入れるための設定が必要です。

コード要素	役割	仕組み
`dragover` (JSイベント)	ドロップを許可する設定。	`e.preventDefault();` を呼び出すことが必須です。これを省略すると、ブラウザの既定の動作（通常はドロップを拒否）が働き、`drop` イベントが発生しません。
`drop` (JSイベント)	ドロップ時の処理の実行。	`dropzone.dataset.date` からドロップ先の日付を取得し、保存していた `draggedItemId` の情報を更新します。この段階では、まだヘルパーは割り当てられず、次のステップへ誘導します。

このシステムにおけるドラッグ＆ドロップは、「割り当て確定」ではなく「割り当ての準備完了」として機能しているのがポイントです。

カレンダーにドロップ: drop イベント内で、その日のヘルパーリストを強制的に再描画 (renderHelpers()) させます。また、lastInteractedRequestId にドロップしたリクエストIDを保持します。
ヘルパーリストのクリック: ヘルパーリストの click イベントで、保持されている lastInteractedRequestId とクリックされたヘルパーのIDを用いて、最終的な割り当て (assignHelper(requestId, helperId)) を実行します。

このように、複雑な「日付の変更確認」や「ヘルパーの適性チェック」といった業務ロジックを、ドラッグ＆ドロップというシンプルな操作にオーバーレイさせることで、シフト管理の効率化を実現しています。