【TypeScript】Reactのmap関数の使い方ご紹介。〜通常配列とオブジェクト配列〜

TypeScript

2021.11.29

今回の記事はTypeScript構成のReactでmap関数の使い方を説明する記事です。通常の配列とオブジェクト配列の両方に対して、map関数の使い方を説明します。初心者にも分かりやすいように記載するので是非参考にしてみて下さい。

TypeScriptのReactプロジェクト作成
Reactのmap関数の使い方
オブジェクト配列でのmap関数の使い方

TypeScriptのReactプロジェクト作成

node等がインストールされてない方はインストールして下さい。その前提で話を進めます。

npx create-react-app sample --template typescript

まずは上記で「sample」プロジェクトを作成します。

cd sample
npm start

これでローカルサーバが立ち上がって初期画面が表示できます。

では次にmap関数で処理を行う方法をご紹介します。

Reactのmap関数の使い方

まず、map関数とは何かについてです。map関数は配列から値を抽出できる便利な関数です。配列の種類は通常の配列も可能ですが、オブジェクト型の配列にも使用できる点が非常に重宝される点です。

「src/App.tsx」を編集していきます。

const abc: string[] = ["a", "b", "c"];

const list = abc.map(rome => {
  console.log(rome)
  return (
    <li>
      {rome}
    </li>
  );
});

const App: React.VFC = () => {
  return (
    <div>
      <p>{list}</p>
    </div>
 );
}

export default App;

簡単に解説していきます。

const abc: string[] = ["a", "b", "c"];

[配列].map(rome => {rome});
配列の回数分、順番にa,b,cが出力されます。
romeと書いていますがここはなんでもOKです。
[配列].map(r => {r});
[配列].map(a => {a});
[配列].map(a => {r});×これはエラー

これをbuildすると配列内の値がリストとしてページに表示されます。

オブジェクト配列に対してmap関数を使う方法

このmap関数はオブジェクト配列にも有用です。

オブジェクト配列でのmap関数の使い方

const obj = [{
    a:"a",
    b:"b",
    c:"c"
}];

const objlist = obj.map(rome => {
  console.log(rome.a)
  return (
      <div>
        <li>
          {rome.c}
        </li>
      </div>
  );
});

const App: React.VFC = () => {
  return (
    <div>
      <p>{objlist}</p>
    </div>
 );
}

export default App;

コンソールに出力しているデータを確認してもオブジェクト配列の中身をうまく出力できていることが確認できます。

では今回の記事は以上です。他にも多数のTypeScript記事を記載しているので、是非参考にしてみて下さい。