最近目に留まった情報設計されたカレンダーUI

画像クリックするとサイトに飛びます 祝日ごとにテイストが異なる模様です 空いた時にデモ作ってみたいと思う

Reactの選択UIにおけるトレードオフ！ カーソル移動と再レンダリングの両立問題

はじめにReactでリスト選択UIを実装する際、「カーソル移動による選択」と「再レンダリングの最小化」は相反する要件となります。この記事では、なぜこの問題が発生するのか、そしてどのように対処できるのかを詳しく解説します。 問題の本質カーソル移動による選択の仕組み キーボードやマウスでのカーソル移動 選択状態（Stateまたは外部状態）の更新 UIの更新による視覚的フィードバック 再レンダリングが発生する理由 選択状態の変更によるState更新 useCall

折り畳み付き木構造とチェックボックス選択機能！ReactとSigniaで実現する階層構造管理

まえがき Rsuitejsにあるような機能になります。 階層データ構造におけるチェックボックスの選択状態管理のアプローチについては、前回書いた記事と似たものにはなります。 https://note.com/zak5/n/n858759d444f5 前回と違って、今回はいわゆるchildren、isFolderがあるような構造データになります。 export type TreeNode = { id: string name: string isFolder

Vimeoで見つけたアニメーションで面白いと思ったショート動画 https://vimeo.com/104509416 https://vimeo.com/user11541776 potraceのパラパラ動画のようなものを思い出した

【デモ付き！】自動ページネーション、自動スクロール、複数選択、ドラッグ&ドロップ対応で実現する新時代のデータテーブル

操作性に配慮した新時代のデータテーブルの簡易デモを作ってみました。 画像をクリックするとデモページに飛びます。 操作性が顕著にわかるようにデモでは1万行のデータをブラウザで頑張って生成してからサーブしています。最初のロードは遅いです。ただ、一度に1万行も見せることはほぼないので、すごい使い方すると固まることは当然あります。3,000行ぐらいなら、ほぼ軽快に動作します。 1. はじめに1.1 現代の業務アプリにおけるデータテーブルの重要性 データの論理構造を捉え、こ

データ構造からアプローチ！MUI x React x Floating UIで作る高度なコンテキストメニューの紹介

以前記載したコンテンツのコンテキストメニュー駆動のものになります デモサイトになります データ構造は前回と同じですが、onClickを受け取るようにしています import { EventHandler, MouseEvent } from 'react'export type TFlattedMenu = { id: string name: string parentId: string | null}export type TMenu = { id: st

React で実現する高度なチェックボックス選択！階層構造データの複数選択機能とSigniaで実現するステート管理

1. はじめに本記事では、Reactを用いて高度なチェックボックス選択機能を実装する方法について解説します。具体的には、日付別に整理された履歴データに対して、柔軟な複数選択機能を提供するUIコンポーネントの実装を行います。 この機能の主な特徴は以下の通りです。 日付ごとにグループ化された履歴項目の表示 個別項目の選択/解除 日付単位での一括選択/解除 全項目の一括選択/解除 Shift+クリックによる範囲選択 Ctrl/Cmd+クリックによる複数選択 この

チェックボックスの有無で比較！直感的な複数選択を実現するリストUIの設計～Shift＆Ctrl選択によるマルチピック機能を添えて～

はじめに 多くのユーザーにとって、リスト内の複数項目を選択する作業は日常的なものです。しかし、その操作が煩雑だったり時間がかかったりすると、ユーザー体験は大きく損なわれてしまいます。ここで注目したいのが、Shift選択とCtrl選択によるマルチピック機能です。 この機能を実装することで、ユーザーは直感的かつ効率的に複数の項目を選択できるようになります。Shift選択では範囲指定が、Ctrl選択では任意の項目の追加・削除が可能となり、多様な選択ニーズに応えることができま

TanStack TableでChromeライクな複数選択を実現！シフト選択対応のチェックボックス付きデータテーブルの紹介

使っている方も多い、Chromeブラウザ。 CtrlとHキーを同時に押下すると、履歴ページが出てきます。 このページではキー操作に配慮されており、シフト選択による範囲選択やCtrl選択におけるマルチピック選択が可能になっています。 今回はこの操作性をデータテーブルで実現してみたといった記事になります。 いったいどんなUIを作ったのか。 いつもと違い、今回はデモページをサーブしてみました。 列ソートしても正しく選択できる感じになっております。 現時点でのViteを

柔軟な日付選択で業務効率化を実現！Reactで作る高機能シーズナリティカレンダーの紹介と考察

はじめにシーズナリティカレンダーは、ビジネスや組織の運営において季節性や周期性を視覚化し、効率的に管理するためのツールです。多くの業界で日付ベースの計画立案や分析が重要であるにもかかわらず、柔軟で使いやすいツールが不足していることに気づきました。 「繁忙期 シーズナリティ カレンダー」で画像検索すると様々なカレンダーがでてきます。 動機と目標動機 業界を横断してシーズナリティカレンダーは有用性があることに気づき、プロトを作る意義を見出すことができました。業界特有の日

ドラッグ操作で複数選択を実現！縦横無尽に自動スクロール可能なDragSelectionの紹介

pragmatic-drag-and-dropの応用としてAPIをうまく使いつつ実現してみました 以前に書いたこちらの記事と関連する内容になります 以下のようなライブラリな機能になります 現時点でのViteを使ったMUI,React,TypescriptのSPAデモが欲しい方は以下から購入してくださいませ 購入された方は以下の手順で再現できます $ mkdir -p wrksp$ cd ~/wrksp$ unzip auto-scroll-multi-drag-se

Typescriptで実現する複数列のgroupByドラフト