ローディング判定やスクロール判定はdata属性での一括管理が便利
ローディング判定やスクロールされた時など、html要素にdata属性をつけて一括管理するとコーディングやメンテナンスがすごく楽になります。
例えば、スクロールされたらdata-scrolled="true"といった属性を付与することで、サイト全体でスクロール処理ができるようになり、CSSもシンプルに書くことができます。
詳しくは以下で解説していきます。
どのようなdata属性をつけるか
具体的には以下のような感じで、カスタムデータ属性を付与します。
<html lang="ja" data-loaded="true" data-scrolled="false" data-drawer-open="false">カスタムデータ属性の名前はdata-xxxのような形で自由につけることができるので、状態が連想できればなんでも構いません。
- data-loaded：ローディングされたかどうか
- data-scrolled：スクロールされたかどうか
- data-drawer-open：ドロワーメニューが開かれているかどうか
trueであればYES、falseであればNO、という具合でサイトの状態が一目で分かります。
CSSの記述が楽
CSSによるスタイリングも一貫性があり、状態を表すdata属性が明示的で分かりやすいです。
/* 読み込みが完了したらローディング画面を非表示 */
[data-loaded=true] .loader-bg {
opacity: 0;
visibility: hidden;
}
/* スクロールされたらページトップボタンを表示 */
[data-scrolled=true] #to-top {
opacity: 1;
visibility: visible;
}
/* スクロールされたらほげほげ */
[data-scrolled=true] .hogehoge {
}
/* ドロワーメニューが開いた時の動作 */
[data-drawer-open=true] {
.drawer-icon {
}
.drawer-content {
}
body {
overflow: clip;
}
}JavaScriptの記述方法
JavaScriptには、以下のように状態管理をまとめておくとメンテナンスが楽になります。
/**
* 状態管理
*/
const html = document.documentElement;
// ローディング判定
window.addEventListener("load", () => {
html.setAttribute("data-loaded", "true");
});
// スクロール判定
window.addEventListener("scroll", function () {
if (window.scrollY > 100) {
html.setAttribute("data-scrolled", "true");
} else {
html.setAttribute("data-scrolled", "false");
}
});
// ドロワーメニュー開閉状態
document.querySelector(".drawer-icon").addEventListener("click", function () {
const isOpen = html.getAttribute("data-drawer-open") === "true";
// オープン状態を判定してトグル
html.setAttribute("data-drawer-open", isOpen ? "false" : "true");
});html要素は使い回すので定数にし、各イベント毎に属性値を切り替えるような形です。
JavaScriptで管理するからといってhtml要素にあらかじめdata属性をつけておかないと、イベントが行われない限りdata属性は付与されない点にだけ注意です。
<!-- 良くない例：イベントが行われるまでdata属性がつかない -->
<html lang="ja">
<!-- 良い例：あらかじめHTMLに最初の状態を記述しておく -->
<html lang="ja" data-loaded="false" data-scrolled="false" data-drawer-open="false">クラス名で管理はダメなのか
.is-loadedのようにクラス名で管理するのも悪くないですが、他のクラスと混在した場合に見通しが悪くなります。
また、プラグインなどで自動付与されるクラスとのバッティングも防ぐと言う意味でも、状態管理はdata属性が適していると考えています。
body要素ではダメなのか
body要素にdata属性をつけても問題ありません。
しかし、body要素には様々なクラスや属性が混在するケースが（WordPressは特に）多いので、見通しがしやすいという意味でhtml要素につけています。
状態管理はdata属性がベスト
data属性の一括管理にして、メンテナンスがすごく楽になりました。
アクセシビリティのことを考えるとWAI-ARIAで管理する方が良いのかもしれませんが、サイトを保守する人がどこまで理解できるのか問題と、JavaScriptがかなり複雑になりそうなのでdata属性管理がベストだと考えています。
おすすめWEBスクール
WEB制作やWEBデザインを学びたいなら、SNSでも話題の「デイトラ」がおすすめ！
どのコースも10万円前後と業界最安値で、副業や転職に向けて十分なスキルを身につけることができます。
＼ クリックしてジャンプ！ ／
お気軽にコメントどうぞ