React - 配列

配列

定義

• 同じデータ型のデータをまとめて管理する方式のデータ構造

• JavaScriptではconstやletを使用して配列を作成できる- JavaScriptでは他の言語とは異なり、様々なデータ型のデータを一緒に使用できる

使用方法

• letやconstキーワードを使用し、角括弧内にカンマ(,)を用いて配列を生成可能

• 使用例

配列へのアクセス

1. for文

- 他の言語と同様に、初期値、条件式、増減値の組み合わせで使用可能である

  ただし、JSX内の中括弧内では使用できないため、関数などを利用する必要がある。

react const arr = [1,2,3]; const arrLoop = () => { const newArr = [];
    for(let idx=0; idx<arr.length; idx++){ newArr.push(<h2 key={idx}> {arr[idx]} </h2>); } return newArr; }

return <> { arrLoop() } </> }

2. map()関数

• 既存の配列を新しい配列に変換する役割を担う

• array.map(callback, [arg]) の方法で使用される

| パラメータ名 | 説明 | | -------------- | -------------------------------------- | | callback | 新しい配列の要素を生成する関数 | | currentValue | 現在処理中の値 | | index | 現在処理中のインデックスの値 | | array | 現在処理中の元の配列 | | arg**(オプション)** | callBack関数内で使用する参照 |

例

react const arr = [1,2,3];const sqrdArr = arr.map(x => x * x);console.log(sqrdArr); //[1, 4, 9]

• このサンプルコードで使用されるkeyは、コンポーネント配列をレンダリングする際にどのような変化が生じたかを確認するために使用される

  • 注意) キー値は常に一意である必要があるため、idのように固有値をキー値として設定する必要がある

参考資料

Reactを扱う技術

[2022.07.04] React JSX 繰り返し文