この記事は ドワンゴ Advent Calendar 2019 の13日目の記事です。

はじめに

私は趣味で 書籍検索サービス（β） というサービスの開発のお手伝いをしております。

このサービスの機能としては

• 検索ワードで書籍の検索ができる
• バーコードリーダーにより、書籍に印刷されたバーコードより書籍情報を取得できる
• 複数のストアの販売ページへのリンクが有る
  • 現在はAmazonとBOOK☆WALKERのみ。他サイトも追加予定。
• OpenBDによる書籍紹介目的で自由に利用できる画像が取得できる
• Twitterに画像として書籍情報を送信するための画像が生成できる

というものがあります。

https://search.riel.live/detail/9784040729558/

このサービスでは、このような画像を生成することができます。
書籍を紹介する際に、ぜひ使っていただけると幸いです。

技術面の紹介

このサービスの、技術面での特徴は以下のとおりです。

• Firebase Hostingでホスティングされている
• Cloud FunctionsとNext.jsでSSRされている
• APIサーバもすべてNext.js上に実装されている
  • CORS実行できない外部APIがあるので、全ての外部通信をNext.jsでプロキシしている
• おすすめ書籍はContentfulで管理されている

Next.jsは開発開始当時の最新である9系列を利用し、最新機能であるAPIサーバ機能を利用して作っております。

Next.js をFirebaseでホスティングした際に遭遇したトラブル

以上の構成で、起こったトラブルの一覧です。

9.0.7 以降の Next.js において(examlpeも含めて)壊れる

Firebase example: couldn't find a pages directory · Issue #8893 · zeit/next.js · GitHub

具体的にどのような問題かというと、Firebase+Next.jsの公式サンプルを使ってアプリケーションを作った場合ですら couldn't find a pages directory というエラーを出して、ホスティングに失敗するという不具合です。

私はこれで（9.0.7リリース直後に）休日を１日潰しました。
いくら不具合っぽいところを直しても治らなく、ローカルのdevサーバだけは動くという状況になりました。

この件に関してはIssueがあり、執筆時点(2019/12/07現在)でもまだクローズされていません。
そのため、現時点では9.0.6にバージョンを固定してNext.jsを使っております。

SSR時に react-hooks が使えない

9.0.6に起因する問題なのかもしれませんが、SSR時にreact-hooksを使うとSSRでのビルドに失敗します。

この問題を回避するためにはDynamic Importを使用してhooksを使いたいコンポーネントを分割する方法と、react-hooksを諦めてHoC版のコンポーネントを使う方法の2種類があります。
いまはその2つの手法を併用しております。できればSSRを使用しておきたい箇所には使えないので困っています。
いい解決法があれば教えて下さい。

next/config がうまく引き回されない

publicRuntimeConfig にdotenv経由で取り出したContentfulのAPIキーを書いているのですが、他ページから開いて遷移したときにエラーページになります。
これも壊れたままになっているのですが、良い直し方がわからずまだ放置しています。

まとめ

個人的には、残念ながら「ReactでどうしてもSSRがしたい！」というとき以外に使うと罠に落ちるイメージになりました。

Reactは非常に良いプロダクトですし、このサービスを作ることによってReactへの理解が深まった気がします。
みなさんもぜひReactでプロダクトを作ってみてください。

あと、皆さん本を買って読みましょう！世界にはまだまだ面白い物語が待っていますよ！

以下は、デモを兼ねたこのサービスで生成した画像による自分のおすすめ作品です。

https://search.riel.live/detail/9784041028209/

https://search.riel.live/detail/9784049126631/

（ドワンゴポーカー部推薦図書です）

https://search.riel.live/detail/9784048935142/

概要

業務でNext.jsを触る機会を得たため、まずは下記チュートリアルをやってみました。
チュートリアルの章ごとの備忘録をまとめます。
https://nextjs.org/learn/basics/getting-started

Getting Started

Introduction

Next.js良いぞ！と機能紹介しているページ。一旦読み飛ばす

Setup

作業用のhello-nextディレクトリを作成し、以降ここで作業。
まずは、npmコマンドで必要なライブラリをインストールし、
ビュー用のファイルを置くことになるpagesディレクトリを作成します。

$ mkdir hello-next
$ cd hello-next
$ npm init -y
$ npm install --save react react-dom next
$ mkdir pages

• 作業後のディレクトリ構成

$ ll
drwxr-xr-x  524 aota  staff    16K 12  9 21:00 node_modules/
-rw-r--r--    1 aota  staff   263K 12  9 21:00 package-lock.json
-rw-r--r--    1 aota  staff   324B 12  9 21:00 package.json
drwxr-xr-x    2 aota  staff    64B 12  9 21:08 pages/

• package.jsonの中身

$ cat package.json 
{
  "name": "hello-next",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^9.1.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

上記package.jsonのscriptsを下記に書き換えるよう指示されるので置換する。

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

• 置換後のpackage.jsonの中身

$ cat package.json 
{
  "name": "hello-next",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^9.1.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

あとは、下記コマンド実行で準備完了！

$ npm run dev

ブラウザでhttp://localhost:3000にアクセスしてみる

何が表示された？と聞かれるので、404だよーと選択し次へ。

404 Page

404表示されてるかい？それでOKだ

Creating Our First Page

先程作ったpagesディレクトリ配下にindex.jsを作る

$ vi pages/index.js

• pages/index.jsの中身

const Index = () => (
  <div>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

ブラウザで先程開いていたhttp://localhost:3000をリロードしてみる

Hello Next.jsと表示されてるのでOK！

ここで、シンタックスエラーを起こしてみよう。

タグの閉じタグを消してみる

• pages/index.jsの中身

const Index = () => (
  <div>
    <p>Hello Next.js
  </div>
);

export default Index;

ブラウザで再度http://localhost:3000を開いてみる

何が表示された？と聞かれるので、Syntaxエラーがでたよと選択し次へ

Handling Errors

Next.jsではデフォルトでブラウザにエラーを出力するよ。
エラーを直したらリロードしなくてもページが再レンダリングされるんだ。

You are Awesome

ファーストステップはこれでおしまい！

Navigate Between Pages

単体のページは、できたので今度は複数のページを作ろう。

先程作ったpagesディレクトリ配下にabout.jsを作る

$ vi pages/about.js

• pages/about.jsの中身

export default function About() {
  return (
    <div>
      <p>This is the about page</p>
    </div>
  );
}

ブラウザでhttp://localhost:3000/aboutにアクセスしてみる

うむ、ちゃんと表示された。

次は、これらのページをつなげてみる
ただ<a>タグで書いちゃうと、サーバーとの通信が発生するよね。
クライアントサイドでナビゲーションしたいから、<Link>タグを使うよ。
使い方は次回。

Using Link

作っていたpages配下のindex.jsを<Link>タグを使うように書き換える。

$ vi pages/index.js

• pages/index.jsの中身

// This is the Link API
import Link from 'next/link';

const Index = () => (
  <div>
    <Link href="/about">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

ブラウザでhttp://localhost:3000/aboutにアクセスしてみる

About Pageをクリックしてaboutページに遷移後、ブラウザの戻るボタンで戻っても
正常にindexページに遷移することが確認できる。
（サーバーにリクエストがいっていないのは、Chromeの開発者モードのNetworkタブから確認できる）

Client-Side History Support

先程、ブラウザの戻るボタンで戻れたのは、
location.historyを<Link>タグがハンドリングしてたからなんだ。

Adding Link Props

属性値を追加したいときあるよね。
title属性を追加したい場合は、こうするはずだ。

• pages/index.jsの中身

// This is the Link API
import Link from 'next/link';

const Index = () => (
  <div>
    <Link href="/about">
      <a title="About Page">About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

これは正常にレンダリングされる。では下記の場合はどうか。

• pages/index.jsの中身

// This is the Link API
import Link from 'next/link';

const Index = () => (
  <div>
    <Link href="/about" title="About Page">
      <a>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
);

export default Index;

ブラウザでhttp://localhost:3000/aboutにアクセスしてみる
Chromeの開発者モードのElementsタブを確認してもtitle属性は、<a>タグに追加されていない。

また、Chromeの開発者モードのConsoleタブを確認するとエラーがでている。

何が表示された？と聞かれるので、title属性はないしConsoleでエラーがでたよと選択し次へ

Link is Just a Higher Order Component (HOC)

実際、title属性を追加しても<Link>タグには、なんの影響もないんだ。
なぜなら、hrefか近い属性しか<Link>タグは許容していないからだ。
（<Link>タグもといnext/linkがHOCというもので、通常のコンポーネントではないということ。）

属性を追加したい場合は、その下のコンポーネント、今回であれば<a>タグに渡せば良い。
また<Link>タグの子コンポーネントとして必要なことは、onClick属性が使えることだけだ。

Link is Simple, but Powerful

これまで基本的な<Link>タグの使い方をみてきたけど、
今後のレッスンではもっと面白い使い方を紹介するよ。
それまでは、Next.js Routing documentationをみてみよう。

Using Shared Components

Introduction

共通のHeaderコンポーネントを作って、複数のページで読み込んでみよう

Create the Header Component

componentsディレクトリを作成し、配下にHeader.jsを作成する。

$ mkdir components
$ vi components/Header.js

• components/Header.jsの中身

import Link from 'next/link';

const linkStyle = {
  marginRight: 15
};

const Header = () => (
  <div>
    <Link href="/">
      <a style={linkStyle}>Home</a>
    </Link>
    <Link href="/about">
      <a style={linkStyle}>About</a>
    </Link>
  </div>
);

export default Header;

Using the Header Component

pages/index.jsとpages/about.jsを編集し、先程作成したHeaderコンポーネントを読みこむ。

• pages/index.jsの中身

import Header from '../components/Header';

export default function Index() {
  return (
    <div>
      <Header />
      <p>Hello Next.js</p>
    </div>
  );
}

• pages/about.jsの中身

import Header from '../components/Header';

export default function About() {
  return (
    <div>
      <Header />
      <p>This is the about page</p>
    </div>
  );
}

ブラウザでhttp://localhost:3000にアクセスしてみる

Headerコンポーネントが読み込まれ、Home、Aboutそれぞれで遷移することが確認できる。

ここでちょっとした変更をしてみよう。
1. $ npm run devで起動したアプリケーションをSTOPする。（Ctrl+C）
2. componentsディレクトリをcompsにリネームしてみる。
3. pages/index.jsおよびpages/about.jsで、Headerコンポーネントの読み込み先を../comps/Headerに変更する。
4. アプリケーションを再起動する（$ npm run dev）

• pages/index.jsの中身

import Header from '../comps/Header';

export default function Index() {
  return (
    <div>
      <Header />
      <p>Hello Next.js</p>
    </div>
  );
}

• pages/about.jsの中身

import Header from '../comps/Header';

export default function About() {
  return (
    <div>
      <Header />
      <p>This is the about page</p>
    </div>
  );
}

何が表示された？と聞かれるので、問題なく動いたと選択し次へ

The Component Directory

ちゃんと動くよね。コンポーネントを置くディレクトリは好きな名前にしていいんだ。
特別な名前が必要なのは、/pagesディレクトリと、/publicディレクトリだけなんだ。
もちろん、コンポーネントは/pagesディレクトリ配下にも作成できる。
ただ今回そうしなかったのは、Headerコンポーネントへの直接のリンクが不要だからだ。
（http://localhost:3000/Headerにアクセスするのは不要。）

※ ここでcompsは、componentsにリネームして戻しておく。アプリケーションの再起動も忘れずに

The Layout Component

共通のCSSスタイルをあてたいときあるよね。
共通のレイアウトコンポーネントを作っていくよ。

まず、componentsディレクトリ配下にMyLayout.jsを作成するよ。

• components/MyLayout.jsの中身

import Header from './Header';

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
};

const Layout = props => (
  <div style={layoutStyle}>
    <Header />
    {props.children}
  </div>
);

export default Layout;

そして、このレイアウトコンポーネントを使うためにpages/index.jsとpages/about.jsを編集する。

• pages/index.jsの中身

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

export default function Index() {
  return (
    <Layout>
      <p>Hello Next.js</p>
    </Layout>
  );
}

• pages/about.jsの中身

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

export default function About() {
  return (
    <Layout>
      <p>This is the about page</p>
    </Layout>
  );
}

ブラウザでhttp://localhost:3000/aboutにアクセスしてみる

レイアウトコンポーネントで指定したborder: '1px solid #DDD'の枠線があることが確認できた。

次に、components/MyLayout.jsから{props.children}を削除してみよう。

• components/MyLayout.jsの中身

import Header from './Header';

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
};

const Layout = props => (
  <div style={layoutStyle}>
    <Header />
  </div>
);

export default Layout;

ブラウザでhttp://localhost:3000/aboutにアクセスしてみる

何が表示された？と聞かれるので、コンテンツが消えたと選択し次へ

Rendering Child Components

{props.children}を削除すると、Layoutコンポーネントの中においたコンテンツはレンダリングされないんだ。
Layoutコンポーネントの作成方法をひとつ紹介したけど、他にも作成する方法があるよ。

Method 1 - Layout as a Higher Order Component

// components/MyLayout.js

import Header from './Header';

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
};

const withLayout = Page => {
  return () => (
    <div style={layoutStyle}>
      <Header />
      <Page />
    </div>
  );
};

export default withLayout;

// pages/index.js

import withLayout from '../components/MyLayout';

const Page = () => <p>Hello Next.js</p>;

export default withLayout(Page);

// pages/about.js

import withLayout from '../components/MyLayout';

const Page = () => <p>This is the about page</p>;

export default withLayout(Page);

Method 2 - Page content as a prop

// components/MyLayout.js

import Header from './Header';

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
};

const Layout = props => (
  <div style={layoutStyle}>
    <Header />
    {props.content}
  </div>
);

export default Layout;

// pages/index.js

import Layout from '../components/MyLayout.js';

const indexPageContent = <p>Hello Next.js</p>;

export default function Index() {
  return <Layout content={indexPageContent} />;
}

// pages/about.js

import Layout from '../components/MyLayout.js';

const aboutPageContent = <p>This is the about page</p>;

export default function About() {
  return <Layout content={aboutPageContent} />;
}

Using Components

今回は、２つの方法について紹介したよ。
1. 共通のHeaderコンポーネントとして
2. Layoutコンポーネントとして

コンポーネントは、スタイル適用やページのLayoutなどに使えるんだ。
また、NPMモジュールから読み込む方法もあるよ。

はじめに

以前は React コンポーネントはクラスで実装するのが常識だったが、シンプルな実装として SFC (Stateless Functional Component) という関数での実装の手法も存在した。
そして、 React Hooks が利用できるようになって、関数コンポーネントでも state を持つことができるようになり、 FC (Functinal Component) による実装が可能になった。

ここでは FC と React Hooks の組み合わせについて自分なりの解釈と説明をします。

これまでの SFC について

SFC は上位のコンポーネントから渡した props の値が変更された時に実行され、レンダリングされます。
props の値が変化しない場合は再レンダリングはされません。
そのため、状態は常に SFC の利用側でコントロールする必要がありました。

const ExampleSFC = (props: {
  count: number,
  // onIncrementClick のハンドラを外側で実装して、インクリメントした値を count props で渡す感じ
  onIncrementClick: () => void
}) => {
  return (
    <div>
      <div>count: {count}</div>
      <button onClick={onIncrementClick}>+1</button>
    </div>
  );
}

FC について

React Hooks を使うことで、関数コンポーネントで State (状態) を持つことができるようになります。
ここでは Hooks のうち、 useState と useCallback を使います。

const ExampleFC = (props: {
  initialCount: number = 0
}) => {
  // コンポーネント内で count を持つ
  const [count, setCount] = useState(initialCount);

  // +1 がクリックされたら count をインクリメントするコールバックを定義する
  const onIncrementClick = useCallback(() => {
    setCount(count => count + 1);
  }, []);

  return (
    <div>
      <div>count: {count}</div>
      <button onClick={onIncrementClick}>+1</button>
    </div>
  );
}

FC の実行とレンダリングのタイミング

SFC は props が変化したら実行 (=レンダリング) されるということを SFC の項目で説明したが、 FC は props に加えて state と、 consume している context の値が変化した際も実行される。
ここでいう state は useState によるもの、 context は useContext によるものを指す。

useState について

React Hooks で提供されている useState は、それを実行したコンポーネントでのみ持つ "状態" である。

const [value, setValue] = useState();

この場合、 setValue() を実行して value を更新した際に、その FC が実行される。

useContext について

React Hooks で提供されている useContext は、その親 (先祖) コンポーネントで作成されたコンテキスト (createContext()) で提供されている値を監視＆参照する事ができる。
ざっくり const value = useContext(context) の様な形で context の値を consume することができる。
ここで consume している値が更新された際に FC が実行される。

useContext を扱うことは少ないかもしれないが、 react-redux で提供されている useSelector も同様の仕組みとなっている。 (と認識している)

useCallback について

上記のように、 props, state, context の値が更新されると FC が実行されるが、イベントハンドラを以下のように実装するとパフォーマンス的な問題が発生する。

const ExampleFC = (props: {
  initialCount: number = 0
}) => {
  // コンポーネント内で count を持つ
  const [count, setCount] = useState(initialCount);

  return (
    <div>
      <div>count: {count}</div>
      <button onClick={() => setState(count => count + 1)}>+1</button>
    </div>
  );
}

ここでの問題は、 button の onClick に設定している () => setState(count => count + 1) この関数の定義が FC が実行される度に再生成されるという問題である。

この ExampleFC では initialCount props と count state のみ参照しているため、実行される頻度は高くないため問題が顕在化しにくいが、多数の props, state, context を参照し、多数の callback を持つ FC になると問題が顕著になると思う。

前述した FC について の項目で説明した Example は以下のように useCallback を使ってコールバックを生成している。

  const onIncrementClick = useCallback(() => {
    setCount(count => count + 1);
  }, []);

useCallback を使うことによって、何度 FC が実行されてもハンドラ関数の定義は一度のみに限定することが可能となる。
これはメモ化という仕組みによるものだが、メモ化については割愛する。

useCallback の第2引数は依存する値 (dependencies) となっており、指定した値が更新された際にコールバックが再生成される。
コールバック内で使用可能な変数は、コールバックが生成された際の値となっているため、基本的にはコールバック内で使う変数を第2引数で指定する。

(ちょっと複雑だが、例で記載している setCount は第2引数で指定していない。 useState で生成した set 関数は常に一意となるため、第2引数で指定する必要はない。)

useEffect について

useEffect はコンポーネントのライフサイクルを管理する上で非常に重要になる Hooks 関数である。
クラスコンポーネントでいう componentDidMount, componentDidUpdate, componentDidUnmount などの副作用を実現するために useEffect を利用する。

useEffect は以下のように利用する。

const ExampleFC = (props: {
  initialCount: number = 0
}) => {
  // コンポーネント内で count を持つ
  const [count, setCount] = useState(initialCount);

  // +1 がクリックされたら count をインクリメントするコールバックを定義する
  const onIncrementClick = useCallback(() => {
    setCount(count => count + 1);
  }, []);

  useEffect(() => {
    console.log(`count が更新されました。新しい値は ${count} です。`);
  }, [count]);

  return (
    <div>
      <div>count: {count}</div>
      <button onClick={onIncrementClick}>+1</button>
    </div>
  );
}

前述したとおり、 FC は参照する props, state, context が変化した度に実行される。
例は count しか変化する変数がないため若干わかりにくい例かもしれないが、 count が更新される度に ExampleFC が実行され、上から下まで一連の実装が処理される。

useEffect も例外ではなく毎回通って実行されるが、メモ化という仕組みにより、第2引数で指定した依存変数が変化した場合にのみ第1引数で指定したコールバックが実行される。
なので、更新を感知して実行したい処理を第1引数に書き、どの変数が変化したら第1引数で指定した処理を実行したいのかを第2引数で指定する形となる。

最後に

拙い文章でアレだが、こんな主張である。

Reactに入門したのはいいもののcreate-react-appでプロジェクトを作成すると無駄なファイルが多かったり、環境構築を丸投げしてるのでちょっと色々まずいなと思い、
create-react-appを使わずに環境構築をしていこうと思います。ドキュメントを見ると学習用やちょっと試したいときに最適である的なことが書いてありますね。

---

以下はこの記事での手順をまとめたスクリプトです。npmが入っている前提ですが、実行ディレクトリにプロジェクトが生成されると思います。

最終的なスクリプト

PROJECT_NAME=myapp
echo $PROJECT_NAME
mkdir $PROJECT_NAME
cd $PROJECT_NAME

cat <<EOF > package.json
{
 "scripts": {
    "dev": "webpack-dev-server --open"
  }
}
EOF

npm i react react-dom webpack webpack-cli
npm i -D typescript ts-loader webpack-dev-server @types/{react,react-dom}


mkdir dist
mkdir src

cat <<EOF > dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> my-app </title>
</head>
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>
</html>
EOF

cat <<EOF > src/index.tsx
import React from 'react';
import ReactDOM from 'react-dom';

const App = () => <div> hello word </div>

ReactDOM.render(<App/>, document.getElementById("root"))
EOF

cat <<EOF > tsconfig.json
{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports" :true
  }
}
EOF

cat <<EOF > webpack.config.js
const path = require('path');

module.exports = {
  mode: "development",
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ],
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: './dist',
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  }
};
EOF

実行後は以下のようになると思います。

├── dist
│   └── index.html
├── package-lock.json
├── package.json
├── src
│   └── index.tsx
├── tsconfig.json
└── webpack.config.js

必要なモジュール

• React/ReactDOM
• webpack
  • ソースコードを1つのファイルにまとめるツール。v4 から cli も必須になった。
• webpack-dev-server
  • Hotリロード機能。
• トランスパイラ
  • babel, ts-loaderとか
  • classとかJSXとかトランスパイルしてJavaScriptコードを生成する。

npmでいれる。

 npm i react react-dom webpack webpack-cli

typescriptを使う場合は型定義とかも

 npm i -D typescript ts-loader webpack-dev-server @types/{react,react-dom}

作成するファイル

• index.html
• index.js
• package.json
• ts-config.json
• webpack.config.js

index.html

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>my-app</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>

htmlファイル。webpackでbundleしたファイルを読み込む。

index.ts

src/index.tsx

import React from "react"
import ReactDOM from "react-dom"

const App = () => <div> hello word </div>

ReactDOM.render(<App />, document.getElementById("root"))

エントリーファイル。Hello Worldだけ。

tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "allowSyntheticDefaultImports": true
  }
}

とりあえず公式のと同じです。適宜追加していきます。

webpack.config.js

webpackの設定ファイルです。初見ででかいconfigファイルを見るとビビってしまいますが、最低限必要なのはそこまで多くないです。

https://webpack.js.org/guides/typescript/
https://webpack.js.org/concepts/

webpack.config.js

const path = require("path")
module.exports = {
  mode: "development",
  entry: "./src/index.tsx",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  devtool: "inline-source-map",
  devServer: {
    contentBase: "./dist",
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
}

mode(dev or prod)と入出力パスとloaderとresolveなんで簡単ですね。

この部分はwebpack-dev-serverの設定です。

  devtool: "inline-source-map",
  devServer: {
    contentBase: "./dist",
  },

https://webpack.js.org/guides/development/#using-webpack-dev-server

package.json

npm init -yみたいにすると雛形が生成されますが、最低限ファイルがあればいいようです。

echo "{}" > package.json

npm i react, react-dom

あとオプションが微妙ですね。

--save-dev | -DでdevDependencyに追加
--save | -Sで両方とかですかね？？

npxはローカルにインストールしたパッケージを実行できる（正確ではないかも）

npx webpack-dev-server --open

npm scriptに追記して

{
  "scripts": {
    "start": "webpack-dev-server --open"
  }
}

npm run start

で実行できるようになる。

---

あとは適当にテストとかlinterとかいれるだけ。

...用語とか言葉とかあやふやなところ適宜修正します。

その他

git

echo "node_modules" > .gitignore
git init
git add .
git commit -m "create project"

styled-components

npm i styled-components
npm i @types/styled-components

解決策

• rootディレクトリにstaticフォルダを作成、そこに画像を入れておく。 読み込む際は、srcにstaticをつけてあげればオッケー

<img src="/static/image.png"/>

ドキュメントだとpublicフォルダ作って画像入れておくといいと書いてありましたが、うまくいきませんでした。

そもそもクソアプリじゃないアプリとは？

サービスを開発する時にクソじゃないアプリにするために考えることと言えば下記のようなことになるかと思います。

• 見た目がちゃんとしている
• 致命的な不具合がほぼ無い
• ちょっとした不具合も少ない
• サービスを成すためにちゃんと必要な機能が整えられている
• 利用規約やプライバシーポリシーがある
• マネタイズ方法を考えている

今回のアプリの方針

でもクソじゃないアプリを作るというのは疲れます。後半のリリース前は利用規約や色々な説明文の調整など、やりたくないことばかりをやるハメになります。

ということで今回はクソアプリということなので何も気にせず好き勝手に作ろうと思い立ちました。元々アイデアとしてはあったけど、普段だったら絶対作らないだろうなぁ…というものをいい機会ですので作り進めてみました。具体的には下記のような方針です。

• 見た目上変なところがあってもいい
• 不具合の確認とかしないので最初の方に作った機能とか壊れている可能性がある
• 作りたいところを優先的に作っているので使いづらくていも良い
• マネタイズもアクセス解析も利用規約もなにもない

他者無視でとにかく自己中心的に作り進めていくだけのクソアプリです。

どういうアプリか

Web上で気軽に音を入力して再生できるアプリです。

ふと曲がコード進行含め頭に思い浮かぶことってよくありますよね。でもメモるのも面倒だしと思って放置していると100%忘れて二度と思い出せません。そんなときのためにWebで手軽に曲をメモしておけるツールです。記事を書き終わってToneEverybodyというわけのわからない名前でデプロイし終わってから思いましたが「キョクメモ」というサービス名だったら最高ですね！　もしくは曲メモ帳。

リアルタイムでデータ保存

FirebaseのRealtime Databaseを使っており、データはどんどん保存されていきます。Realtime Databaseなので、他の人が編集したものもどんどんリアルタイムで共有されていきます。ですので例えばチャンネル1は自分が、チャンネル2は友達が入力、みたいにしてその場で曲作りをしていくことも出来ます。

音を入力したら進む

メトロノームに合わせて音を正確に入力していくのはなかなか難しいため、一つ音を入力したら次の時間に進む、という形にしています。そのため楽器を弾くのに慣れていなくてもゆっくり一音ずつ正確に入力していくことが出来ます。

入力方式

PCの場合はキーボードの横並びであるz～m、r～pがドレミファソラシになっており、その上はピアノと同様シャープ音を利用することが出来ます。短いタイミングで押せば同じタイミングの和音にすることが出来ます。録音時は画面上にキーボードも出現するため、スマホの場合でも入力できます（この場合は同じチャンネル内の和音にすることは出来ません）。

バックスペースで戻る＆削除、スペースキーで音を入力せずに次の時間に進むことが出来ます。スマホの場合も同様のボタンを用意しています。

再生の仕組み

入力後、もちろん実際に再生して音を鳴らして確認することが出来ます。元々ぼんやりとMIDIを使って再生することを考えていたのですが、よく使われているっぽいライブラリが大量にmp3ファイルを使っていて重すぎたりしてちょっと厳しいなぁ、と思っている時にTone.jsというフレームワークを発見しました。

Tone.js

Tone.jsはW3Cの草案であるWeb Audio APIというものを利用する形で作られています。そのため多分WebKitやFirefoxあたりでしか動作しませんが、スマホを含めたブラウザ上で動作するすごいやつです。Tone.jsの公式サイトにサンプルもたくさんありますので、この記事を読み終わった後にでも見てみてください。

具体的な再生方法

色々やり方があるのであくまで1例です。今回はチャンネルを利用したかったのでその形です。

まず再生のタイミングでPolySynthというものをチャンネルごとに作成します。これは音作りなどが出来る機能ですので一応チャンネル毎に音を変えることが出来ます（が今回は時間が足りず実装していません）。

    const synthes = music.channels.map(_channel =>
      new Tone.PolySynth().toMaster()
    )

その後、実際に音を入れていきます。再生のタイミングではなく、楽譜のように音を鳴らすタイミングを指定するだけです。triggerAttackReleaseは鍵盤を押して離す、という流れを指定できます。

      channel.playNotes.forEach(playNote => {
        Tone.Transport.schedule(function(_time) {
          synth.triggerAttackRelease(playNote.note.name, 0.5)
        }, playNote.time * 0.5)
      })

あとはstartすれば再生されます。

    Tone.Transport.start()

開発方法

今回はReactを使いました。React Hooksでちゃんと一から何かしらを作ったことがなかったので試してみました。ちなみにReact Hooksというのはクラスではなく関数コンポーネントを利用する方法です。ちゃちゃっと適当に開発しようと思ったのでReduxを入れていないのですが、やはりプロパティやコールバックを橋渡しするのが増えてきてしんどくなってきたため、だんだん後悔しています。

プロジェクトの作成方法

1ページの簡単なアプリを作るだけだったので、Next.jsなども使わずcreate-react-appで作成しています。今ってもうTypeScriptも含めて初期化出来るみたいで簡単でした。

npx create-react-app my-app --typescript

ハマったところ

キーボード入力

PCではキーボード入力を可能にしているため、コンポーネントが作成された最初のタイミングで document.addEventListener でキー入力イベントを設定する必要があります。クラスコンポーネントであればcomponentDidMount内でやればいいだけなのですが、関数の場合はそれがありません。そのためuseEffectという機能を利用する必要があります。

  useEffect(() => {
    document.addEventListener('keydown', onKeyDown)
    return () => document.removeEventListener('keydown', onKeyDown)
  })

再描画の時にreturnしている部分が呼び出されるため、ここでリスナーを破棄しています。

ただ、本来であれば下記のようにするべきです。

  useEffect(() => {
    document.addEventListener('keydown', onKeyDown)
    return () => document.removeEventListener('keydown', onKeyDown)
  }, [])

最後に空配列を入れています。これは、この中身が変わったらuseEffect内も生成し直してくれ、という指定です。空配列を指定することで中身が変わることがないため、ページが最初に表示された時以外は再生成されなくなります。

ではなぜそうせずに何度も生成し直しているのかというところですが、これは関数コンポーネントの基本的な仕組みが関係しています。

コンポーネント内の値は固定される

なんとなくuseStateを使ってステートを変更していると、簡単に値を変更できて楽だなぁというイメージがあるのではないかと思います。しかし実際にはそういうわけではなく、ステートが変わる毎に値の束縛が行われており、あくまでも再生成される時に最新の値で構築されているだけになります。

そのため普段は意識することがないかもしれませんが、今回のようにdocumentのキーボードイベントを取得したりすると、この場合だけ中のstateが全く変わっていないということがわかります。実際に、画面上の鍵盤で入力すると正しく音を登録できるのですが、キーボードで入力すると正常に音を登録できない、ということが発生しました。

そのため、ちょっと実装的にはアレかもですので他にやり方があるのかもしれませんが、キーボードイベントも毎回登録し直すような形にしています。

useRefというのもある

useRefというものがあり、ステートとは違い、参照を保存しておくことが出来るものです。

  const musicRef = useRef<Music>()

こんな感じで指定してchannels.currentに例えば今回はDOMの参照を入れておきます。

実は今回キーボードでは和音を入力できるようにするため、キー入力後にsetTimeoutを利用し、ちょっと時間が経って入力が無かったら次の時間軸に進む、ということを行っています。

これも先程のdocumentイベントのように曲者で、コンポーネント外から色々しようとするので正しくコンポーネント内の値を取得、更新できません。

そのため、useRefを使ってデータの参照を行って色々と処理してあげる必要があります。ちなみに、この場合createRefも正常に動作しないため、ちょっと面倒な手順を用意する必要もあったりします。¹

このように、画面上のDOMからのイベント以外の色々なイベントを駆使しようとすると結構複雑になります。ハマりどころ且つ、処理が複雑になりきれいに書きにくくなると思いますので、可能であれば予め気をつけておいた方が良いような気がします。

まとめ

ということで完成させる気のないというクソアプリの紹介でした。下記はやろうと思っていたけど出来ていません。他に色々とやることがあるので多分もう作りません。

• テンポを変える
• 音色を変える
• 一時的に倍速入力できるようにする
• スマホでも1チャンネルに和音を入力できるようにする
• 登録時に削除せずに戻るだけの機能
• 再生時に超かっこいいアニメーション表示
• 自分の曲をロックして他の人が編集できないようにする
• 録音再開時はチャンネルの最後からスタート
• mp3でダウンロード
• 簡単タップで5000兆円手に入る機能

下記にアップしてありますのでぜひ遊んでみてください。使い方の説明ももちろんありませんので雰囲気でどうぞ！　ちなみに誰かがもうぐちゃぐちゃにしちゃっていてもう無いかもしれませんがmayという昔作ったノスタルジックな曲をサンプルでちょっとだけ入れています。

Tone Everybody
https://tone-everybody.netlify.com/

ちょっとでも良いなと思うところがあったら是非いいねをお願いします！

（曲を登録したら続きを作りたくなってしまう不思議……）

---

1. React HooksのuseEffect経由でrefを使う場合 - Crieit ↩

そもそもクソアプリじゃないアプリとは？

サービスを開発する時にクソじゃないアプリにするために考えることと言えば下記のようなことになるかと思います。

• 見た目がちゃんとしている
• 致命的な不具合がほぼ無い
• ちょっとした不具合も少ない
• サービスを成すためにちゃんと必要な機能が整えられている
• 利用規約やプライバシーポリシーがある
• マネタイズ方法を考えている

今回のアプリの方針

でもクソじゃないアプリを作るというのは疲れます。後半のリリース前は利用規約や色々な説明文の調整など、やりたくないことばかりをやるハメになります。

ということで今回はクソアプリということなので何も気にせず好き勝手に作ろうと思い立ちました。元々アイデアとしてはあったけど、普段だったら絶対作らないだろうなぁ…というものをいい機会ですので作り進めてみました。具体的には下記のような方針です。

• 見た目上変なところがあってもいい
• 不具合の確認とかしないので最初の方に作った機能とか壊れている可能性がある
• 作りたいところを優先的に作っているので使いづらくていも良い
• マネタイズもアクセス解析も利用規約もなにもない

他者無視でとにかく自己中心的に作り進めていくだけのクソアプリです。

どういうアプリか

Web上で気軽に音を入力して再生できるアプリです。

ふと曲がコード進行含め頭に思い浮かぶことってよくありますよね。でもメモるのも面倒だしと思って放置していると100%忘れて二度と思い出せません。そんなときのためにWebで手軽に曲をメモしておけるツールです。記事を書き終わってToneEverybodyというわけのわからない名前でデプロイし終わってから思いましたが「キョクメモ」というサービス名だったら最高ですね！　もしくは曲メモ帳。

リアルタイムでデータ保存

FirebaseのRealtime Databaseを使っており、データはどんどん保存されていきます。Realtime Databaseなので、他の人が編集したものもどんどんリアルタイムで共有されていきます。ですので例えばチャンネル1は自分が、チャンネル2は友達が入力、みたいにしてその場でジャムセッションみたいな感じで曲作りをしていくことも出来ます。

音を入力したら進む

メトロノームに合わせて音を正確に入力していくのはなかなか難しいため、一つ音を入力したら次の時間に進む、という形にしています。そのため楽器を弾くのに慣れていなくてもゆっくり一音ずつ正確に入力していくことが出来ます。

入力方式

PCの場合はキーボードの横並びであるz～m、r～pがドレミファソラシになっており、その上はピアノと同様シャープ音を利用することが出来ます。短いタイミングで押せば同じタイミングの和音にすることが出来ます。録音時は画面上にキーボードも出現するため、スマホの場合でも入力できます（この場合は同じチャンネル内の和音にすることは出来ません）。

バックスペースで戻る＆削除、スペースキーで音を入力せずに次の時間に進むことが出来ます。スマホの場合も同様のボタンを用意しています。

再生の仕組み

入力後、もちろん実際に再生して音を鳴らして確認することが出来ます。元々ぼんやりとMIDIを使って再生することを考えていたのですが、よく使われているっぽいライブラリが大量にmp3ファイルを使っていて重すぎたりしてちょっと厳しいなぁ、と思っている時にTone.jsというフレームワークを発見しました。

Tone.js

Tone.jsはW3Cの草案であるWeb Audio APIというものを利用する形で作られています。そのため多分WebKitやFirefoxあたりでしか動作しませんが、スマホを含めたブラウザ上で動作するすごいやつです。Tone.jsの公式サイトにサンプルもたくさんありますので、この記事を読み終わった後にでも見てみてください。

具体的な再生方法

色々やり方があるのであくまで1例です。今回はチャンネルを利用したかったのでその形です。

まず再生のタイミングでPolySynthというものをチャンネルごとに作成します。これは音作りなどが出来る機能ですので一応チャンネル毎に音を変えることが出来ます（が今回は時間が足りず実装していません）。

    const synthes = music.channels.map(_channel =>
      new Tone.PolySynth().toMaster()
    )

その後、実際に音を入れていきます。再生のタイミングではなく、楽譜のように音を鳴らすタイミングを指定するだけです。triggerAttackReleaseは鍵盤を押して離す、という流れを指定できます。

      channel.playNotes.forEach(playNote => {
        Tone.Transport.schedule(function(_time) {
          synth.triggerAttackRelease(playNote.note.name, 0.5)
        }, playNote.time * 0.5)
      })

あとはstartすれば再生されます。

    Tone.Transport.start()

開発方法

今回はReactを使いました。React Hooksでちゃんと一から何かしらを作ったことがなかったので試してみました。ちなみにReact Hooksというのはクラスではなく関数コンポーネントを利用する方法です。ちゃちゃっと適当に開発しようと思ったのでReduxを入れていないのですが、やはりプロパティやコールバックを橋渡しするのが増えてきてしんどくなってきたため、だんだん後悔しています。

プロジェクトの作成方法

1ページの簡単なアプリを作るだけだったので、Next.jsなども使わずcreate-react-appで作成しています。今ってもうTypeScriptも含めて初期化出来るみたいで簡単でした。

npx create-react-app my-app --typescript

ハマったところ

キーボード入力

PCではキーボード入力を可能にしているため、コンポーネントが作成された最初のタイミングで document.addEventListener でキー入力イベントを設定する必要があります。クラスコンポーネントであればcomponentDidMount内でやればいいだけなのですが、関数の場合はそれがありません。そのためuseEffectという機能を利用する必要があります。

  useEffect(() => {
    document.addEventListener('keydown', onKeyDown)
    return () => document.removeEventListener('keydown', onKeyDown)
  })

再描画の時にreturnしている部分が呼び出されるため、ここでリスナーを破棄しています。

ただ、本来であれば下記のようにするべきです。

  useEffect(() => {
    document.addEventListener('keydown', onKeyDown)
    return () => document.removeEventListener('keydown', onKeyDown)
  }, [])

最後に空配列を入れています。これは、この中身が変わったらuseEffect内も生成し直してくれ、という指定です。空配列を指定することで中身が変わることがないため、ページが最初に表示された時以外は再生成されなくなります。

ではなぜそうせずに何度も生成し直しているのかというところですが、これは関数コンポーネントの基本的な仕組みが関係しています。

コンポーネント内の値は固定される

なんとなくuseStateを使ってステートを変更していると、簡単に値を変更できて楽だなぁというイメージがあるのではないかと思います。しかし実際にはそういうわけではなく、ステートが変わる毎に値の束縛が行われており、あくまでも再生成される時に最新の値で構築されているだけになります。

そのため普段は意識することがないかもしれませんが、今回のようにdocumentのキーボードイベントを取得したりすると、この場合だけ中のstateが全く変わっていないということがわかります。実際に、画面上の鍵盤で入力すると正しく音を登録できるのですが、キーボードで入力すると正常に音を登録できない、ということが発生しました。

そのため、ちょっと実装的にはアレかもですので他にやり方があるのかもしれませんが、キーボードイベントも毎回登録し直すような形にしています。

useRefというのもある

useRefというものがあり、ステートとは違い、参照を保存しておくことが出来るものです。

  const musicRef = useRef<Music>()

こんな感じで指定してchannels.currentに例えば今回はDOMの参照を入れておきます。

実は今回キーボードでは和音を入力できるようにするため、キー入力後にsetTimeoutを利用し、ちょっと時間が経って入力が無かったら次の時間軸に進む、ということを行っています。

これも先程のdocumentイベントのように曲者で、コンポーネント外から色々しようとするので正しくコンポーネント内の値を取得、更新できません。

そのため、useRefを使ってデータの参照を行って色々と処理してあげる必要があります。ちなみに、この場合createRefも正常に動作しないため、ちょっと面倒な手順を用意する必要もあったりします。¹

このように、画面上のDOMからのイベント以外の色々なイベントを駆使しようとすると結構複雑になります。ハマりどころ且つ、処理が複雑になりきれいに書きにくくなると思いますので、可能であれば予め気をつけておいた方が良いような気がします。

まとめ

ということで完成させる気のないというクソアプリの紹介でした。下記はやろうと思っていたけど出来ていません。他に色々とやることがあるので多分もう作りません。

• テンポを変える
• 音色を変える
• 一時的に倍速入力できるようにする
• スマホでも1チャンネルに和音を入力できるようにする
• 登録時に削除せずに戻るだけの機能
• 再生時に超かっこいいアニメーション表示
• 自分の曲をロックして他の人が編集できないようにする
• 録音再開時はチャンネルの最後からスタート
• mp3でダウンロード
• 簡単タップで5000兆円手に入る機能

下記にアップしてありますのでぜひ遊んでみてください。使い方の説明ももちろんありませんので雰囲気でどうぞ！　ちなみに誰かがもうぐちゃぐちゃにしちゃっていてもう無いかもしれませんがmayという昔作ったノスタルジックな曲をサンプルでちょっとだけ入れています。

Tone Everybody
https://tone-everybody.netlify.com/

ちょっとでも良いなと思うところがあったら是非いいねをお願いします！

（曲を登録したら続きを作りたくなってしまう不思議……）

---

1. React HooksのuseEffect経由でrefを使う場合 - Crieit ↩

目次

• 初めに
• 完成品
• 前提条件
• 各コンポーネントについて
• Appコンポーネント
• Headerコンポーネント
• Formコンポーネント
• ToDoListコンポーネント
• 最終的なコード
• 参考

初めに

React Hooks Advent Calendar 2019 10日目の記事を書かせていただきました。

まだReactを勉強し始めて間もないですが、やはりTo Doリストは一度作っておくべきだろうと思って色々Qiitaを漁っていてあることに気が付きました。

「React Hookを使って実装している人、ほとんどいないな...」と（私が見てないだけだと思います）。

そこで私はReact　Hookの一つ、useStateを使ってTo Doリストを作りました。変数名とか結構ガバガバだと思います。
React初心者ですがお叱りなどあったら甘んじて受け入れる所存です。よろしくお願いします。

※React Hooks Advent Calendar 2019 7日目の@daishiさんの記事では私とは別のやり方でTo Doリスト作ってますね。

完成品

完成品がこちらです。Netlifyでデプロイもしてます。→ To Do List Used By Hooks
私はブラウザはなんとなくVivaldi使っているのでVivaldiでアクセスした画面になります。

スタイルはほぼ全部Bootstrap 4に投げました。

コードはGitHubに投げました。

https://github.com/koralle/todo-usedby-hook

前提条件

• Windows 10
• node.js v12.13.1
• yarn 1.19.2
• Bootstrap 4
• create-react-app 3.2.0

各コンポーネントについて

Appを親コンポーネントにして、画面上からHeader、Form、ToDoListで構成しました。

Appコンポーネント

returnの中の不自然に見える<div>タグはBootstrapであれこれするためにこうなってます...

App.js

import React, {useState} from 'react';
import './App.css';
import Header from './Header';
import Form from './Form'
import ToDoList from './ToDoList'

const App = () => {
    // ToDoリストのStateをtoDoListと定義
    const [toDoList, setToDoList] = useState([]);

    // toDoListに項目を追加
    const addToDoList = (Title, Content) => {
        setToDoList(toDoList.concat({"title": Title, "content": Content}));
    }
    // toDoListの項目を削除
    const deleteToDoList = (index) => {
        setToDoList(toDoList.filter(item => toDoList[index] !== item));
    }


    return (
        <div>
            <Header headerTitle="To Do List Used By Hooks"/>

            <div>
                <div>
                    <Form add={addToDoList}/>
                    <ToDoList list={toDoList} delete={deleteToDoList}/>
                </div>
            </div>
        </div>
    );
}

export default App;

Headerコンポーネント

headerタグをrenderしているだけなので,あまり書くことないです。

Header.js

import React from 'react';
import './Header.css'

const Header = (props) => {

    return (
        <header>
            <h1>{props.headerTitle}</h1>
        </header>
    );
}

export default Header;

Formコンポーネント

このコンポーネント、できればステートレスにしたかったんですけど上手くいきませんでした。
AppコンポーネントからaddToDoList()をpropsとして引き渡してます。

Form.js

import React, {useState} from 'react';
import './Form.css'

const Form = (props) => {
    const [toDoTitle, setToDoTitle] = useState("");
    const [toDoContent, setToDoContent] = useState("");

    // Titleフォームの状態の制御
    const handleToDoTitleInputChange = (e) => {
        setToDoTitle(e.target.value);
    }

    // Contentフォームの状態の制御
    const handleToDoContentInputChange = (e) => {
        setToDoContent(e.target.value);
    }

    // 入力フォームのクリア
    const resetInputField = () => {
        setToDoTitle("");
        setToDoContent("");
    }

    // 項目の追加を確定
    const callAddToDoList = (e) => {
        e.preventDefault();
        props.add(toDoTitle,toDoContent);
        resetInputField();
    }

    return (
        <form>
            <div>
                <div>
                    <span>Title</span>
                </div>
                <input type="text"
                    onChange={handleToDoTitleInputChange}
                    value={toDoTitle}
                />
            </div>
            <div>
                <div>
                    <span>Detail</span>
                </div>
                <textarea
                    onChange={handleToDoContentInputChange}
                    value={toDoContent}
                ></textarea>
            </div>
            <div>
                <button type="submit" onClick={callAddToDoList} >
                    ADD
                </button>
            </div>
        </form>
    );
}

export default Form;

ToDoListコンポーネント

AppコンポーネントのStateであるtoDoListと項目を削除する関数deleteToDoList()をpropsとして引き渡しています。

ToDoList.js

import React from 'react';
import './ToDoList.css'

const ToDoList = (props) => {
    // AppコンポーネントのStateであるtoDoListをpropsとして受け取って
    // mapでループする
    const toDoListItems = props.list.map(
        (item, i) => {
            return (
                <div key={i} >
                    <div>
                        <h5>Title: {item.title}</h5>
                        <p>Content: {item.content}</p>
                        <button onClick={() => props.delete(i)} >
                            Delete
                        </button>
                    </div>
                </div>
            );
        }
    );

    return (
        <div>
            <h1>Your Tasks: {props.list.length}</h1>
            <div>
                {toDoListItems}
            </div>
        </div>
    );
}

export default ToDoList;

最終的なコード

上のコードにBootstrap4でスタイルを付ける為にclassNameをつけ足していった結果が以下のコードになります。
(CSSファイルは割愛しました。)

./public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>To Do List used by Hooks</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

App.js

import React, {useState} from 'react';
import './App.css';
import Header from './Header';
import Form from './Form'
import ToDoList from './ToDoList'

const App = () => {
    const [toDoList, setToDoList] = useState([]);


    const addToDoList = (Title, Content) => {
        setToDoList(toDoList.concat({"title": Title, "content": Content}));
    }


    const deleteToDoList = (index) => {
        setToDoList(toDoList.filter(item => toDoList[index] !== item));
    }


    return (
        <div className="toDo-app">
            <Header headerTitle="To Do List Used By Hooks"/>

            <div className="toDo-app-body container">
                <div className="toDo-main">
                    <Form add={addToDoList}/>
                    <ToDoList list={toDoList} delete={deleteToDoList}/>
                </div>
            </div>
        </div>
    );
}

export default App;

Header.js

import React from 'react';
import './Header.css'

const Header = (props) => {

    return (
        <header className="toDo-header">
            <h1>{props.headerTitle}</h1>
        </header>
    );
}

export default Header;

Form.js

import React, {useState} from 'react';
import './Form.css'

const Form = (props) => {
    const [toDoTitle, setToDoTitle] = useState("");
    const [toDoContent, setToDoContent] = useState("");

    const handleToDoTitleInputChange = (e) => {
        setToDoTitle(e.target.value);
    }

    const handleToDoContentInputChange = (e) => {
        setToDoContent(e.target.value);
    }

    const resetInputField = () => {
        setToDoTitle("");
        setToDoContent("");
    }

    const callAddToDoList = (e) => {
        e.preventDefault();
        props.add(toDoTitle,toDoContent);
        resetInputField();
    }

    return (
        <form className="toDo-form">
            <div className="toDo-form-title input-group"> 
                <div className="input-group-prepend">
                    <span className="input-group-text">Title</span>
                </div>
                <input type="text"
                    className="form-control shadow"
                    onChange={handleToDoTitleInputChange}
                    value={toDoTitle}
                />
            </div>
            <div className="toDo-form-detail input-group">
                <div className="input-group-prepend">
                    <span className="input-group-text">Detail</span>
                </div>
                <textarea className="form-control shadow"
                    aria-label="Detail"
                    onChange={handleToDoContentInputChange}
                    value={toDoContent}
                ></textarea>
            </div>
            <div className="toDo-form-add">
                <button className="btn btn-success"
                    type="submit" onClick={callAddToDoList}
                >
                    ADD
                </button>
            </div>
        </form>
    );
}

export default Form;

ToDoList.js

import React from 'react';
import './ToDoList.css'

const ToDoList = (props) => {
    const toDoListItems = props.list.map(
        (item, i) => {
            return (
                <div key={i} className="card toDo-item">
                    <div className="card-body">
                        <h5 className="card-title">Title: {item.title}</h5>
                        <p className="card-text">Content: {item.content}</p>
                        <button className="btn btn-danger"
                            onClick={() => props.delete(i)} >
                            Delete
                        </button>
                    </div>
                </div>
            );
        }
    );

    return (
        <div className="toDo-List">
            <h1>Your Tasks: {props.list.length}</h1>
            <div>
                {toDoListItems}
            </div>
        </div>
    );
}

export default ToDoList;

参考

To Doリストのベースはこちらの記事で学ばせてもらいました。

• create-react-appを使ってReactでToDoリストを作成するぞ
• ReactでシンプルなTodoアプリケーションを作成する

Formコンポーネントを作る際にかなり参考にしました。
（2020年のフロントエンドマスターになりたければこの9プロジェクトを作れで紹介されていました）。

• How to build a movie search app using React Hooks

型でいつも怒られているTypeScriptに何故か怒られなかったので共有します。

MainComponentはSubComponentをimportして使用しています。
MainComponentではTestTypeという型を定義して、その型が持っている要素に'comp1'と'comp2'という文字列を代入しています。そして、それをSubComponentに渡しています。

MainComponent.tsx

import { SubComponent } from './SubComponent';

const MainComponent =>{

  type TestType = {
    comp1: string;
    comp2: string;
  };

  const components: TestType = {
    comp1: 'comp1',
    comp2: 'comp2',
  };

 return(
   <SubComponent  {...components} />
 );

}

SubComponentはMainComponentから受け取ったpropsからcomp1というキーの値をdiv要素に入れて返しています。

ここで、SubComponentでもTestPropsという型を定義しています。この型はMainComponentで定義したTestTypeという型からcomp2というキーを削除したものになります。

SubComponent.tsx

type TestProps = {
  comp1: string;
};

const SubComponent = (props: TestProps) => {
  console.log(props); // {comp1: "comp1", comp2: "comp2"}

  return (
    <div>{props.comp1}</div>
    // <div>{props.comp2}</div> // コメントアウトを外すとエラーになる
  )
};

export default SubComponent;

上の例はコンパイル成功しますが、SubComponentの中でprops.comp2を使用しようとすると、エラーになってしまいます。これはpropsの型がTestPropsと定義しているからです（TestPropsはcomp2という要素を持っていない）。

しかし、propsの中身を見るとcomp2の要素も入っています。

これはTypeScriptがデータは受け取るが、型宣言に入っていないものは弾くようによしなにやってくれてるんだと思います（調べてもよく分からなかったので分かる人教えてください）。

確かにデータ受け取っても宣言してないもの以外は使用できないようにすれば問題なさそうなので、上手く活用していきたいと思います。

はじめに

前回の記事では、react-firebase-hooksを試したのですが、12月6日のReact Day Berlinでは、ReactFireのプレゼンがありました。こちらはとても先進的で期待できます。

本記事では、Firestoreの部分を移植してみたいと思います。

ReactFireとは

ReactFire v1は2016年5月のリリースを最後に、その後deprecateされ、Firebase JS SDKを直接使うようアナウンスされています。それが2019年7月よりv2として再度開発しているようです。

https://github.com/FirebaseExtended/reactfire

現在、masterブランチがv2になっています。

READMEには、

Status: Alpha. ReactFire is meant for React Concurrent Mode, which is only available in experimental React builds.

と書いてあるのですが、ざっとコードを見たところ、Suspenseを使っているだけで、Concurrent Modeでなくても動きそうです。

コーディング

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

import "firebase/firestore";
import {
  FirebaseAppProvider,
  useFirestoreCollectionData,
  useFirestore
} from "reactfire";

const firebaseConfig = {
  apiKey: "...",
  authDomain: "...",
  databaseURL: "...",
  projectId: "...",
  storageBucket: "...",
  messagingSenderId: "...",
  appId: "..."
};

const TodoList = () => {
  const firestore = useFirestore();
  const todosRef = firestore().collection("todos");
  const values = useFirestoreCollectionData(todosRef, { idField: "id" });
  return (
    <ul>
      {values.map(value => (
        <li key={value.id}>{value.title}</li>
      ))}
    </ul>
  );
};

const NewTodo = () => {
  const [title, setTitle] = useState("");
  const [pending, setPending] = useState(false);
  const firestore = useFirestore();
  const add = async () => {
    setTitle("");
    setPending(true);
    try {
      await firestore()
        .collection("todos")
        .add({ title });
    } finally {
      setPending(false);
    }
  };
  return (
    <div>
      <input value={title} onChange={e => setTitle(e.target.value)} />
      <button type="button" onClick={add}>
        Add
      </button>
      {pending && "Pending..."}
    </div>
  );
};

const App = () => {
  return (
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      <Suspense fallback={<div>Loading...</div>}>
        <div>
          <TodoList />
          <NewTodo />
        </div>
      </Suspense>
    </FirebaseAppProvider>
  );
};

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

動きました。nextではだめで、canaryを使う必要がありました。

おわりに

ドキュメントがまだ追いついていなくて、ソースコードを読まないといけなかったです。

FirebaseとReactとReduxで多機能チャットを実装しよう【環境準備編】

記事を順次書いていきます。

リンク集
- 環境準備編　←イマココ
- チャットルーム選択編
- メッセージ機能編
- チャットルーム設定編
- デモページ
- github（公開準備中）

TL;DR

FirebaseとReactを使って、メッセージを送り合う簡単なチャットアプリの解説記事はいくつか見かけますよね。

だけど、実務で使うチャットアプリならもっと複雑なはず。

そこで以下の7機能を持つチャットアプリを実装しました。

1. 個人チャット
2. グループチャット
3. 新規チャットルーム作成
4. チャットルームの削除
5. チャットルームから退出
6. チャットルームメンバー変更（追加/削除）
7. チャットルーム名とアイコンの設定

デザインは、イケてるアプリ風にできるMaterial-uiにお任せした。

FirebaseとReactで開発するための環境構築

Firebase、React、Reduxを使って開発していくための環境を構築します。

React関連モジュールのインストール

Reactの環境をイチから構築するのは面倒です。
そこでcreate-react-appを使います。

create-react-app

以下のコマンドでcreate-react-appしてください。

npx create-react-app react-chat

※npmでグローバルインストールしたcreate-react-appは非推奨になりました。
過去にインストールしたことがある場合は、以下コマンドでアンインストールしておきましょう。

npm uninstall -g create-react-app

"react-chat"というフォルダが作成されます。
Reactの開発環境が作られています。（簡単すぎて感激）

npm startしてブラウザ画面が表示されることを確認しましょう。

npm start

その他モジュールのインストール

Reduxとmaterial-uiに必要なモジュールをインストールします。

npm install --save redux react-redux redux-actions immer  @material-ui/core @material-ui/icons

Firebaseとの紐付け

Firebaseとの紐付けを行なっていきます。

1. Firebaseプロジェクトの作成

Firebase Consoleからプロジェクトを作成します。
今回は"react-chat"という名前にしました。

Analyticsを使うかどうか聞かれますが、どちらでも良いです。
使う場合はGoogle Analyticsのアカウントが必要になります。

次へ次へと進めてプロジェクトを作成。

プロジェクトが作成されたら、</>マークをクリックしてWebアプリを追加しましょう。

アプリ名はなんでも良いです。

「このアプリのFirebase Hostingも設定します。」にチェック。

次へ次へと進めてデプロイ完了させてください。

※モジュールインストールやログインなど基本的なところは割愛。
公式ドキュメントが詳しいです。

2. configファイルの作成

まず、Firebaseモジュールをインストールします。

npm install firebase --save

Firebaseコンソールから[歯車ボタン] > [プロジェクトと設定] > [全般]の下部 [Firebase SDK snippet] > [構成]をチェック
で以下のような構成をコピーできます。

firebaseフォルダとconfig.jsファイルを作成してペーストしてください。

src/firebase/config.js

export const firebaseConfig = {
    apiKey: "YOUR-API-KEY",
    authDomain: "YOUR-PROJECT-ID.firebaseapp.com",
    databaseURL: "https://YOUR-PROJECT-ID.firebaseio.com",
    projectId: "YOUR-PROJECT-ID",
    storageBucket: "YOUR-PROJECT.appspot.com",
    messagingSenderId: "xxxxxxxxxx",
    appId: "x:xxxxxxxxxxx:web:xxxxxxxxxxxxxxxxxx",
    measurementId: "G-XXXXXXXXX"
};

index.jsファイルを作成して、設定をexportします。

src/firebase/index.js

import firebase from 'firebase';
import { firebaseConfig } from './firebase/config.js';

export const firebaseApp = firebase.initializeApp(firebaseConfig);
export const database = firebaseApp.database();

3. Firebase init

initする前に、デフォルトリソースロケーションを選択しましょう。
（これ設定しておかないと、後から怒られます。）

設定ボタンから[プロジェクトの設定]をクリックします。

コンソールでfirebase initを実行します。

どのプロダクトを使うか選択。
今回はDatabase, Hosting, Storageの3つです。

プロジェクトの選択では、[Use an existing project] > [react-chat]を選択。

基本はEnterで進めていきます。

public directoryは"build"に変更してください。
また、single-page appとして設定しましょう。

これでFirebaseの設定は完了です。

4. Firebase Hostingにデプロイ

ビルドしてデプロイします。

npm run build

firebase deploy

Firebase Hostingの公開先URLにアクセスしてnpm startの時と同じ画面が表示されることを確認しましょう。

次はFirebaseとReactとReduxで多機能チャットを実装しよう【メッセージ編】です。
（現在編集中）

参考記事

React & Firebaseで簡単なChatアプリを作ってみた

『React』 +『Redux』 + 『Firebase』でLINE風のChat機能を作ろう！ 【準備編】

Firebase Authentication、とても便利ですよね。

今回、Firebase Authenticationを使って、Googleログインしたアカウントに対して、電話番号を紐付けます。

Firebaseの準備

Fireabse Authの設定方法はこちら。
ログイン方法として、電話番号とGoogleを有効にしておいてください。

googleアカウントでの認証

まずはgoogleアカウントで認証させます。
signInWithPopupというメソッドを使います。

電話番号での認証

次に、電話番号での認証です。
reCAPTCHAの設定がちょっとめんどくさいので注意しましょう。
signInWithPhoneNumberというメソッドを使います。

アカウントに複数の認証プロバイダをリンク

ここまで完了したら、
currentUserに対して、linkAndRetrieveDataWithCredentialというメソッドを使い、アカウントに複数の認証プロバイダをリンクさせることができます。

以下のようになっていればOKです。

とても簡単に実装することができました。
2要素認証とかも簡単に実現できますね。

今回作成したソースコードをgithutbで公開しています。こちらから
(めっちゃ無駄ですが、アーキテクチャとして、Reduxを採用しています。。。
ちょっと前にリリースされたhooks APIに対応した機能を使ってみたくて...)

参考： 公式ドキュメント

以上です。

以下は、jsmanifestさんの記事、8 Useful Practices for React Apps You Should Knowの日本語訳です。

【必読】Reactアプリで役に立つプラクティス8選（8 Useful Practices for React Apps You Should Know）

mediumで私を見つけてくださいね。

Reactはとても多くのステージへの変化を行ってきました。そしてそれらは、必ず私達を驚かせます。

最初、私達はmixinsを使って、インターフェースを作ったり管理したりしていました。そして次にクラスコンポーネントというコンセプトが到来し、現在は、Reactでの私達の開発方法を変えるreact hooksです。

他になにか素晴らしいことを知っていますか？ 例えば、Reactで使える、アプリをより良くするのに役立つ巧みなトリックです。

この記事では、全てのReactデベロッパーが知っておくべき8つの高度なトリックを紹介します。このリストの全てがあなたにとって目新しいものではないと思いまが、最低でも1つ、便利なトリックを見つけることを願っています。

これが、あなたが知っておくべきreactで使える8つのトリックです。

1. 文字列でReact要素を生成する（Create react elements with strings）

まず1つ目は、HTML DOMタグを表すシンプルな文字列でReact DOM要素を作る方法です。

例えば、変数にdivという文字列を代入することで、Reactコンポーネントを作ることができます。

import React from 'react'

const MyComponent = 'div'

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <hr />
      <MyComponent>
        <h3>I am inside a {'<div />'} element</h3>
      </MyComponent>
    </div>
  )
}

Reactは、React.createElementを呼び、与えられた文字列を使って、内部で要素を生成します。これってクールでしょ？

Material-UIのようなコンポーネントライブラリでよく使われます。コンポーネントのルートnodeを決めるcomponentpropsを宣言できます。

function MyComponent({ component: Component = 'div', name, age, email }) {
  return (
    <Component>
      <h1>Hi {name}</h1>
      <div>
        <h6>You are {age} years old</h6>
        <small>Your email is {email}</small>
      </div>
    </Component>
  )
}

このように使用することができます。

function App() {
  return (
    <div>
      <MyComponent component="div" name="George" age={16} email="george@gmail.com">
    </div>
  )
}

カスタムコンポーネントを渡すこともできます。

function Dashboard({ children }) {
  return (
    <div style={{ padding: '25px 12px' }}>
      {children}
    </div>
  )
}

function App() {
  return (
    <div>
      <MyComponent component={Dashboard} name="George" age={16} email="george@gmail.com">
    </div>
  )
}

2. Error Boundariesを使う（Use Error Boundaries）

JavaScriptでは、私達はほとんどのエラーをtry/catch ー発生したエラーを"catch"できるコードのブロックー で対応しています。エラーがcatchブロックに補足された時、私達はアプリがクラッシュするのを避けることができます。

例はこのようなものです。

function getFromLocalStorage(key, value) {
  try {
    const data = window.localStorage.get(key)
    return JSON.parse(data)
  } catch (error) {
    console.error
  }
}

Reactは結局ただのJavaScriptなので、エラーをキャッチしてハンドルできると考えるでしょう。しかし、Reactの性質上、コンポーネント内でのJavScriptエラーは内部のstateを破壊し、将来のレンダーにおいてcryptic errors（不可解なエラー）を引き起こします。

このような理由で、ReactチームはError Boundariesを紹介しています。そして全てのReactデベロッパーがそれらを知っておくべきです。そうすれば自らのReactアプリで使用することができます。

Error Boundaries登場以前のエラー発生の問題点は、これらの不可解なエラーが発生した時、Reactはそれらに対処したり、リカバリーする方法を私達に与えていなかったことです。ですので、私達は皆Error Boundariesが必要なのです。

Error Boundariesは、Reactコンポーネントです。コンポーネントツリーのどこででもエラーをキャッチすることができ、ログ出力し、クラッシュしたコンポーネントツリーの代わりにフォールバック用UIを表示させることができます。Error Boundariesは、レンダー中、ライフサイクルメソッド内、そしてError Boundaries以下に存在する全体のツリーのコンストラクタ内でエラーをキャッチします（そしてこれが、私達のアプリのトップのどこかでError Boundariesを宣言しレンダーする理由です）。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true }
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo)
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>
    }

    return this.props.children
  }
}

そして、普通のコンポーネントと同じように使用できます。

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

3. 前回の値を保持する（Retain Previous Values）

propsやstateを更新している時、あなたはReact.useRefを使ってそれらの前回の値を保持することができます。

例えば、1つの配列のアイテムの、現在と前回の変更を追跡するために、前回の値が割り当てられるReact.useRefと、現在の値が割り振られるReact.useStateを使用することができます。

function MyComponent() {
  const [names, setNames] = React.useState(['bob'])
  const prevNamesRef = React.useRef([])

  React.useEffect(() => {
    prevNamesRef.current = names
  })

  const prevNames = prevNamesRef.current

  return (
    <div>
      <h4>Current names:</h4>
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <h4>Previous names:</h4>
      <ul>
        {prevNames.map((prevName) => (
          <li key={prevName}>{prevName}</li>
        ))}
      </ul>
    </div>
  )
}

これは正しく動作します。なぜならReact.useEffectはレンダーが完了した後に実行されるからです。

setNamesが実行される時、コンポーネントは再度レンダーを行い、prefNamesRefは前回の値を保持します。なぜなら、前回のレンダーから見てReact.useEffectが最後に実行されるコードだからです。
そしてuseEffect内でprevNamesRef.currentに値が再び代入されるので、次回のレンダー時には前回のnamesの値を保持します。

4. 値チェックにReact.useRefを使う（Use React.useRef for flexible non-stale value checks）

React Hooksが登場する以前、ComponentがDOMにマウントされた後に、dataのフェッチなどの処理を行いたい場合、私達はcomponentDidMountというクラスコンポーネントのStaticメソッドを使用していました。

React Hooksが発表された時、それはすぐにコンポーネントを書く最も人気の手段となりました。コンポーネントがアンマウントされた後にstateがセットされるのを防ぐために、コンポーネントがマウントされたかを監視したい時、私達はこのようにするでしょう。

import React from 'react'
import axios from 'axios'

class MyComponent extends React.Component {
  mounted = false

  state = {
    frogs: [],
    error: null,
  }

  componentDidMount() {
    this.mounted = true
  }

  componentWillUnmount() {
    this.mounted = false
  }

  async fetchFrogs = (params) => {
    try {
      const response = await axios.get('https://some-frogs-api.com/v1/', { params })
      if (this.mounted) {
        this.setState({ frogs: response.data.items })
      }
    } catch (error) {
      if (this.mounted) {
        this.setState({ error })
      }
    }
  }

  render() {
    return (
      <div>
        <h4>Frogs:</h4>
        <ul>
        {this.state.frogs.map((frog) => <li key={frog.name}>{frog.name}</li>
        )}
        </ul>
    </div>
    )
  }
}

React Hooksに統合後、HooksはcomponentDidMountを持っていません。そして、アンマウント後に起こったstateアップデートによるメモリリークのコンセプトは未だにhooksに当てはまります。しかし、React Hooksを使ったcomponentDidMountに似た方法はReact.useEffectを使用することです。なぜなら、それはコンポーネントがレンダリングされた後に実行されるからです。もしあなたがReact.useRefを使って、マウントされた値を割り当てるなら、以下のクラスコンポーネントの例で同じことができます。

import React from 'react'
import axios from 'axios'

function MyComponent() {
  const [frogs, setFrogs] = React.useState([])
  const [error, setError] = React.useState(null)
  const mounted = React.useRef(false)

  async function fetchFrogs(params) {
    try {
      const response = await axios.get('https://some-frogs-api.com/v1/', {
        params,
      })
      if (mounted.current) {
        setFrogs(response.data.items)
      }
    } catch (error) {
      if (mounted.current) {
        setError(error)
      }
    }
  }

  React.useEffect(() => {
    mounted.current = true

    return function cleanup() {
      mounted.current = false
    }
  }, [])

  return (
    <div>
      <h4>Frogs:</h4>
      <ul>
        {this.state.frogs.map((frog) => (
          <li key={frog.name}>{frog.name}</li>
        ))}
      </ul>
    </div>
  )
}

リレンダーをせず最新の変更をトラッキングするもう一つ別の例は、以下のように、React.useMemoと併せて使用することです。(source)

function setRef(ref, value) {
  // Using function callback version
  if (typeof ref === 'function') {
    ref(value)
    // Using the React.useRef() version
  } else if (ref) {
    ref.current = value
  }
}

function useForkRef(refA, refB) {
  return React.useMemo(() => {
    if (refA == null && refB == null) {
      return null
    }
    return (refValue) => {
      setRef(refA, refValue)
      setRef(refB, refValue)
    }
  }, [refA, refB])
}

もしref propsが変更され、定義されたら、新たな関数を作ります。
つまり、Reactは古いフォークされたrefをnull、新しいフォークされたrefを現在のrefで呼ぶことを意味します。そしてReact.useMemoが使われているので、refの変数たちはrefAまたはrefBのref propsが変更されるまで記憶されます。ナチュラルなクリーンアップが起こるのです。

5. 他の要素に依存したカスタム要素にReact.useRefを使う（Use React.useRef for customizing elements that depend on other elements）

React.useRefにはいくつか役に立つユースケースがあります。例えば、React.useRef自体をref propsに割り当てるなどです。

function MyComponent() {
  const [position, setPosition] = React.useState({ x: 0, y: 0 })
  const nodeRef = React.useRef()

  React.useEffect(() => {
    const pos = nodeRef.current.getBoundingClientRect()
    setPosition({
      x: pos.x,
      y: pos.y,
    })
  }, [])

  return (
    <div ref={nodeRef}>
      <h2>Hello</h2>
    </div>
  )
}

もしdiv要素の座標位置を取得したいなら、この例が役に立ちます。しかし、アプリケーションのどこかに存在する別の要素の位置をアップデートしたかったり、それに応じて条件ロジックを変更したり適応する場合、ベストな方法はref callback function patternを使うことです。callback function patternを使用すると、ReactコンポーネントまたはHTML DOM要素を第一引数として受け取ります。

下の例は、コールバック関数であるsetRefがどこでref propsに適応されるかを示すシンプルなものです。直接React.useRefをDOM要素に割り当てるのとは対象的に、setRefの内側では必要なことは何でもできるということがわかります:

const SomeComponent = function({ nodeRef }) {
  const ownRef = React.useRef()

  function setRef(e) {
    if (e && nodeRef.current) {
      const codeElementBounds = nodeRef.current.getBoundingClientRect()
      // Log the <pre> element's position + size
      console.log(`Code element's bounds: ${JSON.stringify(codeElementBounds)}`)
      ownRef.current = e
    }
  }

  return (
    <div
      ref={setRef}
      style={{ width: '100%', height: 100, background: 'green' }}
    />
  )
}

function App() {
  const [items, setItems] = React.useState([])
  const nodeRef = React.useRef()

  const addItems = React.useCallback(() => {
    const itemNum = items.length
    setItems((prevItems) => [
      ...prevItems,
      {
        [`item${itemNum}`]: `I am item # ${itemNum}'`,
      },
    ])
  }, [items, setItems])

  return (
    <div style={{ border: '1px solid teal', width: 500, margin: 'auto' }}>
      <button type="button" onClick={addItems}>
        Add Item
      </button>
      <SomeComponent nodeRef={nodeRef} />
      <div ref={nodeRef}>
        <pre>
          <code>{JSON.stringify(items, null, 2)}</code>
        </pre>
      </div>
    </div>
  )
}

6. 高階コンポーネント（Higher Order Components）

プレインなJavaScriptで強力な再利用性を持つ関数を作るよくあるパターンは高階関数です。Reactも結局はJavaScriptなので、内部で高階関数を使用することができます。

再利用性のあるコンポーネントには、高階コンポーネントとというトリックが使えます。

高階コンポーネントとは、あなたがコンポーネントを引数にして、返り値としてコンポーネントを返す関数を持っているときのことです。高階関数がロジックを抽象化し、他の関数間で共有されるように、高階コンポーネントもコンポーネントをロジックから切り離し、他のコンポーネント間で共有することができます。つまり、たくさんの再利用可能なコンポーネントを採用し、アプリケーション内で実際に繰り返し使うことが可能だということなのです。

これは高階コンポーネントの例です。このスニペットでは、高階コンポーネントであるwithBorderはカスタムコンポーネントを引数として取り込み、隠されたミドルレイヤーコンポーネントを返します。そして、親がこの高階コンポーネントをレンダーするとき、これはコンポーネントとして呼ばれ、ミドルレイヤーコンポーネントからから渡されたpropsを受け取ります。

import React from 'react'

// Higher order component
const withBorder = (Component, customStyle) => {
  class WithBorder extends React.Component {
    render() {
      const style = {
        border: this.props.customStyle
          ? this.props.customStyle.border
          : '3px solid teal',
      }
      return <Component style={style} {...this.props} />
    }
  }

  return WithBorder
}

function MyComponent({ style, ...rest }) {
  return (
    <div style={style} {...rest}>
      <h2>This is my component and I am expecting some styles.</h2>
    </div>
  )
}

export default withBorder(MyComponent, {
  border: '4px solid teal',
})

7. Render Props

React内で使う私のお気に入りのトリックの一つは、render prop patternです。複数のコンポーネントでコードを共有するという問題を解決する点において、これは高階コンポーネントに似ています。Render propsは、レンダーに必要なものを全て差し戻すことが目的の関数をはっきりとさせます。
Render props expose a function who's purpose is to pass back everything the outside world needs to render its children.

Reactでコンポーネントをレンダーする最もベーシックな方法は、このようなものでしょう。

function MyComponent() {
  return <p>My component</p>
}

function App() {
  const [fetching, setFetching] = React.useState(false)
  const [fetched, setFetched] = React.useState(false)
  const [fetchError, setFetchError] = React.useState(null)
  const [frogs, setFrogs] = React.useState([])

  React.useEffect(() => {
    setFetching(true)
    api
      .fetchFrogs({ limit: 1000 })
      .then((result) => {
        setFrogs(result.data.items)
        setFetched(true)
        setFetching(false)
      })
      .catch((error) => {
        setError(error)
        setFetching(false)
      })
  }, [])

  return (
    <MyComponent
      fetching={fetching}
      fetched={fetched}
      fetchError={fetchError}
      frogs={frogs}
    />
  )
}

Render Propsを使う場合は、その子をレンダーするpropは慣例的にrenderと呼ばれます。

function MyComponent({ render }) {
  const [fetching, setFetching] = React.useState(false)
  const [fetched, setFetched] = React.useState(false)
  const [fetchError, setFetchError] = React.useState(null)
  const [frogs, setFrogs] = React.useState([])

  React.useEffect(() => {
    setFetching(true)
    api
      .fetchFrogs({ limit: 1000 })
      .then((result) => {
        setFrogs(result.data.items)
        setFetched(true)
        setFetching(false)
      })
      .catch((error) => {
        setError(error)
        setFetching(false)
      })
  }, [])

  return render({
    fetching,
    fetched,
    fetchError,
    frogs,
  })
}

この例では、MyComponentはrender prop componentとして参照するコンポーネントの例です。なぜなら、MyComponentはpropとしてのrenderを期待していますし、子をレンダーするためのそれを実行するからです。
これはReactにおいて、とてもパワフルなパターンです。renderのコールバックを通して引数として、共有されたstateとdataを渡すことができるのです。複数のコンポーネントにおいて、そのコンポーネントはリレンダーされ、再利用されることが可能になります。

function App() {
  return (
    <MyComponent
      render={({ fetching, fetched, fetchError, frogs }) => (
        <div>
          {fetching
            ? 'Fetching frogs...'
            : fetched
            ? 'The frogs have been fetched!'
            : fetchError
            ? `An error occurred while fetching the list of frogs: ${fetchError.message}`
            : null}
          <hr />
          <ul
            style={{
              padding: 12,
            }}
          >
            {frogs.map((frog) => (
              <li key={frog.name}>
                <div>Frog's name: {frog.name}</div>
                <div>Frog's age: {frog.age}</div>
                <div>Frog's gender: {frog.gender}</div>
              </li>
            ))}
          </ul>
        </div>
      )}
    />
  )
}

8. Memoize

Reactデベロッパーとして知っておくべき最も大事なことの一つは、React.memoのようなコンポーネントのパフォーマンス最適化です。それを知っておくと、無限ループのようなとてもひどいエラーを防ぐことができます。

Reactアプリにおいて、Memoization（メモ化）を行う、いくつかの方法があるので是非読んでみてください。

• React.memo
• React.useMemo
• React.useCallback
• React.PureComponent
• Optimizing performance

締め

ここでこの投稿は終わりです！この記事があなたにとって価値があることを願います。

Mediumも見てくださいね。

感想

まず、今回の記事は翻訳が難しかったです。英語もさることながら、自分のReact Hooksの理解が浅いなと実感しました。
逆にReact HooksやよりReactの理解が進めば、これらのトリックはとても役に立ちそうだと思いました。

間違い等見つけましたら教えていただけるとありがたいです。

以下は、jsmanifestさんの記事、8 Useful Practices for React Apps You Should Knowの日本語訳です。

【必読】Reactアプリで役に立つプラクティス8選（8 Useful Practices for React Apps You Should Know）

mediumで私を見つけてくださいね。

Reactはとても多くのステージへの変化を行ってきました。そしてそれらは、必ず私達を驚かせます。

最初、私達はmixinsを使って、インターフェースを作ったり管理したりしていました。そして次にクラスコンポーネントというコンセプトが到来し、現在は、Reactでの私達の開発方法を変えるreact hooksです。

他になにか素晴らしいことを知っていますか？ 例えば、Reactで使える、アプリをより良くするのに役立つ巧みなトリックです。

この記事では、全てのReactデベロッパーが知っておくべき8つの高度なトリックを紹介します。このリストの全てがあなたにとって目新しいものではないと思いまが、最低でも1つ、便利なトリックを見つけることを願っています。

これが、あなたが知っておくべきreactで使える8つのトリックです。

1. 文字列でReact要素を生成する（Create react elements with strings）

まず1つ目は、HTML DOMタグを表すシンプルな文字列でReact DOM要素を作る方法です。

例えば、変数にdivという文字列を代入することで、Reactコンポーネントを作ることができます。

import React from 'react'

const MyComponent = 'div'

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <hr />
      <MyComponent>
        <h3>I am inside a {'<div />'} element</h3>
      </MyComponent>
    </div>
  )
}

Reactは、React.createElementを呼び、与えられた文字列を使って、内部で要素を生成します。これってクールでしょ？

Material-UIのようなコンポーネントライブラリでよく使われます。コンポーネントのルートnodeを決めるcomponentpropsを宣言できます。

function MyComponent({ component: Component = 'div', name, age, email }) {
  return (
    <Component>
      <h1>Hi {name}</h1>
      <div>
        <h6>You are {age} years old</h6>
        <small>Your email is {email}</small>
      </div>
    </Component>
  )
}

このように使用することができます。

function App() {
  return (
    <div>
      <MyComponent component="div" name="George" age={16} email="george@gmail.com">
    </div>
  )
}

カスタムコンポーネントを渡すこともできます。

function Dashboard({ children }) {
  return (
    <div style={{ padding: '25px 12px' }}>
      {children}
    </div>
  )
}

function App() {
  return (
    <div>
      <MyComponent component={Dashboard} name="George" age={16} email="george@gmail.com">
    </div>
  )
}

2. Error Boundariesを使う（Use Error Boundaries）

JavaScriptでは、私達はほとんどのエラーをtry/catch ー発生したエラーを"catch"できるコードのブロックー で対応しています。エラーがcatchブロックに補足された時、私達はアプリがクラッシュするのを避けることができます。

例はこのようなものです。

function getFromLocalStorage(key, value) {
  try {
    const data = window.localStorage.get(key)
    return JSON.parse(data)
  } catch (error) {
    console.error
  }
}

Reactは結局ただのJavaScriptなので、エラーをキャッチしてハンドルできると考えるでしょう。しかし、Reactの性質上、コンポーネント内でのJavScriptエラーは内部のstateを破壊し、将来のレンダーにおいてcryptic errors（不可解なエラー）を引き起こします。

このような理由で、ReactチームはError Boundariesを紹介しています。そして全てのReactデベロッパーがそれらを知っておくべきです。そうすれば自らのReactアプリで使用することができます。

Error Boundaries登場以前のエラー発生の問題点は、これらの不可解なエラーが発生した時、Reactはそれらに対処したり、リカバリーする方法を私達に与えていなかったことです。ですので、私達は皆Error Boundariesが必要なのです。

Error Boundariesは、Reactコンポーネントです。コンポーネントツリーのどこででもエラーをキャッチすることができ、ログ出力し、クラッシュしたコンポーネントツリーの代わりにフォールバック用UIを表示させることができます。Error Boundariesは、レンダー中、ライフサイクルメソッド内、そしてError Boundaries以下に存在する全体のツリーのコンストラクタ内でエラーをキャッチします（そしてこれが、私達のアプリのトップのどこかでError Boundariesを宣言しレンダーする理由です）。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { hasError: false }
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true }
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo)
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>
    }

    return this.props.children
  }
}

そして、普通のコンポーネントと同じように使用できます。

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

3. 前回の値を保持する（Retain Previous Values）

propsやstateを更新している時、あなたはReact.useRefを使ってそれらの前回の値を保持することができます。

例えば、1つの配列のアイテムの、現在と前回の変更を追跡するために、前回の値が割り当てられるReact.useRefと、現在の値が割り振られるReact.useStateを使用することができます。

function MyComponent() {
  const [names, setNames] = React.useState(['bob'])
  const prevNamesRef = React.useRef([])

  React.useEffect(() => {
    prevNamesRef.current = names
  })

  const prevNames = prevNamesRef.current

  return (
    <div>
      <h4>Current names:</h4>
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <h4>Previous names:</h4>
      <ul>
        {prevNames.map((prevName) => (
          <li key={prevName}>{prevName}</li>
        ))}
      </ul>
    </div>
  )
}

これは正しく動作します。なぜならReact.useEffectはレンダーが完了した後に実行されるからです。

setNamesが実行される時、コンポーネントは再度レンダーを行い、prefNamesRefは前回の値を保持します。なぜなら、前回のレンダーから見てReact.useEffectが最後に実行されるコードだからです。
そしてuseEffect内でprevNamesRef.currentに値が再び代入されるので、次回のレンダー時には前回のnamesの値を保持します。

4. 値チェックにReact.useRefを使う（Use React.useRef for flexible non-stale value checks）

React Hooksが登場する以前、ComponentがDOMにマウントされた後に、dataのフェッチなどの処理を行いたい場合、私達はcomponentDidMountというクラスコンポーネントのStaticメソッドを使用していました。

React Hooksが発表された時、それはすぐにコンポーネントを書く最も人気の手段となりました。コンポーネントがアンマウントされた後にstateがセットされるのを防ぐために、コンポーネントがマウントされたかを監視したい時、私達はこのようにするでしょう。

import React from 'react'
import axios from 'axios'

class MyComponent extends React.Component {
  mounted = false

  state = {
    frogs: [],
    error: null,
  }

  componentDidMount() {
    this.mounted = true
  }

  componentWillUnmount() {
    this.mounted = false
  }

  async fetchFrogs = (params) => {
    try {
      const response = await axios.get('https://some-frogs-api.com/v1/', { params })
      if (this.mounted) {
        this.setState({ frogs: response.data.items })
      }
    } catch (error) {
      if (this.mounted) {
        this.setState({ error })
      }
    }
  }

  render() {
    return (
      <div>
        <h4>Frogs:</h4>
        <ul>
        {this.state.frogs.map((frog) => <li key={frog.name}>{frog.name}</li>
        )}
        </ul>
    </div>
    )
  }
}

React Hooksに統合後、HooksはcomponentDidMountを持っていません。そして、アンマウント後に起こったstateアップデートによるメモリリークのコンセプトは未だにhooksに当てはまります。しかし、React Hooksを使ったcomponentDidMountに似た方法はReact.useEffectを使用することです。なぜなら、それはコンポーネントがレンダリングされた後に実行されるからです。もしあなたがReact.useRefを使って、マウントされた値を割り当てるなら、以下のクラスコンポーネントの例で同じことができます。

import React from 'react'
import axios from 'axios'

function MyComponent() {
  const [frogs, setFrogs] = React.useState([])
  const [error, setError] = React.useState(null)
  const mounted = React.useRef(false)

  async function fetchFrogs(params) {
    try {
      const response = await axios.get('https://some-frogs-api.com/v1/', {
        params,
      })
      if (mounted.current) {
        setFrogs(response.data.items)
      }
    } catch (error) {
      if (mounted.current) {
        setError(error)
      }
    }
  }

  React.useEffect(() => {
    mounted.current = true

    return function cleanup() {
      mounted.current = false
    }
  }, [])

  return (
    <div>
      <h4>Frogs:</h4>
      <ul>
        {this.state.frogs.map((frog) => (
          <li key={frog.name}>{frog.name}</li>
        ))}
      </ul>
    </div>
  )
}

リレンダーをせず最新の変更をトラッキングするもう一つ別の例は、以下のように、React.useMemoと併せて使用することです。(source)

function setRef(ref, value) {
  // Using function callback version
  if (typeof ref === 'function') {
    ref(value)
    // Using the React.useRef() version
  } else if (ref) {
    ref.current = value
  }
}

function useForkRef(refA, refB) {
  return React.useMemo(() => {
    if (refA == null && refB == null) {
      return null
    }
    return (refValue) => {
      setRef(refA, refValue)
      setRef(refB, refValue)
    }
  }, [refA, refB])
}

もしref propsが変更され、定義されたら、新たな関数を作ります。
つまり、Reactは古いフォークされたrefをnull、新しいフォークされたrefを現在のrefで呼ぶことを意味します。そしてReact.useMemoが使われているので、refの変数たちはrefAまたはrefBのref propsが変更されるまで記憶されます。ナチュラルなクリーンアップが起こるのです。

5. 他の要素に依存したカスタム要素にReact.useRefを使う（Use React.useRef for customizing elements that depend on other elements）

React.useRefにはいくつか役に立つユースケースがあります。例えば、React.useRef自体をref propsに割り当てるなどです。

function MyComponent() {
  const [position, setPosition] = React.useState({ x: 0, y: 0 })
  const nodeRef = React.useRef()

  React.useEffect(() => {
    const pos = nodeRef.current.getBoundingClientRect()
    setPosition({
      x: pos.x,
      y: pos.y,
    })
  }, [])

  return (
    <div ref={nodeRef}>
      <h2>Hello</h2>
    </div>
  )
}

もしdiv要素の座標位置を取得したいなら、この例が役に立ちます。しかし、アプリケーションのどこかに存在する別の要素の位置をアップデートしたかったり、それに応じて条件ロジックを変更したり適応する場合、ベストな方法はref callback function patternを使うことです。callback function patternを使用すると、ReactコンポーネントまたはHTML DOM要素を第一引数として受け取ります。

下の例は、コールバック関数であるsetRefがどこでref propsに適応されるかを示すシンプルなものです。直接React.useRefをDOM要素に割り当てるのとは対象的に、setRefの内側では必要なことは何でもできるということがわかります:

const SomeComponent = function({ nodeRef }) {
  const ownRef = React.useRef()

  function setRef(e) {
    if (e && nodeRef.current) {
      const codeElementBounds = nodeRef.current.getBoundingClientRect()
      // Log the <pre> element's position + size
      console.log(`Code element's bounds: ${JSON.stringify(codeElementBounds)}`)
      ownRef.current = e
    }
  }

  return (
    <div
      ref={setRef}
      style={{ width: '100%', height: 100, background: 'green' }}
    />
  )
}

function App() {
  const [items, setItems] = React.useState([])
  const nodeRef = React.useRef()

  const addItems = React.useCallback(() => {
    const itemNum = items.length
    setItems((prevItems) => [
      ...prevItems,
      {
        [`item${itemNum}`]: `I am item # ${itemNum}'`,
      },
    ])
  }, [items, setItems])

  return (
    <div style={{ border: '1px solid teal', width: 500, margin: 'auto' }}>
      <button type="button" onClick={addItems}>
        Add Item
      </button>
      <SomeComponent nodeRef={nodeRef} />
      <div ref={nodeRef}>
        <pre>
          <code>{JSON.stringify(items, null, 2)}</code>
        </pre>
      </div>
    </div>
  )
}

6. 高階コンポーネント（Higher Order Components）

プレインなJavaScriptで強力な再利用性を持つ関数を作るよくあるパターンは高階関数です。Reactも結局はJavaScriptなので、内部で高階関数を使用することができます。

再利用性のあるコンポーネントには、高階コンポーネントとというトリックが使えます。

高階コンポーネントとは、あなたがコンポーネントを引数にして、返り値としてコンポーネントを返す関数を持っているときのことです。高階関数がロジックを抽象化し、他の関数間で共有されるように、高階コンポーネントもコンポーネントをロジックから切り離し、他のコンポーネント間で共有することができます。つまり、たくさんの再利用可能なコンポーネントを採用し、アプリケーション内で実際に繰り返し使うことが可能だということなのです。

これは高階コンポーネントの例です。このスニペットでは、高階コンポーネントであるwithBorderはカスタムコンポーネントを引数として取り込み、隠されたミドルレイヤーコンポーネントを返します。そして、親がこの高階コンポーネントをレンダーするとき、これはコンポーネントとして呼ばれ、ミドルレイヤーコンポーネントからから渡されたpropsを受け取ります。

import React from 'react'

// Higher order component
const withBorder = (Component, customStyle) => {
  class WithBorder extends React.Component {
    render() {
      const style = {
        border: this.props.customStyle
          ? this.props.customStyle.border
          : '3px solid teal',
      }
      return <Component style={style} {...this.props} />
    }
  }

  return WithBorder
}

function MyComponent({ style, ...rest }) {
  return (
    <div style={style} {...rest}>
      <h2>This is my component and I am expecting some styles.</h2>
    </div>
  )
}

export default withBorder(MyComponent, {
  border: '4px solid teal',
})

7. Render Props

React内で使う私のお気に入りのトリックの一つは、render prop patternです。複数のコンポーネントでコードを共有するという問題を解決する点において、これは高階コンポーネントに似ています。Render propsは、レンダーに必要なものを全て差し戻すことが目的の関数をはっきりとさせます。
Render props expose a function who's purpose is to pass back everything the outside world needs to render its children.

Reactでコンポーネントをレンダーする最もベーシックな方法は、このようなものでしょう。

function MyComponent() {
  return <p>My component</p>
}

function App() {
  const [fetching, setFetching] = React.useState(false)
  const [fetched, setFetched] = React.useState(false)
  const [fetchError, setFetchError] = React.useState(null)
  const [frogs, setFrogs] = React.useState([])

  React.useEffect(() => {
    setFetching(true)
    api
      .fetchFrogs({ limit: 1000 })
      .then((result) => {
        setFrogs(result.data.items)
        setFetched(true)
        setFetching(false)
      })
      .catch((error) => {
        setError(error)
        setFetching(false)
      })
  }, [])

  return (
    <MyComponent
      fetching={fetching}
      fetched={fetched}
      fetchError={fetchError}
      frogs={frogs}
    />
  )
}

Render Propsを使う場合は、その子をレンダーするpropは慣例的にrenderと呼ばれます。

function MyComponent({ render }) {
  const [fetching, setFetching] = React.useState(false)
  const [fetched, setFetched] = React.useState(false)
  const [fetchError, setFetchError] = React.useState(null)
  const [frogs, setFrogs] = React.useState([])

  React.useEffect(() => {
    setFetching(true)
    api
      .fetchFrogs({ limit: 1000 })
      .then((result) => {
        setFrogs(result.data.items)
        setFetched(true)
        setFetching(false)
      })
      .catch((error) => {
        setError(error)
        setFetching(false)
      })
  }, [])

  return render({
    fetching,
    fetched,
    fetchError,
    frogs,
  })
}

この例では、MyComponentはrender prop componentとして参照するコンポーネントの例です。なぜなら、MyComponentはpropとしてのrenderを期待していますし、子をレンダーするためのそれを実行するからです。
これはReactにおいて、とてもパワフルなパターンです。renderのコールバックを通して引数として、共有されたstateとdataを渡すことができるのです。複数のコンポーネントにおいて、そのコンポーネントはリレンダーされ、再利用されることが可能になります。

function App() {
  return (
    <MyComponent
      render={({ fetching, fetched, fetchError, frogs }) => (
        <div>
          {fetching
            ? 'Fetching frogs...'
            : fetched
            ? 'The frogs have been fetched!'
            : fetchError
            ? `An error occurred while fetching the list of frogs: ${fetchError.message}`
            : null}
          <hr />
          <ul
            style={{
              padding: 12,
            }}
          >
            {frogs.map((frog) => (
              <li key={frog.name}>
                <div>Frog's name: {frog.name}</div>
                <div>Frog's age: {frog.age}</div>
                <div>Frog's gender: {frog.gender}</div>
              </li>
            ))}
          </ul>
        </div>
      )}
    />
  )
}

8. Memoize

Reactデベロッパーとして知っておくべき最も大事なことの一つは、React.memoのようなコンポーネントのパフォーマンス最適化です。それを知っておくと、無限ループのようなとてもひどいエラーを防ぐことができます。

Reactアプリにおいて、Memoization（メモ化）を行う、いくつかの方法があるので是非読んでみてください。

• React.memo
• React.useMemo
• React.useCallback
• React.PureComponent
• Optimizing performance

締め

ここでこの投稿は終わりです！この記事があなたにとって価値があることを願います。

Mediumも見てくださいね。

感想

まず、今回の記事は翻訳が難しかったです。英語もさることながら、自分のReact Hooksの理解が浅いなと実感しました。
逆にReact HooksやよりReactの理解が進めば、これらのトリックはとても役に立ちそうだと思いました。

間違い等見つけましたら教えていただけるとありがたいです。