JavaScriptで文字列配列をシャッフル表示…簡易実装してみた

JavaScriptでこんなことしたい。

文字列などの配列がある
それをシャッフル表示したい
ルーレットみたいな感じで

ちょうど以下動画のような動きです。

意外と簡単に実現できたので、
文字列配列のシャッフル表示を紹介します。

このページの目次

１．ここで用意したHTMLとCSS
２．シャッフル表示するコードを追加
３．緩急をつけてシャッフルしてみる

１．ここで用意したHTMLとCSS

ここでは次のHTML構成を用意しました。

▼ こんなHTML構成

<div class="wrap">
  <div>今日のラッキーカラーは…</div>
  <div id="answer">???</div>
  <div>
    <button id="start">スタート</button>
  </div>
</div>

<div>今日のラッキーカラーは…</div>

<div>

</div>

▼ 装飾用のCSS

/** ラップ要素 **/
.wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}
/** シャッフル表示要素 **/
#answer{
  padding: 12px 0;
  font-size: 28px;
  font-weight: bold;
}
/** 点滅アニメ **/
.blink{
  animation: blinkAnime .5s infinite alternate;
}
@keyframes blinkAnime{
 0%  { transform:scale(1); }
 100%{ transform:scale(1.2); }
}

/** ラップ要素 **/

.wrap{

display: flex;

flex-direction: column;

align-items: center;

}

/** シャッフル表示要素 **/

#answer{

padding: 12px 0;

font-size: 28px;

font-weight: bold;

}

/** 点滅アニメ **/

.blink{

animation: blinkAnime .5s infinite alternate;

}

@keyframes blinkAnime{

0% { transform:scale(1); }

100%{ transform:scale(1.2); }

}

▼ こんなレイアウト

例として上記構成にしました。

動作はシンプルで #start スタートボタンを押したら #answer に文字列がランダムにシャッフル表示され、任意時間後にラッキーカラーが表示される感じです。

ちなみにanimationプロパティは以下参照

MDN Web Docs

animation - CSS: カスケーディングスタイルシート | MDN

https://developer.mozilla.org/ja/docs/Web/CSS/animation

animation は CSS の一括指定プロパティで、スタイルの間のアニメーションを適用します。これは animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state の一括指定です。

https://developer.mozilla.org/ja/docs/Web/CSS/animation

ここまでで下準備ができました。

２．シャッフル表示するコードを追加

ということで肝心のコードについて。

簡易的なシャッフル表示はこうなります。

▼ シャッフル表示のJavaScriptコード例

/// シャッフルさせる文字列配列
const luckyColors = [
  'レッド',
  'オレンジ',
  'イエロー',
  'グリーン',
  'ブルー',
  'インディゴ',
  'パープル'
];
/// シャッフル表示要素
const $answer = document.getElementById('answer');
/// スタートボタン
const $start = document.getElementById('start');

$start.onclick = function(){
  $start.disabled = true;
  const timerId = setInterval(()=>{
    /// ランダムに配列から選んで表示。
    /// 50ミリ秒間隔でシャッフル。
    $answer.textContent = luckyColors[
      Math.floor(Math.random()*luckyColors.length)
    ];
  }, 50);
  setTimeout(()=>{
    /// シャッフル表示停止
    clearInterval(timerId);
    /// 点滅アニメを再生
    $answer.classList.add('blink');
  }, 3000);
}

/// シャッフルさせる文字列配列

const luckyColors = [

'レッド',

'オレンジ',

'イエロー',

'グリーン',

'ブルー',

'インディゴ',

'パープル'

];

/// シャッフル表示要素

const $answer = document.getElementById('answer');

/// スタートボタン

const $start = document.getElementById('start');

$start.onclick = function(){

$start.disabled = true;

const timerId = setInterval(()=>{

/// ランダムに配列から選んで表示。

/// 50ミリ秒間隔でシャッフル。

$answer.textContent = luckyColors[

Math.floor(Math.random()*luckyColors.length)

];

}, 50);

setTimeout(()=>{

/// シャッフル表示停止

clearInterval(timerId);

/// 点滅アニメを再生

$answer.classList.add('blink');

}, 3000);

}

何をしてるかはコメントを参照

やってることは setInterval() を使って50ミリ秒ごとに文字列配列からランダム取り出し ⇒ 要素に表示 ⇒ 3000ミリ秒後にシャッフル停止という流れです。（参考　：　https://developer.mozilla.org/ja/docs/Web/API/setInterval）

あとランダムな整数の生成は以下ページで解説しました。

PisukeCode - Web開発まとめ

JavaScriptで整数のみの乱数を作る方法と注意点

https://pisuke-code.com/js-generate-integer-random

JavaScriptのrandom関数は浮動少数点の乱数を返してきます。なので整数のみの乱数を作ろうとした場合は少しだけ工夫が必要ここではそのテクニックについてコード例と一緒に紹介したいと思います。Math.randomについておさらいまず Math.random は0以上1未満の乱数を発生させるメソッドのこと使い方や乱数の範囲指定、応用テクニックについては次でまとめた通りです。それで任意の範囲の乱数を発生させたい場合、計算が必要です。例えば2以上5未満の範囲で乱数を発生させるなら次の式を書けばOKMath.random() * (5 - 2) + 2;この...

以下のようなシャッフル表示になります。

シャッフル間隔などは調整してください。

３．緩急をつけてシャッフルしてみる

ここからは応用編です。

次のように緩急つけてみます。

最初は高速でシャッフル
徐々にシャッフル速度を落とす
最後に選ばれた文字列を表示

先ほどのコードを少し改変すれば可能です。

▼ このようにコードを改変

/// シャッフルさせる文字列配列
const luckyColors = [
  'レッド',
  'オレンジ',
  'イエロー',
  'グリーン',
  'ブルー',
  'インディゴ',
  'パープル'
];
/// シャッフル表示要素
const $answer = document.getElementById('answer');
/// スタートボタン
const $start = document.getElementById('start');

$start.onclick = function(){
  $start.disabled = true;
  shuffle(()=>{
    /// ランダムに配列から選んで表示。
    $answer.textContent = luckyColors[
      Math.floor(Math.random()*luckyColors.length)
    ]
  }, 1, 500);
  /// 緩急つけてシャッフル表示させる関数。
  /// @callback UI更新用の関数
  /// @weight シャッフル間隔の重さ
  /// @threshold シャッフル停止の閾値
  function shuffle(callback,weight=1,threshold=500){
    setTimeout(()=>{
      callback();
      if(++weight*20 < threshold){
        /// 次のシャッフル実行
        shuffle(callback,weight,threshold);
      }else{
        /// 点滅アニメを再生
        $answer.classList.add('blink');
      }
    }, weight*20);
  }
}

/// シャッフルさせる文字列配列

const luckyColors = [

'レッド',

'オレンジ',

'イエロー',

'グリーン',

'ブルー',

'インディゴ',

'パープル'

];

/// シャッフル表示要素

const $answer = document.getElementById('answer');

/// スタートボタン

const $start = document.getElementById('start');

$start.onclick = function(){

$start.disabled = true;

shuffle(()=>{

/// ランダムに配列から選んで表示。

$answer.textContent = luckyColors[

Math.floor(Math.random()*luckyColors.length)

]

}, 1, 500);

/// 緩急つけてシャッフル表示させる関数。

/// @callback UI更新用の関数

/// @weight シャッフル間隔の重さ

/// @threshold シャッフル停止の閾値

function shuffle(callback,weight=1,threshold=500){

setTimeout(()=>{

callback();

if(++weight*20 < threshold){

/// 次のシャッフル実行

shuffle(callback,weight,threshold);

}else{

/// 点滅アニメを再生

$answer.classList.add('blink');

}

}, weight*20);

}

何をしてるかは（以下略

先ほどと違うのは setTimeout() の中で閾値を超えるまで、再帰的にshuffle関数を呼び出してることです。もちろん再帰を使わなくても実装可能です。

以下動画のようなシャッフル表示になります。

シャッフル方法は各自で工夫してください。

以上、文字列配列のシャッフル表示でした。ではまた

JavaScriptで文字列配列をシャッフル表示…簡易実装してみた

１．ここで用意したHTMLとCSS

２．シャッフル表示するコードを追加

３．緩急をつけてシャッフルしてみる

関連記事

プロフィール

人気記事

検索してみる