Zenn
🍣

初心者にわかりやすくポケモンで学ぶ繰り返し処理

2024/01/19に公開
React
tech

配列をリスト化する繰り返し処理

基本的な考え方

React で配列のデータをリストとして表示する場合、通常はmap関数を使います。
この関数は配列の各要素を取り出して、それぞれ対して特定の処理を行い、その結果を新しい配列として返します。

map関数の基本形

  • 基本形
const newArray = array.map(function(element, index, array) {
  // ここに変換のロジックを書く
});

array: 元の配列。
newArray: 新しい配列。元の配列の各要素に何らかの操作を行い、その結果がここに格納されます。
function: map メソッドに渡されるコールバック関数。この関数は配列の各要素に対して実行されます。
element: 現在処理中の配列の要素。
index (オプション): 現在処理中の要素のインデックス。
array (オプション): 処理中の元の配列。

  • アロー関数の場合
const newArray = array.map((element, index, array) => {
  // ここに変換のロジックを書く
});

アロー関数は、ES6（ECMAScript 6）で導入された構文で、従来の関数表現の短縮形です。
アロー関数は無名関数（名前のない関数）です。

コードの流れの説明

1.配列の準備

まず、表示したいデータの配列を用意します。
例えば、ポケモンの名前が入った配列です。

const pokemons = [
  "ピカチュウ",
  "イーブイ",
  "チャリザード",
  "フシギバナ",
  "カメックス",
];

2.map関数の私用

次に、上記の配列にmap関数を適用します。
map関数は、配列の各要素に対して実行されるコールバック関数を引数として受け取ります。
このコールバック関数内で、どのように各要素を表示するかを定義します。

const pokemonWithIndex = pokemons.map((name, index) => {
  return `番号 ${index + 1}: ${name}`;
});

ここでは、各ポケモンの名前に番号を付けています。
map関数は新しい配列を返し、この配列には番号がつけられたポケモンの名前が含まれます。

3.リストのレンダリング

最後に、map関数によって生成された新しい配列を使って、画面上にリストをレンダリングします。
これは、通常 JSX/TSX 内で行われます。

return (
  <div>
    <h1>ポケモンリスト</h1>
    <ul>
      {pokemonWithIndex.map((pokemon) => (
        <li key={pokemon}>{pokemon}</li>
      ))}
    </ul>
  </div>
);

画面を確認

1~3 をまとめると、以下のように画面に表示されます。

まとめ

このプロセスを通じて、React では配列のデータを簡単にリスト形式で表示できることがわかります。
map 関数は配列の各要素を一つ一つ取り出し、それらを新しい形（この場合は番号付きのリストアイテム）に変換し、最終的にはこれらの要素を画面上に表示します。

おまけ

()と{}の違い

アロー関数の=>の後ろが()のときと{}の時の違いです。
() と {}は、JavaScript および JSX で異なる目的を持っています。

()

丸括弧は、複数行に渡る式を一つの式としてグループ化するために使われます。
React の JSX において、複数行の JSX を返す際によく使われます。
アロー関数で () を使用すると、式の結果が直接返されます。

{}

波括弧は、JavaScript においてブロックを定義するために使用されます。
アロー関数で {} を使用する場合、関数の本体を定義していることになり、return ステートメントを使って値を返す必要があります。

今回の場合

今回のコードでは、map関数内で () を使用しています。
この形式では、アロー関数が () 内の式の結果を自動的に返します。
なので、returnステートメントは必要ありません。

{
  pokemonWithIndex.map((pokemon) => <li key={pokemon}>{pokemon}</li>);
}

仮に、map関数内で {} を使用しています。
ブロック内のコードが値を返すことを明示的に示す必要があることを意味します。
なので、returnステートメントが必要になります。

{
  pokemonWithIndex.map((pokemon) => {
    return <li key={pokemon}>{pokemon}</li>;
  });
}

Discussion