JavaScriptでネオンボードアプリを作ろう!

こんにちは。KOUKIです。

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

<目次>

実装するもの

今回は、ネオンボードアプリをJavaScriptで実装したいと思います。

DJとかを連想する感じのアプリですね。

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

環境構築

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

JavaScriptでアプリ開発 ~環境構築~

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

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSでネオンボードアプリのスタイリングをしよう!

ページ(HTML)の作成

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

<!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>

<!DOCTYPE html>

<head>

<title>Hoverboard</title>

</head>

<body>

</body>

</html>

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

現在は何も見えてませんが、これでOKです。

スタイル(CSS)を装飾

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

* {
  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;
}

* {

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を実装していきましょう。

要素を取得する

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

// 要素の取得
const container = document.getElementById('container')

1 2	// 要素の取得 const container = document.getElementById('container')

ネオンカラーの定義

ネオンカラーを定数で定義しておきましょう。

// ネオンカラーの定義
const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']

1 2	// ネオンカラーの定義 const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71']

ボードの作成

ボードはsquareクラスをつけたdiv要素をJavaScriptで作成(createElement)し、container要素の子要素として追加(appendChild)することで画面上に表示します。

// ボード作成
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)
}

// ボード作成

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関数は、後ほど作成します。

ネオンカラーを設定

ボード上にマウスを乗せたら、ネオンカラーを設定する処理を実装しましょう。

// ネオンカラーを設定
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 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にランダムで取得したネオンカラーを設定すると色がつきます。

ネオンカラーの除去

ボード上からマウスを外したら、ネオンカラーを除去する処理を実装しましょう。

// ネオンカラーを削除
function removeColor(element) {
   element.style.background = '#1d1d1d'
   element.style.boxShadow = '0 0 2px #000'
}

// ネオンカラーを削除

function removeColor(element) {

element.style.background = '#1d1d1d'

element.style.boxShadow = '0 0 2px #000'

}

elementには、mouseoutイベントが発生した要素、つまりdivタグのボード情報が渡されます。ネオンカラー設定で設定したスタイルを元に戻しています。

これで完成です。

おわりに

この手のアプリケーションは初めて実装しましたね。

mouseoverイベントやmouseoutイベントは知識としては知っていましたが、こんなアプリケーションも作れるんだと目から鱗です。

だんだん、レパートリーが増えてきて嬉しいですね^^

それでは、また!

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素の取得
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'
}

// 要素の取得

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'

}

月	火	水	木	金	土	日
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

JavaScriptでネオンボードアプリを作ろう!

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

ネオンカラーの定義

ボードの作成

ネオンカラーを設定

ネオンカラーの除去

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

ネオンカラーの定義

ボードの作成

ネオンカラーを設定

ネオンカラーの除去

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

VueJS開発チップス集

Go言語 ~基礎編~ パッケージ

[React]~Admin画面6:ユーザー一覧の実装~

[Go言語]sync.Poolって結構便利だって気がついた件~初学者向け~

JavaScriptでアナログ時計を作ろう!

[Docker]alpine linuxベースのコンテナの時刻合わせ

[Go言語]Iteratorパターンを学ぼう!

Go言語でgRPCを学ぼう！-GreetWithDeadline API-

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル