hiromiyablog
hiromiyablog  > プログラミング >  JavaScriptで何パーセントの確率で特定の要素を変化させる実装方法

JavaScriptで何パーセントの確率で特定の要素を変化させる実装方法

「JavaScriptで何パーセントの確率で特定の要素を変化させる実装方法」の画像です。

今回はWEBサイトでたまに見かける特定の確率でページ内の要素が変化して特別感的なページを作成したりする際に使用したりする、「JavaScriptで何パーセントの確率で特定の要素を変化させる実装方法」を備忘録も兼ねて簡単にまとめました。

例えば50%の確率で特定の色やデザインに変化させてユーザーに特別感を与えたい時などに実装したりするようなものになります。

bodyにclass付与でページ全体、各要素にclass付与で特定の箇所のみなど使い方次第なので参考にして頂けると幸いです。

簡単な説明になりますが良ければ参考にしてみて頂けたら幸いです！

目次

JavaScriptで何パーセントの確率で特定の要素を変化させる実装方法とは？

まずは土台となるHTMLを記述していきます。

その後、土台（HTML）を記述できたらその土台をもとに通常の状態の表示にしたい見た目をCSSで装飾を指定し、「JavaScriptで何パーセントの確率で特定の要素」に条件を満たした場合にclass付与される「is-switching」に対し、条件を満たした場合（特定の確率で状態・表示などを変化させた後の状態）のCSS装飾を記述していきます。

HTMLを記述していこう

下記のように土台となるHTMLを記述します。

class名やタグの種類などは別のものでも装飾を自身でできる際は大丈夫です！
ただ、class名「js-〇〇〇〇」は最初に「js」と書かれている通り、後から「JavaScript」で使用するのでこちらで変更した際は「JavaScript」側のclass名も同じ箇所を変更するようご注意ください。

classはできるだけ「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名とで分けて使い、分かりやすいように「JavaScript・jQuery」で使うclass名には先頭に「js-」のような感じのclass名をつけた方がいいかと思います！

今回はあくまでどんな感じに作るのかイメージするためのものなので、そのままは使えないと思いますが参考にして頂けると嬉しいです。

「js-randomSwitching」の部分だけが正直今回１番重要なのでこちらのclass名を特定の確率時に変化させたい要素にclassを付与しておくということだけ理解して頂ければ大丈夫な感じです。

<div class="switching">
  <div class="switching__content-box">
    <div class="switching__content js-randomSwitching">
      <div class="switching__content-inner">
        <p class="switching__content-text">確率で切り替え有り</p>
      </div>
    </div>
    <div class="switching__content">
      <div class="switching__content-inner">
        <p class="switching__content-text">確率で切り替え無し</p>
      </div>
    </div>
    <div class="switching__content js-randomSwitching">
      <div class="switching__content-inner">
        <p class="switching__content-text">確率で切り替え有り</p>
      </div>
    </div>
  </div><!-- /.switching__contentBox -->
</div><!-- /.switching -->

CSSで装飾してコンテンツ部分の見た目を作ろう

土台となるHTMLが記述できたら次は土台をもとにCSSで下記のように記述して通常表示時の装飾をし、JavaScriptで何パーセントの確率で特定の要素を変化させる為の「is-switching時（変化時）の切り替え」用の指定を用意していきます。

装飾が正常にできたらデモページと同様の表示になり、特定の確率（デモページですと20%の確率）で「is-switching時（変化時）の切り替え」用の指定した表示に変化するようになります。

/*--------------------
 switching
--------------------*/
.switching__content-box {
  height: 100vh;
}

.switching__content {
  width: 100%;
  height: 33.33%;
}

.switching__content:nth-child(odd) {
  background-color: rgba(32, 47, 85, 0.3);
}

.switching__content-inner {
  display: table;
  width: 100%;
  height: 100%;
}

.switching__content-text {
  display: table-cell;
  font-size: 30px;
  text-align: center;
  vertical-align: middle;
}

/* 切り替え後 */
.switching__content.is-switching {
  color: #ffffff;
  background-color: #202f55;
  transition: all 1s ease 0s;
}

各指定箇所の簡単な説明

簡単に説明しますとまずは下記部分、今回はデモ用の表示の為のものにすぎないので下記については説明は割愛させていただきます。

※今回は「/* 切り替え後 */」の部分が重要になります

/*--------------------
 switching
--------------------*/
.switching__content-box {
  height: 100vh;
}

.switching__content {
  width: 100%;
  height: 33.33%;
}

.switching__content:nth-child(odd) {
  background-color: rgba(32, 47, 85, 0.3);
}

.switching__content-inner {
  display: table;
  width: 100%;
  height: 100%;
}

.switching__content-text {
  display: table-cell;
  font-size: 30px;
  text-align: center;
  vertical-align: middle;
}

そして下記部分が、JavaScriptでHTML側にjs-randomSwitchingのclassが記述されている箇所にclass名is-switchingが追加された時、class名switching__contentの変化後に表示させる為のCSSを指定しておきます。

class名switching__contentの部分は例えばbodyなどでもなんでも大丈夫です。

要は「.変化させたいclass名.is-switching」のように記述して、そこに変化後のCSSを記述すればいいので、特定の確率で変化させたい要素のHTMLに「js-randomSwitching」を記述しておき、そこにclass名is-switchingが追加された時を想定してCSSを記述して用意しておけばいいという感じです。

簡単にはなりますがCSSの各指定箇所の簡単な説明は以上になります。

/* 切り替え後 */
.switching__content.is-switching {
  color: #ffffff;
  background-color: #202f55;
  transition: all 1s ease 0s;
}

JavaScriptを記述して特定の確率でclassが付与される処理を追加しよう

CSSでの装飾で特定の確率で変化させる為の記述をしてもそれだけでは動作しません。

そこでJavaScriptを記述して特定の確率の際に実行したい動作（処理）を追加してclassが特定の要素に付与されるようにし、特定要素を変化させる事ができるよう処理を下記のように記述し、追加していきます。

// random switching
(function () { // 即時実行関数（グローバル汚染対策）
  let i = 0; // for文用変数の定義
  let el = {}; // 配列・変数用（巻き上げ防止の為、冒頭にて宣言）

  document.addEventListener('DOMContentLoaded', function () {
    el.randomSwitching = document.querySelectorAll('.js-randomSwitching'); // 対象セレクタ取得

    // 1～100のランダムな数値を返す
    el.random = Math.floor(Math.random() * 100);

    // ランダムな数値が何（ifの括弧の中の右の数値）以下かを判定する
    if (el.random <= 20) {
      randomSwitchFnc(); // 条件を満たしていればこちらの関数処理を実行する
    } else {
      // 条件を満たしていなければしたい処理はこちらに記述する
    }

    // ランダム切り替え用関数
    function randomSwitchFnc () {
      // 該当要素に切り替え用のclassを付与
      for (i = 0; i < el.randomSwitching.length; ++i) {
        el.randomSwitching[i].classList.add('is-switching');
      }
    };
  }, false);
}());

処理内容の簡単な説明

下記部分はコメントアウトで書いている通り、「対象セレクタ取得」（特定の確率で変化させたい要素）を指定しています。

ここに記述した「js-randomSwitching」に対してclass付与などの処理をするように後の処理で使う為に変数に格納しています。

el.randomSwitching = document.querySelectorAll('.js-randomSwitching'); // 対象セレクタ取得

そして下記部分がコメントアウトに書いている通り、２行目の箇所で「1～100のランダムな数値」を生成し、それを元にその後の５行目以降「if (el.random <= 20) {〜」の部分で先程生成した数値が20以下かを判定し、条件を満たした場合にのみ「対象セレクタ」（特定の確率で変化させたい要素）への処理を予め用意した関数「randomSwitchFnc」を実行させる事によってclassを付与させているという流れになります。

// 1～100のランダムな数値を返す
el.random = Math.floor(Math.random() * 100);

// ランダムな数値が何（ifの括弧の中の右の数値）以下かを判定する
if (el.random <= 20) {
  randomSwitchFnc(); // 条件を満たしていればこちらの関数処理を実行する
} else {
  // 条件を満たしていなければしたい処理はこちらに記述する
}

そして下記部分がコメントアウトに書いている通り、先程予め用意した関数「randomSwitchFnc」を実行させると書きました事前に用意している「ランダム切り替え用関数」の記述になります。

この中身は処理はなんでも構いませんので書き換えれる方は違う処理に書き換えて色々応用して活用いただけると幸いです。

※処理を書き換えた際は関数名もそれに見合った関数名に変更してください

// ランダム切り替え用関数
function randomSwitchFnc () {
  // 該当要素に切り替え用のclassを付与
  for (i = 0; i < el.randomSwitching.length; ++i) {
    el.randomSwitching[i].classList.add('is-switching');
  }
};

補足（おまけ）

今回は「1～100のランダムな数値」での判定ですが、場合によっては小数点も必要になる事がありますのでその際は２行目を下記のような記述に変更する事で小数点第２位までのランダムな数値を取得する事ができますので参考にしていただけると幸いです。

// 小数点第2位までのランダムな数値を返す
el.random = (Math.floor(Math.random() * 100 * 10 ** 2)) / 10 ** 2;

まとめ

今回は「JavaScriptで何パーセントの確率で特定の要素を変化させる実装方法」について簡単にはなりますが、HTML・CSS・JavaScriptでの作り方を説明させていただきました！

「Math.random」などのメソッドもでてきたので、知らなかった方やもっと詳しく知りたいという方は下記の外部サイトが参考になるかなと思いますので参考にしてみてください。

参考サイト

Math.random()

Math.random() - JavaScript | MDN

Math.random() 関数は、 0 以上 1 未満 (0 は含むが、 1 は含まない) の範囲で浮動小数点の擬似乱数を返します。その範囲ではほぼ均一な分布で、ユーザーは範囲の拡大をすることができます。実装側で乱数生成アルゴリズムの初期シードを選択します。ユーザーが初期シードを選択、またはリセットすることは出来ません。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/random

【JavaScript入門】乱数の作り方(範囲指定/重複なし/ランダム文字列) | 侍エンジニアブログ

この記事では「 【JavaScript入門】乱数の作り方(範囲指定/重複なし/ランダム文字列) 」について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決するだけじゃなく、新たな気付きも発見できることでしょう。お悩みの方はぜひご一読ください。

https://www.sejuku.net/blog/22432

JavaScriptの乱数〜Math.random使い方。

〽︎ 確率精度の高い方法で。

https://fuuno.net/web02/random/random.html

デモページ

デモページはこちらになります。

下記は右下の「Rerun」をクリックするとリロードできるので何回か押して頂くと確率（20%）で変化するのが確認できるかと思いますので試してみて頂けると幸いです。

See the Pen 何パーセントの確率でページを変化させる実装方法 by hiroyuki.miyauchi (@hiromiya) on CodePen.

※各言語ボタンを押し下し、ソースコードをLIVE（リアルタイム）で書き換えて表示・実行結果を確認できます。

最後にもう一度ポイントをおさらい

  • 「CSS」で使用するclass名と「JavaScript・jQuery」で使用するclass名は別に分けて使いわけよう
  • HTMLに「js-randomSwitching」が記述されている箇所に変化用のclass名「is-switching」が付与されるようになっているのでこちらのみ理解しておけば後はCSSさえわかれば色々できると思うので活用してみてください！
  • 「Math.random()」メソッドを活用する事でランダムな数値を取得できるので色々応用に使ってみよう
  • 事前に用意している関数内の処理はclass付与でなくてもいいので書き換えて色々試してみよう
  • 小数点第2位までのランダムな数値を取得したい場合は「(Math.floor(Math.random() * 100 * 10 ** 2)) / 10 ** 2;」で取得してみよう

初心者向けで簡単な説明でしたが上記内容も踏まえまして、是非自身でのプログラミングにも役立てて頂けると幸いです。

初心者の方にオススメの学習サービス

閲覧履歴

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


PAGE TOP
  • MENU
  • HOME
  • SEARCH
  • PAGE TOP
  • SIDE BAR