Reactでmap関数を使ってみた

<h1>概要</h1>
map関数は元の配列を新しい配列として作り直す際に使用する関数。

<h1>map関数の紹介</h1>

<b>movieTypes.ts</b>
型定義しているファイルになる
```jsx
/* MovieItemType にオブジェクトとして型を定義している。
   映画情報の型の定義
   （id（数値型）、
     poster_path:映画のポスター画像（文字列）;
     title:映画タイトル（文字列）;
     overview:映画の概要説明（文字列））*/
export type MovieItemType = {
  id: number;
  poster_path: string;
  title: string;
  overview: string;
};
// 下記は上で定義したオブジェクトの MovieItemType を配列に変換し、それを変数の MovieListType としている
export type MovieListType = MovieItemType[];
```




<b>MovieList.tsx</b>
map関数を使用しているファイルになる
```jsx
import React from "react";
import { MovieListType } from "../../types/movieTypes";
import MovieItem from "../movieItem/MovieItem";
import styles from "./MovieList.module.scss";

/* {}内にある movieList にmovieTypes.tsファイルで
   定義した型（MovieListType（配列））を適用している。
   また、TopPage.tsxで使用する、
   MovieListコンポーネントにわたすべきPropsの型も定義している */
type Props = { movieList: MovieListType };

// ↑で定義した型（porps）を下記のコードの引数に渡している
const MovieList: React.FC<Props> = (props) => {
  /* 10行目で定義した、型付きの配列（movieList）を
     map関数で展開するため1つ1つのMolvieItemに渡していく */
  const movieList = props.movieList;

  console.log(movieList);

  // movieList配列（20個のデータ）の情報を1つ1つ展開している
  return (
    <div className={styles.root}>
      {movieList.map((movie) => {
        return <MovieItem item={movie} key={movie.id} />;
      })}
    </div>
  );
};

export default MovieList;

```
```jsx
/* {}内にある movieList にmovieTypes.tsファイルで
   定義した型（MovieListType（配列））を適用している。
   また、TopPage.tsxで使用する、
   MovieListコンポーネントにわたすべきPropsの型も定義している */
type Props = { movieList: MovieListType };
// ↑で定義した型（porps）を下記のコードの引数に渡している
const MovieList: React.FC<Props> = (props) => {
  /* { movieList: MovieListType };で定義した、型付きの配列（movieList）を
     map関数で展開するため1つ1つのMolvieItemに渡していく */
  const movieList = props.movieList;

  console.log(movieList);
```
下記は上の処理が走ったときのコンソール画面になる
（20の配列データを取得している画面になる）
![スクリーンショット 2023-01-22 20.38.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2055577/698a12e2-c33f-d1f1-a708-0efb9a89e333.png)



下記は上記のコードからmap関数部を取りだし、公式書いたコードになる
```jsx
  return (
    <div className={styles.root}>
      {配列が格納されている変数.map((任意の変数) => {
        return <MovieItem item={任意の変数} key={任意の変数.id} />;
      })}
```

下記はmap関数部を実際に書いたコードになる
```jsx
  return (
    <div className={styles.root}>
      {movieList.map((movie) => {
        return <MovieItem item={movie} key={movie.id} />;
      })}
```
下記のコードで配列データを格納した<b>movieList</b>に任意の引数<b>(movie) </b>を設定したコードである。

```jsx
  {movieList.map((movie) => {
```
下記のコードで<b>< MovieItem ></b>コンポーネントに新しく作成した配列データを出力する。
```jsx
 return <MovieItem item={movie} key={movie.id} />;
```
内容としては
id（ユニークな数値）
original_title（映画タイトル）
overview（映画の説明）
poster_path（ホスター画像）
の今回使用するデータのみを取得し、出力している。

<b>item={movie}</b>　は下記の様に型定義したpropsを参照している。
```jsx
type Props = {
  /* オブジェクト型
     映画情報の型の定義（id、映画のポスター画像、映画タイトル、映画の概要説明）*/
  item: MovieItemType;
};
```
<b>key={movie.id}</b>　は以下の画像データにもある配列データがその配列データだと判断できるように
識別子をkeyで設定している。
今回はidを設定している。

![スクリーンショット 2023-01-22 20.44.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2055577/c1a93d17-f1e4-3b40-4988-9efa35c48905.png)










<h1>まとめ</h1>
今回はmap関数でAPIから受け取った配列情報を必要な要素（今回使う配列要素）

のみにする実装を行いました。
今後の参考になれば幸いです。