schedulerタスクについてのコード

えむおー.iconおかげさまで解決しました！

困っていること

未来の日付のタスクにfuturer-taskを付与したい

futurer-taskには、cssを設定して薄くなるようにしてある

翌日になっても薄くなったままになっているえむおー.iconここを改善したい！

9時くらいを過ぎるとタスクが濃くなる（今日のタスクとして表示される）

一応日本語言語にしてあります

code:html

<!DOCTYPE html>

<head>

<title>Scheduler0.5</title>

該当部分と思われるJavaScript

code:js

// ページが読み込まれたときに保存されたタスクを復元する

window.onload = function() {

//ローカルストレージからデータを取得

const savedTasks = JSON.parse(localStorage.getItem('tasks'));

//取得したデータからタスクを画面に描写

if (savedTasks) {

savedTasks.forEach(task => {

addTaskToList(task.text, new Date(task.date));

});

}

};

//新規タスクの生成

function addTask() {

const inputDateElement = document.getElementById("inputDate");

let inputDateValue = inputDateElement.value;

if (!inputDateValue) {

// 日付が入力されていない場合は、今日の日付を取得

const today = new Date();

const year = today.getFullYear();

const month = String(today.getMonth() + 1).padStart(2, '0');

const day = String(today.getDate()).padStart(2, '0');

inputDateValue = ${year}-${month}-${day};

inputDateElement.value = inputDateValue;

}

const taskText = document.getElementById("taskText").value;

const currentDate = new Date();

const selectedDate = new Date(inputDateValue);

// タスクをリストに追加

addTaskToList(taskText, selectedDate);

// 入力フォームをリセットしておく

document.getElementById("taskForm").reset();

// モーダルウィンドウを閉じる

modal.style.display = "none";

}

//与えられたタスクと日付からページにタスクを描写する

function addTaskToList(taskText, selectedDate) {

const taskItem = document.createElement("li");

// テキスト内の改行を<br>に変換して表示

taskItem.innerHTML = taskText.replace(/\n/g, "<br>");

// 未来の日付の場合、タスク名の後に日付を表示

if (selectedDate > new Date()) {

const dateString = selectedDate.toLocaleDateString();

taskItem.innerHTML += "<span style='font-size: smaller;'> - " + dateString + "</span>";

taskItem.classList.add("future-task");

}

const taskList = document.getElementById("taskList");

let inserted = false;//判定用のフラグ

// タスクリストを日付順に並べる

for (let i = 0; i < taskList.children.length; i++) {

const date = new Date(taskList.childreni.getAttribute("data-date"));

if (selectedDate < date) {

taskList.insertBefore(taskItem, taskList.childreni);

inserted = true;

break;

}

if (!inserted) {

taskList.appendChild(taskItem);

}

//liの独自属性として日付データを与えておく

taskItem.setAttribute("data-date", selectedDate);

// タスクをローカルストレージに保存

saveTasksToLocalStorage();

// ダブルクリックでタスクをコピーして削除するイベントを追加

taskItem.addEventListener("dblclick", function() {

copyTaskTextAndRemove(taskItem);

});

}

//画面に表示されているlistからデータを生成し、ローカルストレージに保存する

function saveTasksToLocalStorage() {

const taskList = document.getElementById("taskList");

const tasks = [];

for (let i = 0; i < taskList.children.length; i++) {

const taskItem = taskList.childreni;

if (taskItem.tagName.toLowerCase() === "li") {

const task = {

text: taskItem.innerText.split(' - ')0, // タスク名のみを保存

date: taskItem.getAttribute("data-date")

};

tasks.push(task);

}

localStorage.setItem('tasks', JSON.stringify(tasks));

}

2024/2/29rashita.icon

僕が読みやすいように少し空白行などを整えました

問題:「翌日になっても薄くなったままになっている」

薄く表示するのはCSSfuturer-taskの仕様

ということは、翌日になっていても、futurer-taskが当たっているのだろうと推定

ということは、// 未来の日付の場合、タスク名の後に日付を表示の部分が怪しい

ありえる可能性

取得している日付データに問題がある

判別式に問題があるselectedDate > new Date()

与えられた日付データとそのコードが実行された現在時刻を比較している

日付データはどのように生成されるか

const selectedDate = new Date(inputDateValue);

inputDateValueはどう設定されるか

フォーム（日付フォームかな）か、空白の場合はコードで生成

自動生成の場合は今日の日付になっているので、「未来のタスク」だからフォームで設定されたものだと想定

自動生成しているコードをみると、フォームで設定される日付も${year}-${month}-${day}の形だろうと推測される

自分で実験

code:sample.js

const ti1 = new Date("2024-02-29")

//Date Thu Feb 29 2024 09:00:00 GMT+0900 (日本標準時)

onst ti2 = new Date()

//Date Thu Feb 29 2024 08:01:22 GMT+0900 (日本標準時)

おそらくこれが問題

"2024-02-29"で生成されたデータは、時差を考慮してなのかどうかはしらないが、朝の９時になっている

new Date()はその時刻のデータを生成するので、朝の9時を超えないと、selectedDate > new Date()が想定するような動作をしてくれない

思い付く解決策

タスクの日付を生成するときに、時間まで含めておく

code:sample.js

const ti3 = new Date("2024-02-29 00:00:00")

//Date Thu Feb 29 2024 00:00:00 GMT+0900 (日本標準時)

もし、早朝の5時までは「昨日にしたい」なら

code:sample.js

const ti4 = new Date("2024-02-29 05:00:00")

//Date Thu Feb 29 2024 00:00:00 GMT+0900 (日本標準時)

などとすることもできる。

たぶんこれで大丈夫だと思いますが、問題あれば追記してください。

えむおー.iconおかげさまで解決しました！

rashita.iconさんの推測通り、タスク生成時に自動で日本時間9時になることが原因でした❗️

こんなのあるんですね…

自分はタイムゾーンを疑ってました笑

タスク生成時に時間を0:00:00に設定するようにしたら無事日付が変わったら「未来のタスク」が「今日のタスク」として認識されるようになりました

rashita.iconさんの一連の書き込みも、トラブルが起きた際に問題点を見つけるフローとして勉強になりました🙇‍♂️

お役に立てていればなによりです！rashita.icon

自動で9時になる問題

Date() コンストラクター - JavaScript | MDN

日付のみの文字列（例: "1970-01-01"）は UTC として扱われ、日付時刻の文字列（例: "1970-01-01T12:00"）はローカルとして扱われます。したがって、入力形式が 2 つの型の間で一貫していることを確認することも推奨されます。

Date.parse() - JavaScript | MDN

例えば、 "2011-10-10" （日付のみの形式）、"2011-10-10T14:48:00" （日時形式）、"2011-10-10T14:48:00.000+09:00" （日時形式にミリ秒とタイムゾーンがついたもの）を渡し、解釈することができます。タイムゾーンのオフセットがない場合は、日付のみの形式では UTC 時刻と解釈され、日時形式では地方時として解釈されます。

日付のみにするとUTCの0時、つまり日本時刻の9時になってしまう