React頻出javascript記法 map()メソッドの覚書

javascriptの記法だけを学習していた時は具体的に使う場面が想像しにくかったのですが、実際のReact開発でもめちゃくちゃ使う！という感覚が強かったmap()について、覚書としてまとめました。

記事の内容としてはざっくり以下３点です。

１　map()の基本的な使い方
２　条件分岐とあわせてmapを回す
３　mapとkeyにまつわるあるあるエラー

１.map()の基本的な使い方　

配列に対して使用するメソッド。配列の全ての要素を呼び出せます。
取り出した要素に対し一定の処理をして新しい配列を作ることができます。

const numArray = [1,2,3,5,7,10,15,32,100]
const numArray10 = numArray.map((num) => {num*10})　 //配列内の数値を全て１０倍にする
  console.log(numArray10)

//出力結果
[10, 20, 30, 50, 70, 100, 150, 320, 1000]

上記であれば{}などを省略して　numArray.map(num => num*10)　も同じ出力結果が得られます。

基本構文はこちらです。map( )の中でアロー関数を使用する書き方をよく使います。

配列名.map(() => {})　　 　　　　　

//配列名.map((引数) => {※実行したい処理})で使用
//配列内の全要素に、実行したい処理を加えて順に出力

シンプルに配列の中身を出力すると下記のようになります。従来のfor文と同じことができます。
(以下、Reactでの使用を想定。バージョンはreact: 17.0.2、react-dom: 17.0.2、react-scripts: 4.0.3）

export default function App() {            //Appは任意の関数名で可
  const numArray = [1, 2, 3, 5, 7, 10, 15, 32, 100];
  return numArray.map((num) => {
    return (
      <>
        <div>　{num}</div>
      </>
    );
  });
}

上記のままだとwarningが表示されるので、３で補足させてください！

２.条件分岐とあわせてmapを回す

下記は数値が10以上の場合は太字、100以上の場合は太字かつ赤文字にしたい場合、
mapの中でスタイルの当て方を条件分岐して出力した例。

const numArray = [1, 2, 3, 5, 7, 10, 15, 32, 100];
const overTenStyle = {                   //数値が10以上の時のスタイルを定義
  fontWeight: "bold"
};
const overHundredStyle = {               //数値が100以上の時のスタイルを定義
  fontWeight: "bold",
  color: "red"
};

  return numArray.map((num) => {              //numが100以上の時の条件分岐
    if (num >= 100) {
      return (
        <React.Fragment key={num}>
          <div style={overHundredStyle}>　{num}</div>　　　//styleでCSSをあてることができる
        </React.Fragment>
      );
    } else if (num >= 10) {                    //numが10以上の時の条件分岐
      return (
        <React.Fragment key={num}>
          <div style={overTenStyle}>　{num}</div>
        </React.Fragment>
      );
    } else {
      return (
        <React.Fragment key={num}>
          <div>　{num}</div>
        </React.Fragment>
      );
    }
  });
}

リファクタリングの余地はある気がするものの、ひとまずif文の使用例の覚書として！
出力結果▷ https://codesandbox.io/s/map-training-qop3ps

３.mapとkeyにまつわるあるあるエラー

mapを使い始めたばかりの時、よく下記のwarningで怒られました。

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

結論：keyを付与することで解決！どの要素にkeyを付与するのかが大事。
下記はkeyを付与してもエラーが解消されないパターン。

const numArray = [1, 2, 3, 5, 7, 10, 15, 32, 100];

  return (
    <>
      {numArray.map((num) => {
        return (
          <>
			      <div　key={num}>　{num}</div>　　　　　　　//ここにkeyを付与してもwarningは解消されない
          </>
        );
      })}
    </>
  );

keyはmapで表示する要素（本記事では{num})の上位要素に付与する必要があります。
次のように修正するとエラーが解消できます。

const numArray = [1, 2, 3, 5, 7, 10, 15, 32, 100];

  return (
    <>
      {numArray.map((num) => {
        return (
          <React.Fragment key={num}>　　　　　　　　//keyを付与したいのはnumを表示する上位の親要素
            <div>　{num}</div>
          </React.Fragment>
        );
      })}
    </>
  );

mapは第二引数にindexをとることができるので、こちらをkeyに付与することもできます。
indexは機械的に配列の要素の前から順にindexを振っていきます。後から配列の要素が増える可能性がある場合は、最初に振られたindexは担保できなくなるので注意が必要です。
（keyにindexを当てるのは推奨されないようだけど、ケースバイケースかなとも思います。）

keyを付与してもwarningが出る時は、

• 同じファイル内で重複しているkeyはないか
• keyを付与し忘れているmap()はないか
• keyの内容を変えるとどうか
  　 例) key={${index}-${num}}など、uniqueに保てるよう色々試して解決できたこともあり。

などなど確認して解消しました。
keyについてはこちらも参照
▷ Reactリファレンスhttps://reactjs.org/docs/lists-and-keys.html#keys

以上、map()メソッドの覚え書きでした！

参照サイト
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
https://reactjs.org/docs/lists-and-keys.html#keys
https://qiita.com/tenpaMk2/items/1d97cbb59110fa6728ad