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

こんにちは。KOUKIです。

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

実装するもの

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

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

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

環境構築

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

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

CSS版

ページ(HTML)の作成

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

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

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

スタイル(CSS)を装飾

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

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

JavaScriptの実装

準備ができたので、JavaScriptを実装していきましょう。

要素を取得する

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

ネオンカラーの定義

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

ボードの作成

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

mouseoverイベントは、作成したボード上にマウスを乗せると発火するイベントです。逆にmouseoutイベントは、マウスを外した時に発火します。

setColor関数とremoveColor関数は、後ほど作成します。

ネオンカラーを設定

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

elementには、mouseoverイベントが発生した要素、つまりdivタグのボード情報が渡されます。そのボードのcssにランダムで取得したネオンカラーを設定すると色がつきます。

ネオンカラーの除去

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

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

これで完成です。

おわりに

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

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

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

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す