HTML5テクニカルノート

React + Redux入門 01: テキスト入力のフォームをつくる

ID: FN1908001
Technique: HTML5 / ECMAScript 2015
Library: React 16.8.6

Reduxはアプリケーションの状態を管理するライブラリです。Reactとの組み合わせはとくに相性がよく、React Reduxが別途提供されています。そして、React Reduxを学ぶための公式サイトの解説が、「Basic Tutorial」です。ただ、ほぼでき上がったサンプルの構成と各モジュールの役割を説明したうえで、コードを書くのはStoreの作成と接続(connect()メソッドの呼び出し)だけです。これでは細かい組み立てが、なかなか頭に入りません。

そこで、一から手を動かしてつくり進めるかたちで解説してみましょう。作例は同じTodoリストで、モジュールの役割分けがよりしっかりしたReduxサイトのTodoリストを採り上げます。今回は、ReduxとReact Reduxをインストールして、Reactのひな形アプリケーションをつくるところまでです。

01 Reactアプリケーションをつくる

アプリケーションのひな形はCreate React Appでつくりましょう(アプリケーション名react-redux-todos)。


npx create-react-app react-redux-todos

アプリケーションのディレクトリに切り替えて、コマンドnpm startを打ち込めば、ひな形のページが開くはずです(図001)。ローカルサーバーを閉じたいときは[control]/[Ctrl] + [C]、再開には改めてnpm startを入力してください。


cd react-redux-todos
npm start

図001■ひな形のReactアプリケーションのページ

確かめられたら、ReactとReact Reduxをインストールし、ブラウザにはRedux DevToolsも加えておきましょう。


npm install redux
npm install react-redux

ひな形アプリケーションのsrc/ディレクトリで、使うのはindex.jsとApp.cssです。App.jsは、あとでつくるsrc/components/ディレクトリに移します。残りの4つのファイルは使いませんので、削除して結構です。

src/App.js → src/components/App.js
src/App.test.js ×
src/index.css ×
src/logo.svg ×
src/serviceWorker.js ×

02 Reactのコンポーネントを定める

まずはReduxなしに、Reactのコンポーネントを定めましょう。public/index.htmlを開いて確かめると、Reactアプリケーションと関連づける要素(<div>)にid属性(root)が与えられています。

public/index.html


<body>
	<div id="root"></div>
</body>

src/index.jsは、つぎのコード001のように書き替えてください。もとのコードと大枠は同じです。前述のとおりApp.jsは新たなディレクトリ/componentsをつくって移します。index.cssとserviceWorker.jsは使いません。ReactDOM.render()メソッドはreact-domからimportで読み込み、ルートコンポーネントAppを描画しているだけです(「コンポーネントのレンダー」参照)。

コード001■src/index.js


import React from 'react';
import { render } from 'react-dom';
import App from './components/App';
render(
	<App />,
	document.getElementById('root')
);

ルートコンポーネントsrc/components/App.jsは、つぎのコード002のとおり関数コンポーネントです(「関数コンポーネントとクラスコンポーネント」参照)。アロー関数式(=>)を用いました。テンプレートにはさらに、このあと定める子コンポーネント(AddTodo)が加わっています。

コード002■src/components/App.js


import React from 'react';
import AddTodo from './AddTodo';
import '../App.css';
const App = () => (
	<div>
		<AddTodo />
	</div>
);
export default App;

項目入力のコンポーネントsrc/components/AddTodo.jsは、以下のコード003のように定めてください。フォーム(<form>要素)ですので、送信ボタン(<button type="submit">)のクリックでonSubmitイベントのハンドラ関数が呼び出されます。関数が<input>要素の参照を得るために用いたのは、コールバックRefです。コールバックが受け取った要素の参照(element)を変数(input)に納めて、valueプロパティのテキストを取り出しています。

入力フィールドのテキストをReduxのStoreに送る処理は次回に書き加えます。console.log()メソッドの呼び出しは値の確認用です。なお、onSubmitのイベントハンドラは、Event.preventDefault()の呼び出しにより、フォームの送信とページ再読み込みを止めています。

コード003■src/components/AddTodo.js


import React from 'react';
const AddTodo = () => {
	let input;
	return (
		<div>
			<form onSubmit={(event) => {
				event.preventDefault();
				const text = input.value.trim();
				input.value = '';
				if (!text) {
					return;
				}
				console.log(text);  // 確認用
			}}>
				<input ref={(element) => input = element} />
				<button type="submit">
					Add Todo
				</button>
			</form>
		</div>
	);
};
export default AddTodo;

これで、アプリケーションのページにテキスト入力フィールドと送信ボタンが表示されるはずです。フィールドには、テキストが入力できます(図002)。送信ボタンでイベントハンドラ(onSubmit)が呼び出され、フィールドのテキストは消去されるでしょう。コードと動きが確かめられるよう以下に、サンプル001を掲げます。

図002■React Developer Toolsで示されたコンポーネントの構成

サンプル001■react-redux-todos-01

React + Redux入門

作成者: 野中文雄
作成日: 2019年8月2日