この連載記事は、これから React を学びたい JavaScript 開発者のための入門コンテンツです。対象とする React のバージョンは執筆時点で最新の v16.13 です。
Reactとは何か
JSX
属性と状態
フォームとイベントハンドリング
ToDoアプリを作ってみよう
副作用
カスタムフック
Reactプロジェクトを始める方法
前章まででは、まず React そのものにフォーカスするため、CDN から React を読み込んだり、もしくは CodePen を用いたりなど、簡易的なデモ環境で作業しました。
本章で create-react-app を使って本格的な React アプリケーションを構築する方法を学び、この連載を終わります。
開発環境とは
コードを書き始める前に、開発環境を準備しましょう。
開発を進めるために必要な、ソースコード以外のソフトウェアやミドルウェア、ツール群を、まとめて開発環境と言います。
たとえば PHP アプリを開発するためには、そもそも PHP の処理系が開発マシンにインストールされていないといけませんし、データベースなども必要になるでしょう。
JavaScript は、処理系がウェブブラウザに組み込まれているので、ブラウザさえインストールされていればコードを書いて動かすことができます。
しかし、モダンな JavaScript 開発を進めるためには、トランスパイラやバンドラ、ユニットテスト環境やリンター（静的解析）などを備えた、本格的な開発環境が必要になります。
具体的には Webpack などを駆使して開発環境を作るのですが、これはかなり複雑な仕事です。実際は、開発環境は自作せず、React コミュニティから提供されている公式の開発環境構築ツール create-react-app を利用するのがデファクトスタンダードになっています。
Create React App
create-react-app は、公式に利用が推奨されている React アプリケーション構築ツールです。
以下の機能を備えています：
- React コンポーネントのトランスパイル
- JavaScript や CSS ファイルのバンドル
- 開発用の Web サーバ
- ユニットテスト実行環境
- リンター（静的解析）
- PWA サポート
- TypeScript テンプレート
- etc...
前提要件
開発マシンに Node.js のインストールが必要です。
プロジェクトを作成する
以下のコマンドでプロジェクトを作成します。todo の部分は任意のプロジェクト名です。これにより、新しい開発環境のひな形が、プロジェクト名のディレクトリに展開されます。
$ npx create-react-app todoちなみに、npx コマンドは npm のバージョン 5.2 以上に同梱されています。パッケージをグローバルにインストールし、実行して、完了後にパッケージを破棄します。
実装
実装のサンプルとして、5章で作成した ToDo アプリの改訂版を用意しました。
（リポジトリ）
この章ではアプリの全体像を把握してもらえれば OK なので実装の詳細には触れません。どのようにプロジェクトが構成されているかに注目してください。
いくつかのポイントを、以下に紹介します。
ビルドコマンド
start
開発時は、以下のコマンドを実行します。
$ npm run startこのコマンドは、アプリケーションをビルドし、開発用サーバを立ち上げます。開発用サーバが稼働している間は、http://localhost:3000 でアプリをプレビューできます。さらに、ファイルに変更が加わるたびに自動的にビルドが再実行され、ブラウザもリロードされます。
ctrl + C キーで中断します。
build
start コマンドは開発用ですが、build コマンドは本番用のビルドコマンドです。
$ npm run build開発用サーバを立ち上げない代わりに、コードの minify などの最適化が行われます。本番環境にデプロイするのは、こちらのビルド結果になります。
ディレクトリ構成
create-react-app は、バンドルの機能を備えています。つまり、React を含む外部パッケージや自作の JavaScript ファイルなどを import して使います。
いままでのデモ用の環境では、すべて <script> 要素内に書いていましたが、import できるようになったため、コンポーネントなどをそれぞれファイルに分割し、用途ごとにディレクトリに整理することが可能になりました。
create-react-app でプロジェクトを作成すると、public と src というディレクトリが作成されます。
public は基本的に、ビルド時に加工なしに公開されるファイルを置く場所です。index.html は例外で、ビルド時に JavaScript ファイルを読み込む <script> 要素の挿入などが行われます。<meta> や <link> 要素を編集したい場合は、index.html を更新します。
src は、トランスパイルやバンドルを行うソースコードを置く場所です。この下のディレクトリ構成については、特に決まりはありません。各自考えていくことになります。掲載した実装例も、一案として参考にしてみてください。
コンポーネント
src/components ディレクトリには、コンポーネントを格納しています。
前の章まででは React.useState などと書いていましたが、メソッドごとにインポートできるので、単に useState と記述すればよくなります。
import React, { useState } from 'react';
function Todo() {
const [filter, setFilter] = useState('ALL');エクスポートを忘れないようにしましょう。
export default Todo;カスタムフック
hooks ディレクトリに、カスタムフックを置いています。
今回の ToDo アプリでは、タスクを LocalStorage に保存していますが、ストレージへの読み書きをフックにまとめました。
スタイルシート
src/styles ディレクトリに、スタイルシートを格納しています。
@import url('https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.min.css');
.container {
margin-top: 2rem;
}スタイルシートも、JavaScript と同様にインポートできます。
import './styles/main.css';Sass のサポートも備わっています。
ユニットテスト
テストコードは src/tests ディレクトリに配置しました。
create-react-app は Testing Library という、テストコードを書くためのヘルパーライブラリを内蔵しています。Testing Library はいくつかのパッケージに分かれていて、そのうちの3つがプリセットされています。
| パッケージ | 概要 |
|---|---|
| @testing-library/react | React コンポーネントをテストするためのヘルパー関数群 |
| @testing-library/jest-dom | Jest マッチャー関数の DOM 向け拡張 |
| @testing-library/user-event | 複雑なユーザーイベントのシミュレーションライブラリ |
そのほか、カスタムフックをテストするための @testing-library/react-hooks パッケージも存在するので、必要に応じて追加でインストールして利用すると良いでしょう。
以下のコマンドでテストが走ります。
$ npm run test一度テストが実行されたあとは待ち受け状態になって、ソースファイルを保存すると、自動的にテストが再実行されます。
リンター
create-react-app には、リンター（ESLint）もデフォルトで付属しています。リンターとは、静的解析、つまりコードを実行前に不審な点を分析する機能です。
たとえば、以下の記述があったとします。
function App() {
const test = 123; // 宣言されているが未使用の変数
return (
<div className="container is-fluid">
<Todo />
</div>
);
}ファイルを保存すると、ターミナルに以下の警告が出力されます。
Compiled with warnings.
./src/App.js
Line 6:9: 'test' is assigned a value but never used no-unused-vars「初期化されているのに使われていない変数がある」と教えてくれています。このように、リンターは文法的には正しくても不具合などに繋がりそうな箇所を指摘します。
Chrome エクステンション
React Developer Tools がとても便利なので、ぜひインストールしてください。
以下のキャプチャの通り、コンポーネントの階層構造や内部状態などをデバッグできます。
IE11 対応
IE11 で動かす必要があるなら、react-app-polyfill を利用しましょう。
使い方は GitHub に書かれている通りですが、一番最初に読まれるスクリプトの先頭に、以下の記述を追加します。
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';import 元のファイルでは、IE11 に合わせたポリフィルの適用が行われています。
その他のディレクトリ構成案
上記で紹介したディレクトリ構成は、機能ごとにファイルをまとめていました。
他には、以下のように、コンポーネント名のディレクトリに、そのコンポーネントで必要なファイルをまとめる流派もあるようです。
.
└── src
└── components
└── MyComponent
├── index.js # コンポーネント
├── index.test.js # テスト
├── hooks.js # カスタムフック
└── styles.css # スタイルシートこれらはほんの一例です。チームにとって合理的な構成を選択してください。
さらに先へ
ここまでは create-react-app をベースにしたミニマムなアプリケーションの構築について説明しました。しかし、より本格的なシングルページアプリケーションを開発するには、Router や Redux が欠かせません。
React の基本機能を習得したあとで、それらの周辺技術についても学びましょう。このブログでも、以下の記事で Router や Redux について書いていますので、参考にしてください。
様々な開発環境
create-react-app の他にも、開発環境を構築できるツールやフレームワークは存在します。有名どころをいくつか紹介するので、作りたい物に合わせて使用を検討しましょう。
Next.js
Next.js は、React ベースのフレームワークです。
React コンポーネントをサーバーサイドでレンダリングする仕組みを備えているため、より高速なユーザー体験が期待できます。
Gatsby.js
Gatsby.js は、React ベースの静的サイトジェネレーターです。
ブラウザで動的に DOM を生成するのではなく、あらかじめ静的な HTML を作ってしまう仕組みです。それだけでなく、リンク先のプリフェッチなどのフロントエンド高速化技術がデフォルトでセットされています。
ちなみに、このブログサイトも Gatsby.js で作られています。
docusaurus
docusaurus は、React ベースのドキュメントジェネレーターです。
Gatsby.js と似ていますが、より技術ドキュメントの生成に特化しています。オープンソースライブラリのリファレンスサイトによく使われていますが、開発チーム内で仕様や設計をまとめるのに使用するのもよいでしょう。
Laravel Mix
laravel-mix は、Webpack のラッパーライブラリです。PHP フレームワーク Laravel に内蔵されていますが、これ単体で利用することもできます。
以下のような簡単な記述で、Webpack によるビルドができてしまいます。
const mix = require('laravel-mix');
mix.react('src/app.js', 'dist');create-react-app や Next.js などは、アプリケーション全体、または少なくともフロントエンド全体を React で構築することを前提としています。一方 laravel-mix は、ファイル単位で簡単にビルドできるので、サイトの一部だけで React を使う場合にちょうどいいです。
おわりに
これで連載はおしまいです！
本連載は「入門」チュートリアルと銘打ちましたが、基礎の理解が何よりも重要です。実際、React ライブラリそのものに関しては、さらに学ぶべき内容はほとんどありません。本文でも触れましたが、Router や Redux などの周辺技術の知識や、何よりも、JavaScript の言語仕様への理解があれば、本格的な開発を始めることができるでしょう。
皆さんにとって、React コードを読める、書けるようになる、そしてキャリアに React 開発を加えるきっかけになれば幸いです。
