日本語

ReactJS チュートリアル

Hooks

ReactJSの高度な機能

追加の概念

ReactJS - 日付ピッカー：入門ガイド

こんにちは、将来の開発者さんたち！今日は、ReactJSの日付ピッカーの世界に一緒に飛び込んでいきます。コードを書いたことがない方でも心配しないでください。あなたの親切なガイドとして、ステップバイステップですべてを説明します。このチュートリアルの終わりまでに、あなたはReactアプリケーションに便利な日付ピッカーを追加できるようになります。さあ、始めましょう！

ReactJS - Date Picker

日付ピッカーとは？

コードを書く前に、まず日付ピッカーとは何かを理解しましょう。オンラインで飛行機を予約する時、旅行日を選択する必要があるでしょう。表示されるカレンダーで日付を選択するのはご存知ですよね？那就是日付ピッカーです！ユーザーが日付を選択しやすくするためのユーザーインターフェース要素です。

Reactで日付ピッカーを使う理由

Reactはインタラクティブなユーザーインターフェースを作成することに焦点を当てています。日付ピッカーはその完璧な例です。視覚的なカレンダーで日付を選択できるようにすることで、エラーを減少させ、アプリをよりユーザーフレンドリーにします。

Reactで日付ピッカーを始める

Reactで日付ピッカーを使うには、react-datepickerという人気のライブラリを使用します。このライブラリはカスタマイズ可能なコンポーネントを提供し、Reactアプリケーションに簡単に統合できます。

ステップ1：Reactプロジェクトのセットアップ

まず、新しいReactプロジェクトを作成します。既にプロジェクトがあれば、このステップをスキップしてください。

npx create-react-app my-datepicker-app
cd my-datepicker-app

このコマンドは「my-datepicker-app」という名前の新しいReactアプリケーションを作成し、プロジェクトディレクトリに移動します。

ステップ2：日付ピッカーライブラリのインストール

次に、react-datepickerライブラリをインストールします：

npm install react-datepicker

このコマンドは日付ピッカーライブラリをプロジェクトに追加します。

日付ピッカー コンポーネントの適用

さあ、楽しい部分です。実際にアプリで日付ピッカーを使ってみましょう！

ステップ1：必要なモジュールのインポート

src/App.jsファイルを開き、以下のインポートステートメントを顶部に追加します：

import React, { useState } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

以下はそれぞれの行の説明です：

  • useStateをReactからインポートして、コンポーネントの状態を管理します。
  • DatePickerコンポーネントをインストールしたライブラリからインポートします。
  • CSSファイルをインポートして日付ピッカーをスタイル設定します。

ステップ2：関数コンポーネントの作成

次に、日付ピッカーを使った関数コンポーネントを作成します：

function App() {
const [selectedDate, setSelectedDate] = useState(null);

return (
<div className="App">
<h1>私の素晴らしい日付ピッカー</h1>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
dateFormat="dd/MM/yyyy"
placeholderText="日付を選択してください"
/>
<p>選択した日付: {selectedDate ? selectedDate.toDateString() : "日付が選択されていません"}</p>
</div>
);
}

これを分解すると：

  1. useStateを使ってselectedDateという状態変数とそれを更新するためのsetSelectedDate関数を作成します。
  2. DatePickerコンポーネントをレンダーし、いくつかのプロパティを設定します：
  • selected: 現在選択されている日付
  • onChange: 新しい日付が選択されたときに呼び出される関数
  • dateFormat: 日付の表示形式
  • placeholderText: 日付が選択されていないときに表示されるテキスト
  1. ピッカーの下に選択した日付を表示するか、日付が選択されていない場合のメッセージを表示します。

ステップ3：日付ピッカーのカスタマイズ

react-datepickerは非常にカスタマイズ可能です。以下にカスタマイズの方法をいくつか見てみましょう：

function App() {
const [selectedDate, setSelectedDate] = useState(null);

return (
<div className="App">
<h1>私のカスタマイズされた日付ピッカー</h1>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
dateFormat="dd/MM/yyyy"
minDate={new Date()}
filterDate={date => date.getDay() !== 6 && date.getDay() !== 0}
showYearDropdown
scrollableYearDropdown
/>
</div>
);
}

この例では：

  • minDate={new Date()}は過去の日付を選択できないようにします。
  • filterDateは土曜日と日曜日を無効にします。
  • showYearDropdownとscrollableYearDropdownは年を変更するためのドロップダウンを追加します。

日付ピッカー メソッド

react-datepickerライブラリはいくつかの便利なメソッドを提供しています。以下にいくつかのメソッドをまとめた表を示します：

メソッド 説明
setOpen(boolean) カレンダーの開閉状態を手動で設定します。
setFocus() インプットに手動でフォーカスを設定します。
handleCalendarClose() カレンダーを手動で閉じます。
handleCalendarOpen() カレンダーを手動で開きます。

これらのメソッドを使うには、DatePickerコンポーネントにrefを作成します：

const datePickerRef = useRef(null);

// JSXの後ろで使用
<DatePicker ref={datePickerRef} />

// メソッドを使用する
datePickerRef.current.setOpen(true);

結論

おめでとうございます！Reactで日付ピッカーを実装し、カスタマイズする方法を学びました。この強力なツールを使うことで、ユーザーが日付を選択するのが簡単になります。

React（または他のプログラミング概念）をマスターする鍵は練習です。プロジェクトに日付ピッカーを追加し、さまざまなプロパティを試してみてください。進んだ機能については、ドキュメントを参照しながら挑戦してみてください。

ハッピーコーディング、そしてあなたのデートが常に完璧に選ばれますように！?️?‍?

Credits: Image by storyset

前のチュートリアル:
ReactJS - ウェブコンポーネント
次のチュートリアル:
ReactJS - Helmet