Reactによるフォーム／リストの基本

基礎からはじめるReact入門 第4回

Listコンポーネントを作る

　Listコンポーネントは掲示板アプリの投稿を表示する部分です。コードは次の通りです。

リスト2　List.js

import React, { Component } from 'react';
import { Ages } from './Form';

/** 投稿のリスト */
class List extends Component {
  /** 投稿ひとつ分を描画する */
  renderPost(post) {
    return (
      <div>
        <div>名前: {post.name}</div>
        <div>年齢: {this.convertAge(post.age)}</div>
        <div>本文: {post.body}</div>
      </div>
    );
  }
  /** ageを日本語表記に変換する */
  convertAge(age) {
    switch(age) {
      case Ages.TEEN:
        return "10代";
      case Ages.TWENTIES:
        return "20代";
      case Ages.THIRTIES:
        return "30代";
      case Ages.FOURTIES:
        return "40代";
      case Ages.FIFTIES:
        return "50代";
      default:
        throw Error(`不明なageです: ${age}`);
    }
  }
  render() {
    const { posts } = this.props;
    return (
      <div>
        { posts.map((post, index) => { // （1）
          return (
            <div key={`${post.id}`}> {/* （2） */}
              {this.renderPost(post)}
            </div>
          );
        }) }
      </div>
    )
  }
}

export default List;

　Listコンポーネントは、Formで投稿した内容をリストとして表示する、ただのdiv要素の集まりです。

　また、propsは次の構造をしています。

Listコンポーネントのprops

名前	型
posts	Array<{ id, name, age, body }>

　Listコンポーネントの実装で特徴的なのは、postsをmapしてJSXに変換することで、リストを生み出しているところです（1）。第1回で紹介した通り、JSXは最終的にReact.createElementという関数呼び出しに変換され、JavaScriptの式として実行されます。そのため、map関数などを適用することができるのです。

図5　データ変換のイメージ

　render関数がreturnするJSXも、最終的にはJavaScriptの式に変換されます。これを意識しながらJSXを記述すると、柔軟な書き方ができるようになります。いろいろと試してみてください。

リストの要、key

　Reactでリストを扱う際に忘れてはいけないのが、keyの付与です（2）。ReactはVirual DOMの差分を見ることしかできないので、そのままでは追加・削除を判断することができません。

図6　差分の認識がうまく行かなかった例

　こういった課題を解決すべく、本当の差分を見分けやすくするために生まれた仕組みがkeyです。たとえ順番が変わっても、keyが同じである限りはReactは同じ要素としてみなしてくれます。

図7　差分の認識ができた例

　keyの命名の条件は、そのリストの中でユニークな値ならば、何でも構いません。

まとめ

　今回は、フォームとリストの基本について解説しました。要点を抑えればシンプルな仕組みになっているので、アプリケーションのさまざまなところで活用してください。