【JavaScript】要素の文字列を取得してランダムに並び替える

こんにちは、ryohei(@ityryohei)です!

本記事では、JavaScriptで要素の文字列をランダムに並び替える方法をご紹介しています。

JavaScriptで要素の文字列を取得してランダムに並び替えたいな。良い方法ないかな?

上記の疑問にお答えします。

では、解説していきます。

文字列を並び替えるフロー

本記事では下記の流れで文字列の並び替えを実装します。

  • 要素を取得する
  • 要素のテキストを取得する
  • テキストを一文字ずつに分割した配列を生成する
  • 配列をランダムに並び替えて文字列に変換する
  • 並び替えした文字列を要素のテキストに設定する

要素を取得する

まずは要素の作成~取得まで。ドキュメントにp要素を作成し、並び替えるテキストを持たせておきます。要素の取得にはquerySelectorを使用しています。idclassは環境に合わせてご変更ください。

HTML

<p class="str">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

JavaScript

const str = document.querySelector('.str');

要素のテキストを取得する

取得した要素が持っているテキストを取得します。テキストの取得にはtextContentを使用します。

HTML

<p class="str">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

JavaScript

const str = document.querySelector('.str');
const text = str.textContent;

テキストを一文字ずつ分割して配列にする

テキストを一文字ずつ分割して配列を生成します。文字列→配列にはsplit()を使用します。split()は文字列を任意の位置で分割して配列にするメソッドで、引数に文字列の分割位置を指定することができます。空文字を指定した場合は一文字ずつの分割になります。

HTML

<p class="str">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

JavaScript

const str = document.querySelector('.str');
const strArray = str.textContent.split('');

配列をランダムに並び替えて文字列に変換する

文字列を一文字ずつに分割して生成した配列をsort()で並び替え、join()で文字列に変換します。sort()内で実行している式でランダムな数字を生成しています。

HTML

<p class="str">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

JavaScript

const str = document.querySelector('.str');
const strArray = str.textContent.split('');

str.textContent = strArray.sort(function(){
    return Math.random()-0.5;
}).join('');

生成される乱数は下記のような値です。0.5を減算することで正負の乱数が生成されます。

0.019255514678734986
0.4413861870321423
-0.018584328268099526
0.3093866255970321

ここまでの内容を実装したものが下記の実行結果です。初回読み込み時に文字列がランダムに並び替えられた状態で表示されます。

実行結果

See the Pen 7417 by ryohei (@intotheprogram) on CodePen.

要素の文字列の並び替えができていますね。

最後に

文字列の並び替え方法には多様な実装例があると思いますが、Stack Overflowを眺めた感じだと、個人的には本記事でご紹介した並び替え方法が使いやすくて良かったです。ただ今後制作を続けていく中で他に良い方法が見つかるかもしれないので、その場合は本記事に追記して共有できればと思います。

以上、JavaScriptで要素の文字列を取得してランダムに並び替える方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

Adobe Creative Cloudのコンプリートプランを特別価格で手に入れよう!

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍