.addEventListener()

JavaScriptの.addEventListenerクリックでページ下部にsnackbarを表示

2023年4月2日 6分

Googleのマテリアルデザインでも登場する「snackbar」は、1つだけアクションを持つことができるUIで、インタラクションなUI設計で、自分も使ったりします。

似たようなUIに「toast」がありますが、「toastとsnackbarの違い」については、以下の記事が参考になるので、詳細は以下の記事を参考にしてみてください。

参考snackbarとtoastの違いまとめ｜ドリーム・アーツ Designers｜notenote（ノート）

そんなsnackberについて、サンプルも交え作り方等々解説していきます。

.addEventListener()
ページ下部にsnackbarを表示するサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.addEventListener()

.addEventListener() の click イベントは、指定要素がユーザーにクリックされた時に発行されます。

selectElement.addEventListener('click', (event) => {
 // ここに処理内容
});

かかかず

クリックでトリガーになるパターンはよく使うので覚えておきましょう。

設定できる「イベント」は、これ以外にも色々あります。

この記事では、ボタンをトリガーにしてsnackbarを非表示にさせています。

ページ下部にsnackbarを表示するサンプル

早速サンプルです。

この記事の下部に表示させているのが「snackber（スナックバー）」です。

ここにスナックバーのメッセージが表示されます。ここにスナックバーのメッセージが表示されます。ここにスナックバーのメッセージが表示されます。

一旦「✖️」をクリックすると非表示になりますが、再度表示させたい場合、上記のボタンをクリックしてみてください。

実装の手順と方法

コードの解説の前に、実装の手順と方法について解説します。

HTMLを記述

はじめに、以下のHTMLを記述します。

今回の「snackbar」は、ページの下部に表示させるので、構文もそれに合わせてコード下部の方に記述しましょう。

コードを表示

<div id="topSnack">
<div class="topSnackFace"><img src="https://dubdesign.net/wp-content/uploads/2020/04/face2.svg" alt="face"></div>
<div class="topSnackMessege"><p>ここにスナックバーのメッセージが表示されます。ここにスナックバーのメッセージが表示されます。ここにスナックバーのメッセージが表示されます。</p></div>
<button id="topSnackClose">&#10005;</button>
</div>

JavaScriptを記述

次に、JavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

// ページのロードが終わったらtoast表示
const snack = document.getElementById("topSnack"); // toastのID指定
window.addEventListener('load', () => { //ロード完了後イベント開始
  snack.className = "show"; // snackbarを表示
});

// バツをクリックで非表示
const snackClose = document.getElementById("topSnack"); // toastのID指定
snackClose.addEventListener('click', () => { //クリックでイベント開始
  snack.classList.remove('show'); // snackbarを非表示
});

CSSを記述

最後に、CSSを記述します。

コードを表示

#topSnack {
    position: fixed;
    z-index: 9999;
    display: flex;
    bottom: -140px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    max-width: 600px;
    padding: 20px 25px;
    border-radius: 5px;
    background: rgb(189,185,255);
    background: linear-gradient(90deg, rgba(189,185,255,1) 0%, rgba(103,184,255,1) 100%);
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    filter: drop-shadow(0px 2px 8px #ddd);
    transition: 0.8s ease-in-out;
}
#topSnack.show {
    bottom: 40px;
}
.topSnackFace {
    border-radius: 9999px;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
    width: 180px;
}
.topSnackMessege {
    padding-right: 20px;
}
.topSnackMessege p {
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.04rem;
}
button#topSnackClose {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    position: absolute;
    top: 10px;
    right: 10px;
}
button#topSnackClose:hover {
    opacity: 0.6;
}

かかかず

これで完成です！

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種類です。順に解説していきます。

HTML

HTMLは、id名「topSnack」を持つsnackbar要素は、JavaScriptのコードでsnack変数として参照させます。

その「topSnack」の親要素の中にある「topSnackFace」のclass名を持つ要素は、snackbarの顔アイコンを表し、「topSnackMessege」の要素には、snackbarのメッセージを表示させます。

<div id="topSnack">
<div class="topSnackFace"><img src="https://dubdesign.net/wp-content/uploads/2020/04/face2.svg" alt="face"></div>
<div class="topSnackMessege"><p>ここにスナックバーのメッセージが表示されます。ここにスナックバーのメッセージが表示されます。ここにスナックバーのメッセージが表示されます。</p></div>
<button id="topSnackClose">&#10005;</button>
</div>

id名「topSnackClose」を持つ要素は、snackbarを閉じるための「バツ」ボタンを表し、JavaScriptのコードでsnackClose変数として参照させます。

JavaScript

次に、JavaScriptの解説です。

まず、document.getElementById("topSnack") で、snackbar要素のIDを指定して、snack変数に格納します。

window.addEventListenerで、ページの読み込みが完了した時に、snack.className = "show"を実行して、snack要素に「show」のクラスを追加して、snackbarを表示します。

次に、document.getElementById("topSnack") で、snackbar要素のID「topSnack」を指定して、snackClose変数に格納します。

そして、snackClose.addEventListenerで、snackbarの中の「バツ」ボタンがクリックされた時に、snack.classList.remove('show')を実行して、「show」クラスを削除して、snackbarを非表示にします。

// ページのロードが終わったらtoast表示
const snack = document.getElementById("topSnack"); // toastのID指定
window.addEventListener('load', () => { //ロード完了後イベント開始
  snack.className = "show"; // snackbarを表示
});

// バツをクリックで非表示
const snackClose = document.getElementById("topSnack"); // toastのID指定
snackClose.addEventListener('click', () => { //クリックでイベント開始
  snack.classList.remove('show'); // snackbarを非表示
});

CSS

CSSでは、JavaScriptコードで制御されるsnackbarをデザインするためのスタイルを定義しています。

#topSnack {
    position: fixed;
    z-index: 9999;
    display: flex;
    bottom: -140px;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    max-width: 600px;
    padding: 20px 25px;
    border-radius: 5px;
    background: rgb(189,185,255);
    background: linear-gradient(90deg, rgba(189,185,255,1) 0%, rgba(103,184,255,1) 100%);
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    filter: drop-shadow(0px 2px 8px #ddd);
    transition: 0.8s ease-in-out;
}
#topSnack.show {
    bottom: 40px;
}
.topSnackFace {
    border-radius: 9999px;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
    width: 180px;
}
.topSnackMessege {
    padding-right: 20px;
}
.topSnackMessege p {
    color: #fff;
    font-size: 0.9rem;
    line-height: 1.7;
    margin: 0;
    font-weight: 600;
    letter-spacing: 0.04rem;
}
button#topSnackClose {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.3rem;
    position: absolute;
    top: 10px;
    right: 10px;
}
button#topSnackClose:hover {
    opacity: 0.6;
}

コードの中に特に難しい部分はありませんが、snackbar要素が表示された際に追加されるshowクラスを持つ要素に対するスタイルを定義するセレクタで、表示・非表示を切り替えます。