Reactで配列のループを逆順にする方法【JavaScript】

本記事の目次

ReactとJavaScriptの配列ループの基本
逆順のループを実装する方法
まとめ

ReactとJavaScriptの配列ループの基本

Reactを用いたWebフロントエンド開発において、データは多くの場合で配列やオブジェクトとして取り扱われます。

配列やオブジェクトをループする方法は、ReactでUIを構築する際によく利用します。

const items = ['りんご', 'みかん', 'ぶどう'];

return (
  <ul>
    {items.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);
// ①りんご、②みかん、③ぶどう　の順番で表示される

このコード例では、配列に格納されたフルーツのリストを表示しています。

Reactで配列をループするときには、多くの場合でmap()メソッドを使用します。

しかし、map()メソッドは配列を順番通りに処理した配列を返すため、配列を逆順でループするには一工夫を加える必要があります。

逆順のループを実装する方法

map()メソッドとreverse()メソッドを併用する

Reactで配列を逆順でループするための一番簡単なのは、map()メソッドでループ処理を行う際にreverse()メソッドを使って配列を逆順にする方法です。

const items = ['りんご', 'みかん', 'ぶどう'];
const reversedItems = [...items].reverse();

return (
  <ul>
    {reversedItems.map((item, index) => (
      <li key={index}>{item}</li>
    ))}
  </ul>
);
// ①ぶどう、②みかん、③りんご　の順番で表示される

一つ注意しなければいけないのが、reverse()メソッドは破壊的メソッドであり、元の配列に変更を加えてしまう点です。

コード例では、スプレッド構文を利用して新たな配列を生成してreverse()メソッドを使うことで、元の配列itemsは変更されないようにしています。

forループを利用して配列のループを逆順にする

プログラムの基本、forループを使って配列のループを逆順にすることも可能です。

const items = ['りんご', 'みかん', 'ぶどう'];
const list = [];

for (let i = items.length - 1; i >= 0; i--) {
  list.push(<li>{item}</li>);
}

return(<ul>{list}</ul>);
// ①ぶどう、②みかん、③りんご　の順番で表示される

Reactでは、JSX内でfor文を使うことができないため、returnの外でforループで処理しています。

reduceRight()メソッドを利用する

JavaScriptのreduceRight()メソッドを利用して、配列のループを逆順にすることもできます。

const items = ['りんご', 'みかん', 'ぶどう'];

const list = items.reduceRight((acc, char) => {
  acc.push(<li>{char}</li>);
  return acc;
}, []);

return(<ul>{list}</ul>);
// ①ぶどう、②みかん、③りんご　の順番で表示される