【ステージ#3】 乱数と色指定に関するプログラミング問題

《難易度★★☆》JavaScriptによるスタイルの書き換えを試すプログラミング問題です。乱数と色指定を扱いますが、RGBだけでなくHSLによる色指定も含みます。

白いパレット(4つの正方形)とボタンが表示されるHTMLとCSSがすでに用意されています。ここにJavaScriptを書き、以下の問題で指定された機能を追加してください。

  • 問題3-1:ボタンを押すと4つのパレットが左から青、緑、オレンジ、黄色になるようにしなさい(カラーコードはそれぞれ#1953a1、#438f43、#ec5e2e、#f4b93c)
  • 問題3-2:ボタンを押すたびに4つの色がそれぞれランダムに変わるようにしなさい(RGBをランダムに指定)
  • 問題3-3:ボタンを押すたびに調和の取れたランダムな4色が表示されるようにしなさい(HSLでHはランダム、Sは20%、Lは70%)

問題

See the Pen ステージ#3問題 by programmingbird (@programmingbird) on CodePen.

問題3-1の解説と解答例

解説(発想のしかた)

① 【JSとHTMLの紐付け】扱うHTML要素は4つのパレット(問題のHTML見るとdiv要素)とボタンなのでそれぞれquerySelectorで取得して変数に入れとく。変数名はとりあえずc1,c2,c3,c4,btnに。

//JSとHTMLの紐付け
var c1 = document.querySelector("#c1");
var c2 = document.querySelector("#c2");
var c3 = document.querySelector("#c3");
var c4 = document.querySelector("#c4");
var btn = document.querySelector("#button");

② 【トリガーの設定】btnに、addEventListenerでイベントリスナーをつけて、クリックしたら指定した関数を呼び出すようにする。関数の名前は何でもいいけどとりあえずchangeColorsで。

//「トリガー」の設定
btn.addEventListener("click", changeColors);

③ 【アクションの設定】changeColorsの中身を書いてく。c1〜c4はdiv要素で中身は空っぽなので、色を変えるというのは背景色を変えるということか。背景色はstyle.backgroundカラーコードを指定すれば変えられるのでそれを書く。

//「アクション」の設定
function changeColors() {
   c1.style.background = "#1953a1";
   c2.style.background = "#438f43";
   c3.style.background = "#ec5e2e";
   c4.style.background = "#f4b93c";
}

解答例

See the Pen ステージ#3問題3-1 by programmingbird (@programmingbird) on CodePen.

問題3-2の解説と解答例

解説(発想のしかた)

① 【JSとHTMLの紐付け】【トリガーの設定】は同じ。

② 【アクションの設定】changeColorsの中身を書き換えてく。背景色の指定は、問題3-1と同じくstyle.backgroundでやればいいけど、RGBでランダムに、ってことなのでそこそこ長いコードになりそうだ。しかもそれを何回もやることになりそうなので、こういう場合は「ランダムな色指定をする関数」を別途作ってしまったほうがよい。名前は何でも良いけどrandomRGBにしておくか。

//「アクション」の設定
function changeColors() {
   c1.style.background = randomRGB();
   c2.style.background = randomRGB();
   c3.style.background = randomRGB();
   c4.style.background = randomRGB();
}


③ そのrandomRGBの中身を書いてやる。RGBでの色指定はrgb(255,255,255)みたいな形式でR,G,Bそれぞれのパラメータを0〜255までの整数で書く。この数値をMath.random()を使ってランダムにすればよい。整数化もしておいたほうがよさそうなのでここはMath.floor()を使おう。

最後にreturnを使って、できあがった色指定を返す。return はそのあとに書いたものを関数を呼び出したところに返すことができる命令。つまりchangeColorsの中でrandomRGB()と書いていた部分が例えばr,g,bがそれぞれ10,20,30という結果になった場合なら、”rgb(10,20,30)”という文字列にそのまま置き換わるイメージ。

function randomRGB() {
   var r = Math.floor(Math.random() * 255);
   var g = Math.floor(Math.random() * 255);
   var b = Math.floor(Math.random() * 255);
   return "rgb(" + r + "," + g + "," + b + ")";
}

解答例

See the Pen ステージ#3問題3-2 by programmingbird (@programmingbird) on CodePen.

問題3-3の解説と解答例

解説(発想のしかた)

① 【JSとHTMLの紐付け】【トリガーの設定】は同じ。

② 【アクションの設定】changeColorsの中身をさらに書き換える。今回もランダムな色指定を作り出す部分は別の関数として用意することにする。名前はrandomHSLにしておく。

//「アクション」の設定
function changeColors() {
   c1.style.background = randomHSL();
   c2.style.background = randomHSL();
   c3.style.background = randomHSL();
   c4.style.background = randomHSL();
}

③ randomHSLの中身を書く。HSLでの色指定はhsl(120,20%,70%)みたいな形式でH(色相),S(彩度),L(輝度)それぞれのパラメータを書く。Hは0〜360、SとLは0〜100%の範囲。問題3-3ではSは20%とLは70%に固定ってことなので、HだけをMath.random()を使ってランダムにすればよい。

ちなみにS20%というのは彩度が低めでグレイっぽい感じ。L70%というのは輝度高めで明るい感じ。これを固定してHの色相(赤系とか青系とかを決める)がランダムになるのでできあがりはランダムでありながらちょっと落ち着いたトーンに統一された配色になるはず。

function randomHSL() {
   var hue = Math.floor(Math.random() * 360);
   return "hsl(" + hue + ",20%,70%)";
}

解答例

See the Pen ステージ#3問題3-3 by programmingbird (@programmingbird) on CodePen.