【React×日時処理】予約カレンダーの作り方を解説｜誰でも簡単にできるReact実装ガイド

「Reactで予約カレンダーを作りたいけど、日時の処理が難しそう…」
「日付の選択や管理ってややこしいのでは？」
このように感じている方は多いのではないでしょうか。

ですが安心してください。Reactと日時処理の基本を押さえれば、誰でもシンプルな予約カレンダーが作れます。

この記事では、日付選択・カレンダー表示・予約登録・バリデーションまで、すべての手順をやさしく解説します。
実際に動く完成コードも掲載しており、小学生でも理解できる言葉で説明しています。

カレンダー機能に苦手意識がある方でも、読み終えるころには自信を持って実装できるはずです。

Reactで予約カレンダーを作る理由
1. 日時処理が重要な場面とは？
Reactと日付管理の基本知識
1. JavaScriptで日付を扱うには？
カレンダー画面を作成してみよう
1. 日付の一覧表示とクリック処理
予約登録と日時の管理方法
1. 日付クリックで予定を登録する
予約内容のバリデーションと削除
1. 同じ日時に重複登録しない方法
まとめ：完成形コード一覧
1. App.js（簡易構成）
2. CalendarWithBooking.js（すべて統合）
まとめ

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を使って実装していきます。

npm install date-fns

カレンダー画面を作成してみよう

日付の一覧表示とクリック処理

結論：カレンダーは表のように日付を並べて管理します。

まずは1か月分のカレンダーを表示してみましょう。

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日で構成できます。

予約登録と日時の管理方法

日付クリックで予定を登録する

結論：日付をクリックしたときに選択状態と予約データを管理しましょう。

カレンダーに予定を追加するために、以下のような仕組みを導入します。

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>
  );
}

このようにすると、日付ごとに予約内容を追加して表示できます。

予約内容のバリデーションと削除

同じ日時に重複登録しない方法

結論：すでに予約がある場合は登録できないようにします。

const handleSelect = (date) => {
  const key = format(date, 'yyyy-MM-dd');
  if (bookings[key]) {
    alert('この日はすでに予約があります');
    return;
  }
  const note = prompt('予約内容を入力してください');
  if (note) {
    setBookings({ ...bookings, [key]: note });
  }
};

また、予約の削除機能も入れるとより実用的です。

<button onClick={() => {
  const key = format(day, 'yyyy-MM-dd');
  const newBookings = { ...bookings };
  delete newBookings[key];
  setBookings(newBookings);
}}>
削除
</button>

まとめ：完成形コード一覧

App.js（簡易構成）

import CalendarWithBooking from './CalendarWithBooking';
function App() {
  return (
    <div>
      <CalendarWithBooking />
    </div>
  );
}

CalendarWithBooking.js（すべて統合）

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>
  );
}