【JavaScript】配列を逆順にできるreverseメソッドについて解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事では、 JavaScriptで配列を逆順にできるreverseメソッドについて

reverseメソッドとは
reverseメソッドを使ったサンプルプログラム

と、丁寧に解説していきます。

前提条件：実行環境について
reverseメソッドとは
reverseメソッドを解説するプログラムの概要
1. HTMLサンプルプログラム
2. JavaScriptサンプルプログラム
実行結果
まとめ：reverseメソッドを使ってみよう

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows10

reverseメソッドとは

reverseメソッドとは、呼び出した配列を逆順にするメソッドです。

使い方サンプルは以下です。

var sample = ['aa', 'bb', 'cc']
sample.reverse()

1 2	var sample = ['aa', 'bb', 'cc'] sample.reverse()

実行後配列sampleは

['cc', 'bb', 'aa']

1	['cc', 'bb', 'aa']

という配列になっています。

では、次の章で実際に使ってみます。

reverseメソッドを解説するプログラムの概要

reverseメソッドを解説するプログラムでは、

HTML
JavaScript

の2ファイルを使います。

reverseメソッドの実行後で配列が逆順になっているかを確認します。

フォルダ構成は以下のようになっています。
reverseメソッドを解説するフォルダ構成

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>reverseメソッドサンプル</title>
    </head>
    <body>
        <h2>reverseメソッド実行前の配列</h2>
        <div id="reverseArryBefore"></div>
        <h2>reverseメソッド実行後後の配列</h2>
        <div id="reverseArryAfter"></div>
        <script src="js\sample_javascript.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>reverseメソッドサンプル</title>

</head>

<body>

<h2>reverseメソッド実行前の配列</h2>

<h2>reverseメソッド実行後後の配列</h2>

</body>

</html>

HTMLで外部のJavaScriptを読み込むやり方は、以下の記事をご参考ください。

HTMLで外部のJavaScriptを読み込むやり方を解説します

JavaScriptサンプルプログラム

var vegetable = ['キャベツ', 'レタス', 'トマト', 'キュウリ', 'ピーマン', 'パプリカ']

// 逆順前の状態を表示
var reverseArryBefore = document.getElementById('reverseArryBefore')
reverseArryBefore.innerHTML = vegetable

// 逆順実施
vegetable.reverse()

// 逆順後の状態を表示
var reverseArryAfter = document.getElementById('reverseArryAfter')
reverseArryAfter.innerHTML = vegetable

var vegetable = ['キャベツ', 'レタス', 'トマト', 'キュウリ', 'ピーマン', 'パプリカ']

// 逆順前の状態を表示

var reverseArryBefore = document.getElementById('reverseArryBefore')

reverseArryBefore.innerHTML = vegetable

// 逆順実施

vegetable.reverse()

// 逆順後の状態を表示

var reverseArryAfter = document.getElementById('reverseArryAfter')

reverseArryAfter.innerHTML = vegetable

getElementByIdメソッド
innerHTMLプロパティ

については、こちらの記事をご参考ください。

getElementByIdメソッド
【JavaScript】指定したidの要素を取得するgetElementByIdメソッドについて解説します

innerHTMLプロパティ
【JavaScript】HTML要素の取得や書き換えができるinnerHTMLプロパティを解説します

実行結果

作成したHTMLをブラウザで開きます。

JavaScriptのreverseメソッドを解説

配列が逆順になったことが確認できました。

まとめ：reverseメソッドを使ってみよう

以上がJavaScriptのreverseメソッドについての解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ