[SWR](https://github.com/zeit/swr)はZEITによるデータ取得ライブラリです。Next.jsだけではなく、React単体でも使用できます。今回は、このライブラリの必要性に触れてみます。

## SWRを使う理由

SWRの主な用途はキャッシュとボイラープレートの排除です。従来のReactアプリケーションで外部リソース（API）の取得を行う場合、以下のようなコードを目にします。

```jsx
const [data, setData] = React.useState([]);

useEffect(() => {
    fetch("https://some-api/users")
    .then(response => response.json())
    .then(data => {
        setData(data);
    });
}, []);
```

データ取得を行うたび、この定型文（+エラー処理）が出現します。

例えば、階層の異なるコンポーネントで`data`を利用したいとします。`props`を介したり、Reduxやcontextで解決することはできますが、コードは複雑になります。「利用するコンポーネントで再リクエストすりゃいいじゃん」と思うかもしれませんが、現状のReactには**状態のキャッシュというものが存在しない**ため、再び同コストが必要になります。

SWRはこういった問題点を解決します。

## useSWR

使用するのは、`useSWR`です。これは、データ保存をするフックです。

```jsx
const { data, error } = useSWR(key, fetcher, options);
```

- data - API取得結果
- error - エラー内容
- key - ユニークなキーを指定。REST APIならば、エンドポイントURLです。
- fetcher - リクエストを行う関数。要件はpromiseを返すということだけ。
- options - [オプション](https://github.com/zeit/swr#options)

例えば、以下のようなコードになります。

```jsx
const fetcher = (...args) => fetch(...args).then(res => res.json());

function App() {
    const { data, error } = useSWR("https://your-api/any", fetcher);

    if (error) return <p>Error</p>
    if (!data) return <p>Loading</p>

    return (<SomeComponents data={data} />);
}
```

エラー処理を含めてもコードがシンプルです。また、別のコンポーネントから`useSWR`で同じキーでデータ取得を行うと、キャッシュからデータを取り出してくれます。更にリソース元が更新されている場合は、対応するすべてのコンポーネントが再レンダリングされます。コンポーネントツリーは常に最新データと同期しているということです。

ささっと書きましたが、実はこのキャッシュ周辺の仕様は難しいです。無知ながら掻い摘むと、SWRでは同じキーでリクエストを行うと、`dedupingInterval`（デフォルトは2秒）内では再リクエストをせずキャッシュを使用します。この期間を過ぎた後だと、再リクエストが起こりキャッシュが再検証されます。このインターバル値は、`useSWR`のオプションから変更が可能です。詳しく知りたい場合は、Stale-While-Revalidateでググりましょう。SWRはこの仕様に沿っています。

これで`useSWR`はマスターです。しかしブログ記事としては物足りないため、次にSWRを使った超簡単なデモアプリでも作成してみます。SWRの他のAPIにも触れます。

## Demo Application

MTG（マジックザギャザリング）のカード一覧を表示するという簡易なWebアプリを作成します。素晴らしいことに[公式](https://docs.magicthegathering.io/)がAPIを公開しているので、これを利用させて頂きます。

以降は、Reactの開発環境が整った段階からの解説になります。コードは[CodeSandbox](https://codesandbox.io/s/react-swr-mtg-2pqex)にあります。

まずはパッケージをインストールします。

```shell
yarn add swr
```

queries.jsというファイルを作成し、fetcher関数を定義します。

```jsx
export const fetcher = (...args) => fetch(...args).then(res => res.json())
```

App.jsxを以下のようにします。

```jsx
import React from "react";
import { SWRConfig } from 'swr';
import Card from './components/Card';
import Cards from './components/Cards'

// GlobalSetting
const queryConfig = {
  suspense: true,
};

const App = () => {
  const [activeCard, setActiveCard] = React.useState(null);

  return (
    <>
      <h1>MTG Card List</h1>
      <div className="container">
        <SWRConfig value={queryConfig}>
          <React.Suspense fallback={<div>Loading...</div>}>
            {activeCard ? (
              <Card
                activeCard={activeCard}
                setActiveCard={setActiveCard}
              />
            ) : (
              <Cards setActiveCard={setActiveCard} />
            )}
          </React.Suspense>
        </SWRConfig>
      </div>
    </>
  );
};

export default App;
```

`activeCard`に値があれば`Card`を表示し、なければ`Cards`を表示しているだけです。実際に入る値は、カードの`id`値になります。

`SWRConfig`はグローバルに`useSWR`のクエリオプションを設定するものです。要は全体で使う共通オプションです。ラップした下位のコンポーネントで`useSWR`を使う際には、その設定が適用されます。ここでは`suspense: true`を設定しています。これは、フェッチ時に`React.Suspense`を利用するオプションです。これがない場合、特に処理を記述しなければデータ取得中に画面が真っ白になります。

次はCards.jsxです。ここで`useSWR`を使い、カード一覧の取得と表示をします。

```jsx
import React from "react";
import useSWR from "swr";
import { fetcher } from "../util/queries";
import Button from "./Button";

export default function Cards({ setActiveCard }) {
  const { data, error } = useSWR(
    "https://api.magicthegathering.io/v1/cards?pageSize=20",
    fetcher
  );

  if (error) return <div>error occured: {error.message}</div>;
  // if (!data) return <div>Loadin now</div>;

  return (
    <>
      {data.cards.map(card => (
        <article key={card.id} className="item">
          <h3>{card.name}</h3>
          <p>{card.text}</p>
          <p>
            <small>{card.flavor ? card.flavor : "no flavor"}</small>
          </p>
          <Button
            onClick={() => {
              setActiveCard(card.id);
            }}
          >
            view
          </Button>
        </article>
      ))}
    </>
  );
}
```

コメントされている`if`文がありますが、これは前述した`React.Suspense`を有効にしているため、この1行が実行されることはないという意味です。suspenseを無効にした場合は、このようなコードが必要になります。

次は、単一カードを表示するCard.jsxです。

```jsx
import React from 'react';
import useSWR from 'swr';
import { fetcher } from '../util/queries';

import Button from './Button';

export default function Card({ activeCard, setActiveCard }) {
  const { data, error } = useSWR(
    `https://api.magicthegathering.io/v1/cards/${activeCard}`,
    fetcher,
  );

  if (error) return <div>error occured: {error.message}</div>;

  const { card } = data;
  return (
    <article>
      <h3>{card.name}</h3>
      <figure>
        <img src={card.imageUrl} alt={card.name} />
      </figure>
      <Button onClick={() => setActiveCard(null)}>Back</Button>
    </article>
  );
}
```

`activeCard`には選択したカードの`id`が入っており、`useSWR`でフェッチするURLに埋め込まれて一意のキーとなります。残りのコードは、取得したデータを使ってカード情報を表示しているだけです。

最後はButton.jsxです。

```jsx
import React from "react";

export default function Button({ children, onClick }) {
  const handleClick = e => {
    onClick(e);
  };

  return (
    <>
      <button onClick={handleClick}>{children}</button>
    </>
  );
}
```

ボタンをクリックしたときに`activeCard`の値をリセットするだけのコンポーネントです。

## 実行結果

カードを選択するとフェッチが起こります。初回は時間がかかりますが、一度リクエストすると結果がキャッシュに残り、再びカードを選択するときはキャッシュからデータが取り出されます。

![result-1](//images.ctfassets.net/mmh9uyfw68qp/34x2D9pdj3yuAdIiMPWzwl/f1f76d5ab4a032a6f67065d1dc241273/result-1.gif)

この例ではユニークキー（URL）が決まった後に取得先の内容が変更されることはないため意味はありませんが、`dedupingInterval`を超えるとデータの再取得があり、キャッシュは再検証されます。2秒内だと検証リクエストはありません。上の画像はわかりやすいように、`dedupingInterval`を10秒にしています。検証リクエストが行われていないのが確認できます。なんにせよキャッシュで高速化します。SWRの方針は、古いものでも表示する内容があれば、まずはそれを表示しよう！です。

尚、カード画像自体はあくまで演出というか、ブラウザ自体の画像キャッシュです。画像データそのものがSWRのキャッシュに入っているというわけではありません。

## おわりに

SWRはデータ取得における定型文の排除とキャッシュ機能を提供してくれます。いずれReactにキャッシュ機能が搭載されるかもしれませんが、それまでは利用しておきたいライブラリだと思いました。

React+SWR

ReactでTheme UIを使用するチュートリアルのPart2です。

[前回の記事](react-theme-ui-part1)では、ThemeUIを使用してページのレイアウトを定義しました。今回はMDXを使用してコンテンツ部分を作成し、更にスタイルを適用します。

デモを用意しようとしたのですが、Stackblizeだと記事本文とは異なるパッケージを利用しなければならないため、今回は割合しました💦

> Create React App Please note there’s a [known bug](https://github.com/facebook/create-react-app/issues/5580) with the macro so live reloading doesn’t currently work. With Create React App you will need to use [`mdx.macro`](https://www.npmjs.com/package/mdx.macro).

`create-react-app`にはバグがあり、`mdx.macro`を使用することになるためです。

内容は簡単なため、前回の完成品から手順通りにこなせば動作します。尚、Part1が動作していれば問題ないはずですが、WebpackとBabelがインストールされている必要があります。

## MDX

MDXはmarkdownにjsxが利用できるフォーマットです。今回の例ではこのような利点は使用していませんが、markdownでは手の届かなかったコンテンツやメタ要素の組み込みが可能です。

React（Webpack）で使用するには、MDX用のローダーが必要になります。加えて、MDXで絵文字や画像が使用できるようにプラグインのインストールも行います。

```bash
## install Loader
yarn add @mdx-js/loader --dev

## Install Plugin
yarn add remark-emoji remark-images
```

次に、Webpackの設定ファイルにローダーの設定を行います。

```javascript
const images = require('remark-images')
const emoji = require('remark-emoji')

module.exports = {
  module: {
    rules: [
      // ...(略)
      {
        test: /\.mdx?$/,
        use: [
          {
            loader: 'babel-loader'
          },
          {
            loader: '@mdx-js/loader',
            options: {
              remarkPlugins: [images, emoji]
            }
          }
        ]
      }
    ]
  }
}
```

言語プリセットをインストールします。

```bash
yarn add @babel/preset-env @babel/preset-react --dev
```

`.babelrc`に以下を追加します。

```javascript
{
  "presets": [
    "@babel/env",
    "@babel/react"
  ]
}
```

これでプロジェクト上でMDXが利用できます。`src/posts/first.mdx`を作ってみましょう。

```markdown
# Project1

Hello World!
```

上記をHTMLにコンバートして埋め込むには、インポートするだけです。

```jsx

// src/components/Layout.js(抜粋)

import First from "../posts/first.mdx";

...

const Layout = ({ children }) => (
  <Main>
    <Container bg="muted" p={4}>
      <First />
    </Container>
  </Main>
);
```

MDXファイルに適用されるスタイルは、前回作成したテーマオブジェクトの`styles`がマッピングされます。

```javascript
export default {
  ...
  styles: {
		...
    h1: {
      color: 'text',
      fontFamily: 'heading',
      lineHeight: 'heading',
      fontWeight: 'heading',
      fontSize: 5,
    },
    ...
  }
}
```

実行するとマークダウンがコンバートされた本文のスタイルが設定されているのが確認できます。

## Prism

ここまででMDXをHTMLにコンバートして、テーマオブジェクトのスタイルを適用することができました。最後にシンタックスハイライトを導入します。これを1番簡単に行うことができるのはPrismです。

```bash
yarn add @theme-ui/prism
```

`ThemeProvider`に`component` propを追加し、Prismを組み込んだコンポーネント指定します。

```jsx
// App.js
import Prism from '@theme-ui/prism';

const components = {
  pre: ({ children }) => <>{children}</>,
  code: Prism,
};

const App = () => (
  <ThemeProvider theme={theme} components={components}>
    <Styled.root>
      <Global />
      <Layout />
    </Styled.root>
  </ThemeProvider>
);
```

あとはどのようなテーマで描画するかです。`@theme-ui/prism`にはあらかじめ複数のテーマが用意されているため、これをテーマオブジェクトに読み込ませて`styles.code`に指定します。

今回は、draculaというテーマを使用しました。

```javascript
// theme.js
import dracula from '@theme-ui/prism/presets/dracula.json';

exports default = {
    styles: {
        code: {
        ...dracula,      
        }
    }
}
```

各自、first.mdxを`code`が含まれる内容に任意変更しておいてください。実行すると、コード部分が整形されているのが確認できるはずです。また、絵文字や画像を利用することもできます。これらは最初にプラグインをインストールしたため、MDX上で取り扱うことが可能になっています。

## おわりに

MDXとPrismを使いページ本文を生成し、スタイルを適用しました。今回の例では触れませんでしたが、MDX内にReactで作成したチャートなども埋め込むこともできて便利です。

2回に分けて解説しましたが、Theme UIでページレイアウトをする方法が伝われば幸いです。

React+Theme UI+MDXでコンテンツ部分を生成し、スタイリングする手順です。

ReactでTheme UI Part2

[Theme UI](https://theme-ui.com/)をReactで使うチュートリアル記事です。

この記事では簡易なWebページを作成します。超シンプルですが、実際にページを組むときに直面するあれこれ（グローバルスタイルやフォントなど）はカバーしてあります。

[SandBox](https://stackblitz.com/edit/react-themeui-part1)に実行可能な[DEMO](https://react-themeui-part1.stackblitz.io)を用意しましたが、以下の解説はローカル開発を想定しています。また、最低限Reactが動作する段階からの解説になります。

## 依存関係のインストール

まずは最低限必要なパッケージをインストールします。

```bash
yarn add theme-ui @emotion/core @mdx-js/react
```

ちなみにTheme UIは、以下を組み合わせたライブラリです。

- [Emotion](https://emotion.sh/docs/introduction)
- [MDX](https://mdxjs.com/)
- [Styled System](https://styled-system.com/)
- [Typography.js](https://kyleamathews.github.io/typography.js/)

## Theme Object

まず**テーマオブジェクト**を作成する必要があります。これはスタイルが定義されているオブジェクトファイルです。大雑把に分別すると、最上位プロパティは以下の3つになります。

- あらかじめ用意されているもの（spaceやfontsなど）
- 自分で定義したもの（今回の例だとflexなど）
- styles以下のオブジェクト（MDXで使用。次回の記事で解説）

以下のようなテーマオブジェクトを作成しました。

`src/theme.js`

```javascript
export default {
  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
  fonts: {
    body:
      '"メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif',
    heading: '"Segoe UI", Roboto, sans-sefig',
    monospace: 'Menlo, monospace',
  },
  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96],
  fontWeights: {
    body: 400,
    heading: 700,
    bold: 700,
  },
  lineHeights: {
    body: 1.5,
    heading: 1.125,
  },
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#07c',
    secondary: '#30c',
    muted: '#f6f6f6',
  },
  sizes: {
    container: 768,
  },
  breakpoints: ['40em', '56em', '64em'],
  flex: {
    header: {
      flexDirection: ['column', 'row'],
      textAlign: 'center',
    },
  },
  styles: {
    root: {
      fontFamily: 'body',
      lineHeight: 'body',
      fontWeight: 'body',
    },
    h1: {
      color: 'text',
      fontFamily: 'heading',
      lineHeight: 'heading',
      fontWeight: 'heading',
      fontSize: 5,
    },
    h2: {
      color: 'text',
      fontFamily: 'heading',
      lineHeight: 'heading',
      fontWeight: 'heading',
      fontSize: 4,
    },
    h3: {
      color: 'text',
      fontFamily: 'heading',
      lineHeight: 'heading',
      fontWeight: 'heading',
      fontSize: 3,
    },
    h4: {
      color: 'text',
      fontFamily: 'heading',
      lineHeight: 'heading',
      fontWeight: 'heading',
      fontSize: 2,
    },
    h5: {
      color: 'text',
      fontFamily: 'heading',
      lineHeight: 'heading',
      fontWeight: 'heading',
      fontSize: 1,
    },
    h6: {
      color: 'text',
      fontFamily: 'heading',
      lineHeight: 'heading',
      fontWeight: 'heading',
      fontSize: 0,
    },
    p: {
      color: 'text',
      fontFamily: 'body',
      fontWeight: 'body',
      lineHeight: 'body',
      fontSize: [0, 1, 2],
    },
    a: {
      color: 'primary',
    },
    pre: {
      fontFamily: 'monospace',
      overflowX: 'auto',
      code: {
        color: 'inherit',
      },
    },
    code: {
      fontFamily: "monospace",
      fontSize: "inherit"
    },
    blockquote: {
      mx: 0,
      px: [0, 2, 3],
    },
    table: {
      width: '100%',
      borderCollapse: 'separate',
      borderSpacing: 0,
    },
    th: {
      textAlign: 'left',
      borderBottomStyle: 'solid',
    },
    td: {
      textAlign: 'left',
      borderBottomStyle: 'solid',
    },
    img: {
      maxWidth: '100%',
    },
  },
};
```

最上位のプロパティ名は**scale**、**Theme Key**、**Varinat Group**などと呼ばれています。これらの中で、予め用意されているプロパティ名はCSSプロパティと対応しています。例えば`theme.colors`はCSSの`color`, `background-color`, `border-color`に対応しているといった具合です。

対応するキーは参照時にTheme Keyを指定する必要はありません。

```javascript
colors: {
	primary: '#333'
}
styles: {
	h1: {
		color: 'primary' // colors.primaryと記述しなくていい
	}
}
```

## ThemeProvider

テーマオブジェクトは、`ThemeProvider`の`theme` propに渡すことで配下のコンポーネントで利用できます。このコンポーネントをApp.jsに定義します。

```jsx
import React from 'react';
import { ThemeProvider, Styled } from 'theme-ui';
import Global from './components/Global';

import theme from './theme';
import Layout from './components/Layout';

const App = () => (
  <ThemeProvider theme={theme}>
    <Styled.root>
      <Global />
      <Layout />
    </Styled.root>
  </ThemeProvider>
);

export default App;
```

未定義コンポーネントもありますが、以降で触れていきます。また、テーマオブジェクトを渡しただけでは、配下のコンポーネントに即スタイルが適用されるわけではありません。

### Global Fonts

Theme UIはグローバルのフォントの設定を行わないため、特に指定がなければ要素単位でフォントの設定が必要になります。これは面倒なので、`Styles.root`というコンポーネントでラップしてフォントを設定します。

テーマオブジェクトに`styles.root`という項目があったのを確認してください。これがマッピングされます。

```javascript
styles: {
    root: {
      fontFamily: 'body',
      lineHeight: 'body',
      fontWeight: 'body',
    },
    ...
}
```

### Global Style

Theme UIではグローバルスコープにCSSを定義しませんが、必要なケースもあります。`ThemeProvider`より上位…例えば`body`の余白はこの方法でしか設定ができません。

グローバルスタイルはEmotionの`Global`コンポーネントを利用します。

```jsx
// src/components/Global.js

import React from 'react';
import { Global } from '@emotion/core';

export default props => (
  <Global
    styles={theme => ({
      body: {
        margin: 0,
        padding: 0,
      },
    })}
  />
);
```

## 組み込みコンポーネント

`@theme-ui/components`というパッケージをインストールすると、定義済みコンポーネントが使用できます。これらは`Box`など一部コンポーネントを除いて、デフォルトのスタイルがセットされています（正しくは、後述のdefault variantが用意されているため）。

パッケージをインストールしておきます。

```bash
yarn add @theme-ui/components
```

## レイアウトコンポーネント

画面に表示されるコンポーネントをラップするレイアウトコンポーネントを作成します。

`/src/components/layout.js`

```jsx
/** @jsx jsx */
import { jsx } from 'theme-ui';
import {
  Container,
  Heading,
  Flex,
  NavLink,
  Link,
} from '@theme-ui/components';

const Layout = ({ children }) => (
  <div
    sx={{
      display: 'grid',
      gridTempleteColumns: '1fr',
      gridTemplateRows: 'auto 1fr auto',
      height: '100vh',
    }}
  >
    <header
      sx={{
        px: [0, 3, 4],
        py: [0, 3, 4],
        display: 'flex',
        flexDirection: ['column', 'row'],
        justifyContent: ['flex-start', 'space-between'],
      }}
    >
      <Heading sx={{ fontSize: 2 }} as="h1" p={2}>
        MyPage
      </Heading>
      <Flex as="nav" sx={{ variant: 'flex.header' }}>
        <NavLink href="#" p={2}>
          Blog
        </NavLink>
        <NavLink href="#" p={2}>
          About
        </NavLink>
      </Flex>
    </header>
    <main>
      <Container bg="muted" p={4}>
        Test
      </Container>
    </main>
    <footer
      sx={{
        px: 4,
        py: 4,
        mx: 'auto',
      }}
    >
      Theme UI Sample
      <Link href="https://twitter.com/__maeda">@mda</Link>
    </footer>
  </div>
);

export default Layout;
```

あえて統一感のない色々な方法でスタイルを定義しています。順番に見ていきましょう。

### Custom Pragma

馴染みのない人は、1行目が不思議に思えるでしょう。

```jsx
/** @jsx */
import { jsx } from 'theme-ui';
```

これは、JSXのコンパイル時に`React.createElement`の代わりにEmotionのjsx関数を使用することをBabelに伝達する記述です。このあと解説する`sx` propを使用する場合は、これを1行目に必ず入れる必要があります。

### sx prop

```jsx
<div
  sx={{
    display: 'grid',
    gridTempleteColumns: '1fr',
    gridTemplateRows: 'auto 1fr auto',
    height: '100vh',
  }}
>
```

全体をラップする`div`はグリッドレイアウトでページを組んでいます。このとき利用するのが、`sx` propです。`sx`はinline styleで定義するのとほぼ同じです。しかし、ハードコーティングするだけではメリットを感じられないはずです。

多少恩恵を感じられるのは以下でしょうか。

```jsx
<Heading sx={{ fontSize: 2 }} as="h1" p={2}>
	MyPage
</Heading>
```

`fontSize: 2`は`font-size: 2px`ではありません。テーマオブジェクトの`fontSize`が対応しています。

```javascript
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 96]
```

配列`fontSizes[2]`は`16`を指すため、`fontSize: 16px`ということです。

この`Heading`は前述した組み込みコンポーネントです。`p`という独自のpropsがあり、これは`padding`を意味します（例えば`div`で`p`は機能しません）。このときの数値はテーマオブジェクトの`space`が該当します。

```javascript
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
```

つまり上記では`padding: 8px`というわけです。`as`は`styles.h1`で描画するという意味です。

他にも`NavLink`、`Link`などの独自コンポーネントを利用しています。各々の仕様は、ドキュメントに記載されています。

### Breakpoints

`Flex`も独自コンポーネントです。これは`variant`という機能で、テーマオブジェクトの`flex.header`を参照してスタイルを定義しています。このオブジェクト自体のネーミングは開発者が自由に定義できます。

```jsx
<Flex as="nav" sx={{ variant: 'flex.header' }}>
    <NavLink href="#" p={2}>
      Blog
     </NavLink>
    <NavLink href="#" p={2}>
      About
    </NavLink>
</Flex>      
```

ここではFlex Layoutでアイテムの主軸方向を設定しています。`breakpoints`は、レスポンシブデザインのブレークポイントを意味します。特定のプロパティ値に配列を使うと、ブレークポイントが参照されます。

```javascript
// theme object
breakpoints: ['40em', '56em', '64em'],
...
flex: {
  header: {
    flexDirection: ['column', 'row'],
    textAlign: 'center',
  },
},
```

主軸方向を40emまでは行、56emからは列方向にスイッチさせています。ブレークポイントは3つありますが、今回は3つ目を定義していません。この場合は直前のスタイルが維持されます。つまり横幅が64emになっても主軸は列です。

尚、1-2つ目のブレークポイントは同じで3つ目のみ変更したいときは、2つ目を空にします。

```javascript
flex: {
  header: {
    flexDirection: ['column', ,'row'],
  },
},
```

ブレークポイントはテーマオブジェクト内だけではなく`sx` prop内でも利用できます。

```jsx
<header
  sx={{
    px: [0, 3, 4],
    py: [0, 3, 4],
    display: 'flex',
    flexDirection: ['column', 'row'],
    justifyContent: ['flex-start', 'space-between'],
  }}
>
	...
</header>
```

`px`は`padding-left`と`padding-right`の短縮表記です。こういったショートハンドがいくつか用意されています。

ちなみに`sx`の中で`variant`を指定する方法は、レイアウトでよく使用されるパターンです。Gatsby公式テーマにあるスタイルの[Shadowing](https://www.gatsbyjs.org/docs/themes/shadowing/)は、この機能を利用しています。

### Container

`Container`も独自コンポーネントで、これはコンテナをラップするのに適しています。テーマオブジェクトの`sizes.contaeiner`に定義した値は、Containerの最大横幅に設定されます。

```javascript
sizes: {
  container: 768,
},
```

尚、Container自体のスタイルは`theme.layout.container`で定義することもできます。デフォルトで定義されているContainerは`theme.layout.container`を参照するので、ここにスタイルを定義してすればすべてのContainerはそれを参照します。

### variant

上記然り、組み込みコンポーネントはTheme Keyに対応する`variant group`が用意されているものがあります。例えば、`Button`コンポーネントは`theme.buttons`というVariant Groupに対応しています。尚、`Button`がデフォルトで使用するスタイルは`buttons.primary`です。

`variant`は言ってしまえば、スタイルのグループ化です。あらかじめ用意されている`Fonts`などは汎用的なVariant Groupとも言えるかもしれません。

組み込みコンポーネントはすべて`variant`というpropを持っているため、`theme.buttons.secondary`を定義しておけば、以下のように`sx`を使用しなくてもスタイルを指定できます。

```jsx
<Button variant="secondary">
	Button
</Button>
```

`variant="buttons.secondary"`と指定しなくていい点に注目してください。例えば`Flex`も組み込みコンポーネントですが、Varinat Groupを持っていないため、先のレイアウトコンポーネントで`<Flex varinat="header">`は機能しません。

## 実行

この時点で実行すると、超シンプルなWebページが確認できるはずです。

## おわりに

時間をかけて記事を書いたのですが、Theme UIの良さは伝わらなかったでしょう（笑）。あれやこれやとスタイル定義方法に尺を取ったため、そこまで手が回りませんでした。

Theme UIのテーマオブジェクトはSystem UIという仕様に基づいており、できるだけ他のライブラリと併用できるように設計されています。これは少ない労力で一貫性のあるスタイルを維持するのに役立ちます。今回だと、例えばフォントやスペース、ブレークポイントなどでその一面が垣間見えたかもしれません。

制約ベースのデザイン、もしくはスタイルガイド駆動型開発とも言うようですね。CSS-in-JSの中でも面白いアプローチに思えます。

[次回](react-theme-ui-part2)は今回の完成品にMDXを埋め込み、スタイリングまで行います。


ReactでTheme UIを使用するチュートリアルです。

ReactでTheme UI Part1

VSCodeでReactの[ESLint](https://eslint.org/)と[Prettier](https://prettier.io/)を設定する方法です。春先に下書きして投稿し忘れていた記事ですが、せっかくなので投下しておきます。

**⚠以降の注意点**

- あらかじめReactの開発環境を整えてあるものとします
- 開始時はVSCodeのsetting.jsonにある自動フォーマットを切っておいてください
- カレントディレクトリがプロジェクトのルートにいるとして解説しています

## ESLint

ESLintはJavaScriptのLinterです。プログラムのスタイルを分析します🔎

まずESLintをグローバルにインストールします。初期化を行うとディレクトリ内に`.eslintrc`が作成されますが、このグローバルコマンドの実行時に、プロジェクト用のeslintパッケージも自動でインストールしてくれます。

```bash
# インストール
yarn add global eslint

# 初期化・対話式で進む（各々の環境に合わせて答えます）
eslint --init
```

`.eslitrc`を設定します。

```javascript

module.exports = {
  parser: "babel-eslint",
  env: {
    browser: true,
    es6: true,
    jest: true
  },
  extends: ["airbnb"],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly"
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: "module"
  },
  plugins: ["react"],
  rules: {
    /* jsx, jsを許可 */
    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
    /* thisを介したpropsの警告無効化 */
    "react/no-this-in-sfc": 0,
    /* propsなどを直接使用可能にする */
    "react/destructuring-assignment": 0,
    /* jsxを1行で記述しなくてもよくする */
    "react/jsx-one-expression-per-line": 0,
    /* prop-typesによるバリデーション */
    "react/prop-types": 0,
    // devDependencies（外部モジュール）のインポートをコードに含めるのを許可
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
  }
};
```

デフォルトルールは`eslint: recommended`という規約ですが、広く使われているAirbnbのスタイルガイドをインストールします。

```bash
yarn add babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react --dev
```

Lint自体は以下で実行できます。

```bash
## ローカルパッケージのeslintを使う場合
./node_modules/.bin/eslint [filename]

## グローバルパッケージのeslintを使う場合
eslint [filename]
```

## Prettier

Prettierはコードフォーマッターです。グローバルにインストールします。

```bash
yarn global add prettier
```

これで`prettier --write [file]`でファイルを整形できます。

次にPrettierにESLintのルール（Airbnb）を使用して、Linterを実行したときにPritteirのエラーも表示できるようにします。

```bash
yarn add eslint-config-prettier eslint-plugin-prettier --dev
```

`.eslintrc.js`を編集します。`extends`と`plugin`と`rules`を編集しました。

```javascript
module.exports = {
  parser: "babel-eslint",
  env: {
    browser: true,
    es6: true,
    jest: true
  },
  extends: ["airbnb", "prettier", "prettier/react"],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly"
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 2018,
    sourceType: "module"
  },
  plugins: ["prettier", "react"],
  rules: {
    /* prittierのルール */
    "prettier/prettier": ["error"],
    /* jsx, jsを許可 */
    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
    /* thisを介したpropsの警告無効化 */
    "react/no-this-in-sfc": 0,
    /* propsなどを直接使用可能にする */
    "react/destructuring-assignment": 0,
    /* jsxを1行で記述しなくてもよくする */
    "react/jsx-one-expression-per-line": 0,
    /* prop-typesによるバリデーション */
    "react/prop-types": 0,
    // devDependencies（外部モジュール）のインポートをコードに含めるのを許可
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
  }
};
```

`.prettierrc`を作成して以下を記述します。Prittierの[整形ルール](https://prettier.io/docs/en/options.html)です。

```json
{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 70,
}
```

これで、`eslint [filename]`と実行すれば、ESLintに加えてPrettierの整形ルールにあっていないものもエラーとして表示されるようになります。

## VSCode

現状はターミナルからコマンドを実行する必要があり、利便が悪いです。VSCodeを使い効率を良くしましょう。

方法は簡単で、[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)と[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)の拡張をインストールするだけです！これでコマンド不要で開いているファイルすべてをLinterに介してくれます。

更に保存時に自動でフォーマットさせるには、`settings.json`に以下を追加します。

```json
/**
 * Prettier
 * @formatOnSave 保存時にフォーマットするのを許可
 */
"editor.formatOnSave": true,
"[javascript]": {
  "editor.formatOnSave": true
},
```

以上です。vim拡張を入れている場合、`:w`で保存するときに稀にフォーマットされないことがありますが、エディタ自体の保存`ctrl + s`を有効にしておくことで自分は対処しています。

VSCode環境でReact+ESLint+Prettierを設定する。

React+ESLint+Prettier+VSCode

Reactコンポーネントをアニメーションさせるというのは若干面倒な点もあるのですが、[React Simple Animate](https://github.com/bluebill1049/react-simple-animate)は名前の通り超簡単にアニメーションを実現させてくれるライブラリです。

提供されているコンポーネントは、`Animate`, `AnimateKeyframes`, `AnimateGroup`の3つ。これらの使い方は、[公式](https://react-simple-animate.now.sh/)のサンプルを眺めれば瞬時に理解できるほどシンプルです。

ただし、v2とv3でprops名が異なることがあるため注意が必要です。この記事では**v3.3.0**を対象にしています。

## Animate

`Animate`はスタイルをA⇔Bでアニメーションさせます。最低限必要なpropsは下記の3つです。

```jsx
<Animate
  play={false}
  start={{ opacity: 1, filter: 'blur(0)' }}
  end={{ opacity: 0, filter: 'blur(10px)' }}
>
  <MyComponent />
</Animate>
```

`start`が初期スタイル、`end` が変更後のスタイルです。`play`が`true`になったときにアニメーションしますが、最初から`true`だとコンポーネントロード後にアニメーションします。

その他の主なオプションは以下です。

- duration - アニメーションの長さ
- deplay - アニメーション開始までの時間指定
- complete - アニメーション完了後のスタイル指定
- easeType - [Easingタイプ](https://easings.net/)の指定
- onComplete - アニメーション完了後のコールバック

**例：文字のフェードアニメーション（抜粋）**

```jsx
import React from 'react';
import { Animate } from 'react-simple-animate';

const MyComponent = ({ play }) => (
  <>
    <Animate
      play={play}
      start={{ opacity:1, filter: 'blur(0)' }}
      end={{ opacity: 0, filter: 'blur(10px)' }}
    >
      <p>Hello World!</p>
    </Animate>
  </>
);

export default MyComponent;
```

単にテキストをフェードイン/フェードアウトさせています。`play`は親コンポーネントから`true/false`を渡して、スイッチさせているだけです。

## AnimationKeyframes

`AnimationKeyframes`は、[CSSキーフレームアニメーション](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations)そのものです。

必須propsは`play`と`keyframes`です。

```jsx
<AnimateKeyframes
    play={true}
    pause={false}
    iterationCount="infinite"
    direction="alternate"
    duration={5}
    keyframes={[
      'transform: rotateX(0) rotateY(0) rotateZ(0)',
      'transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)',
    ]}
>
	<MyComponents />
</AnimateKeyframes>
```

`keyframes`はデフォルトでは等間隔にアニメーションを行います。上記は下記と同等です。パーセント（中割り）は自由に指定可能で、2つに限る必要はありません。

```jsx
keyframes={[
  // 0%
  { 0: 'transform: rotateX(0) rotateY(0) rotateZ(0)' },
  // 100%
  { 100: 'transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)' }
]}
```

残りのオプションは以下です。

- pause - アニメーションの一時停止オプション（trueで一時停止）
- iterationCount - 繰り返し回数
- direction - アニメーション再生の向き（[animation-direction](https://developer.mozilla.org/ja/docs/Web/CSS/animation-direction)に該当）
- duration - アニメーションする秒数
- easeType - Easingタイプの指定
- fillMode - 実行前後にどうスタイルを適用させるか（[animation-fill-mode](https://developer.mozilla.org/ja/docs/Web/CSS/animation-fill-mode)に該当）

例は、[スターウォーズのOP](https://codepen.io/donovanh/pen/pJzwEw)を`AnimationKeyframes`で部分再現したものです👉[プレビュー](https://react-muz5pu.stackblitz.io/)

**例：AnimateKeyframesの抜粋**（[全文](https://stackblitz.com/edit/react-muz5pu)）

```jsx
import React from 'react';
import { AnimateKeyframes } from 'react-simple-animate';

const MyComponent = () => (
  <div className="starwars-demo">
    <AnimateKeyframes
      play={true}
      iterationCount="infinite"
      direction="normal"
      duration="5"
      easeType="ease-out"
      keyframes={[
        { 0: "opacity: 0; transform: scale(1.5) translateY(-0.75em)" },
        { 20: "opacity: 1" },
        { 89: "opacity: 1; transform: scale(1)" },
        { 100: "opacity: 0; transform: translateZ(-1000em)" }
      ]}
    >
      <img src="//cssanimation.rocks/demo/starwars/images/star.svg" />
    </AnimateKeyframes>
    <AnimateKeyframes
      play={true}
      iterationCount="infinite"
      direction="normal"
      duration="5"
      easeType="ease-out"
      keyframes={[
        { 0: "opacity: 0; transform: scale(1.5) translateY(0.5em)" },
        { 20: "opacity: 1" },
        { 90: "opacity: 1; transform: scale(1)" },
        { 100: "opacity: 0; transform: translateZ(-1000em)" }
      ]}
    >
      <img src="//cssanimation.rocks/demo/starwars/images/wars.svg" />
    </AnimateKeyframes>
  </div>
);

export default MyComponent;
```

keyframs内では、`transform`でスケールと`transformZ`でZ軸への移動をしています。遠近感のトリックはCSSです。

```css
.starwars-demo {
  transform-style: preserve3d;
  perspective: 800px;
}
```

利用しているのは、[transform-style](https://developer.mozilla.org/ja/docs/Web/CSS/transform-style)と[perspective](https://developer.mozilla.org/ja/docs/Web/CSS/perspective)です。前者で要素を3D空間に配置し、後者でそのZ軸（奥行き）の距離を設定しています。

## AnimationGroup（Animation Sequences）

`AnimationGroup`は順番通りの（シーケンス）アニメーションを実現します。複数の要素を規定の順番でアニメーションさせたい場合は、これを利用します。

```jsx
<AnimateGroup play={true}>
	<Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={0}>
  	first
  </Animate>
  <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={1}>
  	second
  </Animate>
  <Animate start={{ opacity: 0 }} end={{ opacity: 1 }} sequenceIndex={2}>
  	third
  </Animate>
</AnimateGroup>
```

`Animate`を`AnimateGroup`でラップすることで、順番にアニメーションさせられます。順番は`sequenceIndex`に指定した順です。`sequenceId`と`sequences`で同様のことも行えるようですが、こちらは公式ドキュメントに沿うと自分の環境では動作しなかったため、様子見です。

```jsx
<AnimateGroup play sequences={[
    { sequenceId: 'first', ...props},
    { sequenceId: 'second', ...props },
    { sequenceId: 'third', ...props }
]}>
    <Animate sequenceId="first">first</Animate>
    <Animate sequenceId="second">second</Animate>
    <Animate sequenceId="third">third</Animate>
</AnimateGroup>
```

基本は`Animate`コンポーネントのため、特に難しいことはないはずです。

尚、ここまでの例はすべてインラインスタイルで定義してきましたが、公式にあるようにHookでの記述も可能です（React@^16.7以上が必要）。

React Simple AnimateでReactコンポーネントのアニメーションを試してみます。

React Simple Animateでアニメーション処理

少し前に約3ヶ月ぶりのマイナーバージョンアップが来ていたので、変更点を確認。[公式](https://reactjs.org/blog/2019/08/08/react-v16.9.0.html)に沿っているので、特に目新しい情報が記載されているわけではありません。あしからず。

## 非推奨項目

### アンカータグの"javascript:"

アンカータグに`javascript:`を使う記述が非推奨になりました。

```jsx
// Warning!
const App = () => <a href="javascript: alert('hello')">click</a>
```

使用はできますが、v16.9ではコンソールに警告が表示されます。`dangerouslySetInnerHTML`を使えば警告は表示されませんが、あえて使用するケースも少ないでしょう。

## Factory Component

renderメソッドでオブジェクトを返すfactoryコンポーネントが非推奨になりました。

```javascript
function FactoryComponent() {
    return { render() { return <div />; } };
}
```

動的にクラス名を作成する場合など、コンポーネントを作成する処理を記述する用途で利用されていたようです。

### ライフサイクルメソッド

以下のライフサイクルメソッドがリネームされました。

- componentWillMount→UNSAFE\_componentWillMount
- componentWillReceiveProps→UNSAFE\_componentWillReceiveProps
- componentWillUpdate→UNSAFE\_componentWillUpdate

リネームされたメソッドは、16.9と今後リリースされる17.xでも機能します。今あるコードを自動でリファクタリングしたい場合には、公式で示されている以下のコマンドを実行します。

```bash
npx react-codemod rename-unsafe-lifecycles
```

### Async act()

[過去記事](react-16-8-hooks-and-reacttestutils-act)で取り上げたように、React Hooksのテストを行う際に`act()`が導入されました。このユーティリティメソッドが非同期処理に対応するようになりました。

```jsx
await act(async() => {
});
```

## 機能の追加

### React.Profiler

React v16.5で追加されたボトルネックを調査する[React DevTools](https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)の大規模アプリケーション版だそうです。要はレンダリング時のコストを把握するAPIですね。

メモ化など、レンダリング時のボトルネックを改善するために利用します。

#### 使用方法

`Profiler`をインポートし、ボトルネックを調査したい場所にラップします。コンポーネントには`id`と`onRender`を定義します。後者は再レンダリングが発生するたびにコールされるコールバック関数で、レンダリングにかかった時間などの情報を受け取ります。

```jsx
<Profiler id="Check" onRender={onRenderCallback}>
    <Component />
</Profiler>
```

`onRender`コールバック関数は以下の引数を受け取ります。

```javascript
function onRenderCallback(
  id,
  phase,
  actualDuration,
  baseDuration,
  startTime,
  commitTime,
  interactions
) {
  // ログの書き出しなど
}
```

- id - Profilerで指定したid
- phase - フェーズ状態。"mount"か"update"が格納（下記参照）
- actualDuration - 更新のレンダリングに要した時間。通常、メモ化すると必要部分のみを更新するため、マウント後以降はこの値が減少していくのが理想的
- baseDuration - メモ化せずにツリー全体をレンダリングする場合の予想時間。actualDurationとの対比に使われると思われます。
- startTime - 現在の更新レンダリングを開始したときのタイムスタンプ
- commitTime - Reactが現在の更新をコミットしたときのタイムスタンプ
- interactions - [Interaction tracing](https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcdda16)のセット。指定しないと空のSet配列が返る

Reactはrenderとcommitという2つのフェーズを持っています。renderフェーズは変更を行う必要があるかを決定し、その結果を以前の内容と比較します。commitフェーズは、実際にDOMへの挿入や削除などの変更になります。

#### 出力例

[以前解説](react-v16-6)した`React.memo`のサンプルを`Profiler`でラップし、連続レンダリングしたものを単に出力してみると、例えば以下のような値が出力されます。

![console](//images.ctfassets.net/mmh9uyfw68qp/6sSPKfSPZ58IIGfCSvR4hX/30884a20184bee5feed8843df2b863a7/console.png)

actualDurationとbaseDurationに注目します。100回再レンダリングし、メモ化前後で比較してみました（抜粋）。実際に再レンダリングされるコンポーネントは2の累乗あります。

![result](//images.ctfassets.net/mmh9uyfw68qp/2QPmiz1FWbFgLQvQhaTlAK/e0ad52eb397caf938150ff29da4f4aaa/result.png)

メモ化しない場合は更新のたび追加以外のコンポーネントも更新されるため、徐々にactualDurationが増えていきます。尚、`Profiler`はコストがかかるため、プロダクション時は自動で無効になるそうです。

React v16.9の変更点

タイムアウトなどが絡み外部画像の読み込みが失敗することは多々あります。誰しもブラウジング中に破損した画像のアイコンを見かけたことはあるはずです。

[React Image](https://www.npmjs.com/package/react-image)というライブラリを使うと、破損した画像を指定した画像で隠すことができます。ただ隠すだけでなく、読み込んだ地点までのキャッシュを保存するため、ウィンドウを再ロードするときにリソースの節約もできるようです。

```bash
yarn add react-image
```

## 使用例

画像は、[Picsum](https://picsum.photos/)というサービスを利用しています。

```jsx
const Load = () => <p>Loading...</p>;
const UnLoad = () => <img src="images/unload.jpg" alt="" />;

const MyComponent = () => (
  <Img
    src="https://picsum.photos/200"
    loader={<Load />}
    unloader={<UnLoad />}
  />
);
```

3つのpropsを使用しています。

- src - 読み込む画像の外部URLです。配列で複数画像の指定も可能
- loader - `src`が読み込まれる前に表示されるローカルのReactコンポーネント
- unloader - 画像の読み込みが失敗した場合に表示される画像を指定

実際に利用してみると、画像読み込み前に「Loading...」が表示されます。

![result-1-min](//images.ctfassets.net/mmh9uyfw68qp/3crJ4OYvMBUK7JiNswhucp/ab4714819ca8a3bb078b3ca02b9f5b3c/result-1-min.gif)

画像が読み込めなかった場合は、`unloader`のコンポーネントが表示されます。

![result-2-min](//images.ctfassets.net/mmh9uyfw68qp/51ydrR8ubSxkXCvOC3ObTC/0e1eae2831ee087e11a88b14ce9b9b89/result-2-min.gif)

以下、上記のコード全文。

```jsx
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Img from 'react-image';

const Load = () => <p>Loading...</p>;
const UnLoad = () => <img src="images/unload.jpg" alt="" />;

const MyComponent = () => (
  <Img
    src="https://picsum.photos/200?grayscale"
    loader={<Load />}
    unloader={<UnLoad />}
  />
);

const App = () => (
  <>
    <MyComponent />
    <br />
    <button onClick={() => window.location.reload()}>再読み込み</button>
  </>
);

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```

また、外部ドメインからリソースを読み込む際にCORS（Cross-Origin Resource Sharing）リクエストを構成することもできます。[crossorigin属性](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes)をImgに定義するだけです。

```jsx
<Img src={/* URL */} crossorigin="anonymous" />
```

このように通常のimg要素のフォールバックが行えて便利です。

React Imageというライブラリを使用して破損する画像に対処する。

React Imageで画像の破損に対応する

React Hooks以降、複数コンポーネント間の状態管理にはContextとuseReducerを組み合わせるのが一般的になっているようです。[以前](state-management-with-context-and-usereducer)にこのブログ内でも取り上げました。

上記はプレーンなReactだけで実現できます。手軽な反面、コードが直感的にならない印象を受けます。Contextだけならともかく、useReducerを使うとReduxライクな記述にするか、または独自の書き方をするか、組む人に左右される部分もあります。

今回取り上げる[Unstated Next](https://github.com/jamiebuilds/unstated-next)は、Reactコンポーネント間で状態を管理するライブラリです。これを使えばdispatchなどの概念は頭からポイできます🗑

```shell
yarn add unstated-next
```

以降、A・Bというコンポーネント間でフォームの状態値を取り扱う例を考えます。

## createContainer

まず必要なのは、状態を保管する**Container**を作成することです。これはReduxにおけるstoreと似ていて、状態値や更新関数が保管されます。store.jsというファイルを作りましょう。

```jsx
import { useState } from 'react';
import { createContainer } from 'unstated-next';

export const useStore = () => {
  // 入力中の状態
  const [input, setInput] = useState('');
  // テキスト値
  const [text, setText] = useState('sample');

  // 入力中の状態値を変更するハンドラ関数
  const handleInput = event => {
    setInput(event.target.value);
  };

  // 確定時のハンドラ関数
  const handleSubmit = event => {
    event.preventDefault();
    if (input.length === 0) return;
    setText(input);
    setInput('');
  };

  return {
    input,
    text,
    handleInput,
    handleSubmit,
  };
};

export const StoreContainer = createContainer(useStore);
```

最後一行以外は単なる[Custom Hook](https://reactjs.org/docs/hooks-custom.html)です。そして`createContainer`はReact Contextにおける`createContext`です。引数にCustom Hookを指定しており、これでContainerが作成できます。中には状態値とハンドラが格納されていて、外部で使えるのは`return`内の値です。

内部は単なるCustom Hookのため、直感的なコードになります。

## useContainer

コンポーネントで値を読み出してみましょう。A.jsというファイルを作成します。

```jsx
import React from 'react';
import { StoreContainer } from '../store';

const A = () => {
  const form = StoreContainer.useContainer();
  return (
    <>
      <p>{form.text}</p>
      <input
        type="text"
        value={form.input}
        onChange={form.handleInput}
      />
      <button type="button" onClick={form.handleSubmit}>
        確定
      </button>
    </>
  );
};

export default A;
```

先程の`StoreContainer`をインポートし、`useContainer`を呼び出しています。

```jsx
const form = StoreContainer.useContainer();
```

`form`という変数でContainerで`return`した値にアクセスできます。例えば`form.input`とすれば、入力状態値を扱う変数を取り扱えます。

## Provider

最後に`Container名.Provider`で利用するコンポーネントをラップします。React ContextのProviderと似ていますが、`value`を渡す必要はありません。

App.jsに以下を記述します。

```jsx
import React from 'react';
import A from './components/A';
import B from './components/B';
import { StoreContainer } from './store';

const App = () => (
  <>
    <StoreContainer.Provider>
      <A />
      <B />
    </StoreContainer.Provider>
  </>
);

export default App;
```

Bコンポーネントは、Aコンポーネントと名前以外はまったく同じコンポーネントです。これを実行してみると、AとBで同じ状態を利用できているのが確認できます。

![unstated-next-example](//images.ctfassets.net/mmh9uyfw68qp/5lYCq8p2NYZQqzrmXEwvO6/eea5a69b005d304070b021a6c4d0de10/unstated-next-example.gif)

ネストしたコンポーネントや他の状態やハンドラを呼び出すことも可能です。

## 少し凝った例 - ECサイト

React Routerで読み込むコンポーネント内でも利用できます。以下、簡易なECサイトのカートを再現してみました。※バックエンドなどは省いています。

![unstated-next-sample](//images.ctfassets.net/mmh9uyfw68qp/6fBnJ2jMPm0Lm9o0sKvm4q/8018a93e7f7e976120c03318880a4226/unstated-next-sample.gif)

コードは[Sadbox](https://stackblitz.com/edit/react-7ru5ku)に置いてあります。

この例では利用していませんが、`React.lazy`で動的に分割コンポーネントを読み込み、その中でContainerの値を取得もできます。

## おわりに

Unstated Nextを使うと、複数コンポーネントの状態管理が簡単になります。200バイトというミニマムサイズなのも👍気になれば、是非。

Unstated Nextというライブラリでグローバルな状態を管理する方法。

Unstated Nextで状態管理

昨今のWebに必須とも言える共有（SNS）ボタンですが、APIが実装され始めています。

通常、Webにはサイト側が用意したTweetボタンなどが並んでいますが、モバイルだとブラウザなどに実装されているネイティブの「共有」もあります。これを使うとサイトが用意していないサービスへ共有を行うことができます。

このネイティブの共有を呼び出すAPIが実装されてきているという話です。利点はSNSボタンのようにリソースのかかるものを複数配置しなくていいという点や、ユーザーが共有したいサービスを自由に選べるなどが挙げられます。

## 実装

現状はモバイルだけですが、navigatorに`share`というメソッドが用意されています。実装は引数に以下を指定するだけです。最低1つ渡せば動作はします。

- title - 共有するURLのタイトル
- url - 共有したいURL
- text - 共有時に含めたいテキスト

尚、現在のページのURLやタイトルに必ずしも一致している必要はありません。

```javascript
// html上にあるbutton
const shareButton = document.getElementById('btn');

shareButton.addEventListener('click', event => {
  if (navigator.share) { // share apiに対応しているか
    navigator.share({
      title: 'the2g',
      url: 'https://the2g.com'
    }).then(() => {
      // success
    }).catch(console.error);
  } else {
    // not support
  }
});
```

イベントが発火するとネイティブの共有ボタンを押したのと同じ動作になります。尚、`navigation.share`はpromiseを返します。

対応していない場合のフォールバックは必要です。通常は現行のWebページで見かけるSNSボタンを配置すればいいでしょう。

## Reactで実装してみる

Reactで共有ボタンのコンポーネントを作ると、以下のような感じになるでしょうか。PCではTweetのリンクを表示し、モバイルだとネイティブの共有を呼び出すボタンを表示します。

コード全文は[Sandbox](https://stackblitz.com/edit/react-3rfnm6)にあります。

```jsx
import React from 'react'; // ^16.8

const baseUrl = "https://twitter.com/intent/tweet?";

// twitter button
const SnsBtn = ({ info }) => (
  <ul>
    <li>
      <a href={`${baseUrl}text=${info.title}&url=${info.url}`}>
        Tweet
      </a>
    </li>
  </ul>
);

// native share button
const ShareBtn = ({ info }) => {
  const handleClick = e => {
    e.preventDefault();
    navigator.share({
      title: info.title,
      url: info.url
    }).then(() => {
      // success!
    });
  }
  return (
    <button onClick={handleClick}>Share</button>
  );
}

// main
export default function Share () {
  const [value, setValue] = React.useState({
    title: "",
    url: ""
  });

  React.useEffect(() => {
    setValue({
      title: document.title,
      url: location.href
    });
  }, []);

  return (
    <>
      { /* check navigator.share */
       navigator.share
       ? <ShareBtn info={value} />
       : <SnsBtn info={value} />
      }
    </>
  );
}
```

モバイルでの共有の流れは以下のような感じです。

![transition-diagram](//images.ctfassets.net/mmh9uyfw68qp/QjcQWJA1tqMbd2QPz0yZO/fd95daaff1cdb5f242a0c6510c8cac8c/transition-diagram.png)

画像の共有先はGoogle Keepですが、自由に選択できます。

仕様が固まりつつあるShare APIに触れてみる。

Share API - Navigator.share

**CSS-in-JS**はCSSをコンポーネントレベルで抽象化します。特定のライブラリを指すわけではないため、実装に関してはどのライブラリを選択するかによりアプローチは異なります。共通しているのはJavascriptを使うという点だけです。

CSS in JSを検索するとCSSの設計視点の話がよく見られると思います。ここではそういうのは置いておき、とりあえず触ってみようぜ！って感じの内容です。

本記事ではReactでよく利用される[styled-components](https://www.styled-components.com/)を使用します。とりあえず最初にこれだけ覚えとけばいいかなというものを列挙しました。

## 導入準備

パッケージをインストールします。

```shell
yarn add styled-components
```

もし[VSCode](https://code.visualstudio.com/)を使用している場合は、[vscode-styled-components](https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components)というプラグインをインストールするのをお勧めします。CSSプロパティの補完を受けられます。

## 簡単な例

`styled.要素`の後にCSSをバッククォートで囲み定義します。擬似要素やメディアクエリも標準のCSSの記述方法で定義でき、必要なベンダープレフィックスも自動挿入されます。

```jsx
import styled from 'styled-components';

const MyComponent = styled.div`
	font-size: 1em;
    color: #000;
`;

const App = () => <MyComponent>CSS in JS</MyComponent>
```

実際のブラウザでのレンダリングでは、ユニークなクラス名が付与されます。併せて対応するスタイルが定義された`<style>`が挿入されます。クラス名やスタイルの衝突を意識する必要はなくなります。

```jsx
<head>
  <style data-styled data-styled-version="4.2.0">
  /* sc-component-id: sr-bdVaJa */
  .fdjasQ{font-size:1em:color:#000;}</style>
</head>
<body>
  <div id="root">
    <div class="sc-bdVaJa fdjasQ">CSS in JS</div>
  </div>
</body>
```

ReactはファイルベースのCSS、inline CSS、CSS Moduleなどのスタイル定義方法をサポートしています。お勧めはしませんが、styled-componentsと併用は可能です。

## props

`props`を経由してスタイルを変更できます。

```jsx
const Headline = styled.h1`
	color: ${props => props.color};
`;

// render()内
<Headline color="red">Headline</Headline>
```

## 変数

外部ファイルに定数を定義しておき、それを読み込み値として使用できます。

```jsx
// .style.js
export const redColor = "#ff0000";

// App.js
import { redColor } from "./style";

const MyComponent = styled.div`
	color: ${redColor};
`;
```

## 入れ子

Sassのようにネストされたスタイルも定義できます。

```jsx
const Container = styled.div`
  width: 200px;
  ul {
    list-style: square;
    li {
      color: blueviolet;
    }
  }
`;

function App() {
  return (
    <Container>
      <ul>
        <li>item1</li>
        <li>item2</li>
      </ul>
    </Container>
  );
}
```

ただし、通常は各コンポーネントで独立させた方が汎用性は高まります。

```jsx
const Container = styled.div`width: 200px`;
const List = styled.ul`list-style: square`;
const ListItem = styled.li`color: blueviolet`;

function App() {
    return (
    	<Container>
        	<List>
                <ListItem>item1</ListItem>
                <ListItem>item2</ListItem>
            </List>
        </Container>
    );
}
```

## 拡張する

既存コンポーネントのスタイルを継承することもできます。

```jsx

const Button = styled.button`
  background-color: green;
  color: red;
  border: none;
  padding: 1em 2em;
`;

/* background-colorは上書きできる */
const YellowButton = styled(Button)`
  cursor: pointer;
  background-color: yellow;
`;
```

## 多態性（ポリモーフィズム）

`as`を使うとスタイルは利用したままタグだけを変更することができます。

```jsx
const Headline = styled.h1`
  font-size: 2em;
`;

// render()内
// 通常はh1でレンダリングされるが、以下はh5としてレンダリングされる
<Headline as="h5">Head</Headline>
```

## CSSの生成

`css`ヘルパー関数を使うとテンプレートリテラルからCSSを生成できます。以下は`test` propsに応じて生成されたCSSがコンポーネントに挿入されます。

```jsx
const Headline = styled.h1`
	${props => props.test && css`
		color: red;
	`};
`;

// render内
<Headline test>Head</Headline>
```

styled-componentsはクラスではなくpropsに基づいたスタイル変更を推奨（強制）しています。従来のクラスのような使い方をしたい場合は、上記のような記述が必要になります。

## クラスの挿入

CSSフレームワークとの併用でコンポーネントにクラスを挿入したい場合もあるでしょう。

[Q&A](https://www.styled-components.com/docs/faqs#can-i-use-css-frameworks)に記載されているように`attr`を使います。この関数は他の属性定義にも使えます。

```jsx
const Headline = styled.h1.attrs({
  className: "test"
})`
  font-size: 2em;
  /* testクラスのプロパティを定義しています */
  &.test {
    color: blue;
  }
`;

// render()内での利用
<Headline>Head</Headline>
```

挿入されるクラス名は`.ランダム値.test`となります。

## グローバルスタイル

グローバルなスタイルを定義したい場合は、`createGlobalStyle`を利用します。以下のようなファイルを別途作成します。

```jsx
// globalStyle.js
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
  }
`;

export default GlobalStyle
```

このコンポーネントをメインコードで使用するだけです。

```jsx
import GlobalStyle from './globalStyle.js';

function App() {
  return (
    <>
      <GlobalStyle />
	  ...
    </>
  )
}
```

`createGlobalStyle`は、ここまでの例と異なりユニークなクラス名は付与されません。通常のCSSファイル同様に記述内容がそのまま`<style>`に挿入されます。

## おわりに

CSS in JSではCSSモデルをドキュメントベースではなく、コンポーネントレベルで考えていくことになります。複数のCSSファイルを管理する必要はなくなります。更にはBEMなどを導入する必要なく、プロパティの汚染もスルーできます。

その他のAPIは[ドキュメント](https://www.styled-components.com/docs)で！

CSS in JSのアプローチの1つであるstyled-componentsの要点を解説。

First step in styled-components（CSS in JS）

React Router v5がリリースされていたようなので、v4からの変更点を取り上げてみます。

現在、特に指定をしなければv5がインストールされます。

```bash
# Browser DOM
yarn add react-router-dom

# React Native
yarn add react-router-native
```

## 変更点の要点

v5は後方互換があるため、v4ユーザーは既存コードのまま利用できます。

注意するとすれば、コアパッケージからの分割代入が推奨される点。

```jsx
// この記述方式を使っている場合は
import Router from 'react-router/Router';
import Switch from 'react-router/Switch';

// こうする必要がある
import { Router, Switch } from 'react-router';
```

前者も現状は使えますが、以下のような警告が表示されます。

```bash
Warning: Please use `require("react-router-dom").
Switch` instead of `require("react-router-dom/Switch")`.
Support for the latter will be removed in the next major release.
```

## 新機能

`<Route path>`で**配列が使用できるようになった**。2つ以上の異なるルートパスで同じコンポーネントをレンダリングしたい場合は、1箇所にまとめて記述できます。

例えば、`/`と`/home`をHomeというコンポーネントでレンダリングする場合、今までは以下のように記述していました。

```jsx
<Switch>
  <Route exact path="/home" component={Home} />
  <Route exact path="/">
    <Redirect to="/home" />
  </Route>
</Switch>
```

今後は以下のように記述できます。

```jsx
<Switch>
  <Route exact path={["/home", "/"]} component={Home} />
</Switch>
```

上記はリダイレクトのため本来は変更前の表記が好ましいかもしれませんが、こういう書き方もあるよ程度で覚えておくといいかもしれません。

## おわりに

v4.3を使用しているユーザーは、従来のコードを維持したままv5にアップデートできます。実のところ、v4.4.0 betaが依存関係の問題でv5.0.0として繰り上がりリリースされたようです。

React Router5の変更点を見ていきます。

React Router 5の変更点

以前解説した**React Context**のHook版チュートリアルになります。ステートレスコンポーネントにおいては、こちらを使う方がシンプルになります。

## React Contextとは

Reactコンテキストを使用すると、親コンポーネントの状態変数を`props`を経由させずに引き渡すことが可能となります。シンプルかつ標準APIのため好まれています。

詳細を更に知りたい場合は、過去のContext記事を参照してください。

## ベースとなるコード

例を作り上げていく形式で解説します。フォームに入力した数値がフォントサイズとして適用される例を考えてみます。

![step1](//images.ctfassets.net/mmh9uyfw68qp/3yzh2WRZ0vOtBvg3rcgcG3/2e0f4393607c610103787f7fb04d70f8/step1.gif)

```jsx
// index.js

import React, { useState, createContext } from 'react';
import ReactDOM from 'react-dom';

function App() {
  const [size, setSize] = useState(16);

  return (
    <div>
        <h1 style={{ fontSize: `${size}px` }}>FONT SIZE {size}px</h1>
        <form onSubmit={e => e.preventDefault()}>
          <input
            type="number"
            value={size}
            onChange={e => setSize(e.target.value)}
          />
        </form>
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```

上記の`size`をコンテキストを使って、子コンポーネント内でも利用できるようにします。

## コンテキストを使い子コンポーネントで値を参照する

まずメインコードのindex.jsでコンテキストを作成します。

```jsx
// index.js

import React, { useState, createContext } from 'react';
import ReactDOM from 'react-dom';
import Text from './Text';

export const FontContext = createContext(0);

function App() {
  const [size, setSize] = useState(16);

  return (
    <div>
      <FontContext.Provider value={size}>
        <Text />
        <form onSubmit={e => e.preventDefault()}>
          <input
            type="number"
            value={size}
            onChange={e => setSize(e.target.value)}
          />
        </form>
      </FontContext.Provider>
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```

`createContext()`でコンテキストを作成しています。引数はデフォルト値になりますが、実際は初期化するので何を入れても問題ありません。

そして`<FontContext.Provider value={size}>`でコンテンツをラップします。`value`に代入する値がコンテキストで共有される値となります。State Hookの`size`を設定しています。

次にコンテキストの値を利用する子コンポーネントText.jsxを作成します。

```jsx
// Test.jsx

import React, { useContext } from 'react';
import { FontContext } from './index';

export default function Text() {
  const size = useContext(FontContext);

  return <h1 style={{ fontSize: `${size}px` }}>FONT SIZE {size}px</h1>;
}
```

従来のコンテキストを使用したことがあるならば、`useContext()`が`Consumer`に該当します。要はコンテキストを参照するAPIです。ここでは親コンポーネントでセットした`size`を見出し要素のスタイルとして利用しています。

実行結果は先程と同じですが、子コンポーネントで`size`が利用できるようになりました。

## 子コンポーネントからも更新ができるようにする

現状は子コンポーネントは値の参照だけを行なっています。子からも値の変更ができるようにしましょう。最終コードとプレビューは[Sandbox](https://codesandbox.io/s/m9jko7zpkp)で確認できます。

`createContext()`に渡す初期値を配列形式にします。第1引数は先程のままですが、第2引数は空の関数を入れておきます。更新用の関数が入るという意味です。

```jsx
export const FontContext = createContext([0, () => {}]);
```

そして、Providerにも同じように値と更新関数を配列形式で渡します。

```jsx
<FontContext.Provider value={[size, setSize]}>
```

直接関係はないのですが子コンポーネントとの兼ね合い上、更新値が`String`として見なされるため、既存の`setSize()`内を明示的に数値変換させておきます。

```jsx
<input
    type="number"
    value={size}
    onChange={e => setSize(parseInt(e.target.value, 10))}
/>
```

次にText.jsxコンポーネントです。

こちらは上記で追加された更新関数も一緒に`useContext()`で受け取るようにしています。更新関数はこのコンポーネントで定義できるので、ボタンクリックのたび4pxフォントサイズを上げる処理を定義しています。

```jsx
// Text.jsx

import React, { useContext } from 'react';
import { FontContext } from './index';

export default function Text() {
  const [size, setSize] = useContext(FontContext);

  return (
    <div>
      <h1 style={{ fontSize: `${size}px` }}>FONT SIZE {size}px</h1>
      <button onClick={e => setSize(parseInt(size + 4, 10))}>+4</button>
    </div>
  );
}
```

![step2](//images.ctfassets.net/mmh9uyfw68qp/1xJgjc7WM0ak1MGSPx5Czb/bbf7fb692b4a7a53cb42145d2c2497de/step2.gif)

子からコンテキストの更新関数を呼び出し、コンテキストの値を変更できました。

## 複数の値をコンテキストで管理する

コンテキストに複数の値を持たせたい場合もあるでしょう。その場合は、単に`createContext`に渡す値をオブジェクトにするだけです。

ここではフォントのサイズだけでなく、色もコンテキストで管理することにしました。

```jsx
export const FontContext = createContext([
    { size: 0, color: 'red' }, () => {}
]);
```

この場合、コンポーネント内で対応しているState Hook値もオブジェクトにします。

```jsx
const [value, setValue] = useState({
  size: 16,
  color: '#FF0000'
});
```

Stateと更新関数の名前を変えたので、Providerの`value`内変数名も変更します。

```jsx
<FontContext.Provider value={[value, setValue]}>
```

フォントサイズ変更時のイベントハンドラは対応するState値がオブジェクトに変わったことで、別に切り分けました。クラスベースの`setState`と異なり**Hookの更新関数はState値を丸ごと置き換える**ため、工夫が必要です。

```jsx
const updateHandler = e => {
  setValue({
    ...value,
    [e.target.name]: e.target.value
  });
};
```

index.jsの全文は以下になります。

```jsx
import React, { useState, createContext } from 'react';
import ReactDOM from 'react-dom';
import Text from './Text';

export const FontContext = createContext([
    { size: 0, color: 'red' }, () => {}
]);

function App() {
  const [value, setValue] = useState({
    size: 16,
    color: '#FF0000'
  });

  const updateHandler = e => {
    setValue({
      ...value,
      [e.target.name]: e.target.value
    });
  };

  return (
    <div>
      <FontContext.Provider value={[value, setValue]}>
        <Text />
        <form onSubmit={e => e.preventDefault()}>
          <input
            type="number"
            name="size"
            value={value.size}
            onChange={updateHandler}
          />
        </form>
      </FontContext.Provider>
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```

残りはText.jsです。1ステップ前のボタンの加算処理は削除し、新たにコンテキストで取り扱っているフォントの色（`color`）の変更を行うイベントハンドラを追加しています。

以下はText.jsxの全文です。

```jsx
import React, { useContext } from 'react';
import { FontContext } from './index';

export default function Text() {
  const [value, setValue] = useContext(FontContext);

  const updateHandler = e => {
    setValue({
      ...value,
      [e.target.name]: e.target.value
    });
  };

  return (
    <div>
      <h1 style={{ fontSize: `${value.size}px`, color: `${value.color}` }}>
        FONT SIZE {value.size}px
      </h1>
      <form onSubmit={e => e.preventDefault()}>
        <input
          type="color"
          value={value.color}
          name="color"
          onChange={updateHandler}
        />
      </form>
    </div>
  );
}
```

[Sandbox](https://codesandbox.io/s/406y2lqyl9)でコードとプレビューが可能です。

![step3](//images.ctfassets.net/mmh9uyfw68qp/5LZWY2hUGBh4XmgpIxxobp/40db0d7d6ed63e9253b97775cc8ccaff/step3.gif)

ここまでで`useContext`を使ったコンテキストの解説は終わりです。余力があれば次に進みリファクタリングを行いましょう。

## コンテキストを別コンポーネントに分ける

ここまでのコードをリファクタリングします。役割ごとにコンポーネントを切り分け、コンテキスト自体も汎用的なものにします。

コンテキストをFontContext.jsとして切り分けます。コンテキスト内容は以前と同じ内容ですが、Provider内を`props.children`とすることで、HOCのような使い方ができるようになります。

```jsx
// FontContext.js

import React, { createContext, useState } from 'react';

export const FontContext = createContext([
  { size: 0, color: '#FFFFFF' },
  () => {}
]);

export function FontContextProvider(props) {
  const [value, setValue] = useState({
    size: 16,
    color: '#FF0000'
  });

  return (
    <FontContext.Provider value={[value, setValue]}>
      {props.children}
    </FontContext.Provider>
  );
}
```

テキストサイズを変更するフォームはTextSizeForm.jsxとして切り分けます。

```jsx
// TextSizeForm.jsx

import React, { useContext } from 'react';
import { FontContext } from './FontContext';

export default function TextSizeForm() {
  const [value, setValue] = useContext(FontContext);

  const updateHandler = e => {
    setValue({
      ...value,
      [e.target.name]: e.target.value
    });
  };

  return (
    <>
      <form onSubmit={e => e.preventDefault()}>
        <input
          type="number"
          name="size"
          value={value.size}
          onChange={updateHandler}
        />
      </form>
    </>
  );
}
```

同じようにテキストカラーを変更するフォームをTextColorForm.jsxとして切り分けます。先程は色を変更するフォームコンポーネント内に表示されるテキストも配置していましたが、機能を独立させるため取り除いています。

```jsx
// TextColorForm.jsx

import React, { useContext } from 'react';
import { FontContext } from './FontContext';

export default function TextColorForm() {
  const [value, setValue] = useContext(FontContext);

  const updateHandler = e => {
    setValue({
      ...value,
      [e.target.name]: e.target.value
    });
  };

  return (
    <div>
      <form onSubmit={e => e.preventDefault()}>
        <input
          type="color"
          value={value.color}
          name="color"
          onChange={updateHandler}
        />
      </form>
    </div>
  );
}
```

表示されるテキストはViewText.jsxとして切り分けました。

```jsx
// ViewText.jsx

import React, { useContext } from 'react';
import { FontContext } from './FontContext';

export default function ViewText() {
  const [value, setValue] = useContext(FontContext);
  return (
    <div style={{ fontSize: `${value.size}px`, color: `${value.color}` }}>
      <p>Size: {value.size}px</p>
      <p>Color: {value.color}</p>
    </div>
  );
}
```

最後にindex.jsで3つのコンポーネントを`<FontContextProvider>`でラップします。

```jsx
// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { FontContextProvider } from './FontContext';

import TextSizeForm from './TextSizeForm';
import TextColorForm from './TextColorForm';
import ViewText from './ViewText';

function App() {
  return (
    <>
      <FontContextProvider>
        <ViewText />
        <TextColorForm />
        <TextSizeForm />
      </FontContextProvider>
    </>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
```

上位のコンポーネントとなるindex.jsの見栄えがシンプルになりました。各コンポーネントも独立しており、汎用性を持たすことができます。

![step4](//images.ctfassets.net/mmh9uyfw68qp/1pSMyJs6shBii4YQKT9now/5ee2a316c20d69c5ce9cb442cfb65e32/step4.gif)

コードは[Sandbox](https://codesandbox.io/s/zvz4zp1m3)で確認できます。

## おわりに

コンテキストはシンプルながら強力です。小さなアプリケーションの場合は、多くのニーズを満たしてくれます。もしコンテキストだけでやっていてパワー不足を感じ始めたら、[コンテキスト+useReducer](state-management-with-context-and-usereducer)を使った状態管理に挑戦するのをお勧めします。

こちらはReduxライクに状態管理ができ、ステートレスコンポーネントにおけるグローバルな状態管理を行う手段の1つとして定着しているようです。

Hook版のReact Contextの簡易解説。

React Context（useContext）入門

Airbnbが提供する[Lottie](https://airbnb.io/lottie/)というライブラリを使うと、Webアプリに簡単にアニメーションを追加することができます。Lottieは日本でも数年前から使われているようで、検索すればそれなりに情報が出てきます。そこでLottie自体の説明は控えめに、Reactでの利用方法を簡単に書いてみることにします。

尚、LottieはUI/UXデザイナー向けの分野になりますが、ここでは第三者の作成した素材を利用するため、Adobe系ソフトは不要で読み進めることができます。

## Lottieとは

After Effectsの拡張機能であるBodymovinからアニメーションをJSONデータでエクスポートして、Webやネイティブアプリ上で利用できるようにしたライブラリのこと。サイズが小さく、Webアプリケーションでも問題なく動作するのが特徴です。

## LottieFiles

[LottieFiles](https://lottiefiles.com/)はLottieのコミュニティサイトです。多くのアニメーションが公開・共有されています。今回はこのサービスで公開されている素材を利用します。

ログインして適当なアニメーションをクリックすると、アニメーションの背景色などをカスタマイズできます。上部の**Download JSON**を押してローカルにJSONファイルを保存しておきます。

## Reactで利用する

自身のアプリケーションに[react-lottie](https://github.com/chenqingspring/react-lottie)をインストールします。

```bash
yarn add react-lottie
```

プロジェクト上の好きな位置に先程DLしたJSONファイルを配置します。そして、利用するためのコンポーネントファイルを作成します。

```jsx
import React from "react";
import Lottie from "react-lottie";
import animationData from "./data/5056-delivery-latest.json";

const MyComponent = () => {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice"
    }
  };

  return (
    <>
      <h1>Lottie</h1>
      <Lottie options={defaultOptions} height={500} width={500} />
    </>
  );
};

export default MyComponent;
```

`Lottie`コンポーネントはいくつかのオプションが用意されています。ここでは以下のデフォルトオプションと、jsx上のpropsで横幅と高さを設定しています。

- loop:ループ
- autoplay:自動再生
- animationData:アニメーションのデータファイル
- rendererSettings:レンダリング設定
    - preserveAspectRatio:アスペクト比

このコンポーネントをメインコードで利用すれば、その位置でアニメーションが再生されます。

[Sandbox](https://codesandbox.io/s/o4rjv5m2q5)に例を用意したので、プレビューできます。

デフォルトではアニメーションをクリックすると再生・停止が切り替わりますが、`isStopped`や`isPaused`というpropsをLottieコンポーネントに与えることで、コードから再生停止を操作することもできます。

## イベントリスナー

Lottieコンポーネントはイベントリスナーにも対応しており、コールバック処理も可能です。実装するには`eventListeners` propを付与するだけです。

以下は、completeイベント時にcallback内に記述した関数が実行されます。

```jsx
 <Lottie
    ...
    eventListeners={[{
      eventName: 'complete',
      callback: obj => console.log(obj);
    }]}
 />
```

completeの場合は、Lottieを`loop: false`にしておく必要があります。また、complete時にLottieコンポーネントがマウントされたままだと、アニメーション要素をクリックする度コールバック関数は呼ばれるようです。

次にイベントリスナーを使った[サンプル](https://codesandbox.io/s/qzo5qlo4kj)を取り上げてみます。

## イベントリスナを使用したサンプル

2つのチェックボックスがあり、両方が選択されている状態で送信ボタンを押すと、アニメーションが挿入されるというものを取り上げます。アニメーションは1回のみ実行され、再生が終わればイベントリスナーを使ってアニメーションを画面上から取り除きます。

![Todo](//images.ctfassets.net/mmh9uyfw68qp/7fdMxWSxDB3Kr6vexr9scf/cc65459a3c395ac85dbd0f53c809548a/Todo.gif)

コード全文は[Sanxbox](https://codesandbox.io/s/qzo5qlo4kj)に置いてあるので、以降は要点だけ書いていきます。

### コード解説

フォームの状態管理には[react-use-form-state](https://github.com/wsmd/react-use-form-state)というCustom hookを使用しています。

```jsx
const [formState, { checkbox }] = useFormState({ val: [] });

// return内抜粋
<input {...checkbox('val', 'todo1')} />
```

ここでは`val`にチェックボックスの値が格納されます。例えば1つのチェックボックスにチェックを入れると、`val`内の配列は`['todo1']`となります。これを使いフォーム送信時にチェックボックスがすべて選択されているかを確認します。

```jsx
// フォーム送信時のイベントハンドラ
const handleClick = e => {
  e.preventDefault();
  if (formState.values.val.length === cnt && visible === false) {
    updateVisible(!visible);
  }
};
```

`cnt`はチェックボックスの総数が格納されています。`visible`は下記のコードを参照して頂ければわかるように、アニメーションの表示/非表示を切り替える単なる状態変数で、`updateVisible`はその更新関数です。この2つはReact Contextを使用しています。

```jsx
{visible === true ? <Animation /> : null}
```

あとは実際に読み込まれるAnimationコンポーネントを定義します。

```jsx
// Animation.jsx 抜粋

<Lottie
    options={defaultOptions}
    width={400}
    height={400}
    eventListeners={[{
        eventName: 'complete',
        callback: obj => {
          if (visible === true) {
            console.log(obj);
            updateVisible(!visible);
          }
        }
    }]}
/>
```

このコンポーネントファイル内でも、React Contextが使われています。アニメーションの再生が完了したら、`visible`の値を`updateVisible`で更新しています。これにより、アニメーションがアンマウントされます。

このように簡単にアニメーションをコードから操作できるので、使い勝手が良いです。

Airbnbが提供するLottieというライブラリを使ってReactで簡単にアニメーションを導入する。

React-LottieでReactに簡単にアニメーションを導入する

先週React 16.8がリリースされ、ようやく[Hooks](https://usehooks.com/)が実装された。`getSnapshotBeforeUpdate`と`componentDidCatch`に対応するメソッドは実装されていないが、正式にHooksベースでコードが組めるようになった。いくつかの[サンプル](https://codesandbox.io/react-hooks)も見られる。

また、16.8で`ReactTestUtils.act()`というHooksのテストAPIが追加された。今回はこのメソッドに触れてみる。

## Hooksを試す

React Hooksは@^16.8が必要。

```shell
yarn add react@^16.8.0 react-dom@^16.8.0
```

`ReactTestUtils.act()`を試すためにはテストされるコンポーネントが必要なので、今回は[公式](https://reactjs.org/docs/test-utils.html)にあるCounterコンポーネントサンプルをHookに書き換えて使うことにする。また、ロジック部分は[Custom Hook](https://reactjs.org/docs/hooks-custom.html)で切り分けした。

以下、ミニマム構成による最終的なディレクトリ構造。

![mydirectory](//images.ctfassets.net/mmh9uyfw68qp/4CK4xkdZpCJVfXHNW9QHqP/efc4e0cb391c6e3432a4bad5b62592ef/mydirectory.png)

Custom Hooksを利用するCountコンポーネント。

```jsx
// src/components/main/Count.jsx
import React from 'react';
import PropTypes from 'prop-types';

import useCounter from '../hooks/Counter';

const Count = ({ count }) => {
  const counter = useCounter(count);
  return (
    <>
      <p className="times">
        {`You clicked ${counter.count} times`}
      </p>
      <button type="button" onClick={counter.onIncrement} className="btn">
        Click me
      </button>
    </>
  );
};

Count.propTypes = {
  count: PropTypes.node.isRequired,
};

export default Count;
```

Custom HooksとなるuseCounter。

```jsx
// src/components/hooks/Counter.js
import { useState, useEffect } from 'react';

function useCounter(defaultCount) {
  const [count, setCount] = useState(defaultCount);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return {
    count,
    onIncrement: () => setCount(prevState => prevState + 1),
  };
}

export default useCounter;
```

AppでCountコンポーネントを使用します。

```jsx
// src/components/App.jsx
import React from 'react';
import { hot } from 'react-hot-loader/root';
import Count from './components/main/Count';

const App = () => (
  <>
    <Count count={0} />
  </>
);

export default hot(App);
```

ドキュメント上とタブタイトルに表示された「You clicked 0 times」がボタンを押す度に1ずつ加算されます。

## ReactTestUtils.act

`act()`はHooksを使ったコンポーネントのレンダリングと更新のテストが、ブラウザ上の動作と一致しているかを確認するもの。このメソッドは`react-dom/test-utils`に付属している。

React Hooksを使用したコードを`act()`を使用せずにテストすると、意図しない結果になります。以下はCount.jsを`act()`を使用せずにテストした例です。

⚠テストにはJest+Enzymeを使っています。予めセットアップが必要です。

```jsx
// src/components/main/__tests__/Count-test.js
import React from 'react';
import { act } from 'react-dom/test-utils';
import { mount } from 'enzyme';
import Count from '../Count';

const div = global.document.createElement('div');
global.document.body.appendChild(div);
global.document.title = 'Default Title';

describe('Count Component', () => {
  it('can render and update a counter', () => {
    const wrapper = mount(<Count count={0} />, { attachTo: div });
    expect(div.childNodes).toHaveLength(2);
    expect(wrapper.find('p.times').text()).toEqual('You clicked 0 times');
    expect(document.title).toEqual('You clicked 0 times');
  });
});
```

これをテストすると、以下のような結果になります。

```shell
● Count Component › can render and update a counter
expect(received).toEqual(expected)

Difference:

- Expected
+ Received

- You clicked 0 times
+ Default Title

  13 |     expect(div.childNodes).toHaveLength(2);
  14 |     expect(wrapper.find('p.times').text()).toEqual('You clicked 0 times');
> 15 |     expect(document.title).toEqual('You clicked 0 times');
     |                            ^
  16 |   });
  17 | });
```

デフォルトで指定した`document.title`が変更されていません。useCounter内の`useEffect()`が処理できていないのが確認できます。そこで次に`act()`を使用してみます。

```jsx
import React from 'react';
import { act } from 'react-dom/test-utils';
import { mount } from 'enzyme';
import Count from '../Count';

const div = global.document.createElement('div');
global.document.body.appendChild(div);
global.document.title = 'Default Title';

describe('Count Component', () => {
  it('can render and update a counter', () => {
    let wrapper;

    // Test first render and effect
    act(() => {
      wrapper = mount(<Count count={0} />, { attachTo: div });
    });
    expect(div.childNodes).toHaveLength(2);
    expect(wrapper.find('p.times').text()).toEqual('You clicked 0 times');
    expect(document.title).toEqual('You clicked 0 times');
  });
});
```

これは無事テストがパスできました。同様にイベント発火も書いてみます🔥

```jsx
	...
	// Test second render and effect
    act(() => {
      wrapper.find('.btn').simulate('click');
    });
    expect(wrapper.find('p.times').text()).toEqual('You clicked 1 times');
    expect(document.title).toEqual('You clicked 1 times');
  });
});
```

仮に`act()`を使用しないと、useCounterのレンダリングが動作せずテストが落ちます。要約するとHookを使うレンダリングや更新があれば、`act()`でラップするということ。

今回テストしていないですが、Custom Hookのテストも書くことができます。

## ESLint

Hooks向けにESLintのプラグインも公開されています。以下、公式そのまま。

```shell
yarn add eslint-plugin-react-hooks@next --dev
```

eslintの設定ファイル（.eslintrc.jsなど）に以下を追加。

```json
{
  "plugins": [
    // ...
    "react-hooks"
  ],
  "rules": {
    // ...
    "react-hooks/rules-of-hooks": "error"
  }
}
```

Custom Hooksをアロー演算子で定義すると警告が表示されたが、再現性がなく不明。現状はお出しされたものをそのまま使ってて問題なさそう。

## おわりに

Hooksはバグが多く残っているようで、16.8.0リリースから8日間で2回のマイナー更新が行われている。これを書いている時点の最新は16.8.2。変更点は[ChangeLog](https://github.com/facebook/react/blob/master/CHANGELOG.md)で確認できます。

React 16.8で導入されたReact HooksとReactTestUtils.actの解説。

React 16.8 Hooks and ReactTestUtils.act

本記事ではReactの**Context**と**useReducer**を使い、Reduxライクにグローバルな状態管理を行います。`useReducer`はReact Hooksのため、v16.7以上が必要です。

例としてサイトのテーマ（よく見かけるライト/ダークテーマ風）の切り替えを行う簡易なアプリケーションを作成します。最終的に自分でテーマを作り切り替えを行えるようにします。

尚、本記事はコード内に解説コメントを記述していますが、**Redux**の基礎知識がないと読み進めづらいかもしれません。[React Hooks](https://reactjs.org/docs/hooks-intro.html "React Hooks")の知識も多少なり必要です。

## チュートリアル

最終的なコンポーネントの階層は以下になります。

```shell
ThemeContextProvider ← stateセット
	App ←ここでdispatchしたい
    	MyForm ←ここでdispatchしたい
```

まずテーマとなるTheme.jsを作成します。下準備となるファイルです。

```jsx
// src/components/Themes.js
import React from "react";
import reducer from "../reducers/reducer";

// React Contextの作成
const ThemeContext = React.createContext();
// Reducer関数の初期値
const initialState = {
  color: {
    name: "Light",
    text: "#000000",
    back: "#FFFFFF"
  }
};

// コンテキストプロバイダーコンポーネント
function ThemeContextProvider(props) {
  // useReducerでreducer関数と初期値をセット
  const [state, dispatch] = React.useReducer(reducer, initialState);
  const value = { state, dispatch };

  return (
    // コンテキストプロバイダーとしてuseReducerのstateとdispatchをコンテキストに設定
    <ThemeContext.Provider value={value}>
      {props.children}
    </ThemeContext.Provider>
  );
}

// コンテキストコンシュマーの作成(今回未使用)
const ThemeContextConsumer = ThemeContext.Consumer;

export {
  initialState,
  ThemeContext,
  ThemeContextProvider,
  ThemeContextConsumer
};
```

重要なのは`useReducer` Hookの`state`と`dispatch`をContextプロバイダーの値として渡している点です。これにより、`ThemeContextProvider`コンポーネントより下のコンポーネントは、Contextを通してこの2つにアクセスできるようになります。

実際に利用しているのがindex.jsです。

```jsx
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import { ThemeContextProvider } from "./components/Theme";
import App from "./components/App";
import "./style.css";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <ThemeContextProvider>
    <App />
  </ThemeContextProvider>,
  rootElement
);
```

Appコンポーネントをラップしているので、App以下では先程セットした`state`と`dispatch`が利用できるようになります。

次にreducer関数を作成します。dispatchされたときに呼ばれる関数です。

```jsx
// reducers/reducer.js
import { initialState } from "../components/Theme";

// reducer関数
const reducer = (state, action) => {
  switch (action.type) {
    case "change-color":
      return { ...state, ...action.payload };
    case "reset-color":
      return initialState;
    default:
      return state;
  }
};

export default reducer;
```

Reduxのreducer関数と意味的に違いはありません。`action.type`に応じて、処理を分岐させて新しい状態を返すのがreducerの役割です。今回はテーマの変更とリセットの2つのアクションタイプがあります。

メインコンポーネントのApp.jsを作成します。

```jsx
import React from "react";
import { ThemeContext } from "./Theme";
import MyForm from "./MyForm";

function App(props) {
  // useContextでThemeContextのstateとdispatchを使用する(コンテキスト値)
  const { state, dispatch } = React.useContext(ThemeContext);

  // state.colorの変更に併せてスタイルを変更する
  React.useEffect(
    () => {
      document.body.style.backgroundColor = state.color.back;
      document.body.style.color = state.color.text;
    },
    [state.color]
  );

  // "reset-color"をdispatchしてテーマリセットを行うハンドラ関数
  const resetColor = () =>
    dispatch({
      type: "reset-color"
    });

  // "chnage-color"をdispatchしてテーマ変更を行うハンドラ関数
  // payloadには変更する値が入る
  const setColor = color => () =>
    dispatch({
      type: "change-color",
      payload: {
        color: { name: color.name, text: color.text, back: color.back }
      }
    });

  return (
    <>
      <h1>テーマカスタマイズ</h1>
      <p>現在の情報</p>
      <ul>
        <li>テーマ名: {state.color.name}</li>
        <li>文字色: {state.color.text}</li>
        <li>背景色: {state.color.back}</li>
      </ul>
      <h2>新しいテーマを作成</h2>
      <p>16進数と色名（例:red）での指定が可能です。</p>
      {/* テーマ変更のボタン */}
      <button onClick={setColor({
      		name: "Dark", text: "#ffffff", back: "#000000"
      })}>
          変更
      </button>
      <button onClick={resetColor}>初期テーマにリセット</button>
    </>
  );
}

export default App;
```

ボタンをクリックすることでテーマの変更（Light⇔Dark）の変更ができるようになります。

![light-dark](//images.ctfassets.net/mmh9uyfw68qp/7FpP3YLpbTOiPTXwhvFCxn/22e1fdb55be966b6958c8ed71d1fa9ce/light-dark.gif)

重要なのは`useContext`を使い、ThemeContextから`state`と`dispatch`を参照させている点です。

```jsx
const { state, dispatch } = React.useContext(ThemeContext);
```

これにより、ThemeContextProviderのプロバイダーの`value`としてセットしたreducer関数と状態値が利用できるわけです。変更・リセットボタンをクリックすると`dispatch`がコールされ、reducer関数に処理が移り新しい状態を返します。

これで2つのテーマの切り替えはできるようになりました。

## オリジナルテーマを作成できるようにする

上記でContextとuseReducerを使った解説は終わりですが、最後に自分で自由にテーマを作り変えることができるようにしてみます。

先の`button`コンポーネント2つを削除し、新しいコンポーネントを挿入します。

```jsx
import MyForm from "./MyForm";

<MyForm theme={state.color} setColor={setColor} resetColor={resetColor} /> 
```

フォーム用のコンポーネントを作成します。

```jsx
// src/components/MyForm.js
import React from "react";

function MyForm({ theme, setColor, resetColor }) {
  // 個々の値をuseStateで管理する
  const [name, setName] = React.useState(theme.name);
  const [text, setText] = React.useState(theme.text);
  const [back, setBack] = React.useState(theme.back);

  return (
    <form onSubmit={e => e.preventDefault()}>
      <label htmlFor="name">テーマ名</label>
      <input
        type="text"
        value={name}
        name="name"
        onChange={e => setName(e.target.value)}
      />
      <label htmlFor="text">文字色</label>
      <input
        type="text"
        value={text}
        name="text"
        maxLength="7"
        onChange={e => setText(e.target.value)}
      />
      <label htmlFor="back">背景色</label>
      <input
        type="text"
        value={back}
        name="back"
        maxLength="7"
        onChange={e => setBack(e.target.value)}
      />
      <p>
        <button onClick={setColor({ name, text, back })}>変更</button>
        <button onClick={resetColor}>初期テーマにリセット</button>
      </p>
    </form>
  );
}

export default MyForm;
```

`useState`で入力値を保持させているだけの、単なるフォームです。実行すると、以下のように好みのテーマを作成して切り替えができるようになります。

![my-theme](//images.ctfassets.net/mmh9uyfw68qp/3lJMRY5ElOjk62hK25pEkg/693088701ec689b7ea8c097dd2469620/my-theme.gif)

最終的なコードは[Sandbox](https://codesandbox.io/s/zj010x54p "sandbox")でライブプレビューが可能です。

## おわりに

Reduxの代替になるわけではないですが、ContextとuseReducerを使うとReduxよりも簡単にグローバルな状態管理ができそうです。

[ReactN](https://github.com/CharlesStover/reactn "ReactN")というサードHooksもあり、これを使うとContext不要で同様のことが可能になります。現状、Hooksすらリリースされていないため仕様変更はあるかもしれませんが、チェックしておくといいかもしれません。

React ContextとuseReducerを使ってReduxライクにグローバルな状態管理を行う解説。


ContextとuseReducerでアプリケーションの状態管理

このブログに取り扱った記事がないため書いてみることにしました。

以下のAPIを抜粋して取り上げます。

- [withState](https://github.com/acdlite/recompose/blob/master/docs/API.md#withstate)
- [withStateHandlers](https://github.com/acdlite/recompose/blob/master/docs/API.md#withstatehandlers)
- [lifecycle](https://github.com/acdlite/recompose/blob/master/docs/API.md#lifecycle)
- [compose](https://github.com/acdlite/recompose/blob/master/docs/API.md#compose)
- [mapProps](https://github.com/acdlite/recompose/blob/master/docs/API.md#mapprops)

## recomposeとは

関数コンポーネントに状態やライフサイクルなど、クラスベースがもっている機能を実装させることができるユーティリティパッケージです。大半の機能はベースとなるコンポーネントをラップして利用します。俗に言う高階コンポーネント（HOC）です。

以降、実例を記載して解説します。

## withState

`withState(状態名, 更新関数, 初期値)`で、関数コンポーネントに状態を持たすことができます。

```jsx
import React from "react";
import ReactDOM from "react-dom";
import { withState } from "recompose";

const enhanceWithState = withState("name", "setName", "mda");

const BaseUser = ({ name, setName }) => (
  <div>
    <h2>User: {name}</h2>
    <form>
      <input
        type="text"
        defaultValue={name}
        onChange={e => setName(e.target.value)}
      />
    </form>
  </div>
);

const User = enhanceWithState(BaseUser);

function App() {
  return (
    <div>
      <User />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

BaseUserのpropsに状態名nameと更新用の関数のsetNameが入ります。setNameの返り値が新しい状態値となります。

## withStateHandlers

`withStateHandlers(状態オブジェクト, 更新用ハンドラ関数)`で、複数のハンドラを結びつけることができます。

```jsx
import React from "react";
import ReactDOM from "react-dom";
import { withStateHandlers } from "recompose";

const enhanceWithHandlers = withStateHandlers(
  { count: 0 },
  {
    increment: ({ count }) => value => ({
      count: count + value
    }),
    decrement: ({ count }) => value => ({
      count: count - value
    })
  }
);

const BaseCounter = ({ count, increment, decrement }) => (
  <div>
    <h2>{count}</h2>
    <button onClick={() => increment(1)}>+</button>
    <button onClick={() => decrement(1)}>-</button>
  </div>
);

const Counter = enhanceWithHandlers(BaseCounter);

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

これも単にpropsに状態とハンドラ関数が追加されているので、それをBaseCounterから呼び出しているだけです。

## lifecycle

ライフサイクル機能を関数コンポーネントに持たすことができます。`componentDidMount`などのライフサイクルメソッド名と同じ名前の関数を`lifeCycle()`内で定義します。

```jsx
import React from "react";
import ReactDOM from "react-dom";
import { lifecycle } from "recompose";

const withLife = lifecycle({
  componentDidMount() {
    console.log("マウント");
  }
});

const BaseHello = () => <p>Hello</p>;
const Hello = withLife(BaseHello);

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

これでHelloコンポーネントがマウントされたときに、コンソールログが出力されます。

## compose

`compose`は、複数のHOCを組み合わせができます。

例えば、以下のように3つのHOCを利用するコンポーネントがあるとします。withX, withY, withZはNULLチェックや何かしらの機能を追加する高階コンポーネントとします。

```jsx
const A = withX(Item);
const B = withY(A);
const C = withZ(B);
const Item = (props) => return(/* 何かしらを返す */);

const App = () => <C />;
```

上記のように複数のHOCがある場合、1-3行目コードは他人が見る場合わかりづらいです。以下のようにも書けますが、これも見やすいとは言えません。

```jsx
const Hoc = withZ(withY(withX(Item)));
```

composeを使うと以下のように書けます。

```jsx
const Hoc = compose(withZ, withY, withX);

// 利用時
const HocItem = HOC(Item);
const App = () => <HocItem />;
```

recomposeを使っている人ならば、記述方法が統一されるので理解しやすいです。

また、composeのAPIを組み合わせて使うことが多いようです。下記では、[withHandlers](https://github.com/acdlite/recompose/blob/master/docs/API.md#withhandlers)（ハンドラ追加のAPI）のハンドラ定義内で`withState`の更新関数を利用しています。

```jsx
import React from "react";
import ReactDOM from "react-dom";
import { withState, withHandlers, compose } from "recompose";

const BaseButton = ({ count, increment, decrement }) => (
  <div>
    <h1>{count}</h1>
    <button onClick={() => increment()}>+</button>
    <button onClick={() => decrement()}>-</button>
  </div>
);

const enhance = compose(
  withState("count", "updateCount", 0),
  withHandlers({
    increment: ({ updateCount }) => () =>
      updateCount(prevState => prevState + 1),
    decrement: ({ updateCount }) => () =>
      updateCount(prevState => prevState - 1)
  })
);

const HocButton = enhance(BaseButton);

const App = () => <HocButton />;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

composeは引数の順番通りに実行されるため、`withHandlers`内で`withState`の状態や状態更新関数を呼び出すことができます。これらの値はpropsを介して取得できます。

また、`lifecycle`のようなAPIの中では、`this.props`を介してアクセスすることができます。

```jsx
const enhance = compose(
	withStateHandlers(
	  { time: 0 },
	  { setTime: ({time}) => value => ({ time: time + value })}
	),
	lifecycle({
      componentDidMount() {
          setInterval(() => this.props.setTime(5), 5000);
      }
	});
);
```

## mapProps

`mapProps`は現在のコンポーネントが持つpropsを新しいpropsに丸ごと置き換えます。以下はlistというpropsをフィルタリングして、新しいlistとしてセットしています。

```jsx
const enhance = compose(
  withState("entry", "setEntry", "くさ"),
  mapProps(({ list, entry, setEntry }) => {
    return {
      setEntry,
      entry,
      list: list.filter(monster => monster.type === entry)
    };
  })
);
```

コードが少し長いため抜粋しましたが、全文は[サンプルデモ](https://codesandbox.io/s/214o92z74p)で確認できます。

![mapprops-min](//images.ctfassets.net/mmh9uyfw68qp/5pSpuaZGvj5D74JPBE8PGy/d26fc67c5adb5d09f540606489de2da1/mapprops-min.gif)

ラジオボタンの選択のたび`setEntry`を呼び出し、entry値を変更しています。その値は上記のlistでフィルタリングされ新しいlistとして置き換わります。表示する内容（ここではポケモン一覧）自体が状態にあるわけではなく、状態entryは`mapProps`でlistをフィルタリングする条件に使われているだけです。

## おわりに

今後はrecomposeの代わりに[React Hooks](https://reactjs.org/docs/hooks-intro.html)が使われることになっていくとは思いますが、強力なライブラリであることに変わりはないため、目にする機会もあると思われます。

recomposeを簡単に解説してみる。

recompose簡易解説

React v16.7で関数コンポーネントに状態+αを持たすことが可能となる予定です。その仕組みが[React Hooks](https://reactjs.org/docs/hooks-intro.html)です。この記事ではReact Hooksの概要や背景に触れてみます。

## React Hooksとは

React Hooksは関数コンポーネントに状態を持たすことができます。他にも更新用の関数・コンテキスト・ライフサイクルなどクラスにある機能同様のAPIを提供します。

クラス構文で実現できてたことが関数コンポーネントでも可能になるわけですね。

## なぜReact Hooksが必要か

いくつか理由は挙げられていますが、コードの再利用性が重視され生まれた機能だと思います。クラスコンポーネントはそれ自体が状態を持つため、更に分解して他で使い回すことができません。Hooksを使うとコンポーネントのロジックを再利用可能な関数として抽出できます。

何より開発者は関数コンポーネントを好んでいます。[recompose](https://github.com/acdlite/recompose)で関数コンポーネントに状態を持たせて開発を行う人は多いでしょう。recomposeを使ったコードは再利用性が高まり、本来の意味でコンポーネントが構成部品として機能します。Hooksもこの路線だと思います。

また、現状のReactは**クラスコンポーネント⇔関数コンポーネントの書き換えが容易ではない**点もあります。状態が不要になったから関数コンポーネントにリファクタリングしようと思っても、一箇所を書き換えてハイ終わりというわけにはいきません（逆も同じく）。

## クラスはなくなるか

クラスはサポートされ続ける。ただし、**React HooksをReactでコンポーネントを定義する主要な方法にしたい**とも述べられています。React Hooksが成功した場合、どの地点かでクラスはオプション（追加パッケージ）になっていくのではないでしょうか。

ちなみにHooksをサポートすることで増えるコードサイズは1.5KB程度だそうです。

## Hooks API

仕様変更もあり得るため、主要な基本Hooks2つに触れてみます。

- useState - 状態と状態更新関数のHook
- useEffect - ライフサイクルを提供するHook

### useState

状態と更新用の関数（不要なら省略可）を提供します。状態の名前と更新用の関数名をブラケットで囲み宣言します。`useState`の引数は初期値です。

以下は文字列を設定していますが、オブジェクトや配列もセット可能です。ただし、変更関数に関しては`setState()`と異なり、オブジェクトが丸ごと置き換わるようです。

```jsx
const [name, setName] = useState('mda');

// 上記は以下と同様
const nameState = useState('mda');
const name = nameState[0];
const setName = nameState[1];
```

超簡単な[サンプル](https://codesandbox.io/s/4qv1ljomnx)です。

```jsx
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function App() {
  const [name, setName] = useState("mda");

  return (
    <div>
      <p>User: {name}</p>
      <form>
        <input
          type="text"
          name="name"
          defaultValue={name}
          onChange={e => setName(e.target.value)}
        />
      </form>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

フォームのハンドラで`setName()`を呼び出し`name`に値をセットしているだけです。

ここでは使用していませんが、更新用の関数はクラスの`setState()`同様に、引数に関数を指定することができます。その場合、第1引数には更新前の状態値が格納されます。

### useEffect

`componentDidMount`、`componentDidUpdatea`、`componentWillUnmount`の組み合わせのような感じでライフサイクルを実装できます。引数の指定で挙動が変わるので、ややこしいです。

先程のコードに以下を追加すると、アプリケーション起動時（マウント時）に、コンソールでname値が表示されます。`componentDidMount`と同じです。そしてフォーム入力をすると、そのたびにコンソールは最新のname値を出力します。これは`componentDidUpdate`の動きです。

```jsx
function App () {
	...
	// 追加
	useEffect(() => {
    	console.log(name);
  	});
}
```

第2引数に空の配列を渡すと、マウント時の1回のみしか発火しません。

```jsx
useEffect(() => {
   	console.log("change!"); //最初の1回のみ出力される
}, []);
```

第2引数に変数名を指定すると、その変数が変更されたときのみ`useEffect`を発火させることができます。次の[デモ](https://codesandbox.io/s/ymzmjm5v2v)でその動作が確認できます。

```jsx
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function App() {
  const [name, setName] = useState("mda");
  const [gender, setGender] = useState("male");

  useEffect(
    () => {
      console.log("change!");
    },
    [gender]
  );

  return (
    <div>
      <p>User: {name}</p>
      <p>Gender: {gender}</p>
      <form>
        <input
          type="text"
          name="name"
          defaultValue={name}
          onChange={e => setName(e.target.value)}
        />
        <label>
          <input
            type="radio"
            name="gender"
            value="男"
            checked={gender === "male"}
            onChange={() => {
              setGender("male");
            }}
          />
          男
        </label>
        <label>
          <input
            type="radio"
            name="gender"
            value="女"
            checked={gender === "female"}
            onChange={() => {
              setGender("female");
            }}
          />
          女
        </label>
      </form>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

上記はここまでのコードに新しく性別を表すgenderという状態と対応するラジオボタンを追加しました。これを`useEffect`の第2引数にセットしているので、`useEffect`内のコンソールログは、マウント時とgenderが変わったときのみ出力されます。nameを変更してもコンソールログは出力されません。

![useeffect-mount-min](//images.ctfassets.net/mmh9uyfw68qp/5W1Bp5fld88Q2mscOowD3L/e00b03c1f1cfd75a7e8ee92a0013fcae/useeffect-mount-min.gif)

アンマウント時に後処理を行いたい場合は、`useEffect`のreturnに関数を渡します。

```jsx
import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Message(props) {
  useEffect(() => {
    console.log("render"); // 初回と再レンダリングのたびコール

    return () => console.log("unmount"); // アンマウント時にコール
  });
  return <p>Hello</p>;
}

function App() {
  const [mounted, setMounted] = useState(true);
  const toggle = () => setMounted(!mounted);

  return (
    <>
      <button onClick={toggle}>Show/Hide</button>
      {mounted && <Message />}
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

Messageコンポーネントがマウント/アンマウントするたび、コンソールが出力されます。

![useeffect-unmount-min](//images.ctfassets.net/mmh9uyfw68qp/6mNewSrpPPO9h3K69lgg0x/d2d711e1048faf004acadcb5a9eb7be2/useeffect-unmount-min.gif)

通常は`componentWillUnmount`同様、メモリリークを避けるためにイベントリスナなどの削除に用いたりするのでしょう。

## Custom Hooks

他の関数でロジックを共有するときに、関数部分をHookとして抽出することができます。記事の締めとして、Hookの切り出しを試してみます。

例えば以下のようなカウンターコンポーネントがあるとします。

```jsx
import React, { useState } from "react";
import ReactDOM from "react-dom";

const Counter = (props) => {
  const [count, setCount] = useState(props.count);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(prevState => prevState + 1)}>+</button>
      <button onClick={() => setCount(prevState => prevState - 1)}>-</button>
    </div>
  );
}

const App = () => {
  return (
    <div>
      <Counter count={0} />
    </div>
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

実用性はありませんが、カウンター部分をCustom Hookとして定義してみます。Custom Hook名はuseで始めるのがルールのため、ここでは`useCounter`としています。

```jsx
import React, { useState } from "react";
import ReactDOM from "react-dom";

const useCounter = defaultCount => {
  const [count, setCount] = useState(defaultCount);
  return {
    count, // count: count
    onIncrement: () => setCount(prevState => prevState + 1),
    onDecrement: () => setCount(prevState => prevState - 1)
  }
}

const Counter = (props) => {
  const counter = useCounter(props.count);
  return (
    <div>
      <p>{counter.count}</p>
      <button onClick={counter.onIncrement}>+</button>
      <button onClick={counter.onDecrement}>-</button>
    </div>
  );
}

const App = () => {
  return (
    <div>
      <Counter count={0} />
    </div>
  )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

[Demo](https://codesandbox.io/s/m3240n1mpp)

動作は変わりませんが元のCounterからロジックが取り除かれました。この例ではメリットは感じられませんが、こうすることで再利用性が高まるわけです。

## おわりに

現在、[公式Hooks](https://reactjs.org/docs/hooks-reference.html)が基本を合わせて10個存在しています。クラスにある大体の機能は実装できそうです。また、サードパーティのHookも今後開発され、その中で開発に必須となるものも出てくると思います。

React HooksはReactの開発スタイルを根本から変えると言ってもいい機能なので、現状のノウハウやAPI周りを勉強し直していく必要があるのは間違いなさそうです。

React v16.7で導入される予定のReact Hooksの概要や背景に触れてみます。

React Hooks@React 16.7 alpha

10月24日にReact V16.6がやってきました。いくつかの機能の追加、及び廃止APIの警告が行われています。今回は追加された機能のうち、以下の3つに触れてみます。

リリース直後のため、若干自信のない部分もあります。あしからず。

## React.lazy()

遅延ロードのサポートです。これからはプラグインを入れたり自前で書く必要はなくなります。

使い方は`lazy`をimportしてコンポーネントを読み込むだけです。`Suspense`というAPIに`fallback`属性を与えること、読み込み完了までのフォールバック処理も指定できます。

```jsx
import { lazy } from 'react';
const LazyLoadedComponent = lazy(() => import('./LazyComponent));

<Suspense fallback={<div>Loading Now...</div>}>
	<LazaLoadedComponent />
</Suspense>
```

### 例

React Routerでルーティング先に合わせてコンポーネントを読み込む例です。

```jsx
import React, { Suspense, lazy } from "react";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";

const Home = lazy(() =>
  import("./components/Home" /* webpackChunkName: "Home" */)
);
const About = lazy(() =>
  import("./components/About" /*webpackChunkName: "About" */)
);

const App = () => (
  <Router>
    <div>
      <h1>Lazy Test</h1>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
      </ul>
      <Suspense fallback={<p>Loading...</p>}>
        <Switch>
          <Route exact path="/" component={() => <Home />} />
          <Route path="/about" component={() => <About />} />
        </Switch>
      </Suspense>
    </div>
  </Router>
);

export default App;
```

`Route`のcomponent属性は`component={Home}`のように直接コンポーネントを指定しても動作しますが、ビルドで警告が出るため上記の表記をしています。同じく、`<Suspense>`を`<Router>`直下で丸ごとラップすると動作しなかったため、`<Route>`のみにラップしています。

ChunkNameにも対応しており、[react-loadable](https://github.com/jamiebuilds/react-loadable)を利用する場合とほぼ同様に書き出せました。

```shell

                        Asset       Size  Chunks             Chunk Names
About.db20411b492caa7aca73.js   2.34 KiB   About  [emitted]  About
 Home.db20411b492caa7aca73.js   2.27 KiB    Home  [emitted]  Home
 main.db20411b492caa7aca73.js   3.36 MiB    main  [emitted]  main
                  favicon.ico   3.78 KiB          [emitted]
                 ./index.html  266 bytes          [emitted]
Entrypoint main = main.db20411b492caa7aca73.js
```

## React.memo()

関数コンポーネント版の`React.PureComponent`です。

関数コンポーネントにはライフサイクルメソッドがないため、`shouldComponentUpdate`でレンダリング条件などを変更することができません。`React.memo`は、関数コンポーネントが受け取るpropsに変化があった場合にのみ、再レンダリングを行うようにしてくれるHOCです。

```jsx
const Component = React.memo(function(props) {});
```

ラップされたコンポーネントはpropsを**浅い比較**で変化の判断をしますが、より細かく設定したい場合は第2引数に比較用の関数を渡して挙動を変更できるようです。

### 例

以下は必要部分のみ再レンダリングが行われるかを確認する例です。Appコンポーネントのmsg stateをループさせ、その数の分だけMsgコンポーネントでレンダリングします。

```jsx
import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = { msg: ["first Message"] };

  addMsg = e => {
    const msg = [...this.state.msg];
    msg.push("New Msg");
    this.setState({ msg });
  };

  render() {
    return (
      <div>
        <button onClick={e => this.addMsg(e)}>Add</button>
        <ul>{this.state.msg.map((m, i) => <Msg key={i} msg={m} />)}</ul>
      </div>
    );
  }
}

const Msg = props => {
  console.log("add");
  return <li>{props.msg}</li>;
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

これをボタンクリックすると、新しく追加されたmsgが画面に追加されていきます。

![01](//images.ctfassets.net/mmh9uyfw68qp/3NqAYBE7de24episLZg6Zu/1ddc1c4f95c2d00a5857e6815a1b6053/01.gif)

一見うまく動作しているように思えますが、コンソールを見るとクリックのたびにmsg配列すべての要素分がループされているのが確認できます。わずか数十クリックで1000近い画面レンダリングが行われています。

![02](//images.ctfassets.net/mmh9uyfw68qp/1DBHhRPySjtkA9NyAKtn2f/3f62e2e693725d7c157c2cc04cee845d/02.gif)

React Developer ToolのHighlight Updatesで確認しても、追加分だけでなく全件分が再レンダリングされているのが見て取れます。変化していないデータまで更新するのは無駄ですし、パフォーマンスにも影響するでしょう。

![03](//images.ctfassets.net/mmh9uyfw68qp/5SinHs11UkXPnFt0bCVlGv/475de261c8681f74e1c64ef5a31a4f03/03.gif)

これを改善するために`React.memo`を使います。HOCなので利用は簡単です。

```jsx
import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  state = { msg: ["first Message"] };

  addMsg = e => {
    const msg = [...this.state.msg];
    msg.push("New Msg");
    this.setState({ msg });
  };

  render() {
    return (
      <div>
        <button onClick={e => this.addMsg(e)}>Add</button>
        <ul>{this.state.msg.map((m, i) => <PureMsg key={i} msg={m} />)}</ul>
      </div>
    );
  }
}

const Msg = props => {
  console.log("add");
  return <li>{props.msg}</li>;
};

// 追加したコード（render内のコンポーネント名も変更しておきます）
const PureMsg = React.memo(Msg);

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

これで追加分だけがレンダリングされるようになります。`React.memo`によりpropsが変化したと判断されたときにのみレンダリングが行われるからです。画面上の結果は同じですが、コンソール結果は異なります。

![04](//images.ctfassets.net/mmh9uyfw68qp/3YutWWhPKTMhtDUXBcPOxY/c5ba60934cd8a1426b7c7777a82fa2ac/04.gif)

React Developer Highlight Updatesでも確認してみます。

![05](//images.ctfassets.net/mmh9uyfw68qp/77c3NNKxSfeqhorfXdWy25/90c1a76d93f5adc4eab000af5c36cfbb/05.gif)

`React.memo`はPureComponent同様、浅い比較を使うため、ネストされたオブジェクトの場合は注意が必要です。[Immutable](https://facebook.github.io/immutable-js/)なオブジェクトで解決するか、`React.memo`自体の使用を考え直す必要があるでしょう。

## static contextType

クラスコンポーネントでサポートされた新しい`contextType`というプロパティは、`this.context`を介して`React.createContext()`で作成した値にアクセスできます。取得できる値は、その時点の最新の値を受け取れます。ライフサイクルメソッド内でも参照可能。

```jsx
const LocaleContext = React.createContext('blue');

class LocalizedComponent extends React.Component {
  static contextType = LocaleContext;

  render() {
    return <div>The locale is: {this.context}</div>
  }
}

// LocalizedComponent.contextType = LocaleContextと同義
```

通常、ContextAPIのProviderでラップした値はConsumerで受け取りますが、この`this.context`を使えばConsumerの外からでもコンテキストの値にアクセスできるようです。[公式のサンプルコード](https://reactjs.org/docs/context.html#dynamic-context)で、Consumerを記述していないThemeButton内で`this.context`を使いコンテキスト値にアクセスできました。

```jsx
import { ThemeContext } from "./theme-context";
import React from "react";

class ThemedButton extends React.Component {
    static contextType = ThemeContext;
	render() {
    	console.log(this.context); // 最新のコンテキスト値にアクセス可能
        return (...);
	}
}
```

### 例

[以前の記事](introduction-react-context)で作成したカウンターを修正し、Consumerで受け取ったコンテキスト値とstaticで取得したコンテキスト値を表示する例です。

[Demo](https://codesandbox.io/s/zrq44v9mwl)

```jsx
class C extends React.Component {
  static contextType = CountContext;

  render() {
    let staticCount = this.context.count;
    return (
      <CountContext.Consumer>
        {context => {
          return (
            <div>
              { /* staticとconsumerから受け取った値を表示 */ }
              <h2>static ver: {staticCount}</h2>
              <h2>consumer ver: {context.count}</h2>
              <button onClick={context.actions.onIncrement}>+</button>
              <button onClick={context.actions.onDecrement}>-</button>
            </div>
          );
        }}
      </CountContext.Consumer>
    );
  }
}

export default C;
```

どちらの値も同じ値にアクセスしているので、表示される値は同じです。

![06](//images.ctfassets.net/mmh9uyfw68qp/2bF8y7TBbzS5c9Yz8OyAI8/94e208f088fb321df5379c38bd464928/06.gif)

React 16.6ではレガシーなContextAPIを使用すると警告が表示されます。開発側は旧API利用者を新しいContextAPIにさっさと移行させたいようで、今後も機能追加が見込まれています。

## おわりに

v16.6では他にも`getDerivedStateFromError`というライフサイクルメソッドの追加や、`ReactDom.findDOMNode()`などのメソッドの廃止が行われています。すべての変更点は[公式](https://github.com/facebook/react/releases/tag/v16.6.0)にて。

すでにv16.7の話も出ていて、前々から検討されていた関数コンポーネントに状態を持たすことが可能になる模様。これにより[recompose](https://github.com/acdlite/recompose)を使うようなコンポーネント設計が可能になるかもしれません。

React v16.6の新機能に触れてみる。

React v16.6

Reactでクラスベースのコンポーネントを利用する場合は、通常`React.Component`を継承します。これには他にも`React.PureComponent`というクラスを利用することができます。

今回はこの"Pure"なコンポーネントに触れてみます。

## サンプル

以下のようなコードを想定します。[Demo](https://codesandbox.io/s/xp6rw1p474)も用意しました。

```jsx
import React from "react";
import ReactDOM from "react-dom";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: ["hello"] };
  }

  componentDidMount() {
    setInterval(() => {
      const message = [...this.state.message];
      message.push("New Message");
      this.setState({ message });
    }, 1000);
  }

  render() {
    return (
      <div>
        <MessageList message={this.state.message} />
      </div>
    );
  }
}

class MessageList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.message.map((m, i) => <Message key={i} message={m} />)}
      </ul>
    );
  }
}

class Message extends React.Component {
  render() {
    console.log("Add Message");
    return <li>{this.props.message}</li>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

`componentDidMount`内で定義した`setInterval`により、毎秒新しい"New Message"という文字列をmessage stateに追加しています。stateが常時更新され、結果は下記のようになります。

![component-version-render](//images.ctfassets.net/mmh9uyfw68qp/6vVFNVfS0OFQmc1bxNgbTb/34db50bc661e0c0c4238bd4a3e79cb0c/component-version-render.gif)

ただし、コンソールを見てみると恐ろしいことが起きています。

![component-console](//images.ctfassets.net/mmh9uyfw68qp/1GQi647NGpzceIuApHbdgV/4f383f4d9cab8413de7fade985fc88af/component-console.gif)

messageは毎秒追加されるためMessageコンポーネントも再レンダリングが行われるのですが、毎秒message配列全件分が再レンダリングされています。

React Developer ToolのHighlight Updatesでも、それが確認できます。

![component-hightlight](//images.ctfassets.net/mmh9uyfw68qp/1woEyoVhl37DiYOOSYUxFd/b8d4a90e5a7830359ff64066c66f3624/component-hightlight.gif)

追加されたコンポーネントだけレンダリングできればいいはずです。変化していないデータを更新する必要はありません。これはパフォーマンスに影響するでしょう。

## PureComponentを使う

これを改善する一番簡単な方法が`React.PureComponent`です。MessageコンポーネントをPureComonentで書き換えるだけです。

```jsx
class Message extends React.PureComponent {
  render() {
    console.log("Add Message");
    return <li>{this.props.message}</li>;
  }
}
```

コンソールを見てみると、先程と異なるのが確認できます。

![purecomponent-console](//images.ctfassets.net/mmh9uyfw68qp/6Xm5AAUxFjFap4HyzZ1wFo/8058d677a0a6ec40dee9617851331054/purecomponent-console.gif)

下記はHighlight Updatesの結果です。

![component-hightlight](//images.ctfassets.net/mmh9uyfw68qp/1woEyoVhl37DiYOOSYUxFd/b8d4a90e5a7830359ff64066c66f3624/component-hightlight.gif)

PureComonentはprops及びstateの変更を検出した場合のみレンダリングを行います。Messageコンポーネントではmessage propsの変更を察知し、必要分の更新を行うようになります。

## 何が機能しているか

通常、`React.Component`のコンポーネントが保持するstate・propsの値が変化に応じてレンダリングを行うかどうかは、[shouldComponentUpdate](https://reactjs.org/docs/react-component.html#shouldcomponentupdate)というメソッドで決められています。デフォルトでは、すべての変更に対して再レンダリングを行います。一般的にこの挙動を変える必要はありませんが、自身でレンダリングの条件をチューニングしたい場合は、このメソッドを使うことがあります。今回の例のようなケースでも利用が考えられます。

一方、`React.PureComponent`は`shouldComponentUpdate`メソッドを持ちません。

> React.ComponentはshouldComponentUpdateを実装していませんが、React.PureComponentは、propsとstateの浅い比較を実装しています。

浅い比較というのは、簡潔に述べるとオブジェクトの参照先が同じであれば等しいと見なすことです。参照が同じならば内部の状態が変更されても等価と見なすため、ネストされたオブジェクトの場合は予期せぬケースを招いてしまう可能性があります。しかし、処理に対するコストは少ないため、高速に動作します。

## なぜパフォーマンスが上がるのか

何故必要部分だけレンダリングが行われるのか？

再レンダリングの条件が`PureComponent`に実装されているものに変わります。それが浅い比較です。また、ドキュメントには以下のように記載されています。

> Reactコンポーネントのrenderメソッドが、同じpropsやstateで同じ結果をレンダリングする場合は、React.PureComponentを使用してパフォーマンスを向上させることができます。

ドキュメントの通りです。

`React.PureComponent`は`shouldComponentUpdata`を変更し、コンポーネントに再レンダリングが必要かどうかを自動でチェックするロジックを追加します。これにより、stateやpropsの変更のあった箇所のみ検出し、`render`メソッドを呼び出します。結果、余分なレンダリングが行われなくなるためパフォーマンスが上がるというわけです。例で言えば、毎秒単位追加される1件分のmessageだけがレンダリングされます。

## いつ使うのか

`PureComponent`は銀の弾丸というわけではありません。先にも書いたように、オブジェクトの構造が深い場合は、浅い比較により変更が感知されず予想外の結果が生じる場合があります。抜け道としては、`forceUpdatae()`やImmutableなオブジェクトを使う方法があります。

また、親コンポーネントが`PureComponent`の場合、親のレンダリングがスキップされると子コンポーネントもレンダリングがされません。このため、子の再レンダリングが不要とわかっている場合のみ親を`PureComponent`にすることができます。

ここには記載していませんが、ハンドラ内やアロー演算子など注意点は他にもあり、使用に関して癖があります。基本的には子を持たないコンポーネント、もしくは単純な状態の場合でのみ利用するということになるかと思います。

React.PureComponentの概要とパフォーマンスを上げる方法。

React.PureComponentの概要

Curringはカリー化といい、複数の引数を取る関数内においてその引数を分解する機能です。

下記は一般的なJavascriptのコードです。

```javascript
const sum = (a, b) => a + b;

sum(1, 2); // 3
```

上記をCurryingで書き直すと、以下のように記述することもできます。

```javascript
// 以下と同じ
// const sum = function(a) { return function(b) { return a + b }}
const sum = a => b => a + b;

sum(1)(2); // 3
```

分割した引数を戻り値で使い結果を返すわけです。

## Reactのケース

以下のような高階コンポーネントを利用したコードがあるとします。

```jsx
import React from "react";
import ReactDOM from "react-dom";

// HOC
const Hoc = WrapComponent => (props) => <WrapComponent {...props} />;
// Base Component
const Component = props => <p>Hello, {props.name}</p>;

const MyApp = Hoc(Component);
const App = () => <MyApp name="maeda" />;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

HOC内で受け取るデータは親から渡ってくる`props`のみですが、`props`以外の任意の値をHOCに渡したいとします。上の例で言えば、`Hoc(Component)("任意の値")`といった感じです。

これもCurryingで記述ができます。

```jsx
import React from "react";
import ReactDOM from "react-dom";

const Hoc = WrapComponent => value => ({ name, ...others }) => {
  const n = name + value;
  return <WrapComponent name={n} {...others} />;
};

const Component = props => <p>Hello, {props.name}</p>;

const MyApp = Hoc(Component)("さん");

const App = () => <MyApp name="maeda" />;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

当たり前の動作に見えて、根本にはCurringが使われています。

ReactにおけるCurring（カリー化）の解説。

Curring and React

React Contextはv16.3で追加された機能です。React Contextを使用すると、複数のコンポーネントで値を共有することができます。

今回は、このReact Contextの使い方を簡単に書いてみます。

## どういうときに使用するか

[公式](https://reactjs.org/docs/context.html#when-to-use-context)に書かれているように、グローバルライクに使用したいpropsがある場合に利用されます。ただし、どこからでもアクセスが可能になるわけではなく、明示的に指定した範囲内でのみ参照が可能です。

Reduxと比較されることもあるようですが、状態を保管するストアが別にあるわけではなく、アプリケーション全体の状態管理をするには向いていません。

## 凡例

A、B、Cという3つのコンポーネントがあるとします。Aコンポーネントの子にBコンポーネントがあり、Bコンポーネントの子にCコンポーネントがあります。

![stratum](//images.ctfassets.net/mmh9uyfw68qp/36QwjehdCACbeOVeVJ6Ed8/4d277b2215183c674cd4b09bbc347db9/stratum.png)

Aコンポーネントはcountという状態を持ち、この値はCコンポーネントでも利用します。一般的にReactでは親から子に値を渡すにはpropsを使うため、Aのcount値をCでも使うにはB経由でpropsを伝播させる必要があります。

```jsx
// Aコンポーネントのrender内
<B count={this.state.count} />

// Bコンポーネント内
const B = (props) => <C count={props.count} />;

// Cコンポーネント内（ステートフルの場合）
const count = this.props.count;
```

Bは単にCコンポーネントをレンダリングするだけで、count値は必要ありません。これは1階層下のため問題はありませんが、100階層下のコンポーネントに値を引き渡す場合は非常に面倒です。これを解決するのが**コンテキスト**です。

コンテキストは指定したpropsを、コンポーネント間で共有させることができます。

## 利用方法

コンテキストの利用に必要なステップは、3つだけです。

1. Contextを作成する
2. Providerに受け渡したい値をセットして定義する
3. Consumerを定義して値を受け取り処理をする

## サンプルプログラム

先の凡例を実際のコードで作成してみます。まずAコンポーネントです。

```jsx
import React from "react";
import B from "./B";

export const CountContext = React.createContext();

export default class A extends React.Component {
  state = {
    count: 0
  };

  render() {
    return (
      <div>
        <CountContext.Provider value={this.state}>
          <B />
        </CountContext.Provider>
      </div>
    );
  }
}
```

最初に、`React.createContext()`でCountContextというコンテキストを作成しています。そして`render()`メソッド内では、`コンテキスト名.Provider`という形式で**Provider**を定義しています。Providerは、他所からアクセスさせたい値を`value` propにセットします。

次はBコンポーネントです。ただのステートレスな中間コンポーネントです。

```jsx
import React from "react";
import C from "./C";

const B = () => {
  return (
    <div>
      <C />
    </div>
  );
};

export default B;
```

最後にCコンポーネントです。

```jsx
import React from "react";
import { CountContext } from "./A";

const C = props => (
  <CountContext.Consumer>
    {context => {
      return (
        <div>
          <h2>{context.count}</h2>
        </div>
      );
    }}
  </CountContext.Consumer>
);

export default C;
```

`<コンテキスト名.Consumer>`でConsumerを配置します。ラップされている内部の関数のcontext引数には、コンテキストの値が格納されています。ここではAコンポーネントのstate値です。あとは`context.count`でcount値を出力しているだけです。propsを経由しなくても親コンポーネントの値にアクセスできました！

[Sample Code](https://codesandbox.io/s/qx55q1vor9)

## メソッド呼び出す

Consumer内から参照している値を更新することも可能です。Reduxのようにアクションをディスパッチする必要はなく、単にメソッドを呼び出すだけです。

ここでは先ほどの例を使い、シンプルなカウンターを作成してみましょう。

![counter-1](//images.ctfassets.net/mmh9uyfw68qp/1naCMn7Np1XF0pWGw8mEuk/67b1e3d1ebf4741d9ecebde1f84a7e2d/counter-1.gif)

まず、Aコンポーネントにcount値を増減する2つのメソッドを定義します。

```jsx
onIncrement = (e) => {
  this.setState((prevState) => ({
      count: prevState.count + 1
  }));
}

onDecrement = (e) => {
  this.setState((prevState) => ({
      count: prevState.count - 1
}));
```

そしてstate内に、上記2つのメソッドをコールする関数を定義します。メソッドは2つともactionsというプロパティ名を持つオブジェクト内に定義します。

```jsx
state = {
  count: 0,
  actions: {
    onIncrement: () => this.onIncrement(),
    onDecrement: () => this.onDecrement()
  }
};
```

最後にConsumer内に、このメソッドを呼び出すボタンを作成します。

```jsx
<button onClick={context.actions.onIncrement}>+</button>
<button onClick={context.actions.onDecrement}>-</button>
```

仕組みは値の場合とまったく同じです。Providerの`value` propにAコンポーネントの状態をセットしているため、`context.actions`経由でメソッドを呼び出すことができるのです。

勿論、Aコンポーネント内から自身のメソッドを呼び出しても問題ありません。

```jsx
// Aコンポーネントのrender()
render() {
  return (
    <div>
      <CountContext.Provider value={this.state}>
        <B />
      </CountContext.Provider>
      <button onClick={this.onIncrement}>add</button>
      <button onClick={this.onDecrement}>dec</button>
    </div>
  );
}
```

![counter-2](//images.ctfassets.net/mmh9uyfw68qp/3MaSKg78c0UYglvD40Yl5Q/a54f3daa9195547a4029c676d60ca12d/counter-2.gif)

`state.counter`値の整合性を気にする必要はありません。参照先は同じです。


React Contextはv16.3で導入されたReact Contextの解説です。

React Context入門

昨今のフロントサイドのフレームワーク・ライブラリはコンポーネントベースのアーキテクチャを取っているため、jQueryのようにDOMを直接操作する機会は少ないです。各フレームワークではDOMを参照するためのAPIが提供されていますが、用途はある程度限られています。

Reactの場合は、stateやpropsで実現できないケースでのみ利用するようドキュメントに記載されています。例えば、要素のフォーカス・テキスト選択などです。

## Refs

Reactでは**Refs**という機能を使うことでDOMへのアクセスが可能となります。また、RefsはDOMだけでなく、Reactコンポーネント要素に対してもアクセスが可能です。

Refsは簡単に言うならばDOMへの参照です。**作成方法は3つ**あります。

1. 文字列を使う方法（非推奨・削除予定）
2. コールバックを使う方法
3. React.createRefメソッドを使う方法（v16.3以降）

文字列を使う方法は今後削除予定のため、今回は2と3の方法を取り上げます。

## コールバックを使う方法

Refsを作成するためのコールバック関数を参照したい要素の`ref`属性に定義します。コールバック関数内の引数には、ReactコンポーネントのインスタンスかHTMLのDOM要素を受け取ります。どちらを受け取るかは、`ref`を定義している要素によります。

```jsx
// render()の中とする
<input type="text" ref={elem => this.myInput = elem} />
```

`this.myInput`にはDOMの参照が格納されています。これは定義しているコンポーネント内から自由に利用することができます。

```jsx
const value = this.myInput.value;
```

例えば、上記はinput要素の値を変数に代入しています。

### インライン関数の注意点

先の例のようにインラインでコールバック関数を定義する場合、コンポーネントが更新されるたび、**コールバック関数が2回呼ばれます**。1回目はnull、2回目にDOMが返ります。これは関数の新しいインスタンスがレンダリングごとに作成されているためです。

これが問題になる場合は、以下でこの動作を回避することができます。

```jsx
class SomeComponent extends React.Component {
    constructor(props) {
        super(props);
        this.setInput = elem => {
            this.myInput = elem;
        }        
    }

    // コンポーネント内のメソッドなどで使用
    const value = this.myInput.value;

    //...略
    render() {
        return (
            <div>
				<input type="text" ref={this.setInput} />
            </div>
        );
    }
}
```

### React.createRefを使う方法

React 16.3から追加された方法です。`React.createRef()`を呼び出してrefを作成します。

```jsx
// 1. コンストラクタ内などでrefを作成
this.myInput = React.createRef();

// 2. 参照要素にref属性を定義する
<input type="text" ref={this.myInput} />

// 3. 利用箇所でcurrent属性を通してアクセスする
const value = this.myInput.current.value;
```

参照しているDOMノードは、refの`current`属性からアクセスできます。`current`までがDOMノードの参照なので、その値を参照するには`value`を続けます。

以下に簡単な例を示します。

```jsx
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myInput = React.createRef();
  }

  componentDidMount() {
    this.myInput.current.focus();
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.myInput} />
      </div>
    );
  }
}
```

実行すると、input要素にフォーカスされた状態で開始されます。ユーザーはフォームにマウスを移動する必要はなく、入力を始めることができます。これはネイティブの`HTMLElementObject.focus()`をrefで実現しています。

## Reactコンポーネントを参照する

最初に書いたようにReactのRefsはDOMだけでなく、Reactコンポーネントに対しても利用できます。Refsは過度に使用すべきものではありませんが、コンポーネントを参照するのは興味深いものでもあります。

例えば、親から子コンポーネントのメソッドを操作することもできます。以下のようなコンポーネントを考えてみましょう。

```jsx
class SomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.copyText = this.copyText.bind(this);
    this.myInput = React.createRef();
  }

  copyText() {
    if (this.myInput.current.value.length > 0) {
      this.myInput.current.select();
      document.execCommand("copy");
      alert("クリップボードにコピーしました: " + this.myInput.current.value);
    }
  }

  render() {
    return (
      <span>
        <input type="text" ref={this.myInput} />
      </span>
    );
  }
}
```

先程同様、`React.createRef()`でrefを作成しています。また、参照しいてるInput要素の値を選択した後、クリップボードにコピーする`copyText()`メソッドを定義しています。このコンポーネント自身にメソッドを呼び出す手段は定義されていない点に注意しておきましょう。

次に上記のコンポーネントを使用する親コンポーネントMyComponentを作成します。

```jsx
const MyComponent = props => {
  const formInput = React.createRef();

  const handleClick = () => {
    formInput.current.copyText();
  };

  return (
    <div>
      <SomeComponent ref={formInput} />
      <button onClick={handleClick}>コピー</button>
    </div>
  );
};
```

`React.createRef()`を使用していますが、ref属性は先程作成したコンポーネントに定義しています。これでSomeComponentインスタンス（子）をMyComponent（親）で利用することができます。結果、ボタンをクリックしたときに先の`copyText()`を呼び出すことができます。

[サンプルデモ](https://codesandbox.io/s/24pv0pvy2j)

この方法を使えば、親から子コンポーネントの値を参照して使い回すことも可能です。

ReactでDOMにアクセスする方法です。

ReactでDOMにアクセス(Refs)

Reactアプリケーションは通常、特に設定しなければhtmlや外部リソースを除くと、1つのバンドルファイルのみが書き出さます。これはいくつコンポーネントがあっても同じです。結果、1つのファイルサイズが大きくなるため、読み込み・解析に時間がかかることになります。

これを回避するのがコード分割と遅延読み込み（Lazy Loading）です。ルーティングやイベント処理など、必要なときに必要分のコンポーネントを動的にインポートしてくれます。

本記事では、ライブラリを使わないReactの動的読み込みと、react-loadableライブラリを利用した方法に触れてみます。

## ライブラリを使用せずに遅延読み込み

まずはライブラリを使わずに遅延読み込みを行ってみます。ディレクトリの構造は以下を想定しています。

```shell
/src
- /components
- /modules
  - moduleA.js
- Loading.js
- index.js
```

[サンプルコード](https://codesandbox.io/s/ww9mpp84n8)

例えば以下のようなシンプルなモジュール（コンポーネント）を読み込むとします。

```jsx
// /src/modules/moduleA.js

import React from "react";

const moduleA = () => <p>moduleA</p>;

export default moduleA;
```

利用場所で以下のように動的に読み込みを行うようにするのが目的です。

```jsx
// /src/index.js内など

<Loading resolve={() => import("./modules/moduleA")} />
```

そこでモジュール読み込み用のファイルを作成します。`async/await`を利用します。

```jsx
// src/Loading.js
import React from "react";

export default class Loading extends React.Component {
  state = {
    module: null
  };

  componentDidCatch(error) {
    this.setState({ error });
  }

  async componentDidMount() {
    try {
      const { resolve } = this.props;
      const { default: module } = await resolve();
      this.setState({ module });
    } catch (error) {
      this.setState({ error });
    }
  }

  render() {
    const { module, error } = this.state;
    if (error) { return <p>{error.message}</p> }
    if (!module) { return <p>モジュールをロード中</p>; }
    if (module)  { return React.createElement(module); }
    return <p>ロード済</p>;
  }
}
```

`async`をつけた関数は、Promiseを返します。`await`は非同期処理の完了を待つため、呼び出し元の`import()`処理が完了するまで待機してくれます。

`{default: module}`は、読み込み先の`default export`したものを指しています。

```jsx
{ default: module } = () => import("./modules/moduleA") // export default moduleA;
```

これをstateオブジェクトにセットし、`module`に値があるとそれをレンダリングします。まだ読み込まれていなければ、読み込み中を伝えるメッセージを表示しています。

## プラグインを使った方法

通常はプラグインに頼った方が賢明です。今回利用する[react-loadable](https://github.com/jamiebuilds/react-loadable)は、Reactで実質標準とも言えるコード分割のプラグインです。まずはパッケージを入れます。

```shell
yarn add react-loadable
```

シンプルな例を示します。以下のようなプロジェクト構成を想定します。

```shell
/src
- /components
  - /Item
    - ItemA.js
    - Loading.js
- App.js
- index.js
```

`Loadable()`という高階コンポーネントに、以下の2つの設定を指定するだけです。

- **loader** - Promiseを返す関数を指定します。実際は読み込むコンポーネントをimportで指定するだけです（importはPromiseを返してくれます）。
- **loading** - 読み込み完了までに差し込みたいコンポーネントを指定します。

```jsx
// src/App.js

import React from 'react';
import Loadable from 'react-loadable';

// ロード中に差し込まれるコンポーネント
import Loading from './components/Item/Loading';

// 読み込むItemAコンポーネント
const ItemA = Loadable({
    loader: () => import('./components/Item/ItemA'),
    loading: Loading,
});

const App = () => <ItemA />

export default App;
```

ロード時に差し込まれるコンポーネントです。loadingに指定したコンポーネントは`error` propsを受け取るため、これでエラー時の処理を分岐しています。

```jsx
// src/components/Item/Loading.js

import React from 'react';

const Loading = props => {
    if (props.error) {
        return <div>Error!</div>;
    } else {
        return <div>Loading...</div>
    }
};

export default Loading;
```

読み込まれるコンポーネント側は単なるReactコンポーネントです。

```jsx
// src/components/Item/ItemA.js

import React from "react";

const ItemA = () => <p>ItemA</p>;

export default ItemA;
```

以上でItemAコンポーネントは別のJavaScriptファイルとして分割され読み込まれます。本来はReact RouterやUI操作のイベントに応答して利用することになると思います。

また、Webpackでサーバ側のレンダリングや同期レンダリングなどの複雑な機能を使用できるようにするにはreact-loadableのimport-inspectorを使用する必要があるようです。

### 読み込み先を1つにまとめた場合と注意点

読み込むモジュールが多い場合は、共通のコンポーネントの読み込みを行うファイルを別途用意することもあるようです。

```shell
- components/
  - /Item
    - index.js（読み込むコンポーネントをまとめているだけのファイル）
    - ItemA.js（単なる読み込まれるコンポーネント）
    - ItemB.js（単なる読み込まれるコンポーネント）
    - Async.js（動的インポートを行うファイル）
    - Loading.js（先程の例と同じで、ロード時に差し込まれるコンポーネント）
- App.js
- index.js
```

モジュールの一覧となるファイルです。

```jsx
// src/components/Item/index.js

import ItemA from "./ItemA";
import ItemB from "./ItemB";

export { ItemA, ItemB };
```

実際にインポート処理を行うのが以下のファイルです。

```jsx
// src/components/Item/Async.js

import Loadable from "react-loadable";
import Loading from "./Loading";

const AsyncItemA = Loadable({
  loader: () => import("./index").then(module => module.ItemA),
  loading: Loading
});

const AsyncItemB = Loadable({
  loader: () => import("./index").then(module => module.ItemB),
  loading: Loading
});

export { AsyncItemA, AsyncItemB };
```

今回は`import()`後に`then`を使っています。この引数にはItem/index.jsで`export`している内容（ItemA, ItemB）が格納されるため、`module.ItemA`のように指定すれば、モジュールを個々で読み込むことができます。この点が注意する部分です。

これをReact Routerで使用するとします。

```jsx
// src/App.js(抜粋)

<ul>
  <li><Link to="/">Home</Link></li>
  <li><Link to="/itema">ItemA</Link></li>
  <li><Link to="/itemb">ItemB</Link></li>
</ul>
<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/itema" component={AsyncItemA} />
  <Route path="/itemb" component={AsyncItemB} />
</Switch>
```

ItemAのリンクをクリックするとAsyncItemAが実行されItemAが動的にロードされますが、まだ実行していない**ItemBも同時にロードが行われます**。このため、読み込み場所を1箇所にまとめる場合は、ロードするコンポーネント数やそのサイズに注意が必要になりそうです。

反面、この例とは異なりA+B=Cありきのような依存性のあるコンポーネントを動的にロードする場合は、上記のように読み込み先を1つにまとめるのは有益です。

直接読み込み先をインポートすれば、同時にロードされることはありません。

```jsx
const AsyncItemA = Loadable({
  loader: () => import("./ItemA" /* webpackChunkName: "myItemA" */),
  loading: Loading
});

const AsyncItemB = Loadable({
  loader: () => import("./ItemB" /* webpackChunkName: "myItemB" */),
  loading: Loading
});
```

尚、上記はChunk名をつけています。

```shell
                          Asset       Size   Chunks             Chunk Names
   main.2edb766c34ab217d620d.js    3.3 MiB     main  [emitted]  main
myItemA.2edb766c34ab217d620d.js   2.38 KiB  myItemA  [emitted]  myItemA
myItemB.2edb766c34ab217d620d.js   2.38 KiB  myItemB  [emitted]  myItemB
                    favicon.ico   3.78 KiB           [emitted]
                   ./index.html  266 bytes           [emitted]
Entrypoint main = main.2edb766c34ab217d620d.js
```

実行・ビルド時にChunk名が書き出されます。

以上です。使用は簡単ですが、どの部分を動的に読み込むかを設計しておかないと、後々手直しが発生しやすくなるため注意が必要です。

クラスベースのReactのコード分割とコンポーネントの遅延読み込みを解説しています。

Reactのコード分割と遅延読み込み

記事としては旬な時期をとっくにすぎていますが、ブログ内にReactやReduxのチュートリアルがあるのにReact Rotuerの説明がないので、必要そうなものだけ書いときます。

## React Routerとは

Reactでアプリケーションを作成する上で必須とも言えるのが[React Router](https://github.com/ReactTraining/react-router)です。React Routerは名前の通り、Reactでのルーティングを担当するライブラリです。

大雑把に言えば、URLの変化に合わせて何か処理をするにはReact Routerが必要なのです。

## インストール

React Routerは3つのパッケージがあります。

- react-router
- react-router-dom
- react-router-native

ブラウザで使う場合は、react-router-domを使います。

```shell
yarn add react-router-dom
```

## ルーティング導入

React Routerは`BrowserRouter`か`HashRouter`というコンポーネントを使います。前者はHTML5の`history API`を使っており、後者は`window.location`を利用しています。古いブラウザもサポートしなければならない場合は、後者を利用する必要があります。

例えば、Appコンポーネントの中でルーティングを行う場合は以下になります。

```jsx
// index.js

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";

ReactDOM.render(
	<Router>
		<App />
	</Router>,
document.getElementById("root")
);
```

実際のルーティング内容は`BrowserRouter`で囲ったコンポーネント内に記述します。

## ルーティング基礎

シンプルなルーティング例を書くと以下になります。

```jsx
import React from "react";
import { Link, Route } from "react-router-dom"

const Home = () => <h2>Home</h2>;
const App = () => <h2>App</h2>

const App = () => {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
};

export default App;
```

`Link`はhtmlのアンカータグのように`to`で指定したURL先への移動に利用します。実際に出力されるときもアンカータグで書き出されます。

`Route`はそのルーティング先を描画するコンポーネントです。`path`で一致したときに、`component`で指定したコンポーネントが描画されます。

HomeリンクをクリックするとHomeコンポーネントがレンダリングされ、AboutをクリックするとAboutコンポーネントが描画されます。

[Demo](https://codesandbox.io/s/1wq27vpvz3)

## exact

`exact`は`path`がURLと正確に一致したときを示します。先のコードから`exact`を取り除くと、`/about`でAboutコンポーネントだけでなく、Homeコンポーネントも描画されます。

これは`/about`に`/`が含まれるため、両者ともルーティング先と見なされるためです。React Router 4では、このように`path`にマッチするすべての`Route`がルーティング対象となるため、注意が必要です。

## render and chidren

コンポーネントの描画には、`component`でコンポーネントを指定する以外にも、`render`と`children`を使う方法もあります。`render`はインナーレンダリングを行います。

```jsx
<Route path="/" render={(props) => <h2>Home</h2>} />
```

`children`も`render`と同じでインナーレンダリングを行うのですが、パスにマッチしない場合でもルーティングします。`children`の利用には他の解説を先に行う必要があるため、詳細は後述する「routeのカスタマイズ」で行います。

## props

上記の例でも定義していますが、レンダリングする関数はReact Routerのpropsを受け取ります（クラスの場合は`this.props`）。これには以下のオブジェクトが格納されています。

- match（`path`に一致したURL情報）
- location（主に現在のロケーション情報）
- history（ルーティングした過去の履歴情報）

尚、`props`は`render`に限らず、`component`や`children`でも取得可能です。

## matchとURLパラメーター

よく利用するのは`match`でしょう。このオブジェクトは、`route`の`path`とURLのロケーションが一致したときに作成されます。

例えばURLに末尾にパラメーターがある場合は、このオブジェクトで取得ができます。

```jsx
const Drink = ({ match } ) => <p>Drink ID: {match.params.id}</p>;

const App = () => {
  return (
    <div>
      <Link to="/drink/1">coke</Link>
      <Link to="/drink/2">tea</Link>
      <Link to="/drink/3">coffee</Link>
      <Route path="/drink/:id" component={Drink} />
    </div>
  );
};
```

`match`にはいくつかのプロパティが用意されています。ここで利用した`params`はURLパラメーターを含むオブジェクトです。他にもマッチしたURLを表す`url`、`route`の`path`を示す`path`などがあります。

上記で`match`をコンソール出力すると、以下のオブジェクトが確認できます

```javascript
{
	/* coffeeのリンクをクリックした場合 */
	path: "/drink/:id",
	url: "/drink/3",
	isExact: true,
	params: {
        id: "3"
	}
}
```

[Demo](https://codesandbox.io/s/1zw4x64p3)

## ネストされたルーティング

`match`を使うと、ネストされたルーティングを実現しつつハードコーティングを減らせます。

```jsx
const Food = ({ match }) => {
  return (
    <div>
      <Link to={`${match.url}/ramen`}>ラーメン</Link>
      <Link to={`${match.url}/rice`}>ご飯</Link>
      <Route
        path={`${match.path}/:name`}
        render={({ match }) => <h3>{match.params.name}</h3>}
      />
    </div>
  );
};

const App = () => {
  return (
    <div>
      <Link to="/food">Food</Link>
      <Route path="/food" component={Food} />
    </div>
  );
};
```

Foodコンポーネントの`match`には先に解説したようなURL情報を含むオブジェクトが格納されているので、それらを利用してネストする`Link`と`Route`を構築しているだけです。

[Demo](https://codesandbox.io/s/kwk4v2prlo)

## Switch

`Switch`は複数の`route`を囲い、グループ化するのに使います。`Switch`で囲まれた`route`は、現在の`path`名に一致する最初の`route`のみをレンダリングします。

よく利用されるのは、404ページ（Not Found）です。

```jsx
<Switch>
    <Route exact path="/" render={() => <h2>Home</h2>} />
    <Route path="/about" render={() => <h2>About</h2>} />
    <Route render={() => <h2>Not Found</h2>} />
</Switch>
```

`path`を記述しない`Route`を定義すると、それはすべてのパスでルーティング対象となります。結果、どのレンダリングの結果にもその`route`の内容が出力されます。

`Swtich`で囲むことにより、内部の`route`の`path`が1つずつ評価され、どれにも該当しなかったときに`path`のない`route`が選ばれることになります。それが404ページ（Not Found）です。

[Demo](https://codesandbox.io/s/m4rllr4z3y)

## routeのカスタマイズ

[render and children](#render)で保留していた`children`を使うと、ルーティングをカスタマイズできます。

`children`は`render`と使い方は同じですが、`path`に**一致しない場合でも呼びだされます**。このため、`path`に一致している・していないときで、レンダリング内容を変えることができます。

```jsx
const App = () => {
  return (
    <div>
      <Link to="/">Home</Link><br />
      <Link to="/about">About</Link><br />
      <Route
        path="/blog"
        children={({ match }) => {
          return (
            <div>
              {match ? ">" : ""}
              <Link to="/blog">Blog</Link>
            </div>
          );
        }}
      />

      <Route exact path="/" render={() => <h2>Home</h2>} />
      <Route path="/about" render={() => <h2>About</h2>} />
      <Route path="/blog" render={() => <h2>Blog</h2>} />
    </div>
  );
};
```

`Route`の中で`Link`を書き出すというものですが、前述したように`children`は`path`と一致していない場合でも呼びだされるということを頭に入れるとその挙動がわかると思います。

関数内で受け取る`match` に値があるときは、`Route`の`path`に一致したということです。この例では`path`が一致しているときは、描画する`Link`の横に矢印が追加されるようになっています。

[Demo](https://codesandbox.io/s/rjv8k94x6m)

* * *

他の`Link`でも同様の条件を設けたい場合、上記の方法では1つずつ記述するため冗長になってしまいます。通常はカスタムリンクを作成するのが便利です。

```jsx
const CustomLink = ({ children, exact, to }) => (
  <Route
    path={to}
    exact={exact}
    children={({ match }) => (
      <div>
        {match ? ">>" : ""}
        <Link to={to}>{children}</Link>
      </div>
    )}
  />
);

const App = () => {
  return (
    <div>
      <CustomLink exact={true} to="/">Home</CustomLink>
      <CustomLink to="/about">About</CustomLink>

      <Route exact path="/" render={() => <h2>Home</h2>} />
      <Route path="/about" render={() => <h2>About</h2>} />
    </div>
  );
};
```

`CustomLink`は親から受け取った各propsを使い、条件を加えた上で`Link`を書き出しています。先の例とやっていることは同じですが、`Link`の数が増えてもこの1つのカスタムリンクコンポーネントで処理できます。

尚、CustonLink関数の引数の`children`は親要素から受け取る子要素を表すpropsで、`Route`の`children`と別物なので注意してください。

[Demo](https://codesandbox.io/s/nrlmy71y6p)

## NavLink

`NavLink`は`Link`同様の機能を持っていますが、アクティブなリンクを簡単にスタイリングする機能を持っています。

```jsx
<NavLink activeClassName="active" to="/" exact>Home</NavLink>
<NavLink activeClassName="active" to="/about">About</NavLink>

<Route exact path="/" render={() => <h2>Home</h2>} />
<Route path="/about" render={() => <h2>About</h2>} />
```

例えば`/`にいるときは、1つ目の`NavLink`に`active`というclass名が付与されます。このため、別途CSSでスタイリングを定義する必要があります。

```css
.active {
  color: cornflowerblue;
  font-weight: bold;
}
```

尚、`exact`をつけると、ロケーションが正確に一致するときのみ適用されます。

## 処理内でナビゲーション

所謂プログラムチックにロケーションを移動させることもできます。`history`オブジェクトを使うだけです。`push()`を使うと、historyに新しい履歴を追加することができます。結果、ロケーションが移動します。

```jsx
class Form extends Component {
  onSubmit = () => this.props.history.push("/");
  render() {
    return (
      <form>
        <textarea rows="4" cols="40" placeholder="問い合わせ内容" /><br />
        <button onClick={this.onSubmit}>Submit</button>
      </form>
    );
  }
}

const App = () => {
  return (
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/form">Form</Link></li>
      </ul>
      <Route exact path="/" render={() => <h2>Home</h2>} />
      <Route path="/about" render={() => <h2>About</h2>} />
      <Route path="/form" component={Form} />
    </div>
  );
};
```

フォームの送信ボタンを押すと、ホームにリダイレクトされます。

[Demo](https://codesandbox.io/s/w7mk915p45)

## Redirect

転送を行う`Redirect`もあります。これはメソッドではなくコンポーネントなので、先の例のようにイベントの処理関数に直接記述して移動…いう使い方ではできません。今回は長くなるので触れませんが、Redirectはユーザー認証などでよく利用されます。

`to`を指定した先にリダイレクトが行われるため、次の例は`/form`へのルーティングを`/`に転送し直します。

```jsx
<Route path="/form" render={() => <Redirect to="/" />} />
```

サンプルとして先の例を無理矢理Redirectで書き直したものを置いておきます。

[Demo](https://codesandbox.io/s/727mm6kz6j)

## withRouter

`Link`以外でナビゲーションを行うには、前述した`history.push`を呼び出すのが一般的です。`Route`で直接レンダリングされるコンポーネントは、React Routerのpropsから`history`にアクセスできます。しかし、直接レンダリングされないコンポーネントではどうでしょう？

アクセスできません！

`wtihRouter`は、React RouterのHOC（高階コンポーネント）であり、`history`などのReact Routerのpropsを指定コンポーネントにバインドします。使い方は`withRouter`でコンポーネントをラップするだけです。

```jsx
import { withRouter } from "react-router-dom";

// propsにhistory, location, matchが格納される
const MyButton = withRouter((props) => {
  return (
    <button onClick={() => props.history.push(props.path)}>
      {props.text}
    </button>
  );
});
```

`<MyButton text="クリック" path="/about" />`のように利用します。このコンポーネントはReact Routerが直接扱うコンポーネントではありませんが、`withRouter`によりルーティングのpropsが利用できるようになっています。

[Demo](https://codesandbox.io/s/6wk5kqn21w)

* * *

余談ですが、`history`オブジェクトは`history.listen()`というメソッドがあります。これはルーティングが変更されるたびにコールバック関数を呼ぶメソッドです。つまりルーティングイベントを監視できます。

`Route`と関係のないコンポーネントでも`withRoute`を使うと、このルーティングイベントの変更を取り扱えます。下記はMyComponentがマウントされている限り、ルーティング変更のたびにその`pathname`をコンソール出力します。

```jsx
import React, { Component } from "react";
import { withRouter } from "react-router-dom";

class MyComponent extends Component {
  componentWillMount() {
    this.props.history.listen(() => {
      console.log(this.props.history.location.pathname);
    });
  }

  render() {
    return <p>コンソール画面を確認してください</p>;
  }
}

export default withRouter(MyComponent);
```

解説が前後していますが、`withRouter`をステートフルなコンポーネント（クラス）で定義した場合は通常のprops同様、`this.props`からReact Routerのpropsにアクセスできます。

[Demo](https://codesandbox.io/s/nwqpv36w3j)

## Redux

`withRouter`はReduxでの接続でも使えます。単に`connect()`を先程のように`withRouter`でラップするだけです。

```jsx
withRouter(connect(mapStateToProps)(SomeComponent));
```

余力があれば、[connected-react-router](https://github.com/supasate/connected-react-router)のようなライブラリも調べてみるといいと思います。

React Router v4でよく使う機能を説明しています。

ささっと学ぶReact Router v4

Reactはコンポーネントの動作や状態を管理するが、表示の挙動に関する機能は含まれていない。このため、状態遷移管理コンポーネントが必要になる。よく使われているのが[React Transition Group](https://github.com/reactjs/react-transition-group)。含まれるコンポーネントは、Transition, CSSTransition, TransitionGroupの3つ。

ReactにおけるCSSアニメーションを用いる手段として利用されているが、アニメーション専用というわけではなく、あるコンポーネントのAという状態からBという状態に変化するときの遷移を記述するコンポーネントです。

[公式](https://reactcommunity.org/react-transition-group/)の解説とあまり差異はありませんが、要点をまとめてみます。

## Transition

Transitionはあるコンポーネントの状態から別のコンポーネントの状態への遷移を記述できる。主にコンポーネントのマウント・アンマウントをアニメーションするために使われる。

内部で`state`を受け取ります。これにはコンポーネントの遷移状態が格納されています。

- entering
- enterd
- exiting
- exited

```jsx
// unmountOnExitは遷移移行が終了したときにコンポーネントのマウントを解除できる
<Transition in={trueかfalseを変数などで変化させる} timeout={時間} unmountOnExit>
	{state => {
        // inがtrueになったときtimeout時間でstateのenteringがenteredに変化する
        // inがfalseになったときtimeout時間でstateのexitingがexitedに変化する
	}}
</Transition>
```

大事なのは、`in`がtrueのときにコンポーネントのマウントが始まり、falseだとアンマウントが始まるということです。RTCの3つのコンポーネントはどれも、子コンポ―ネントの動作には干渉しません。コンポーネントの遷移に応じて何を行うか（主にアニメーション操作）は、プログラマ次第ということです。

## CSSTransition

CSSTransitionもTransitionと同じで`in` propを持ち、その遷移状態における動作をプログラマが記述してあげる必要があります。CSSと頭についているように、CSSTransitionには`classNames`というpropが用意されています。このpropにペアとなるクラス名を用意しておき、遷移状態に応じてそのクラスを適用させるという使い方になります。

例えばsampleというクラス名をセットすると、以下の遷移状態を定義できます。

- sample-enter
- sample-enter-active
- sample-enter-done
- sample-exit
- sample-exit-active
- sample-exit-done
- sample-appear
- sample-appear-active

後部につく英語がそのままの意味です。必要なもののみ記述すればOKです。

```jsx
<CSSTransition
	in={変数など}
	timeout={時間}
	unmountOnExit
    classNames="クラス名"
>
    {//子要素}
</CSSTransition>
```

子要素はstate引数を持ちます。ここのstateに入るのはTransition同様、`entering`, `enterd`, `exiting`, `exited`の4つです。CSSTransitionとは別なので注意が必要です。

## TransitionGroup

慣れてくると1番使うのが、このTransitionGroupかなと思います。TransitionGroupは、TransitionやCSSTransitionを子に持ちます。内部のTransition・CSSTransitionの使い方は変わりませんが、`in` propが不要です。

ではどうやってコンポーネントの遷移を知らせるのかというと、状態オブジェクトの変化に応じて自動で`in` propが設定されます。各コンポーネントのアニメーション方法は個々のコンポーネントで定義することができます。

[超簡単な例](https://codesandbox.io/s/8211o02j32)を作ったので、コードを見れば使い方がわかると思います。

TransitionGroupはデフォルトでは`div`タグを書き出しますが、`component` propにコンポーネントを指定することで、特定コンポーネントでの描画を行うことができます。プロジェクトの規模が大きくなってくるとコンポーネントを指定し、更にTransitionGroup内部に専用のアニメーション用の高階コンポーネントを配置し、そのコンポーネント内でTransitionやCSSTransitionを配置するという使い方になってくるでしょう。

Reactで遷移を管理するReact Transition Groupの要点を解説する。

React Transition Groupの要点

Reactを使う上では欠かせないのが、`setState()`です。今回は、この関数をより使い回しやすくする小さなTipsを紹介します。

以降、ボタンを押すと数値がカウントされるコンポーネントを例としてみていきます。

```jsx
import React, { Component } from 'react';

class App extends Component {
    constructor() {
        super();
        this.state = {
            counter: 0,
        };
    }

    onIncrement = (event) => {
        this.setState((prevState) => ({
            counter: prevState.counter + 1
        }));
    }

    render() {
        const { counter } = this.state;
        return (
            <div>
                <h1>Counter</h1>
                <p>{counter}</p>

                <button type="button" onClick={this.onIncrement}>
                    Increment
                </button>
            </div>
        );
    }
}

export default App;
```

`setState()`の引数にはオブジェクトを渡すことが多いですが、関数を渡すこともできます。関数の場合は、変更前の状態（state）オブジェクトを引数に取ることができます。関数の第1引数（ここでは`prevState`）に状態オブジェクトが格納されます。

尚、オブジェクトの場合でも`this.state.counter`のようにすれば、状態オブジェクトにアクセスは可能です。

## 改善案

Reactは状態オブジェクトの変更が常時行われ、特に`setState()`は多様されます。先のサンプルのように簡易なロジックでメソッドを1つずつ定義するとコードが膨れあがってしまいます。ある程度の規模になってくると、最適化できないものかと思い始めます。

よく用いられる手法としては、セット用の関数を定義することのようです。以下を先のクラスの外に定義します。

```jsx
const byPropKey = (propertyName, value) => () => ({
    [propertyName]: value
});
```

上記を使用するため、デクリメントのボタンを作成してみます。

```jsx
<button
    type="button"
    onClick={event => this.setState(byPropKey('counter', counter - 1 ))}
>
	Decrement
</button>
```

インクリメントボタンも書き直しができます。もう`onIncrement()`は不要です！

```jsx
<button
    type="button"
    onClick={event => this.setState(byPropKey('counter', counter + 1 ))}
>
	Increment
</button>
```

![increment and decrement](//images.ctfassets.net/mmh9uyfw68qp/25DSCy4z8V9yetHdkmNKw1/3b3908b98036161857f6a0ef2e7ac88e/decrement.gif)

これの素晴らしいところは、インクリメント・デクリメントに限らず、すべての`setState()`の状態更新が**汎用的に行える点**です。今回利用していませんが、内部ではeventオブジェクトを参照できますし、入力値などもそのまま利用できます。

また、`setState()`の引数にオブジェクトではなく関数を渡しているので、最初に解説したように関数内では変更前の状態オブジェクトを引数に取ることも可能です。

```jsx
const byPropKey = (propertyName, value) => (prevState) => ({
	// 何かしらのセット処理
});
```

ハードコーティングより、コード量をだいぶ省略することができて便利です。


クラスベースのReactで汎用的な更新関数を作成する方法。

汎用的なsetState用の関数

Reactのコンポーネントテストは、**Enzyme+Mocha**もしくは**Jest**が広く使われています。

[Enzyme](https://github.com/airbnb/enzyme)はAirbnbが開発したReactコンポーネントユーティリティです。単体ではテストランナーやアサーションは実装していないため、他のテストランナー及びアサーションライブラリと組み合わせて利用します。一般的に[Mocha](https://mochajs.org/)と[Chai](https://github.com/chaijs/chai)との組み合わせが使われます。MochaがテストランナーでChaiがアサーションライブラリです。Enzymeは元々Mochaとの併用を考え設計されていますが、[Angular](https://angular.jp/)で利用されているKarmaや後述するJestなどとも組み合わせることができます。

[Jest](https://facebook.github.io/jest/)はFacebookが開発しているテストツールです。テストランナーとアサーションライブラリが付属しているため、Enzymeと異なりオールインワンでテスト環境が用意されています。`create-react-app`にはJestが同梱しているため実質React標準のテストツールです。Jestには**スナップショットテスト**もあります。これは出力をチェックします。出力結果が初回時に保存されるスナップショットと異なる場合、それが意図的か否かでパスするか修正するかという使い方になります。Reactは結局のところHTMLの描画が目的であるため、スナップショットテストは多くのテストを軽量にしてくれる可能性を秘めています。

Reactコンポーネントをテストするにはいずれか、もしくは併用することになります。他にもReact上の非同期処理をテストする[Sinon](https://github.com/sinonjs/sinon)などのテストツールもありますが、今回は割合します。

どれを使用すればいいかというのは難しい話です。Jestはオールインワンで構成されている点が利点です。Mochaは成熟されたツールのため使用例が多く、またアサーションやテストライブラリを交換できる柔軟性が利点です。逆を取れば、構成が面倒とも考えられます。

結局は使う人の好みなのですが、本記事ではEnzyme+Mocha+Chaiという組み合わせを選択し、構成のセットアップと実際に簡単なテストに触れてみます。

## Mocha and Chai

Mochaはテストランナーです。一方Chaiはアサーションを担当します。

```bash
yarn add mocha chai --dev
```

これら2つはJavascriptのテストツールのため、コンポーネント部分を除けばこのままでも利用できます。しかし、Reactでテストを行うためにはもう1つ必要なものがあります

## jsdom

ReactはブラウザにHTMLレンダリングを行うため、擬似的なブラウザ環境を用意する必要があります。ChromeやFirefoxは駄目なの？と思いますが、テストはブラウザ上で走るわけではないため、私たちが普段利用するブラウザは使用できません。広く使われているのは、[jsdom](https://github.com/jsdom/jsdom)です。

```bash
yarn add jsdom --dev
```

jsdomをインストールしたら、擬似的なブラウザ環境を構築するする必要があります。test/dom.jsというファイルを作成し、そこに以下を記述します。

**test/dom.js**

```javascript
const { JSDOM } = require('jsdom');

const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
const { window } = jsdom;

function copyProps(src, target) {
  const props = Object.getOwnPropertyNames(src)
    .filter(prop => typeof target[prop] === 'undefined')
    .reduce((result, prop) => ({
      ...result,
      [prop]: Object.getOwnPropertyDescriptor(src, prop),
    }), {});
  Object.defineProperties(target, props);
}

global.window = window;
global.document = window.document;
global.navigator = {
  userAgent: 'node.js',
};
copyProps(window, global);
```

このコードはAirbnbの[チュートリアル](http://airbnb.io/enzyme/docs/guides/jsdom.html)に記載されているものです。簡単に解説すると、普段利用しているブラウザに組み込まれているwindowオブジェクト（正しくはWindowオブジェクトのWindowプロパティ）やnavigationオブジェクトを生成しています。

## Enzymeのセットアップ

EnzymeはAirbnbが開発したコンポーネントテストライブラリです。開発環境に導入するには、Enzymeに加えReactのバージョンに合ったアダプターを導入する必要があるます。以下はReactのバージョンが16の場合を想定しています。もし他のバージョンを利用している場合は、[ドキュメント](https://github.com/airbnb/enzyme/tree/master/packages/enzyme-adapter-react-16)を参照して対応するものを導入してください。

```bash
yarn add enzyme enzyme-adapter-react-16 --dev
```

次にテスト全体の設定ファイルを作成します。各テストファイルにEnzymeやChaiのテスト関数をインポートしてもよいのですが、テストファイルが増えてくると冗長になるため、よく利用するものは1つの設定ファイルに記述した後、グローバルな空間にインポートします。

**test/test\_helper.js**

```javascript
import { expect } from 'chai';
import { shallow, mount, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

// アダプターの作成
configure({ adapter: new Adapter() });

// グローバル空間にアサーション用の関数をインポート
global.expect = expect;
global.mount = mount;
global.shallow = shallow;
```

最後に実行ファイルを定義します。

**package.json**

```json
"scripts": {
    //(略)
    "test:unit": "mocha ./test/mochasetup.js --require babel-core/register --require ./test/test_helper.js --require ./test/dom.js 'src/**/*.spec.js'",
}
```

mochaに「\*.spec.js」をテストファイルと見なし実行するようにしています。また、上記で作成した2つのファイルを`--require`で読み込んでいます。以前利用されていた`--compilere`を使う方法は廃止になるそうです。

mochasetup.jsというファイルを指定しています。

**test/mochasetup.js**

```javascript
require.extensions['.jpg'] = function(module, fileName) {
  return module._compile("module.exports = "+JSON.stringify(fileName), fileName)
}
```

Mochaのテスト時はローダーを指定していないため、画像を認識できません。そこでこのような設定ファイルを作成し、画像ファイルを取り扱えるようにしています。

一方、静的な画像リソースやCSSといったものがテスト上、邪魔になるケースもあります。`Unexpected character`が表示される場合などです。そういった場合は、リソースを無視させます。[null-loader](https://github.com/webpack-contrib/null-loader)や[ignore-styles](https://www.npmjs.com/package/ignore-styles)を利用する方法もありますが、以下のような設定を定義すれば、スルーができるようです。

```javascript
require.extensions['.css'] = function () {
  return null;
};
require.extensions['.png'] = function () {
  return null;
};
require.extensions['.jpg'] = function () {
  return null;
}
```

## Sample Application

テストを作成するには何かしらのアプリケーションが必要です。ここでは、テスト対象となる極めてシンプルなアプリケーションを作成します。

**src/components/App.js**

```jsx
import React, { Component } from 'react';

import blackCat from '../../public/assets/blackcat.jpg';
import alleryCat from '../../public/assets/alleycat.jpg'

class App extends Component {
    constructor() {
        super();
        this.state = {
            flag: true,
        }
    }

    switchImg = () => this.setState((prevState) => ({
        flag: !prevState.flag
    }));

    render() {
        const { flag } = this.state;

        return (
            <div>
                <div>
                    <button type="button" onClick={this.switchImg}>
                        Change
                    </button>
                </div>
                <SwitchImage flag={flag} />
           </div> 
        );
    }
}

export const SwitchImage = ({ flag }) => 
    flag ? <img src={blackCat} alt="黒猫" />
    : <img src={alleryCat} alt="野良猫" />

export default App;
```

ボタンをクリックすると画像が切り替わるだけのコードです。

通常、ユニットテストは関数・メソッド単位のテストになりますが、今回メインコンポーネントから呼ばれるのはステートレスな子コンポーネント関数のみ定義しています（ステートレスなコンポーネントは単なる関数です）。

## Enzymeを利用したユニットテスト

テスト環境が整ったので、簡単なテストに触れてみます。以降、いくつかテストを書いていますが、色々試すために統一感のないコードになっています。

### 初期化時のテスト

まずシンプルな`shallow()`を試してみます。この関数は先程assertion.jsで定義したEnzymeの関数です。`shallow()`は指定したコンポーネントのみレンダリングを行います。内部に含まれる子コンポーネントまでは描画されません。つまりコンポーネント単位でテストができます。

テストと言う程でもないですが、初期化部分に関するテストを書いてみます。

1. Appコンポーネントの状態（state）オブジェクトが初期化されているか
2. Appコンポーネントは内部にswitchImageコンポーネントを1つ持っているか
3. SwitchImageコンポーネントはデフォルトの黒猫の画像（blackcat.jpg）を表示するか

下記は1つのテストスイートと3つのテストを記述しています。`describe`ブロックがテストスイートを定義し、`it`はテストケースを定義します。

**src/components/App.spec.js**

```javascript
import React from 'react';
import App, { SwitchImage } from './App';

const onImg = 'blackcat.jpg';
const offImg = 'alleycat.jpg';

describe('default App Component', () => {
    let defaultFlag = true;
    let defaultState = { flag: defaultFlag };
    let component = shallow(<App />);

    it('[1] has default state', () => {
        expect(component.state()).to.deep.equal(defaultState);
    });

    it('[2] renders the SwitchImage wrapper', () => {
        expect(component.find(SwitchImage)).to.have.length(1);
    });

    it('[3] img tag attributes', () => {
        const switchImage = shallow(<SwitchImage flag={defaultFlag} />);
        let path = switchImage.find('img').props().src;
        path = path.substring(path.lastIndexOf('/')+1);
        expect(path).to.equal(onImg);
    });
});
```

基本的に`expect()`とアサーション関数使ってテストを行います。Reactコンポーネントの取り扱いは、先に説明したように`shallow()`でラップします。例えばここでは`shallow(<App />)`としています。

1つ目のテストのようにコンポーネントの状態オブジェクトは`state()`で取得できます。オブジェクトの等価チェックは`to.deep.equal()`を使用します。尚、プリミティブ値は`to.equal()`です。内部のコンポーネントや要素を取得するには2つ目のテストのように`find()`を使います。個数をテストしたいので`to.have.length()`を使用しています。3つ目のテストは、まずは子コンポーネントのflagを指定して`shallow()`に渡しています。そのレンダリングとなる`<img>`のsrc属性が初期画像のファイル名と等しいかをテストしています。

```bash
yarn test:unit
App Component
    ✓ has default state
    ✓ renders the SwitchImage wrapper
    ✓ img tag attributes
```

テストは成功（緑色）のチェックマーク、またはエラー（赤色）のメッセージのいずれかを返します。

### 状態オブジェクト変更後のテスト

次に状態オブジェクトを更新したときのテストを書いてみます。

1. SwitchImageコンポーネントのflagがfalseになっているか
2. flagがfalseのときに描画する画像が野良猫（allerycat.jpg）になっているか

```javascript
describe('when state changes', () => {
    let changeFlag = false;
    let component = mount(<App />);

    component.setState({ flag: chnageFlag });
    let switchImage = component.find(SwitchImage);

    it('[1] updates SwitchImage state', () => {
        expect(switchImage.props().flag).to.equal(chnageFlag);
    });

    it('[2] src test', () => {
        let path = switchImage.find('img').props().src;
        path = path.substring(path.lastIndexOf('/')+1);
        expect(path).to.equal(offImg);
    });
});
```

やっていることは先と同じなので省略しますが、ここでは`shallow()`ではなく`mount()`を使っています。`mount()`は子コンポーネントもレンダリングします。コンポーネント階層全体をレンダリングするため、結合テストで使われているようです。仮に`shallo()`で書き換えると、2つ目のテストは失敗します。

```bash
yarn unit:test 
when state changes
    ✓ updates SwitchImage state
    ✓ src test
```

今回使用していませんが`render()`というものもあります。これは`mount()`に似ていて、すべての子コンポーネントをレンダリングします。ただし、Reactのライフサイクルを持ちません。このため`mount()`よりも負荷が小さいと言われています。

Enzyme+Mocha+Chaiを使ってReactのコンポーネントテストを行う方法です。

React Component Test: Enzyme+Mocha+Chai

[以前](getting-started-with-redux)の記事でReduxストアの作成やアクションのディスパッチを試しました。それではReactとReduxを接続し、Reactのコンポーネントからアクションをディスパッチにするにはどうすればいいでしょうか。

ReduxはReact同様、フレームワークではなく**ライブラリ**です。このため、ReduxはReact専用という訳ではなく、生のJavascriptやAngularといったフレームワーク及び他のライブラリと接続することもできます。

Reactと接続する場合は、**react-redux**を利用します。

```bash
npm install react-redux --save-dev
```

以降では、前回作成したアプリケーションを用い、ReactのコンポーネントからReduxのストアを操作する簡易な例を作成します。コンポーネントの構成要素は以下です。

- Appコンポーネント（メインコンポーネント）
- Listコンポーネント（cartの一覧を表示するコンポーネント）
- Formコンポーネント（新しいcartの内容を追加するコンポーネント）

また、サンプルで必要なライブラリがあるので、以下をインストールしておきましょう。

```bash
npm install uuid --save-dev
```

## react-redux

react-redexuでコンポーネントとストアを接続するのに重要なメソッドは`connect()`です。

```javascript
connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [Options])
```

`mapStateToProps`は、Reduxの状態をReactのpropsに接続します。これにより、接続されたReactコンポーネントは、Reduxストア内の各情報にアクセスできます。

`mapDispatchToProps`は、ReduxのアクションをReactのpropsに接続します。これにより、接続されたReactコンポーネントは、アクションをディスパッチできるようになります。

`mergeProps`は、mapStaetToProps、mapDispatchToProps及び親のpropsの結果を渡します。アクションクリエイターを特定のpropsに結びつけることができます。今回は使用しませんが、省略すると`Object.assign({}, ownProps, stateProps, dispatchProps)`が適用されます。

## Provider

ReactとReduxを接続するのにもう1つ大事なのが、`Provider`です。ProviderはReactアプリケーションをラップします。これはReactがReduxの状態にアクセスしたり、アクションをディスパッチするためにストアとやり取りをする必要があるためです。

index.jsを以下に編集しましょう。

```javascript
// src/index.js
import store from './store.js';
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/App';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);
```

前述のようにProviderはReactコンポーネント（App）をラップしています。内部にはstoreがあり、これは接続するReduxストアを指定するだけです。

次に、Appコンポーネントを作成しましょう。

```javascript
// src/components/App.js
import React from "react";
import List from "./List";

const App = () => (
    <div>
        <h2>Item List</h2>
        <List />
    </div>
);

export default App;
```

このコンポーネントはListコンポーネントをレンダリングするだけです。

## Listコンポーネント

ListコンポーネントはReduxストアのcartの一覧を表示するコンポーネントです。つまり、ストアの`state.cart`とListコンポーネントを結びつける必要があります。これを行うのが`mapStateToProps`です。

では、Listコンポーネントを作成します。

```javascript
// src/components/List.js
import React from "react";
import { connect } from "react-redux";
import uuidv1 from "uuid";

const mapStateToProps = state => {
    return {
        cart: state.shoppingCart.cart
    };
}

const ConnectedList = ({ cart }) => (
    <div>
        {cart.map(obj => {
            return (
                <ul key={uuidv1()}>
                    <li>product: {obj.product}</li>
                    <li>quanity: {obj.quanity}</li>
                    <li>unitCost: {obj.cost}</li>
                </ul>
            );
        })}
    </div>
);

const List = connect(mapStateToProps)(ConnectedList);

export default List;
```

`mapStateToProps`でコンポーネントのprops.cartとReduxストアのcartを連結させています。第1引数stateはストアの状態が格納されており、戻り値はコンポーネントにマージされるオブジェクトを返す必要があります。

例では、`state.shoppingCart.cart`となっていますが、これは前回、`combineReducers()`で複数のレデューサーを1つにまとめたためです。

```javascript
const allReducers = {
    shoppingCart: cartReducer,
    products: productsReducer
};
const rootReducer = combineReducers(allReducers);
```

`combineReducer`を利用していない場合は、`state.cart`のように直接指定が可能です。

実行すると、商品の一覧が表示されるはずです。

```bash
- product coke
- quanity: 1
- cost: 130

- product milk
- quanity: 3
- cost: 300
```

ReduxストアのcartはステートレスなListコンポーネントと接続ができました！

## Fromコンポーネント

最後に新しいcartの中身を追加するFormコンポーネントを作成します。

Listはステートレスなコンポーネントとして作成しましたが、Formは**ステートフルなコンポーネント**として作成します。わざわざReduxを用いてアプリケーション全体の状態を管理しているのに、なぜFormコンポーネントはステートフルにする（内部に状態を持たせる）必要があるのでしょうか。

理由は、Formが管理する状態はReduxストアで管理しているグローバルな状態と異なり、他のコンポーネントから参照される必要がないからです。ショッピングカートに入っている商品の状態（コーラが何本）という状態はアプリケーション全体で管理すると多くのコンポーネントでそれを利用するメリットがあります。一方、フォームに現在入力している値をわざわざ全体で管理しても、他のコンポーネントがそれを参照する機会があるでしょうか？こういったローカルな状態は、一般的なReact同様ローカルな状態（state）で管理すればいいのです。

Formコンポーネントを作成しましょう。やや悪いコードですが、動作には問題ありません。

```javascript
// src/components/Form.js
import React, { Component } from "react";
import { connect } from "react-redux";
import { addToCart } from "../actions/cart-actions";

const mapDispatchToProps = dispatch => {
    return {
            addToCart: cart => dispatch(addToCart(...cart)),
    };
};

class ConnectedForm extends Component {
    constructor() {
        super();
        this.state = {
            product: "",
            quanity: "",
            cost: ""
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange (event) {
        this.setState({
            [event.target.className]: event.target.value
        });
    }

    handleSubmit (event) {
        event.preventDefault();
        const { product, quanity, cost } = this.state;
        this.props.addToCart([product, quanity, cost]);
        this.setState({
            product: "",
            quanity: "",
            cost: ""
        });
    }

    render () {
        const { product, quanity, cost } = this.state;
        return (
            <form onSubmit={this.handleSubmit}>
                <label htmlFor="product">product</label>
                <input
                        type="text"
                        value={product}
                        className="product"
                        onChange={this.handleChange}
                />
                <label htmlFor="quanity">quanity</label>
                <input
                    type="number"
                    value={quanity}
                    className="quanity"
                    onChange={this.handleChange}
                />
                <label htmlFor="cost">cost</label>
                <input
                    type="number"
                    value={cost}
                    className="cost"
                    onChange={this.handleChange}
                />
                <button type="submit">ADD</button>
            </form>
        );
    }
}

const Form = connect(null, mapDispatchToProps)(ConnectedForm);

export default Form;
```

大事なのはアクションをReactコンポーネントにマッピングしている部分と、前述した`connect()`だけです。残りはReact単体で作成する場合と何ら変わりません。

```javascript
const mapDispatchToProps = dispatch => {
    return {
            addToCart: cart => dispatch(addToCart(...cart))
    };
};
```

上記で`addToCart`というアクションクリエイターをFormコンポーネントにマッピングしています。つまり、上記のようにコンポーネントでaddToCartを呼び出すと、Reduxのアクションをディスパッチすることができます。実際にトリガーになっているは、フォームの投稿時（onSubmit）のイベントです。

`connect()`についてですが、FormはListコンポーネントと異なり、Reduxストアの特定の状態（cart）をマッピングする必要がないため、第1引数はnullになっています。

それでは、App.jsを編集してこのFormコンポーネントをレンダリングしましょう。

```javascript
// src/components/App.js
import React from "react";
import List from "./List";
import Form from "./Form";

const App = () => (
    <div>
        <div>
            <h2>Item List</h2>
            <List />
        </div>
        <div>
            <Form />
        </div>
    </div>
);

export default App;
```

これでコンポーネントからReduxストアにcartの内容を追加することができるようになりました！

このようにReactと接続する場合は多少手間がかかります。今回のような簡易な例では、Reduxのメリットを味わえませんが、これがある程度の規模になってくると全体で管理することのメリットが出てきます。


ReactコンポーネントにReduxを結合する方法です。

Redux+React超入門

Rexuxのチュートリアル的な記事です。初心者が数日触ったことを自分で自分に解説しているような感じなので、間違ったことを書いているかもしれません。あしからず。

前提知識として以下を要します。

- 基本的なReact
- 各種ES6の構文
- `npm`によるパッケージ操作
- モジュール

## 下準備

解説を簡単にするため、`create-react-app`でアプリケーションの雛形を作成し、そこから開始します。

```bash
create-react-app my-redux
cd my-redux
npm install --save-dev redux
```

srcディレクトリをindex.jsを残し全て削除しておいてください。

## Rexuxとは何か

ステートフルなReactはコンポーネント自身が状態を管理します。簡易なアプリケーションの場合はシンプルで良いのですが、それなりの規模になるとコンポーネントの状態を1つ1つ管理するのが面倒になってきます。そこでアプリケーション全体で状態を管理する場所を作ろうというのが、**Redux**です。

![global](//images.ctfassets.net/mmh9uyfw68qp/2Dl6vwf9voCFSWyUcEutGM/a0895cabe91c27b3f4eff7148170aa53/global.png)

あらかじめ書いておくと、Reduxはすべてのアプリケーションで必ずしも役立つ機能ではないということです。小規模なアプリケーションの場合は、複雑になるだけであまりメリットは得られないでしょう。

## Reduxの大まかな流れ

Reduxは大きく分けて**ストア**、**アクション**、**レデューサー**で成り立っています。

Reduxを利用すると、すべての状態は**ストア**と呼ばれるコンテナに保存されます。ストアはすべてのオブジェクトの状態が保存される状態ツリーです。どのUIコンポーネントもストアを介し状態にアクセスできるのですが、状態を変更する場合は、**アクションをディスパッチ**する必要があります。ディスパッチとは、実行可能な情報をストアに送ることを意味します。

そして、ストアはアクションを受け取ると、それを関連する**レデューサー**に移譲します。レデューサーはアクションを実行した後、新しい状態を返す単なる関数に過ぎません。

![flow](//images.ctfassets.net/mmh9uyfw68qp/1hAlPiO9F0MXkLhySdIoEU/29159d274ee4988a1fc4559a230de516/flow.png)

Reduxはデータを一方向にのみ流すことができます。

## ストアとは

Redux**ストア**はReduxで稼働するすべてのパーツをオーケストレーションします。ストアはアプリケーション全体の状態が格納されます。このため、Reduxを使うにはストアを作成する必要があります。

以下を作成してください。

```javascript
// src/store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

// ストアを作成
let store = createStore(rootReducer);

export default store;
```

`createStore()`はストアを作成する関数です。引数はレデューサーを指定します。レデューサーが何かは後述しますが、ストアは**レデューサーを引数にしてのみ構築できます**。

## レデューサーとは

**レデューサー**は単なる関数です。レデューサーは現在の状態とアクション（後述）の2つの引数を取り、次の「状態」を返すのが決まり事となっています。

```javascript
/*
* レデューサー
* @param state 現在の状態オブジェクト
* @param action typeとpayloadを持つオブジェクト
* - type:アクションタイプ
* - payload:状態を更新されるためのデータ
* @return state 次の状態オブジェクト
*/
const reducer = (state, action) {
    return state;
}
```

reducersディレクトリを作成し、レデューサーを作成しましょう。

```javascript
// src/reducers/cart-reducer.js

// アクション名の（定数）をインポート
import { ADD_TO_CART } from '../actions/cart-actions';

const initialState = {
    cart: [
        {
            product: 'coke',
            quanity: 1,
            cost: 130
        },
        {
            product: 'milk',
            quanity: 3,
            cost: 300
        }
    ]
};

// レデューサー関数
export default function (state = initialState, action) {
    switch (action.type) {
        case ADD_TO_CART: 
            {
                return {
                    ...state,
                    cart: [...state.cart, action.payload]
                }
            }
        default:
            return state;
    }
}
```

レデューサー内はアクションのタイプによりswitchで分岐させるのが一般的です。ADD\_TO\_CART型のアクションがアプリケーションのいずれかでディスパッチされると、ここで定義したコードが呼び出されます。

アクションの型は`action.type`、状態更新のデータは`action.payload`に格納されています。ここでは、展開演算子を利用して、状態オブジェクト内のcartに新しい内容を追加しています。

#### Immutability

Reduxにはいくつかの原則があり、その中の1つに**Immutability**というものがあります。やや語弊もありつつ簡単に述べると、その場で内容を直接変更してはいけないということです。レデューサーは、以前の状態を受け取り新しい状態を返しますが、直接この状態を編集してはいけません。レデューサーは与えら得れた入力に対して、まったく同じ出力を返す純粋な関数である必要があります。

例えば上記では展開演算子を用いていますが、これが`push()`を利用した場合、Immutabilityを破ることになります。pushは直接元の要素を追加するためです。

自分もよくわかっていない部分もありますが、基本的に上記のようなケースの場合、追加は展開演算子、更新は`map()`、削除の場合は`filter()`を使えば問題はないようです。

## アクション

Reduxにおける状態を変更する唯一の方法は、**ストアにアクションをディスパッチすること**です。アクションはメソッドのようなものをイメージするかと思いますが、実際は以下のようなJavascriptのオブジェクトです。

```javascript
{
    type: 'ADD_TO_CART',
    payload: {
        product: 'coke',
        quanity: 1,
        cost: 130
    }
}
```

アクションは状態の変更方法を記述する**type**と、**payload**という状態を変更するデータを持ちます。通常、アクションは複数存在し、関数でラップするのが一般的です。こうした関数を**アクションクリエイター**と呼びます。

それではアクションクリエイターを配置しましょう。src/actionsディレクトリを作成する必要があります。

```javascript
// src/actions/cart-actions.js
export const ADD_TO_CART = 'ADD_TO_CART';

export function addToCart (product, quanity, cost) {
    return {
        type: ADD_TO_CART,
        payload: {
            product, quanity, cost 
        }
    };
}
```

`addToCart()`はアクションをディスパッチする際に利用します。これは後ほど説明します。

## レデューサーをまとめる

現在はcartReducerという1つのレデューサーのみが定義しています。実際の開発ではより多くのレデューサーが定義されることになるでしょう。その場合、一元管理しているはずの状態の管理や初期化が面倒になってきます。

Reduxには`combineReducers`というヘルパー関数が用意されています。これは値が異なる複数のレデューサーを呼び出し、1つのレデューサーにまとめて（変換して）くれます。

以下のようなファイルを作成しましょう。

```javascript
//src/reducers/index.js
import { combineReducers } from "redux";
import productsReducer from "./products-reducer";
import cartReducer from "./cart-reducer";

const allReducers = {
    shoppingCart: cartReducer,
    products: productsReducer
};

const rootReducer = combineReducers(allReducers);

export default rootReducer;
```

新しくproductsReducerというレデューサーを作成してインポートしていますが、今回は解説のために定義しただけで利用はしません。何もしないレデューサーですが、ファイルだけは作成しておきましょう。

```javascript
// src/reducers/products-reducer.js
export default function (state = [], action) {
    return state;
}
```

1番最初にストアの解説をしたセクションを見直してみましょう。

```javascript
let store = createStore(rootReducer);
```

`createStore()`はレデューサーを指定することで、ストアを作成することができるのでした。今回は先ほど解説した`combineReducers()`を使い2つのレデューサーを1つのレデューサーにまとめたものを指定しています。

2つのレデューサーは定義時にキーを設けていますが、これは以下のようにReduxストアの状態を操作・確認するときに便利です。キー名がついているので、異なるレデューサーを介して作成された内容であっても、同一のオブジェクト内で管理・把握できます。

例えば、以下はshoppingCartキー（cartReducer）を使いストアに追加されたのはcartが2件、products（productReducer）は0件です。

![console-2](//images.ctfassets.net/mmh9uyfw68qp/JYj1SAUmuaCTn1boeGp8Z/ea32da35ca6fba5bd23a331ded4be29b/console-2.png)

ちなみに、`combineReducers`を使わなくても単一のレデューサーしかないのならば、`createStore(cartReducer)`とするだけで十分です。

## 状態の確認

以下のファイルを作成し、Reduxストアの状態を確認してみましょう。

```javascript
// src/index.js
import store from "./store";
import { addToCart } from "./actions/cart-actions";

console.log('初期値:', store.getState());
store.dispatch(addToCart('coffee', 1, 200));
console.log("追加後:", store.getState());
```

実行すると、以下のような状態が確認できるでしょう。

![console-3](//images.ctfassets.net/mmh9uyfw68qp/5TDMJhwc5UFEgpE8X2kOI8/f988f74a36294e8fbec7c297afcb7cd5/console-3.png)

`getState()`で現在のストアの状態を確認できます。そして要素を追加しているのが以下です。

```javascript
store.dispatch(addToCart('coffee', 1, 200));
```

ストアの状態を更新するのは、アクションをディスパッチする必要があると説明しました。それがここです。ディスパッチは`dispatch()`で行います。

```javascript
// アクションクリエイター内（抜粋）
export function addToCart (product, quanity, cost) {
    return {
        type: ADD_TO_CART,
        payload: {
            product, quanity, cost 
        }
    };
}
```

アクションがディスパッチされると処理はレデューサーに移譲するのでした。また、呼ばれるレデューサーはアクションのタイプで決まります。つまり、今回だとADD\_TO\_CART型のアクションです。switch内では、新しい状態としてaction.payloadを介して受け取った値を追加して返しています。これによりReduxストアは更新されます。

```javascript
export default function (state = initialState, action) {
    switch (action.type) {
        case ADD_TO_CART: 
            {
                return {
                    ...state,
                    cart: [...state.cart, action.payload]
                }
            }
        default:
            return state;
    }
}
```

基本の流れはこんな感じです。ただ、現状は単にReduxストアを管理する部分を作っただけに過ぎません。実際はReactと連携させる必要があります。次回、ReactとReduxの連携方法について軽く触れます。
