JavaScriptで文字列や画像をランダムに表示する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで文字列や画像をランダムに表示する方法について現役エンジニアが解説しています。ランダムに画像を表示するには、Mathクラスのメソッドを使います。配列の要素数をlengthで取得し、randomメソッドで範囲内の数値に変換してfloorメソッドで整数に直すものです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptで文字列や画像をランダムに表示する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで文字列や画像をランダムに表示する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

Math.randomメソッドとは

0以上1未満の疑似ランダムな浮動小数点による小数を返すメソッドです。

例えば、0.12・・のような小数は、0から1の間のどこかでランダムに返ってきます。

また、このメソッドを使うことでランダムな処理を実装可能です。

画像やメッセージがランダムに表示されるようなサイトを作りたい場合に使用します。

 

Math.floorメソッドとは

引数で与えられた数以下の最大の整数を返すメソッドです。

引数に5.1を与えれば、5.1以下の最大の整数である「5」が返ってきます。

お金の計算などで小数以下を切り捨てたい場合やテストの平均点などで、小数点何位以下を切り捨てたい場合などに使用します。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

JavaScriptで文字列をランダムに表示する方法

上記の2つで紹介したrandomとfloorを組み合わせることで簡単に実現できます。

コードをみてみましょう。

const messages = ['あああ','いいい','ううう'];

const messageNo = Math.floor( Math.random() * messages.length);
console.log(messages[messageNo]);

 

解説

3つのメッセージをランダムにコンソールに表示する処理です。

まず「const messages = [‘あああ’,’いいい’,’ううう’];」にて、messagesという変数に3つのメッセージを格納して配列にしています。

「const messageNo = Math.floor( Math.random() * messages.length);」では、最終的にmessageNoに0-2の値がランダムに格納されます。

ひとつづずつ見ると、Math.random()で0.12・・のような小数がランダムに取得されている状態です。

 

次に、その数値にメッセージの配列の数(今回は3)を、取得したランダムな整数にかけることで0以上3未満の数にします。

そして、0以上3未満の数(例えば0.0001・・や2.9999999・・)に対して、floorを使用し整数にすることで0-2の数にできました。

 

JavaScriptで画像をランダムに表示する方法

ランダムな処理の流れは文字列のときと同じです。

違いは2つあります。

  • メッセージの配列を文字列から画像名(画像パス含む)に変更
  • 表示場所をコンソールからブラウザ画面のdivタグの中に変更

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <img src="【画像パス】" id='imageArea'>
</body>
</html>

 

JavaScript

const imageArea = document.getElementById('imageArea');
const images = ['【画像パス1】', '【画像パス2】', '【画像パス3】'];

const imageNo = Math.floor( Math.random() * images.length)
imageArea.src = images[imageNo];

 

解説

HTMLでは画像表示をしているimgタグにidとして「imageArea」という名前をつけています。

JavaScriptでは画像表示用のimageAreaを取得し、「imageArea.src = 」にて画像のパスを変更しました。

そして、ランダムな数を画像パスの配列の要素に指定しています。

 

執筆してくれたメンター

横山茂雄(よこやましげお)

フリーエンジニアとして活動中。

サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。

TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

JavaScriptで文字列や画像をランダムに表示する方法についてよくわかりました!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。