【JavaScript】配列のランダム番目の要素を取得して削除する

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

本記事では、JavaScriptで配列のランダム番目の要素を取得し、取得した要素を削除する方法をご紹介しています。

JavaScriptで配列の要素をランダムに取得して要素を削除したいんだけど、良い方法ないかな?

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

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

配列のランダム番目の要素を取得する

配列からランダム番目にある要素を取得します。配列の長さの範囲内で乱数を生成し、要素を取得します。Mathオブジェクトで配列の長さの範囲内の整数を生成し、配列から要素を取得します。下記では取得したランダム番目の配列の要素をコンソールに出力しています。

JavaScript

//配列を生成する
const array = [123, 'abc', 45, 'd', 'efgh', 6789, 'あいう', 10, 'ijk', 'えお'];
//配列の長さのの範囲内で乱数を生成する
const random = Math.floor(Math.random() * array.length);
//randon番目の配列の要素を取得してログに出力する
console.log(random, array[random]);

実行結果

4, "efgh"

配列から特定の値の要素を削除する(新しい配列を生成する)

配列から特定の値の要素を削除します。実際には削除ではなく特定の値を持つ配列の要素以外の要素で新しい配列を作成します。新しい配列の作成にはfilterメソッドを使用します。filterメソッドは条件に指定したテストに合格した要素で新しい配列を作成する機能を持つメソッドです。

JavaScript

//配列を生成する
const array = [123, 'abc', 45, 'd', 'efgh', 6789, 'あいう', 10, 'ijk', 'えお'];
//4番目の値と等しい要素を除いた新しい配列を生成する
const newArray = array.filter(i => i !== array[4]);
//4番目の配列の要素と新しい配列をログに出力する
console.log(array[4], newArray);

実行結果

"efgh"
[123,"abc",45,"d",6789,"あいう",10,"ijk","えお"]

配列のランダム番目の要素を取得して削除する

前項までの内容をあわせて配列のランダム番目の要素を取得し、取得した要素を削除します。乱数の生成にはMathオブジェクトを使用し、配列の削除(正確には新しい配列を生成する)にはfilterメソッドを使用します。実行結果に動作確認用のデモを用意しましたので、埋め込み右下のreturnをクリックして遊んでみてくださいね。

HTML

<div id="app">
    <p class="num">乱数:</p>
    <p class="old">旧配列:</p>
    <p class="new">新配列:</p>
</div>

JavaScript

//配列を生成する
const array = [123, 'abc', 45, 'd', 'efgh', 6789, 'あいう', 10, 'ijk', 'えお'];
//配列数の範囲で乱数を生成する
const random = Math.floor(Math.random() * array.length);
//random番目の値と等しい要素を削除して新しい配列を生成する
const newArray = array.filter(i => i !== array[random]);

//結果を要素に出力する
document.querySelector('.num').textContent += random;
document.querySelector('.old').textContent += '[' + array.join(', ') + ']';
document.querySelector('.new').textContent += '[' + newArray.join(', ') + ']';

実行結果

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

最後に

配列のメソッドは便利なものが多いので、ドキュメントを眺めるだけでも楽しいですよね。すべてのメソッドやプロパティを覚えるのは難しいですが、よく使うメソッドを頭に入れておくと効率的に配列操作ができるようになります。たまにはArrayに没頭する時間を作るのも良いかもしれませんね。

参考:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

以上、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マスター講座はこちら