四段階のステータス遷移とレーン構造
本カンバンボードは,タスクの状態を「todo(未着手)」「in-progress(進行中)」「review(レビュー)」「done(完了)」という4つの固定レーンで管理します.画面では全体のタスク配列(tasks)から各レーンの識別子(lane.id)に合うタスクをfilter関数で抽出して描画します.
WIP(仕掛かり中)の上限設定,同じレーン内での手動並べ替え,レーンの追加・削除には対応していません.
各レーンには未着手,進行中,レビュー,完了を見分ける色を設定しています.ドラッグ中は移動先候補のレーンに枠線と背景色の変化を加え,ドロップ先を視覚的に示します.ドロップするとカードのstatusが移動先レーンの値へ変わり,件数表示も現在の配列から再計算されます.
この画面は,WIP上限を超えたら移動を止めるような工程管理や,担当者別の権限管理を行いません.各レーンの件数は状況把握の表示であり,作業量の適否を自動判定する指標ではありません.4つの状態へ用途を絞っているため,自由度の高いプロジェクト管理機能よりも,カードの作成・編集・状態変更を中心とした簡易ボードです.
カード項目の構成とReactによる状態管理
タスクは,ID,タイトル,詳細,ステータス,期限,ラベル名,ラベル色,作成日時の8項目で構成され,Reactの状態として一つの配列に保持されます.作成・編集フォームでは各入力値を個別の状態へ結び付け,保存時に新しいタスクを追加するか,該当IDのタスクだけを置き換えます.ステータス変更でも配列内の該当要素だけを書き換えるため,他のタスクの内容は変更しません.
新規タスクのIDには,Date.now()のタイムスタンプ文字列を基盤とし,現在のタスク配列内で同一IDが衝突した場合にのみ数値サフィックス(-1, -2...)を付加する簡易IDを使用しています.これはランダム文字列や常時付与ではなく,画面内の一意性を保つ仕組みであり,複数端末や分散環境で重複を防ぐUUIDではありません.
日本語版のラベルは機能追加,バグ修正,文書,設計,開発,デザイン,テストの固定7種から選択しますが,編集時に別の選択肢へ明示変更しない限り,既存の英語ラベルや未知の追加ラベル,対応する表示色もそのまま保持されます.カードの並び順の手動ソート機能はなく,4レーン間の移動と状態管理が主目的です.
また,タスクのデータモデルに更新日時は存在せず,未知のプロパティとともに作成時刻を示す既存のcreatedAt(有限数値のタイムスタンプ)も編集操作によって変更されることなく維持されます.
HTML5 ドラッグ&ドロップAPIを用いた直感的な操作
カード移動にはブラウザ標準のHTML Drag and Drop APIを使用しています.カードのdraggable属性とonDragStartで対象IDを保持し,移動先レーンのonDragOverでドロップを許可します.ドロップ時は一致するタスクのstatusだけを移動先レーンへ変更し,同じ保存処理を通して画面とlocalStorageへ反映します.
ドラッグ中のレーンは枠線と背景色を変え,onDragEndで選択状態を解除します.
HTML Drag and Drop APIは,デスクトップのマウス操作では利用しやすい一方,タッチ端末やブラウザによって操作性が異なります.dataTransferへIDを入れる処理はありますが,すべてのiOS・Android端末でドラッグできることを保証するものではありません.
ドラッグしにくい環境では,カードを開いて編集画面のステータス選択からレーンを変更できます.この代替操作を用意することで,移動手段をドラッグだけに限定しない設計です.
localStorageによる同一オリジン保存とデータ揮発性の理解
タスクデータの保存にはブラウザ標準のlocalStorageを使います.作成,編集,移動,削除のたびにタスク配列をJSON文字列化し,agy-kanban-tasksというキーで現在のオリジンへ書き込みます.初回読取時のアクセス例外や解析失敗はすべて捕捉され,未ロード中の不用意な上書きを防ぎます.
不正な形式や破損した保存値が存在してもデモ用タスクで勝手に上書きすることはなく,既存データを残したまま空のボードとして表示します.書き込み時の例外や容量制限エラーも検知され,タブ内の最新編集内容は破棄せずに画面上へ未保存状態を表示し,最新状態での再試行や現在の配列JSONおよび保存生データの退避エクスポートを行えます.
外部変更やストレージ消去はstorageイベントと保存前の比較で検知され,編集中の下書きを保護するため自動上書きを停止します.
localStorageは端末全体やアカウント間で同期される領域ではなく,ブラウザとオリジンの組み合わせごとに独立して管理されます.プロトコル,ホスト名,ポート番号が異なれば別の保存先となります.本ツールにはクラウド同期,リアルタイム共同編集,履歴復元,ファイルからのインポート復元機能は備わっていません.
手動退避用のJSONエクスポート機能は提供していますが,別タブでの同時編集による競合やABA問題を完全に防ぐトランザクション機能はないため,同一ボードの編集は単一のタブで行う運用を推奨します.競合や保存失敗が発生した場合は,退避を行った上で明示的な再読込を行ってください.
また,サイトデータの消去やプライベートブラウズ終了,ブラウザの容量制限によるデータ喪失のリスクは残るため,恒久的な記録は別の管理システムへ転記してください.
期限表示の動的レンダリングと視覚的フィードバック
期限はYYYY-MM-DD形式の文字列から年月日を数値として取り出し,実在する暦日であることを検証した上で,端末のローカル当日カレンダー成分と日単位の指標で比較します.単なるDateインスタンスの文字列解釈や24時間の経過時間差に依存しないため,夏時間(DST)の切り替わりがあっても日付のズレを生じさせずに判定します.
完了レーンのタスクは期限の長短に関わらず一律で完了バッジを表示し,未完了タスクは期限超過で期限切れ,当日で今日が期限,2日以内は残り日数,それ以降は設定日付を表示します.このバッジ表示は描画時に再計算される仕組みであり,深夜0時の自動更新タイマーやプッシュ通知機能は備わっていません.
この期限機能は,ページを表示した時点の視覚的な目印です.メール,プッシュ通知,カレンダー連携,バックグラウンドでのリマインドは行いません.ページを閉じている間に期限が近づいても通知は届かないため,確実な予定管理が必要なタスクはカレンダーや通知対応の管理サービスと併用してください.
ブラウザ単一環境における個人作業での適切な使い分け
このカンバンボードは,同じ端末・ブラウザで扱う短期的な個人タスクの整理に向きます.4レーンと固定ラベルで,その日の作業,数日間の小さな進行表,試作中のチェック項目をまとめる用途です.アカウント,共同編集,クラウド同期,コメント,担当者,通知,変更履歴はないため,複数人のプロジェクト管理や長期ロードマップの正式な記録には向きません.
タスクの入力,状態変更,localStorageへの保存処理はブラウザのクライアント側コードで完結して実行されます.しかし,データは平文のJSON形式で保持され暗号化は施されていないため,端末のセキュリティや完全な並行データ安全性を保証するものではありません.
ブラウザ拡張機能の干渉,共有端末での閲覧,画面共有,プライベートブラウズの終了やストレージ初期化によるデータ消失のリスクが存在します.未保存の編集がある場合は離脱時に警告を表示しますが,モバイル環境やブラウザの強制終了,クライアント遷移では確実に動作するとは限りません.
万一のトラブルに備えて現在のタスク配列や保存生データのJSON退避機能を用意していますが,インポートによる自動復元機能はないため,機密情報や消失が許されない重要データは入力せず,正式な管理システムへ転記してください.