こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、JavaScriptで通知機能を実装します。
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
JavaScript
ページ(HTML)の作成
最初にページを作成しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Toast Notification</title> </head> <body> <div id="toasts"></div> <button class="btn" id="button">Show Notification</button> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイル(CSS)を装飾
次にスタイルを記述しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap'); * { box-sizing: border-box; } body { background-color: rebeccapurple; font-family: 'Poppins', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .btn { background-color: #ffffff; color: rebeccapurple; font-family: inherit; font-weight: bold; padding: 1rem; border-radius: 5px; border: none; cursor: pointer; } .btn:focus { outline: none; } .btn:active { transform: scale(0.98); } #toasts { position: fixed; bottom: 10px; right: 10px; display: flex; flex-direction: column; align-items: flex-end; } .toast { background-color: #fff; border-radius: 5px; padding: 1rem 2rem; margin: 0.5rem; } .toast.info { color: rebeccapurple; } .toast.success { color: green; } .toast.error { color: red; } |
ここまで実装すると以下のようになります。
JavaScriptの実装
それでは、通知機能を実装しましょう。
JavaScriptで通知のHTML要素を作り、toastsクラスがついたHTMLの子要素として追加します。
|
1 2 3 |
<div id="toasts"> ... </div> |
要素を取得する
画面操作に必要な要素を取得します。
|
1 2 3 |
// 要素を取得 const button = document.getElementById('button') const toasts = document.getElementById('toasts') |
通知メッセージの定義
次は、通知メッセージを定義しましょう。
|
1 2 3 4 5 6 7 |
// 通知メッセージの定義 const messages = [ 'Message One', 'Message Two', 'Message Three', 'Message Four', ] |
通知タイプの定義
次は、通知タイプを定義します。
|
1 2 |
// 通知タイプの定義 const types = ['info', 'success', 'error'] |
clickイベントの登録
ボタンを押したときに通知を発行したいので、clickイベントを登録しましょう。
|
1 2 |
// clickイベントの登録 button.addEventListener('click', () => createNotification()) |
これで、「Show Notification」ボタンが押下されたときに、clickイベントが発火するようになります。
createNotification関数は、これから作成します。
通知作成処理
今回の目玉である通知作成機能を実装しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 通知作成機能 function createNotification(message = null, type = null) { // HTML要素の作成 const notif = document.createElement('div') notif.classList.add('toast') notif.classList.add(type ? type : getRandomType()) // メッセージをランダムに取得 notif.innerText = message ? message : getRandomMessage() // 子要素として追加 toasts.appendChild(notif) // 3秒後に通知を消す setTimeout(() => { notif.remove() }, 3000) } |
createElementメソッドは、指定したHTML要素を作成し、クラスなどを追加できます。ここでは、dev要素を作り、toastクラスやtypeを付与し、toastsの子要素として追加しています。
getRandomType関数とgetRandomMessage関数は、これから作成します。
タイプをランダムに取得
先ほど定義したタイプをランダムに取得する処理を実装します。
|
1 2 3 4 |
// Typeをランダムに取得 function getRandomType() { return types[Math.floor(Math.random() * types.length)] } |
「Math.floor(Math.random() * 長さ)」は、イディオムだと思って丸暗記した方が良いです。これで、0~配列全数未満の数値がランダムに取得できます。
メッセージをランダムに取得
最後に、メッセージをランダムに取得します。
|
1 2 3 4 |
// メッセージをランダムに取得 function getRandomMessage() { return messages[Math.floor(Math.random() * messages.length)] } |
これで完成です。
おわりに
今回は通知機能でしたが、この処理は他のことでも応用ができそうですよね。
制限時間内に答えないとブロックが積み上がっていき最後には崩れる、みたいなミニゲームもできそうです^^
それでは、また！
JavaScriptまとめ
JavaScript ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
// 要素を取得 const button = document.getElementById('button') const toasts = document.getElementById('toasts') // 通知メッセージの定義 const messages = [ 'Message One', 'Message Two', 'Message Three', 'Message Four', ] // 通知タイプの定義 const types = ['info', 'success', 'error'] // clickイベントの登録 button.addEventListener('click', () => createNotification()) // 通知作成機能 function createNotification(message = null, type = null) { // HTML要素の作成 const notif = document.createElement('div') notif.classList.add('toast') notif.classList.add(type ? type : getRandomType()) // メッセージをランダムに取得 notif.innerText = message ? message : getRandomMessage() // 子要素として追加 toasts.appendChild(notif) // 3秒後に通知を消す setTimeout(() => { notif.remove() }, 3000) } // Typeをランダムに取得 function getRandomType() { return types[Math.floor(Math.random() * types.length)] } // メッセージをランダムに取得 function getRandomMessage() { return messages[Math.floor(Math.random() * messages.length)] } |
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/190f24cd.7532be9b.190f24ce.766b3442/?me_id=1213310&item_id=18177978&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4111%2F9784774184111.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。