開発のきっかけ

勉強や遊びに集中していてつい，日付を超えてしまったという経験はありませんか？
私は，趣味の開発に没頭して日を跨ぐことが多々あります。

真面目に寝ていないことへの罪悪感や，時間が日付で分断されてしまうことからくる学習計画の立てにくさ。

突然思い立ち，寝ると決める時までは今日が続く時計を開発しました。

時間表示の設計(夜)

この作品の軸は，「寝ると決めた時」が夜の終わりになる仕組みです。

日付の部分には「寝る」ボタンを最後に押した日を，時計部分は現在の時刻にボタンを最後に押した日から経過した日数に24を掛けて足したものを表示する仕組みになっています。

script.js

let dateBook;
let dateNow;
let dateReal;
const fileWeek=["日", "月", "火", "水", "木", "金", "土"];

function getTime(){
  dateNow=new Date();
  dateNow.setHours(0,0,0,0);
}

function setTime(){
  const year=dateNow.getFullYear();
  const month=dateNow.getMonth()+1;
  const day=dateNow.getDate();
  const week=fileWeek[dateNow.getDay()];
  dateReal=new Date();
  const hour=dateReal.getHours()+(~~((dateReal-dateNow)/86400000)*24);
  const min=setTwo(dateReal.getMinutes());
  const sec=setTwo(dateReal.getSeconds());

  a=document.getElementById("time");
  a.style.setProperty('--font',`${130/(cheackTen(hour)+6)}vw`);

  document.title=`${hour}:${min}`;
  a.innerText=`${hour}:${min}:${sec}`;
  document.getElementById("date").innerText=`${year}年,${month}月,${day}日,${week}曜日`;
}

function setTwo(num){
  return num.toString().padStart(2,'0');
}

function cheackTen(num){
  return String(num).length;
}

setInterval(setTime,100);

getTime()

時間表示の設計(朝)

①「寝るボタンを押した瞬間に翌日へ切り替わる」

瞬間的に実際の時刻に更新する設計で，現在採用している方式です。

②「起きた時に翌日になる」

ボタンを押してから現在時刻に切り替えるまでに時間を開けることで，今が今日であるという夢から覚めないまま眠れるという特性を持ちます。

間の時を完全に飛ばしてしまうことから，実感と数字の差が大きく選択肢の中では最も睡眠時間を削ってしまいやすい方式です。

③「睡眠時間を圧縮表示する」

ボタンを押した時間から設定してある起きる時間までを圧縮して表示することで、失った時の流れの速さを体感できます。

睡眠中の1秒の定義を揺るがすことで1日を引き延ばすことが叶いますΣ( °ω° )。

これらの機能も，今後実装できれば面白いなと考えています。

最後に

「寝ると決めるまでは今日の時計」は，思いつきを実際に使える形に出来たという点から，ずっと取り組んでいる情報探究の象徴のような存在だと考えています。

モノを用意しなくても機能を実現できる。

｢想像したものであれば作ることができる｣。

だからこそ，これからも私はプログラミングが大好きです。

↑「寝ると決めるまでは今日」の時計(再掲)