知見

目からウロコの知見、すぐ忘れるからここにメモっていく。

先に定義しといた方が効率的だった

変数にしちゃうとメモリ使うから…とか思ってたけど、querySelectorを2回呼び出す方が非効率らしい。可読性的にも。

const target = el.querySelector('.target');
if (target) {
	target.addEventListener('click', () => { /* 処理 */ });
}

「load」だけじゃなかった

ドキュメントの読み込み状況を確認してくれる。

document.addEventListener('readystatechange', (e) => {
	if (document.readyState === 'complete') onLoaded();
});

「scrollTo」だけじゃなかった

target要素が見えるところまでスクロールしてくれる。

const target = document.querySelector(location.hash);
target.scrollIntoView({ behavior: 'smooth' });

カスタムイベントはだから便利なのか

detailの中にdataを保持できる。

const replaced = new CustomEvent('replaced', {
	detail: { sitedata: state, root }
});
document.dispatchEvent(replaced);