対象読者
- 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の見た目をしたアプリケーションができ上がります。
コンポーネントの設計を考える
今回の掲示板アプリではコンポーネントを図2のように切り分けることで、各コンポーネントへの記述が簡潔になるようにします。
データの流れを図示すると、図3のようになります。
入力と投稿に関する処理と描画は「Form」コンポーネントに任せます。また、投稿されたデータをリストで表示する処理は、「List」コンポーネントに任せることにしました。見慣れた「App」コンポーネントは、一番外側でFormとListを表示する役割を担いつつ、Formから投稿されたデータの管理と、Listへ投稿データを渡す役割を担います。それでは、各コンポーネントの実装を見ていきましょう。
Appコンポーネントを作る
Appコンポーネントは掲示板アプリのデータの流れを作っています。アプリとしての全体像を把握するためにも、まずはAppコンポーネントの実装を見てみましょう。
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']
次は、個別のコンポーネントを見ていきましょう。
