deve.K

エンジニアが未来を切り開く。

React JSXでのループ処理 基礎

reactでループ処理の方法

初学者向けのReactでのループ解説となっております

if / elseの条件分岐のように、JavaScriptまたはTypeScriptロジックでループを実行する場合、特別なルールについて気にする必要はありません。

これはいつものような単なるJSループであり、すべてのタイプのループを使用できます、もちろんすべてのループがすべての場合に適しているわけではありませんが、ほとんどが可能です。

反復法を使用し要素をレンダリングします。

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

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

それらを行うために、すべてのReactアプリケーションで頻繁に使用される一般的なJavaScriptパターンといくつかのメソッドを紹介します。

React JSXでループする

ReactJSX要素内でループする方法を学びましょう。

コンポーネントループは、一部のJSXと組み合わされた通常のJavaScriptループです。

JSXの優れた機能は、配列をDOMに直接出力できることです。

多くの場合ではUIにレンダリングする必要のある大量のデータ配列を処理しています。

ループまたは反復を使用することで、このタスクをはるかに簡単にすることができますが、開発者は何を反復するかを決定するときに混乱することがよくあります。

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

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

for-loop(ほとんどの場合)、for-of、map構文などのループを使用し、要素を反復処理することは非常に一般的となっています。

forではコードのブロックを何度もループします

for...ofは反復可能なオブジェクトまたは配列の値を返します。

これらは、個別の関数を使用しコンポーネントの一部をレンダリングする場合に役立ち、パフォーマンスを向上させるための最良の方法となっております。

下記ではfor...ofによる配列の値をループさせる例となります。

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は値に直接アクセスして出力をレンダリングします。

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

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

それは可能です、JSX内部で任意のコードを実行できます。

ただし、JSXがレンダリングされるたびに新しい関数がインスタンス化されるため、使用することは推奨できません。

パフォーマンスの最適化の為ということです。

JSX内部でforおよびfor...ofループを実行するには、コールバックアプローチを用いる必要があります。

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およびすべての宣言のコードは、このmyCallback()関数内でコールバック関数として実行されます。

これはAppコンポーネントレンダリングされるたびに、新しい無名コールバック関数として作成されます。

しかしこの手法は推奨しませんが、正常に実行し動作されます。

マップ関数

ES6のmap()で導入された関数は、JSXでループするための唯一の推奨とされる方法であり最も人気があり簡単なものなので、よく使用されます。

map関数の使用確立は99%です。

つまりマップ関数は、ループプロセスが大幅に簡素化され、単純なforループまたはforEach関数を使用する必要がなくなります。

Reactのドキュメントでは単純さだけでなく、既存のデータを変更/上書きしようとするのではなく、データから新しい配列を作成するために、map関数の使用を強く推奨しています。

DOMでアイテムのリストをレンダリングする必要がある単純なユースケースの例で覚えましょう。

次のデータを含む配列を作成します。

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

.mapメソッドで配列をループし、テンプレートリテラル{}を使用して各オブジェクト要素にアクセス可能です。

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

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

キーを使用しない場合コンソールにエラーが表示されます。

『Warning: Each child in a list should have a unique "key" prop.』

リストには一意の"キー"プロップが必要と警告されます。

一意の要素を識別できるようにidにするのが一般的な規則となっております。

つまりmap関数内でレンダリングするHTML要素にkey属性を指定してあげます。

Reactではキーが必ず必要という事を忘れないように気をつけて下さい。

値が変更された場合、その値はDOMにレンダリングされて更新されるだけなので、DOM操作での反応が非常に速くなります。

ですのでliタグに属性を追加させ、そのキーの値を指定します。

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ループのキーでは、変更、追加、または削除されたアイテムを識別するのに役立ちます。

ループ内の親要素に一意のキーを指定して、要素またはコンポーネントに安定したIDを与えることが重要となります。

map関数をJSX内部で定義する方法は下記となります。

const App = () => {

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

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


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

その場合は、Object.keys(objectName)メソッドを使用する必要があります。

オブジェクトのすべてのキーの値を含む配列を作成できます。

キーの値をループし、map下記に示す値を取得が可能となります。

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

map()は新しい配列を返します。

したがって、map関数内のreturnメソッドreturn([配列])にパラメーターを送信するときは、配列を返すために使用されます。

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

forEachループ

array.forEach()メソッドを使用して同じことを行うことも可能となります。

このメソッドは、forループやmapメソッドと比較して最も低速であり、マップ関数のように値を返さないため使用するには特別なケースが必要です。

先程と同じように配列を定義します。



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.


マップ関数と同じように機能します。

コンポーネントが大きくなるにつれて、UIからコードをセグメント化するとコンポーネントがよりクリーンでモジュール化され、読みやすくなるのでデバッグが容易となります。

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

通常、コンポーネントの状態内に格納するバックエンド(サーバー)からデータを取得し、それをループしてそのデータをページに出力します。

useStateオブジェクトの配列を保持するための単純な状態変数をインポートして作成し、useEffectフックでAPIを呼び出します。

その方法は以前に記事にしましたのでそちらを参考に下さい。

dev-k.hatenablog.com

内容は、APIを呼び出しfetchでデータを取得しそれをマップ関数でループしレンダリングさせブラウザに表示させる記事となっております。

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

結局のところ、それはすべて通常のJavaScriptです,動的データを含むHTML要素をグループ化できます。

これは通常、DOMクエリなしの純粋なJavaScriptアプリでは実行は不可能となります。

コンポーネントループを使用して、アイテムのセットをクリーンで効率的かつ読みやすい方法で出力する必要があります。

React JSXでのループの基本、キーの仕組み、およびループ可能な要素に一意のキーを追加する方法について説明しました。

本日は以上となります。

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

プライバシーポリシー