deve.K

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

English

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-in、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>
  )
}

マップ関数

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

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

それではforループ、forEach、mapの間にはいくつかの違いがありますが、ここではそれらについては深掘り説明しません。

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にするのが一般的な規則となっております。

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

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

ですのでそのキーの値を追加させます。

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

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

const App = () => {

return(
<div>
<h1>simple list.</h1>
<ul>
{itemList}
</ul>

</div>

)

}

Reactループのキーでは、変更、追加、または削除されたアイテムを識別するのに役立ちます。

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

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

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

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

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

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

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

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

forEachループ

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

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

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

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>)
})

const App = () => {
return(
<div>

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

}

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

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

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

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

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

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

dev-k.hatenablog.com

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

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

結局のところ、それはすべて通常のJavaScriptです!

動的データを含むHTML要素をグループ化できます。

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

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

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

本日は以上となります。

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

プライバシーポリシー