JavaScriptで通知機能を実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、JavaScriptで通知機能を実装します。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

JavaScript

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

それでは、通知機能を実装しましょう。

JavaScriptで通知のHTML要素を作り、toastsクラスがついたHTMLの子要素として追加します。

要素を取得する

画面操作に必要な要素を取得します。

通知メッセージの定義

次は、通知メッセージを定義しましょう。

通知タイプの定義

次は、通知タイプを定義します。

clickイベントの登録

ボタンを押したときに通知を発行したいので、clickイベントを登録しましょう。

これで、「Show Notification」ボタンが押下されたときに、clickイベントが発火するようになります。

createNotification関数は、これから作成します。

通知作成処理

今回の目玉である通知作成機能を実装しましょう。

createElementメソッドは、指定したHTML要素を作成し、クラスなどを追加できます。ここでは、dev要素を作り、toastクラスやtypeを付与し、toastsの子要素として追加しています。

getRandomType関数とgetRandomMessage関数は、これから作成します。

タイプをランダムに取得

先ほど定義したタイプをランダムに取得する処理を実装します。

Math.floor(Math.random() * 長さ)」は、イディオムだと思って丸暗記した方が良いです。これで、0~配列全数未満の数値がランダムに取得できます。

メッセージをランダムに取得

最後に、メッセージをランダムに取得します。

これで完成です。

おわりに

今回は通知機能でしたが、この処理は他のことでも応用ができそうですよね。

制限時間内に答えないとブロックが積み上がっていき最後には崩れる、みたいなミニゲームもできそうです^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す