WEBサイト内には自動で表示が切り替わる部分があります。いつも同じ表示をさせるよりも訪れるたび違うものが表示されていたほうが、ユーザーを飽きさせません。
ということで今回は、自動的にランダムで表示する内容を変えてくれる仕組みを作ってみましょう。
HTML, CSS と jQuery の関係について、基礎から学びたい方は以下を参考にしてください。
HTMLとCSSとjQueryの関係を超わかりやすく解説【初心者対象】
要素をランダム表示させる仕組みを作ってみる
完成形はこんな感じになります
See the Pen
Untitled by taichi (@taichi_na)
on CodePen.
上の画面の右下の return ボタンを押してページを更新すると、表示される色が変化すると思います。これはランダムに数を生成し、それに配列の文字を紐づけるという仕組みで実行しています。
このシリーズでは配列はまだ使ったことがありませんでしたが、難しく考える必要はありません。一つずつ理解していきましょう。
HTML, CSS で見た目を整える
See the Pen
Untitled by taichi (@taichi_na)
on CodePen.
HTMLに関しては特に難しいところはないと思います。
デフォルトの状態だと、 li 要素にはクラスが指定されていないことだけ、注意してください。この部分に、ランダムに生成したクラスの値を入れて、その背景色を付けてあげる、ということです。
ということで、CSSの後半部分には色の名前がついたセレクタがいくつか用意されていて、それぞれに背景色の値が異なっています。
では実際に、jQuery で動きを実装していきましょう！
jQuery でランダムにクラスを付ける
See the Pen
Untitled by taichi (@taichi_na)
on CodePen.
では一つずつ見ていきましょう。
1. var liArray = [“red”, “yellow”, “green”, “blue”, “brown”];
ここでは配列を指定しています。変数と同じように var に後に付けたい配列名を書き、この例のように複数の要素を中にしまっておくことが可能です。順番も大事になります。配列内ではカウントはゼロから始まり、左に進むにつれて数が増えていきます。
red は 0
blue は 3
ということになります。この 0 から始まるということをよく忘れてしまいがちなので注意しましょう。
2. var num = Math.random();
Math オブジェクトの Math.random() は 0~1未満の間でランダムな値を生成してくれます。要するにゼロもしくは小数となります（0.3245 など）。
ここではその生成された 0~1未満の数を変数 num としました。
3. num = num * 5;
先ほど定義した変数 num の値を変更します。numに５をかけた値を、新たに num とします。計算機などで実際に計算をしてみるとわかりますが、0~1未満の数に５をかけると、その値の範囲は(0~4.9)となります。
4. num = Math.floor(num);
Math オブジェクトを再び使用します。ここでは Math.floor() を使い、その引数として変数 num を入れています。要するに、num の小数点以下を切り捨てたものを、変数 num と再定義していますね。
さてこれで、変数 num は 0~4 のいずれかの整数の値となりました。もちろんランダムに生成されたものになります。
5. $(“li”).addClass(liArray[num]);
liArray[num] の[]内に数字を入れることによって、その配列内の順番にある要素を取り出すことができます。liArray[2] だとしたら、green という要素が取り出され、それが li のクラスとして付け加えられるということですね。
まとめ：Math オブジェクトを使ってランダムな数字を生成する
See the Pen
Untitled by taichi (@taichi_na)
on CodePen.
工夫次第でいろいろなことを可能にしてくれるのが、変数や配列です、今回のように具体的な使用例を数多くこなすことで使い方に慣れていくことができますよ。
