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

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

　Reactはコンポーネントを組み合わせて開発を行うことで、保守性の高いアプリケーションを実現できるライブラリです。同時に、優れたUIを提供するライブラリでもあります。今回はJavaScriptでステートフルなアプリケーションを実装しながら、「リスト」と「フォーム」のWebアプリケーションに欠かせない要素を学びましょう。

対象読者

• JavaScriptとWeb開発の基礎に理解がある方
• Reactに興味／関心があり、これから学び始める方

前提環境

　筆者の検証環境は以下の通りです。

• macOS Sierra 10.12
• Node.js v8.6.0／npm 5.5.1
• React 16.1.1

フォームとリストで掲示板アプリを作る

　GUIを実装する上で、ユーザーからのインプットを受け取る方法と、ユーザーにアウトプットを見せる方法を覚えるのはとても大切なことです。今回は、HTMLの古き良きインプット方法であるform要素から入力を受け付けて、リスト形式でデータを表示する掲示板アプリを題材にして、ReactというUIライブラリがどのように活躍するのかを見ていきましょう。最終的に、図1の見た目をしたアプリケーションができ上がります。

図1　掲示板アプリ

コンポーネントの設計を考える

　今回の掲示板アプリではコンポーネントを図2のように切り分けることで、各コンポーネントへの記述が簡潔になるようにします。

図2　コンポーネントの設計

　データの流れを図示すると、図3のようになります。

図3　データの流れ

　入力と投稿に関する処理と描画は「Form」コンポーネントに任せます。また、投稿されたデータをリストで表示する処理は、「List」コンポーネントに任せることにしました。見慣れた「App」コンポーネントは、一番外側でFormとListを表示する役割を担いつつ、Formから投稿されたデータの管理と、Listへ投稿データを渡す役割を担います。それでは、各コンポーネントの実装を見ていきましょう。

Appコンポーネントを作る

　Appコンポーネントは掲示板アプリのデータの流れを作っています。アプリとしての全体像を把握するためにも、まずはAppコンポーネントの実装を見てみましょう。

リスト1　App.js

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

class App extends Component {
  state = {
    posts: []
  }
  /** Formが作成した投稿を保存する処理 */
  saveNewPost(newPost) { // （2）
    // 投稿にidを付与する
    const newPostWithId = {
      ...newPost,
      id: Date.now()
    }
    // state内の投稿リストに加える
    this.setState({
      posts: [...this.state.posts, newPostWithId] // （4）
    });
  }
  render() {
    return (
      <div className="App">
        <Form
          onSubmitNewPost={
            (newPost) => this.saveNewPost(newPost) // （1）
          } />
        <hr />
        <List
          posts={this.state.posts} /> {/* （3） */}
      </div>
    );
  }
}

export default App;

　Appコンポーネントが管理するデータの流れを見ていきます。Formコンポーネントは投稿ボタンを押すと、onSubmitNewPostに渡したコールバックに新しい投稿データを渡してきます。今回は、Appコンポーネントのメンバ関数であるsaveNewPostにそのまま渡すことにしました（1）。saveNewPostでは、適当なIDを付与した後に、Appコンポーネントのstateに投稿データを保存しています（2）。すると、setStateによるpostsの変更に反応して、Listコンポーネントが更新されます（3）。

　（4）はES6のスプレッド演算子を使っています。次のように、配列をマージして新しい配列を生み出してくれる便利な構文なので、積極的に使っていきましょう。

const array1 = ['a', 'b', 'c'];
const array2 = [...array1, 'd'];
console.log(array2); // ['a', 'b', 'c', 'd']

　次は、個別のコンポーネントを見ていきましょう。