RollDate

すべての開発者が経験したことがある瞬間です。

日付ピッカーが必要なので、検索を始めます。

完璧なものを見つけるのですが、Reactが必要だと気づきます。

またはVue。

またはjQuery。

または数個の日付を選択するためだけに、日付ライブラリ全体が必要になります。

いくつかの解決策を試した後、自分に問い続けました：

なぜこのような一般的なUIコンポーネントが、必要以上に複雑なことが多いのでしょうか？

そこで自分で作ることにしました。

RollDateをご紹介します。

目標

「別の日付ピッカー」を作りたかったわけではありません。

自分のプロジェクトで実際に使いたいと思えるものを構築したかったのです。

目標はシンプルでした：

  • 無限スクロール
  • フレームワーク依存なし
  • シンプルなAPI
  • モダンなUI
  • モバイルフレンドリーなスクロール
  • TypeScriptサポート
  • 簡単なカスタマイズ
  • 充実したドキュメント

なぜスクロールなのか？

ほとんどの日付ピッカーは、小さな矢印やドロップダウンのクリックに依存しています。

モバイルデバイスでは、これはしばしば使いにくく感じられます。

月や年を変更するのに、スムーズなスクロールだけで済むネイティブモバイルピッカーに近いものを目指しました。

それがRollDateの核となるアイデアの一つになりました。

日付選択以上の機能

コンポーネントを構築する中で、プロジェクトによって必要な選択モードが異なることに気づきました。

そこで、別々のコンポーネントを維持する代わりに、RollDateは以下をサポートします：

  • 単一の日付選択
  • 日付範囲選択
  • 複数日付選択

APIはモードに関係なく同じままです。

new RollDate("#date", {
    selectType: "range"
});

Enter fullscreen mode Exit fullscreen mode

オプションのタイムピッカー

多くの日付ピッカーでは、時間選択が必要な場合、別のプラグインをインストールする必要があります。

それを最初から組み込みたかったのです。

RollDateは以下をサポートします：

  • 24時間モード
  • 12時間制のAM/PMモード
  • 分単位のステップ設定

1つのオプションで有効にできます。

new RollDate("#date", {
    enableTime: true
});

Enter fullscreen mode Exit fullscreen mode

依存関係なし

主な設計目標の一つは、ライブラリを独立した状態に保つことでした。

Reactなし。

Vueなし。

jQueryなし。

Moment.jsなし。

Day.jsなし。

プレーンなJavaScriptのみ。

つまり、ほぼどこでも動作します：

  • バニラJavaScript
  • React
  • Vue
  • Angular
  • Svelte
  • Astro
  • ...またはDOMコンポーネントを使用できるフレームワークならどれでも。

より良い開発者体験

私は開発者体験をとても重視しています。

だからこそ、コンポーネント自体と同じくらいドキュメントに時間を費やしました。

プロジェクトには以下が含まれています：

  • インタラクティブなライブデモ
  • 設定プレイグラウンド
  • 生成されるコード例
  • TypeScriptの定義
  • 完全なドキュメント

特に気に入っている機能はプレイグラウンドです。

オプションを変更すると、生成されるJavaScript設定が自動的に更新され、各オプションの仕組みを理解しやすくなります。

学んだこと

日付ピッカーの構築は、予想以上に困難であることがわかりました。

カレンダーのレンダリングが難しいからではありません。

難しいのは、すべてのエッジケースを処理することです：

  • 日付範囲
  • 無効な日付
  • ローカライゼーション
  • キーボードとマウスの操作
  • 時間選択
  • 異なる表示モード
  • 一貫したAPI設計

UI自体は作業のごく一部に過ぎません。

結果

RollDateは現在、以下をサポートしています：

  • ✅ 単一、範囲、複数選択
  • ✅ ポップアップとインラインモード
  • ✅ オプションのタイムピッカー
  • ✅ ライトとダークテーマ
  • ✅ ローカライゼーション
  • ✅ ランタイムAPI
  • ✅ TypeScript
  • ✅ 依存関係ゼロ

プロジェクトの改善を続けていて、他の開発者からのフィードバックを心から歓迎します。

ご提案、ご意見、または異なるアプローチがあれば、ぜひお聞かせください。

リンク

🌐 ライブデモ: https://rolldate-demo.vercel.app/

📦 npm: https://www.npmjs.com/package/@rolldate/core

⭐ GitHub: https://github.com/Abramov-Front-end/rolldate-core

ご覧いただきありがとうございます！