今回はJavaScriptの基本的な書き方に関しての記事で、
ボタンをクリックする度に、ボタンの色(背景色)をランダムに変更する方法について簡単に書いてみました。
実際にどんな感じに動作するかというのは、こちらのサイトで試しにボタンをクリックしてみて下さい。
https://codepen.io/malgjp/pen/JjBzRaJ
今回の内容が分かるようになると、なんとなくJavaScriptというのがどういった感じで動いているのかというのが理解できるようになってくるはずです。
JavaScriptでボタンをクリックする度に背景色をランダムに変更する方法
まず始めにHTML, CSS, JavaScriptのそれぞれのファイルの中身がこんな感じ。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>押すとランダムに色が変わるボタン</title>
</head>
<body>
<button id="xxx">ボタン</button>
<script src="btn.js"></script>
</body>
</html>
CSS
次にCSSに関してはかなり適当なので、何ならここに関しては何も書かなくてもOKです。
一応はこんな感じで、変化が分かりやすいようにボタンの大きさをちょっと変えてるだけです。
button {
width: 30%;
font-size: 50px;
}
JavaScript
そして次にJavaScriptの部分で、まずは簡単に書いておきますが、次から１つずつ細かく説明していきます。
"use strict";
const button = document.getElementById("xxx");
const colors = [
"red",
"blue",
"yellow",
"green",
"orange",
"brown",
"pink",
"black",
];
button.addEventListener("click", () => {
button.style.background = colors[Math.floor(Math.random() * colors.length)];
});
そして、JavaScript部分で今回使うのが、
JavaScriptのDOM操作について｜documentとかget何とかとか意味が分からない
まず初めに、上に書いてある document何とかかんとか～と書いてあるのを見てもう早速、
うわ～こういうのめんどくさい、一体何を書いてあるのかがさっぱり分からないという方もいるはず。
JavaScriptというのはブラウザ上で動く言語で、JavaScriptでコードを書く事によって、
ブラウザの中の値(プロパティ)や機能(メソッド)を呼び出せるようになってるんですね。
このdocumentとか「.(ドット)」とかいちいち何？と思うかもしれませんが、
JavaScriptはこのドットや[]を使って、中のいろいろな値(データ)や命令にアクセスできるようになっているんですね。
なので基本的な書き方としては、
window.document.〇〇.〇〇といったような感じで、これが一体どういった事かというと、
windowの中のdocumentの中の〇〇の中の〇〇という値やメソッドにドットを使ってアクセスするという意味合いで、
基本的にはこの上のwindowというのは省略が可能なので、通常JavaScriptで命令を書く時は毎回 document～から始まる事が基本。
なので、document.〇〇～という風に続いていく事が多く、今回の例でいうと例えば、
document.getElementById("xxx");このdocument.getElementByIdというのが、documentといういろいろな技が集まった書類の中から、
getElementByIdという一つの技を使って、あるIDをゲットしてくるといったような命令で、
.getElementById(“〇〇”); と書く事で、HTMLファイルの〇〇というIDにアクセスするといったような意味合いになる。
これが例えばIDではなく、HTMLファイルのあるクラスを指定したいという事なら、
document.getElementsByClassName();という命令でdocument群の中にあるgetElementsByClassNameという技を使って、指定したクラスにアクセスする事ができる。
意味合いとしては、documentという必殺技がたくさん入れられた箱の中に、ドットを使って、
その中にある１つのgetElementsByClassNameという技にアクセスして、あるクラスを取り出すといったような感じ。
他にも例えば、普段何気に使っている、console.log(); や alert(); なんかも実はそういった機能の内の１つで、
本来であれば、window.console.log(); や window.alert(); という命令の書き方になる(単にwindowは毎回省略しているというだけ)
こういった機能というのは数えきれないくらいにあるので、いちいち覚えなくてもOKで、
日々使っていく内に、その中でも特に頻繁に使うものを少しずつ自然と覚えていけるようになるはず。
実際にテキストエディタを使う事で、例えば、
documentと書いて、そこにドットを追加するだけで無限にいろいろな技の候補が出てくるので、その中から自分が好きなものを選んで使うといった感じ。
そして例えば、IDを取り出す時って何て書けばいいんだっけ？
クラスを指定する時は何て書けばいいんだっけ？という時にでも、
こんな感じで例えば何となくgetって文字が書いてあった気がするなーと試しに.getと書いてやればその下にずらっと候補が出てくる。
なので初めから何でもかんでも一から暗記していこうというような事はしなくてもOK。
という事で次からは今回使う命令について１つずつ簡単に解説していきます。
document.addEventListener
今回使うこの addEventListener が一体何かというと、例えば、
addEventListener("click", () => {
// clickした後の処理の内容をここに書く
});
今回でいえば、HTMLファイルにあるbuttonというエレメントをクリックした後の処理の内容を{}の中に書いていく。
ここはclickだろうがinput何だろうが、書き方はいろいろとあって、
とにかくこの要素に何かしらの変化が加えられた場合に行う命令の内容を{}内に書いていくといった感じ。
document.style
次にこの .style というのが何かというと、ある要素に対してCSSを追加したり変更が出来る命令。
なので今回でいえば、
button.style.backgroundと書く事で、htmlファイルにあるbuttonというエレメントのCSSのbackground-colorを変えるといった命令で、例えば、
style.background = "yellow";と書く事で、背景色を黄色に変更する事が可能。
document.Math.random
次にこの Math.random が一体どういった命令かというと、
Math.random(); と書く事で、 0.000～0.999 までの数字をランダムで生成してくれるといったような命令。
なので仮に、
Math.random() * 5と書いた場合には 0.000～4.999 までの数字をランダムで生成してくれる。
ただしそんなにたくさんの数字をランダムに出されても桁数が多過ぎて困るといった場合に、
併せてよく使われるのが、次に紹介する Math.floor という命令。
document.Math.floor
この Math.floor というのが一体どういった命令かというと、
Math.random() を Math.floor(); で囲む事で、
生成された数値の整数部分だけを取り出す事が可能で、例えば、
Math.floor(Math.random() * 5)と書いた場合に、0.000～4.999までの数字ではなく、０～４までの数字をランダムで生成してくれるようになる。
あとはランダムに生成される０～４の数字と背景色を紐づけするだけで、クリックする度に背景色がランダムに変わるといったような仕組み。
その場合は、例えばswitch文なんかで、
const button = document.getElementById("xxx");
button.addEventListener("click", () => {
Math.floor(Math.random() * 5);
switch (Math.floor(Math.random() * 5)) {
case 0:
button.style.background = "red";
break;
case 1:
button.style.background = "blue";
break;
case 2:
button.style.background = "yellow";
break;
case 3:
button.style.background = "green";
break;
case 4:
button.style.background = "orange";
break;
}
});
// ランダムに生成された数字が０の時は赤。
// ランダムに生成された数字が１の時は青。
// ランダムに生成された数字が２の時は黄色。
// ランダムに生成された数字が３の時は緑。
// ランダムに生成された数字が４の時はオレンジ。
こんな感じの書き方も可能で、
数字の出し方なんかには他にもいろいろな方法があるとは思うので、
今回のやり方だけに限った話ではないですが、今回は一例としてswitch文による書き方で紹介しました。
変数を使うメリット
ただしこれだとやっぱりコードが長いし、背景色の色のパターンを増やしたり減らしたりという場合に、
わざわざ毎回switch文の中を１つ１つ書き換えるのは面倒過ぎるといった場合に便利なのが変数というもので、
document.getElementById("xxx")の部分を、箱(変数)を作ってその中にいれてしまえばいい(変数に格納する)
その場合は、
const 〇〇 = document.getElementById("xxx");こうする事で、次からはこの〇〇を使い回しする事が出来るので、毎回いちいち同じコードを書かなくても済むようになる(これがわざわざ変数を使うメリット)
プログラミングをやり始めの時というのは、この変数って一体なんのために使うの？
関数って一体何？何でいちいちこういう回りくどい書き方をしなきゃといけないの？という風にもなりがち。
ただし今回のように変数を使う事で全体のコードを短くシンプルにしたりも出来るというメリットがあります。
配列を使うメリット
上で書いたようにswitch文で書かれたコードが長過ぎる、もっとコンパクトにしたい。
そういった場合には、箱の中に値をたくさん入れておいて、クリックする度に中身をランダムに取り出せるようにすればいい。
今回の場合でいうと、配列の中にいろいろな色を入れておいてクリックをする度にその色(値)を呼び出し、CSSの背景色を変えるという方法。
const button = document.getElementById("xxx");
const colors = ["red", "blue", "yellow", "green", "orange"]; // 配列に値を格納
button.addEventListener("click", () => { // クリックしたら
button.style.background = colors[Math.floor(Math.random() * 5)]; // colors配列の中の値(0～4)をランダムで取り出す
});
といった感じで、Math.floor( Math.random() ); という命令は割と使う機会の多いやり方です。
ただし今のままだと配列の値の数が変わる度に、Math.random の数字もわざわざ毎回変えないといけない
なのでその場合は、値の数を数字で指定するのではなく、lengthプロパティというものを使うと便利です。
const button = document.getElementById("xxx");
const colors = [
"red", "blue", "yellow", "green", "orange", "brown", "pink", "black",
];
button.addEventListener("click", () => {
button.style.background = colors[Math.floor(Math.random() * colors.length)]; //
});
このlengthプロパティというのが、文字列の文字数や配列の要素の数を取得するプロパティで、
今回でいうと、colors.length と書く事で、colorsという配列の中の値の数に併せて自動的に数字を合わせてくれる。
なのでいざ配列の中の数が変わったとしても、そっちに自動で合わせてくれるといったような便利なもの。
JavaScriptの基本｜ボタンをクリックする度に背景色をランダムに変更する方法
プログラミングに関しては、こんな感じで文字で説明をするというのがかなり難しい部分ではありますが、
もし分からないという場合には、とりあえずいろいろな資料や動画なんかを見つつ、１つ１つゆっくり理解していく必要がありますね。
この記事もちょっと中途半端な部分もあるので、またいろいろと内容を追加していきます。
もし需要があればこういった記事も今後は少しずつ増やしていければとも考えています。
