Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/12/28 14:00

 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 掲示板アプリ
図1 掲示板アプリ

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

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

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

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

図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']

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


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:基礎からはじめるReact入門

もっと読む

All contents copyright © 2005-2018 Shoeisha Co., Ltd. All rights reserved. ver.1.5