Javascriptのmapの使い方

超初心者がReactを勉強する

初めてのReact「入門編」導入から基本まで〜TODOアプリを作ってを学ぼう！ | 株式会社ウェブ企画パートナーズ の記事を参考に勉強しています。

以下のサンプルの部分でmapメソッドが出てくる。

  render() {
    const { todos } = this.state;
    return (<div>
      <input type="text" onInput={this.onInput} />
      <button onClick={this.addTodo} >登録</button>
      <ul>
        {todos.map((todo, index) => <li key={index}>
          {todo}
          <button onClick={() => { this.removeTodo(index) }}>削除</button>
        </li>)}
      </ul>
    </div>);
  }

mapメソッドは配列に対して使われ、配列の各要素に対してコールバック関数を実行するという動きをする。 今回のコールバック関数は(todo, index)から</div>);までで、引数のtodoとindexに応じて<li>タグと<button>タグ を表示していることになる。

forEachでも似たようなことができるが、forEachは返り値を返せない。mapの場合はコールバック関数の 返り値をmapの返り値とすることができるという違いがある。

さらに、コールバック関数の第一引数はtodosの要素が代入されるが、indexはその要素の元配列（todos）におけるインデックスが 自動的に代入される。