React JSXでのループ処理 基礎

この記事では、Reactでのループについて初心者向けに解説します。

JavaScriptやTypeScriptのロジックでループを実行する場合、特別なルールに気を配る必要はありません。

普通のJSループを使えば、様々な種類のループを使用できます。

もちろん、すべてのループがすべての場合に適しているわけではありませんが、ほとんどの場合には可能です。

Reactでは、主にES2015で導入された最新のJavaScript機能を使用しています。

これらの機能を活用するために、Reactアプリケーションでよく使われる一般的なJavaScriptパターンやメソッドを紹介します。

例えば、配列から商品のリスト全体をレンダリングする場合、反復処理を使用して実現できます。

これらのポイントを詳しく説明します。

React JSXでループする

Reactにおいて、JSX内部および外部でループする方法について学びましょう。

Reactでは、JSX式をUIに挿入することができますが、JSXの配列を挿入することもできます。

つまり、データを反復処理するときに、最終的には配列を生成することです。

通常、反復処理は、「for」、「for...of」、または「map」構文を使用して要素を反復処理することが一般的です。

以下に、それぞれの方法について解説します。

for...ofループを使用する

「for...of」ループを使用することで、反復可能なオブジェクトまたは配列の要素を反復処理し、React要素に変換して配列に格納することができます。

例えば、以下のようにコードを記述することができます。

const App = () => {

  const products = ['list 1', 'list 2', 'list 3'];

  const list = []

  for (const [i, product] of products.entries()) {
    list.push(<li>{product}</li>)
  }

  return (
    <div>
      { list }
    </div>
  )
}

See the Pen React for…of 配列ループ by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

上記の例では、「for...of」ループを使用して、products配列の要素を反復処理しています。

そして、listという配列にReact要素を追加しています。

配列に1つ以上の値を挿入するには、arr.push()メソッドを使用します。

最後に、list配列を含む<ul>要素を返しています。

Reactでアイテムのリストを表示させるための便利な方法ですが、結果を保持する新しい変数を定義してから、その出力された結果を表示するなどの不要な手順を必要とします。

forループを使用する

「for」ループを使用することで、配列の要素をループ処理し、要素をReact要素に変換して配列に格納することができます。

例えば、以下のようにコードを記述することができます。

const App = () => {

const  products = () => {
    const number = [];
    for (let i = 0; i < 5; i++) {
      number.push(<p key={i}>{i}</p>);
    }
    return number;
  };

  return(
    <div>
    {
        products()
     }

    </div>
  )
}

See the Pen React for…of 配列ループ by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

上記の例では、配列の entries()メソッドを使用して、インデックスと値を反復処理しています。

そして、 listという配列にReact要素を追加しています。

最後に、 list配列を含む <ul>要素を返しています。

Reactでは、 「key」プロパティを使用して、反復処理の各要素に一意の識別子を割り当てる必要があります。

これにより、Reactが要素の変更を正しく追跡できます。

これらをJSX内部で実行したいですか？

ReactのJSX内部で、任意のコードを実行することは可能です。

ただし、JSXはレンダリングされるたびに新しい関数がインスタンス化されるため、パフォーマンスの観点から、この方法は推奨されません。

特に、「for」ループや「for...of」ループをJSX内部で実行する場合には、コールバックアプローチを用いる必要があります。

以下は、このアプローチを用いたサンプルコードです。

const App = () => {
  const products = ["list 1", "list 2", "list 3"];

  const myCallback = (run) => {
    return run();
  };

  return (
    <div>
      {myCallback(() => {
        const list = [];
        for (const [i, product] of products.entries()) {
          list.push(<li>{product}</li>);
        }
        return list;
      })}
    </div>
  );
};

See the Pen React for…of 配列ループ by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

このコードは、myCallback()という関数が中括弧{}内でコールバック関数を呼び出すことで、「for」ループを含むコードを実行しています。

中括弧{ }は、式を実行するために使用されます。

ただし、中括弧内には、変数宣言や複雑なコードは含められないため、コールバックアプローチを活用する必要があります。

Reactでは、「for」ループの代わりに、できるだけ「map」関数を使用することが推奨されます。

ただし、この方法も動作するため、必要に応じて使用することができます。

マップ関数

Reactにおいて、JSXでループするための最も推奨される方法は、ES6で導入された「map()」関数です。

「map()」関数は、簡単で人気があり、ループプロセスを大幅に簡素化するため、Reactのドキュメントでも強く推奨されています。

例えば、単純なユースケースであるリストアイテムをレンダリングする場合、まずデータの配列を作成します。

const items = ['Item 1','Item 2','Item 3','Item 4','Item 5'];

次に、「map()」メソッドを使用して配列をループし、各要素にアクセスします。

Reactでは、一意の「key値」を使用して、各レンダリングのリストに変更があるかどうかを識別します。

const itemList = items.map((item,index)=>{
return <li key={index}>{item}</li>
})

そして単一の配列をレンダリングし表示します。

const App = () => {
const items = ['Item 1','Item 2','Item 3','Item 4','Item 5'];

const itemList = items.map((item,index)=>{
return <li key={index}>{item}</li>
})
return(
<div>
<h1>simple list.</h1>
<ul>
{itemList}
</ul>

</div>

)

}

See the Pen React map構文 by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

Reactループの「key」は、変更、追加、または削除されたアイテムを識別するために使用されます。

したがって、「key」属性をループ内の要素に指定する必要があります。

また、Reactループの「key」では、親要素に一意の「key」を指定することも重要です。

これにより、要素またはコンポーネントに安定したIDが与えられ、パフォーマンスの改善につながります。

JSX内部でmap関数を定義する方法は以下の通りです。

const App = () => {

const fruits = ['Apple', 'Banana', 'Orange']
return (
<div>
{fruits.map((lists, index) => (
<li key={index}>
{lists}
</li>
))}
</div>
 );
}

See the Pen React オブジェクトループ by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

注意点として、Reactループで「key」を指定することが必須であること、そして「key値」は一意であることを忘れないようにしてください。

また、配列ではなく、オブジェクトをループさせたい場合です。

Reactでオブジェクトをループ処理するには、Object.keys(objectName)メソッドを使用します。

このメソッドにより、オブジェクトのすべての「key」を含む配列が作成されます。

「key」の値をループし、それぞれの「key」に対応するvalueを取得することができます。

以下は、その方法を示す例です。

{Object.keys(person).map((key, index) => (
        <p key={index}>{person[key]}</p>
))}

「map()」は新しい配列を返すので、return()メソッド内には配列を返すことができます。

したがって、上記の例では、「map()」を使用してオブジェクトのすべての「key」に対してループ処理を行い、各「key」に対応するvalueを表示しています。

See the Pen React オブジェクトループ by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

このようにして、Reactでオブジェクトをループ処理することができます。

forEachループ

Reactで配列をループ処理する場合、「map()」メソッドだけでなく、「forEach()」メソッドを使用することもできます。

「forEach()」メソッドは、「map()」メソッドと比較して最も低速であり、値を返さないため、特定の場合にしか使用できません。

以下は、「forEach()」メソッドを使用して、配列内の各アイテムをリストに表示する方法の例です。

const App = () => {
const items = ['Item 1','Item 2','Item 3','Item 4','Item 5'];

const itemList = [];

items.forEach((item,index)=>{
itemList.push( <li key={index}>{item}</li>)
})
return(
<div>

 <h1>simple list</h1>
<ul> 
{itemList}
</ul>
</div>
)

}

See the Pen React forEachループ by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

「forEach()」メソッドは、各アイテムに対してコールバック関数を実行し、配列を変更することができます。

上記の例では、「forEach()」メソッドを使用して、各アイテムをリストアイテムに変換して、itemList配列にプッシュしています。

Reactコンポーネントをセグメント化すると、大規模なアプリケーションでもコンポーネントをクリーンでモジュール化された形で維持することができます。

これにより、アプリケーションの可読性が向上し、デバッグがより容易になります。

Reactループ処理での注意点

Reactにおいて、ループで「push」メソッドを使用することは可能ですが、注意すべき点があります。

「push」メソッドは配列の末尾に要素を追加するためのメソッドであり、新しい配列を作成するわけではありません。

Reactでは、状態の変更を行う場合には、元の状態オブジェクトを変更せずに新しい状態オブジェクトを作成することが推奨されています。

そのため、「push」メソッドを使用して状態の変更を行うことは推奨されておらず、代わりにuseStateフックを使用して状態を管理し、スプレッド演算子（...）を使用して元の配列と新しいアイテムを含む新しい配列を作成し、「map」関数を使用して配列の各要素をループして、それをリストのアイテムとして表示することが推奨されます。

例えば、以下のように記述することができます。

import { useState } from 'react';

function App() {
  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

  const addItem = () => {
    const newItem = 'New Item';
    setItems([...items, newItem]);
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}

上記の例では、useStateフックを使用してitems配列の初期値を設定し、addItem関数を定義して、新しいアイテムを含む配列を作成してsetItems関数を使用して状態を更新しています。

また、スプレッド演算子（...）を使用して元の配列と新しいアイテムを含む新しい配列を作成し、「map」関数を使用して配列の各要素をループしてリストのアイテムとして表示しています。

クラスコンポーネントの場合でも、配列に新しい要素を追加する場合は、配列の「push」メソッドを使用してはいけません。

なぜなら、「push」メソッドは元の配列を変更し、Reactでは状態を変更する場合には、元の状態オブジェクトを変更せずに新しい状態オブジェクトを作成することが推奨されているためです。

代わりに、新しい配列を作成し、それを状態として設定することが推奨されます。

新しい配列を作成する方法には、配列の「concat」メソッドを使用する方法と、スプレッド演算子(...)を使用する方法があります。

例えば、「concat」メソッドを使用する場合は、下記のようになります。

//クラスコンポーネント

this.setState(prevState => ({
  items: prevState.items.concat(newItem)
}));

上記の例では、prevState.itemsにnewItemを追加した新しい配列を作成し、setStateメソッドを使用して、新しい配列をitemsプロパティに設定しています。

「concat」メソッドは、引数に渡された配列を元の配列に結合した新しい配列を返します。

また、スプレッド演算子（...）を使用する場合は、以下のようになります。

//クラスコンポーネント

this.setState(prevState => ({
  items: [...prevState.items, newItem]
}));

上記の例では、元の配列prevState.itemsをスプレッド演算子（...）で展開して、新しい配列を作成し、その後にnewItemを追加しています。

最終的に、setStateメソッドを使用して、新しい配列をitemsプロパティに設定しています。

どちらの方法を使用しても、元の配列を変更することなく、新しい配列を作成することができます。

Reactでは、配列の要素を変更する場合には、常に新しい配列を作成して状態を更新することが推奨されています。

動的データのレンダリングの場合

Reactにおいて、コンポーネント内に保持される状態変数を使って、バックエンド(サーバー)から取得したデータをループしてページに出力することが一般的な開発方法となっています。

この方法では、useStateフックを使って単純な配列を状態変数として宣言し、useEffectフックを使ってAPIを呼び出します。

過去に公開された記事では、「fetch」を使ってAPIからデータを取得し、それをマップ関数を用いてループしてレンダリングしてブラウザに表示する方法を紹介しています。

dev-k.hatenablog.com

このように、コンポーネントループを使ってデータを出力および操作することが、Reactにおいて一般的な開発方法となっています。

最後に

結論から言うと、React JSXを使ってループを行う場合、一意のキーを追加する必要があります。

これにより、動的データを含むHTML要素をグループ化し、コンポーネントループを使用して、効率的かつ読みやすい方法でアイテムのセットを出力できます。

通常のJavaScriptでDOMクエリを使用しない場合、純粋なJavaScriptアプリではこの処理を行うことはできません。

React JSXを使ってループを行う場合、キーの仕組みを理解することが重要です。

また、ループ可能な要素には「一意のキー」を追加する必要があります。

最後まで読んでいただきありがとうございます。

この記事が役に立った場合は、ブックマークして他の人にも共有していただけると幸いです。

また、共有される際は間違いや誤解を生む可能性のある箇所があれば、正しいデータを元に修正してください。