「Reactで予約カレンダーを作りたいけど、日時の処理が難しそう…」
「日付の選択や管理ってややこしいのでは？」
このように感じている方は多いのではないでしょうか。
ですが安心してください。Reactと日時処理の基本を押さえれば、誰でもシンプルな予約カレンダーが作れます。
この記事では、日付選択・カレンダー表示・予約登録・バリデーションまで、すべての手順をやさしく解説します。
実際に動く完成コードも掲載しており、小学生でも理解できる言葉で説明しています。
カレンダー機能に苦手意識がある方でも、読み終えるころには自信を持って実装できるはずです。
Reactで予約カレンダーを作る理由
日時処理が重要な場面とは？
結論：予約管理や予定調整の仕組みは、様々な業種で求められています。
たとえば、以下のようなシーンで日時の管理が必要になります。
- 病院や歯科医院の診察予約
- 美容室やマッサージの予約
- 会議室やコワーキングスペースの利用登録
- 習い事やイベントの事前申込
これらのサービスでは、「カレンダー上で日時を選ぶ仕組み」が必要不可欠です。
経済産業省の資料（https://www.meti.go.jp/policy/it_policy/digital_transformation/index.html）でも、
中小企業の業務自動化・DX化において予約管理の需要が高まっていると報告されています。
Reactを使えば、日時データを直感的に操作できるアプリを誰でも実装できます。
Reactと日付管理の基本知識
JavaScriptで日付を扱うには？
結論：Dateオブジェクトと外部ライブラリを組み合わせれば簡単です。
JavaScriptではnew Date()を使って日付を扱いますが、単体では不便なことも多いです。
そこで以下のライブラリが活躍します：
date-fns（軽量で操作しやすい）dayjs（シンプルでmoment.jsより高速）
今回はdate-fnsを使って実装していきます。
1 | npm install date-fns |
カレンダー画面を作成してみよう
日付の一覧表示とクリック処理
結論：カレンダーは表のように日付を並べて管理します。
まずは1か月分のカレンダーを表示してみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import { startOfMonth, endOfMonth, eachDayOfInterval, format } from 'date-fns';function Calendar() { const today = new Date(); const start = startOfMonth(today); const end = endOfMonth(today); const days = eachDayOfInterval({ start, end }); return ( <div> <h2>予約カレンダー</h2> <div style={{ display: 'flex', flexWrap: 'wrap' }}> {days.map((day, index) => ( <div key={index} style={{ width: '14.2%', border: '1px solid #ccc', padding: '8px' }}> {format(day, 'd')} </div> ))} </div> </div> );} |
このようにしてカレンダーを1列7日で構成できます。
予約登録と日時の管理方法
日付クリックで予定を登録する
結論：日付をクリックしたときに選択状態と予約データを管理しましょう。
カレンダーに予定を追加するために、以下のような仕組みを導入します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | import { useState } from 'react';function CalendarWithBooking() { const [selected, setSelected] = useState(null); const [bookings, setBookings] = useState({}); const handleSelect = (date) => { const key = format(date, 'yyyy-MM-dd'); const note = prompt('予約内容を入力してください'); if (note) { setBookings({ ...bookings, [key]: note }); } }; return ( <div> <h2>予約カレンダー</h2> <div style={{ display: 'flex', flexWrap: 'wrap' }}> {eachDayOfInterval({ start, end }).map((day, index) => { const key = format(day, 'yyyy-MM-dd'); return ( <div key={index} onClick={() => handleSelect(day)} style={{ width: '14.2%', border: '1px solid #ccc', padding: '8px', cursor: 'pointer' }} > {format(day, 'd')} <div style={{ fontSize: '10px', color: 'green' }}> {bookings[key]} </div> </div> ); })} </div> </div> );} |
このようにすると、日付ごとに予約内容を追加して表示できます。
予約内容のバリデーションと削除
同じ日時に重複登録しない方法
結論：すでに予約がある場合は登録できないようにします。
1 2 3 4 5 6 7 8 9 10 11 | const handleSelect = (date) => { const key = format(date, 'yyyy-MM-dd'); if (bookings[key]) { alert('この日はすでに予約があります'); return; } const note = prompt('予約内容を入力してください'); if (note) { setBookings({ ...bookings, [key]: note }); }}; |
また、予約の削除機能も入れるとより実用的です。
1 2 3 4 5 6 7 8 | <button onClick={() => { const key = format(day, 'yyyy-MM-dd'); const newBookings = { ...bookings }; delete newBookings[key]; setBookings(newBookings);}}>削除</button> |
まとめ：完成形コード一覧
App.js（簡易構成）
1 2 3 4 5 6 7 8 | import CalendarWithBooking from './CalendarWithBooking';function App() { return ( <div> <CalendarWithBooking /> </div> );} |
CalendarWithBooking.js（すべて統合）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | import { useState } from 'react';function CalendarWithBooking() { const [selected, setSelected] = useState(null); const [bookings, setBookings] = useState({}); const handleSelect = (date) => { const key = format(date, 'yyyy-MM-dd'); const note = prompt('予約内容を入力してください'); if (note) { setBookings({ ...bookings, [key]: note }); } }; return ( <div> <h2>予約カレンダー</h2> <div style={{ display: 'flex', flexWrap: 'wrap' }}> {eachDayOfInterval({ start, end }).map((day, index) => { const key = format(day, 'yyyy-MM-dd'); return ( <div key={index} onClick={() => handleSelect(day)} style={{ width: '14.2%', border: '1px solid #ccc', padding: '8px', cursor: 'pointer' }} > {format(day, 'd')} <div style={{ fontSize: '10px', color: 'green' }}> {bookings[key]} </div> </div> ); })} </div> </div> );} |
まとめ
本記事では、Reactとdate-fnsを活用して予約カレンダーを作成する方法を解説しました。
重要なポイントは以下の通りです：
- 日付データはdate-fnsで簡単に扱える
- カレンダー表示と予約登録は小学生でも理解可能
- Contextを使えばさらに機能を拡張できる
Reactを使えば、予約機能付きのカレンダーを短時間で構築可能です。
「予約アプリを作りたい」「日付処理を覚えたい」という方は、ぜひこのコードを参考にしてみてください。
関連リンク：
Japanese 
English