React入門

2018-04-29 Web イベント JavaScript

---

この記事は GW なので React をやってみる会 の資料です。 手を動かしながら、 「React 的な考え方はどんな問題を解決できるのか」 といったことを雰囲気だけでも感じてもらえればと思います。

React とは

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

React は Web ページの View の部分を担当するライブラリです。 React を使うと動きの多い Web ページが作りやすくなります。

React を理解するためのポイントは以下の３つだけです。

• コンポーネントを階層的に配置して画面全体を作る
• 最上位のコンポーネントが画面全体の状態（state）を持ち、子コンポーネントにこれを流す（props）
• 子コンポーネントは props から見た目を決め、必要ならイベントを捕捉して state を更新する

環境構築

https://reactjs.org/docs/add-react-to-a-new-app.html

一から React の環境を作るのは大変なので、create-react-app という公式のツールを利用します。 Node.js をインストールして以下のコマンドを実行してみましょう。

npx create-react-app my-app
cd my-app
npm start

http://localhost:3000 にアクセスして、 「Welcome to React」 と表示されればＯＫです。

React 的な考え方

ここからは サンプルアプリ を使って説明します（デモページ）。 src/App.js を見てください。

コンポーネントを配置して画面を作る

https://reactjs.org/docs/thinking-in-react.html

React では コンポーネント を組み合わせて画面全体を作ります。 ここでいうコンポーネントは、HTML として見た目を持った再利用可能な UI パーツのことで、 App, Canvas, NavBar もコンポーネントです。

実際に App.render() では、 Canvas, NavBar を使って App の見た目を定義しています。

コンポーネントと props

https://reactjs.org/docs/components-and-props.html

コンポーネントは見た目が定義されていればいいので、基本的には JSX を返す関数として書けます。 例えば 「Hello, World!」 を表示する Hello コンポーネントは以下のように書け、 <Hello /> で配置できます。

function Hello() {
  return <p>Hello, World!</p>;
}

挨拶する相手を指定できるようにする場合は引数をとり、 <Hello name='Sara' /> のように値を渡します。

function Hello(props) {
  return <p>Hello, {props.name}!</p>;
}

サンプルの Canvas や NavBar もこのように書かれています。

React ではこのようなコンポーネントに渡す値のあつまりのことを props と呼んでいます。

When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object “props”.

state とライフサイクル

https://reactjs.org/docs/state-and-lifecycle.html

関数として定義されたコンポーネントは純粋関数のように動作することが求められますが、どこかに状態を持たなければ変化は表現できません。 状態（state）を持つコンポーネントは class を使って書け、ライフサイクルを持ちます。

App コンポーネントを見てください。 React.Component を継承し、 constructor() で初期状態を、 render() で見た目を定義しています。 このとき状態の一部を props として配ることで、子コンポーネントの見た目が決まります。

This is commonly called a “top-down” or “unidirectional” data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components “below” them in the tree.

If you imagine a component tree as a waterfall of props, each component’s state is like an additional water source that joins it at an arbitrary point but also flows down.

state の更新

https://reactjs.org/docs/react-component.html#setstate

state を更新するには setState() を使いますが、これは class で定義したコンポーネントでしか使えません。 「子コンポーネントのボタンが押されたら表示を変更したい」 といった場合は、 class 内でコールバック関数を書いて渡す必要があります。

App の prev() と next() は、自身の state を更新するメソッドです。 これを props で NavBar に渡し、 <button> のクリックイベントに割り当てています。 イベントが発火すると state が更新され、画面が再描画されます。

書いてみる

まずは上で解説したサンプルアプリを自分で実装してみましょう。 それができたら、チュートリアルの 三目並べ をやってみるといいと思います。

難しいと感じたときは QuickStart などを読んでみるといいかもしれません。

React 的な考え方を活かす

React では状態を集約して一方向に流すことで、隣り合うコンポーネント同士で状態の変化を通知しあうなど、状態の不整合や複雑化が起きやすいコードを避けています。 このようなアーキテクチャは flux と呼ばれ、React 以外にも似たような実装がいくつかあります。

• Redux
• Elm
• hyperapp

---