こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、 ネオンボードアプリをJavaScriptで実装したいと思います。
DJとかを連想する感じのアプリですね。
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
ページ(HTML)の作成
最初にページを作成しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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>Hoverboard</title> </head> <body> <div class="container" id="container"></div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。

現在は何も見えてませんが、これでOKです。
スタイル(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 |
* { box-sizing: border-box; } body { background-color: #111; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 400px; } .square { background-color: #1d1d1d; box-shadow: 0 0 2px #000; height: 16px; width: 16px; margin: 2px; transition: 2s ease; } .square:hover { transition-duration: 0s; } |
ここまで実装すると以下のようになります。

JavaScriptの実装
準備ができたので、JavaScriptを実装していきましょう。
要素を取得する
最初に画面操作に必要な要素を取得します。
1 2 |
// 要素の取得 const container = document.getElementById('container') |
ネオンカラーの定義
ネオンカラーを定数で定義しておきましょう。
1 2 |
// ネオンカラーの定義 const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71'] |
ボードの作成
ボードはsquareクラスをつけたdiv要素をJavaScriptで作成(createElement)し、container要素の子要素として追加(appendChild)することで画面上に表示します。
1 2 3 4 5 6 7 8 9 10 11 |
// ボード作成 for(let i = 0; i < SQUARES; i++) { const square = document.createElement('div') square.classList.add('square') square.addEventListener('mouseover', () => setColor(square)) square.addEventListener('mouseout', () => removeColor(square)) container.appendChild(square) } |
mouseoverイベントは、作成したボード上にマウスを乗せると発火するイベントです。逆にmouseoutイベントは、マウスを外した時に発火します。
setColor関数とremoveColor関数は、後ほど作成します。
ネオンカラーを設定
ボード上にマウスを乗せたら、ネオンカラーを設定する処理を実装しましょう。
1 2 3 4 5 6 7 8 9 10 11 |
// ネオンカラーを設定 function setColor(element) { const color = getRandomColor() element.style.background = color element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}` } // ランダムなネオンカラーを返す function getRandomColor() { return colors[Math.floor(Math.random() * colors.length)] } |
elementには、mouseoverイベントが発生した要素、つまりdivタグのボード情報が渡されます。そのボードのcssにランダムで取得したネオンカラーを設定すると色がつきます。
ネオンカラーの除去
ボード上からマウスを外したら、ネオンカラーを除去する処理を実装しましょう。
1 2 3 4 5 |
// ネオンカラーを削除 function removeColor(element) { element.style.background = '#1d1d1d' element.style.boxShadow = '0 0 2px #000' } |
elementには、mouseoutイベントが発生した要素、つまりdivタグのボード情報が渡されます。ネオンカラー設定で設定したスタイルを元に戻しています。
これで完成です。
おわりに
この手のアプリケーションは初めて実装しましたね。
mouseoverイベントやmouseoutイベントは知識としては知っていましたが、こんなアプリケーションも作れるんだと目から鱗です。
だんだん、レパートリーが増えてきて嬉しいですね^^
それでは、また!
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 |
// 要素の取得 const container = document.getElementById('container') // ネオンカラーの定義 const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71'] // ボードの数 const SQUARES = 500 // ボード作成 for(let i = 0; i < SQUARES; i++) { const square = document.createElement('div') square.classList.add('square') square.addEventListener('mouseover', () => setColor(square)) square.addEventListener('mouseout', () => removeColor(square)) container.appendChild(square) } // ネオンカラーを設定 function setColor(element) { const color = getRandomColor() element.style.background = color element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}` } // ランダムなネオンカラーを返す function getRandomColor() { return colors[Math.floor(Math.random() * colors.length)] } // ネオンカラーを削除 function removeColor(element) { element.style.background = '#1d1d1d' element.style.boxShadow = '0 0 2px #000' } |
コメントを残す
コメントを投稿するにはログインしてください。