はじめに

以前、ReactでDIはどうやるのか社内で話題になったので、色々調べてまとめておきます

Inversify

inversifyではDI用のコンテナーを作成できます

公式

README通りですが、紹介します

packageをインストールします

npm install inversify reflect-metadata --save

デコレータや追加の型のために以下の項目をtsconfig.jsonに適宜追加します

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es6"],
        "types": ["reflect-metadata"],
        "module": "commonjs",
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

インターフェイスを定義します

interfaces.ts

export interface Warrior {
    fight(): string;
    sneak(): string;
}

export interface Weapon {
    hit(): string;
}

export interface ThrowableWeapon {
    throw(): string;
}

これを元に本番の実装やモックの実装をします

次に識別子を作ります

TSのInterfaceは実行環境に影響を及ぼせないので、この識別子とinterfaceを後に結びつけてDIに使用します

types.ts

const TYPES = {
    Warrior: Symbol.for("Warrior"),
    Weapon: Symbol.for("Weapon"),
    ThrowableWeapon: Symbol.for("ThrowableWeapon")
};

export { TYPES };

次に実装をします、インジェクトするものは@injectableデコレータを

インジェクトするときには@injectデコレータを使います

@injectデコレータに先ほど作成した識別子を渡します

そうすることでインジェクトされます

entities.ts

import { injectable, inject } from "inversify";
import "reflect-metadata";
import { Weapon, ThrowableWeapon, Warrior } from "./interfaces";
import { TYPES } from "./types";

@injectable()
class Katana implements Weapon {
    public hit() {
        return "cut!";
    }
}

@injectable()
class Shuriken implements ThrowableWeapon {
    public throw() {
        return "hit!";
    }
}

@injectable()
class Ninja implements Warrior {

    private _katana: Weapon;
    private _shuriken: ThrowableWeapon;

    public constructor(
        @inject(TYPES.Weapon) katana: Weapon,
        @inject(TYPES.ThrowableWeapon) shuriken: ThrowableWeapon
    ) {
        this._katana = katana;
        this._shuriken = shuriken;
    }

    public fight() { return this._katana.hit(); }
    public sneak() { return this._shuriken.throw(); }

}

export { Ninja, Katana, Shuriken };

最後にコンテナーを作ります

inversify.config.ts

import { Container } from "inversify";
import { TYPES } from "./types";
import { Warrior, Weapon, ThrowableWeapon } from "./interfaces";
import { Ninja, Katana, Shuriken } from "./entities";

const myContainer = new Container();
myContainer.bind<Warrior>(TYPES.Warrior).to(Ninja);  // ←先ほど作った識別子を使って実装とインターフェイスが結びつけられる
myContainer.bind<Weapon>(TYPES.Weapon).to(Katana);
myContainer.bind<ThrowableWeapon>(TYPES.ThrowableWeapon).to(Shuriken);

export { myContainer };

以下のように利用します

index.ts

import { myContainer } from "./inversify.config";
import { TYPES } from "./types";
import { Warrior } from "./interfaces";

const ninja = myContainer.get<Warrior>(TYPES.Warrior);

expect(ninja.fight()).toBe("cut!");

これを適当にContextAPIか普通にimportでcomponentで使えるようにすればDIの完成です

テストするときはモックをbindをしなおせばモックがインジェクトされます

ContextAPi

ContextAPIはシンプルです

import React, { createContext, useContext, useMemo } from 'react';
import { AuthApi } from '../../../lib/api/AuthApi';
import { SampleApi } from '../../../lib/api/SampleApi';
import _ from 'lodash';
import { DeepPartial } from 'redux';


// インジェクトしたいもの集まりの構造を定義
export type Dependencies = {
  api: {
    auth: AuthApi;
    sample: SampleApi;
  };
};


// 構造に合わせてデフォルトの値を作る
export const defaultDependencies: Dependencies = {
  api: {
    auth: new AuthApi(),
    sample: new SampleApi(),
    productionNumber: new ProductionNumberApi()
  }
};


// Context作成
const DIContext = createContext(defaultDependencies);


// Providerを作成、propsとdefaultをマージして注入
export const DIProvider: React.FC<{
  dependencies?: DeepPartial<Dependencies>;
}> = ({ children, dependencies = {} }) => {
  const newValue = useMemo(
    () => _.merge({}, defaultDependencies, dependencies),
    [dependencies]
  );
  return <DIContext.Provider value={newValue}>{children}</DIContext.Provider>;
};

type MapDepToProps = (dep: Dependencies) => any;


// 使いやすいようにcustom hookを作成
export const useDICotext = <T extends MapDepToProps>(selector: T) => {
  const context = useContext(DIContext);
  return useMemo<ReturnType<T>>(() => {
    return selector(context);
  }, [selector, context]);
};

これだけ作って

使いたい側で以下のようにします

const authApi = useDIContext(dep => dep.api.auth)

完璧ですね

Misc

reduxのmiddleware系はContextAPIの外側でかつ、関数のみで構成されているためinversifyが使えず、上記のDIが使えません

なのでmiddlewareは引数で渡す形になります

redux-thunk

redux-thunk（以下thunk）でDIするときはextra argumentsという機能を使います

thunkではmiddlewareにwithExtraArgumentという関数が生えています

これに渡した引数が、thunkの関数のdispatch,getState,につぐ第３の引数に渡されます↓

thunkMiddleware.withExtraArgument(dependencies)

↓

const actionCreator = ()=>(dispatch, getState, dependencies)=>{
   dependencies.api().then(()=>{
     dispatch(action)
   }
}

redux-saga

redux-saga(以下saga)では特殊な機能はなく、愚直に引数に渡し続けます

task.run(saga, dependencies)

↓

function* saga(dependencies){
  yield fork(saga2, dependencies)
}

↓

function* saga2(dependencies){
  yield call(dependencies.api)
  yield take(saga3, dependencies)
}

Conclude

DIも問題なくできますね

Jestのモック機能は優秀なので必要ないかと思いますが、あったらあったで便利かもしれないですね

2020/12/4追記
storybookのstoryを書くときにめちゃくちゃ便利でした

Jest

おまけです

本来Reactのテストでモックするのはjestです

DIする必要はありません

なので基本これを使いましょう

jestでmockする方法はいくつかあります

• moduleのモック
• objectのメソッドのモック

基本mockするためのapiはここを参照して下さい

moduleのモック

これは２つ方法があります

• __mocks__ディレクトリを使う
• jest.mockを使う

__mocks__ディレクトリを使う

└── models
    ├── __mocks__
    │   └── user.js
    └── user.js

このような構成でモックのコードを置きます

そしてテストコードの中で以下のコードによりmockを使うことを明記すれば、user.jsは__mocks__/user.jsとしてimportされます

jest.mock("path/to/user")

モックファイルの中からrequireActualを使うと本物のモジュールが、genMockFromModuleで自動モックされたモジュールを持って来れるので、虚実組み合わせて使うこともできます

あらかじめテスト用のモジュールを用意したい時に、この__mocks___ディレクトリが利用されます

jest.mockを使う

jest.mock("path/to/user",()=>{
  return {
  foo: jest.fn()
}
})

これでモックされます

テストコード側でモックコードを指定したい時に利用します

objectのメソッドのモック

jest.fnをそのままobjectのメソッドに代入します

もしモックの実装をしたい場合、実装の関数を引数として渡すか、mockImplementation関数をチェーンして、その引数に実装の関数を渡すことができます

[https://jestjs.io/docs/ja/jest-object#jestspyonobject-methodname]

のspyOnの説明文で言明されてるように、 オブジェクトのメソッドの置き換えは問題ない操作だと思われます

TS的にはNGかもしれませんが、JS的やJest的には問題ないので、ガンガン代入しちゃってください

初めに

プライベートで全然コード書かない私は、せっかく前に少し勉強したreduxを完全に忘れてしまったのだった。そして今度仕事でreact-reduxを使う可能性が出てきたので慌てて復習しようと思ったところ、初心者向け記事があったので参考にしてみた。
電卓アプリで学ぶReact/Redux入門(実装編)

上記は、Reactから始まってreduxとつないでというところまで丁寧に書いてあるのでためになったのですが、私はtypescriptで書きたい人間なので、記事を参考にtypescriptで書き直してみました。
1からのステップを学びたい方は上記の記事を参考にしてみてください。私と同じく、typescriptで書きたいけど型定義などで苦戦して動かないという方はこの記事を参考にしていただければと思います。

私はreduxのプロでも何でもないため、より良い書き方などありましたらコメントいただけると幸いです。
いいからコードよこせという方は下記
https://github.com/teshimafu/redux_calclator_sample

いいから動き見せろって人は下記
https://teshimafu.github.io/redux_calculator_sample/

仕様

・数字どうしの四則演算ができる。ただし、毎回計算結果を出すため、乗除優先ではない。
・数字、演算子、数字、演算子。。。と計算可能。
　例：1+2+3-4*5=10
・=を連続して押しても再計算しない。
・=後の数字入力では、数字はクリアされた上で数字入力される。(これくらい直すかな)
・小数入力不可。
・計算結果に小数は可。
・ボタンの配置がガタついているのは仕様。何と言われても仕様。

雑なつくりで特に更新するつもりもないので、バグってても直さないかも。あくまでもredux初心者が動くとこまで使ったということで。

なんでTypescript？

時々こう言われますが、別にjavascript否定するつもりは毛頭ないので、javascriptで書けばいいじゃんと思う人はブラウザバック推奨。ただ、typescriptは誰でも見やすいという利点がある(と思っている)ので、チームでの開発とか初心者がフロントの勉強を始めようと考えている場合にはお勧めします。javascriptのほうが記述量は少ないですし型定義なども不要ではありますが、変数に何が入るのかを第三者が見つけにくかったり、実行するまで問題に気づけないことも多いという欠点があります。上級者は経験で問題を回避できるため欠点が欠点になりません。だからjavascript好きな人も一定数いるのだと思います。（MSが嫌いとか言わない）

ひな型をつくろう

公式にtypescriptがサポートされているので、言われた通りにしましょう
https://create-react-app.dev/docs/adding-typescript/

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

npxはnpmの最新バージョンで実行するのと同じ意味。無ければnpmコマンドで入れてね。
数分後にmy-appというフォルダが作成されるので、その中のsrc以下の構造を下記のように作り直します。ディレクトリ構造は好みなどあると思いますので、あくまで一例としてご覧ください。cssやアイコンは使わないため省略。

├── App.tsx
├── index.tsx
├── react-app-env.d.ts
├── serviceWorker.ts
├── setupTests.ts
├── store.ts
├── components
│   ├── CommonBtn.tsx
│   └── Result.tsx
├── containers
│   └── CalculatorContainer.tsx
├── modules
│   └── CalculatorContainer.ts
└── services
│   └── CalculatorService.ts

参照元の記事から変更した構成は次の通りです。
・action,reducerをmodulesにまとめた。
・四則演算はcontainersから切り離したかったのでservicesに取り出した。
・componentsを汎用化。

詳しくは次の章で見ていきます。

components

主にView担当。ボタンや表示部の構造が入っています。

CommonBtn.tsx

CommonBtn.tsx

import React from "react";

interface ButtonArgument {
  character: string | number;
  onClick: () => void;
}

const CommonBtn = ({ character, onClick }: ButtonArgument) => <button onClick={onClick}>{character}</button>;

export default CommonBtn;

電卓のボタンを構成するcomponentです。
引数には、stringまたはnumber型のcharacterと、関数型のonClickを受け取ります。
characterはボタンに表示される文字や数字になります。
onClickはMouseEvent型の関数で、ボタンを押された時の挙動を受け取ります。
CommonBtnの内部では関数の情報は持たないため、呼び出し元で挙動を決定できます。こうすることでボタンの汎用性を持たせることができます。

Result.tsx

Result.tsx

import React from "react";

interface ResultArgument {
  title: string;
  result: number;
}

const Result = ({ title, result }: ResultArgument) => (
  <div>
    {title}: <span>{result}</span>
  </div>
);

export default Result;

計算結果を表示するためのcomponentです。
何を表示しているかを伝えるためのtitleと、値を表示するためのresultを受け取って表示するだけになります。

containers

今回は1個しかないけど複数形のフォルダ。以降も同様
2019年中ごろのhooks登場で、reduxとreactのつなぎが少し楽になりました。楽になったバージョンで書きます。

CalculatorContainer.tsx

CalculatorContainer.tsx

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import Result from "../components/Result";
import { GetAllActions } from "../modules/CalculatorContainer";
import { AllState } from "src/store";
import { OPT } from "src/services/CalculatorService";
import CommonBtn from "src/components/CommonBtn";

export const CalculatorContainer = () => {
  const dispatch = useDispatch();
  const calculator = useSelector((state: AllState) => state.calculator);
  const onNumClick = (number: number) => {
    dispatch(GetAllActions.onNumClick(number));
  };
  const onOperationClick = (opt: OPT) => {
    dispatch(GetAllActions.onOperationClick(opt));
  };
  const onEqualClick = () => {
    dispatch(GetAllActions.onEqualClick());
  };
  const onResetClick = () => {
    dispatch(GetAllActions.onResetClick());
  };
  return (
    <div>
      <div>
        <CommonBtn character={1} onClick={() => onNumClick(1)} />
        <CommonBtn character={2} onClick={() => onNumClick(2)} />
        <CommonBtn character={3} onClick={() => onNumClick(3)} />
        <CommonBtn character={"/"} onClick={() => onOperationClick("DIV")} />
      </div>
      <div>
        <CommonBtn character={4} onClick={() => onNumClick(4)} />
        <CommonBtn character={5} onClick={() => onNumClick(5)} />
        <CommonBtn character={6} onClick={() => onNumClick(6)} />
        <CommonBtn character={"*"} onClick={() => onOperationClick("MUL")} />
      </div>
      <div>
        <CommonBtn character={7} onClick={() => onNumClick(7)} />
        <CommonBtn character={8} onClick={() => onNumClick(8)} />
        <CommonBtn character={9} onClick={() => onNumClick(9)} />
        <CommonBtn character={"+"} onClick={() => onOperationClick("ADD")} />
      </div>
      <div>
        <CommonBtn character={"c"} onClick={onResetClick} />
        <CommonBtn character={0} onClick={() => onNumClick(0)} />
        <CommonBtn character={"="} onClick={onEqualClick} />
        <CommonBtn character={"-"} onClick={() => onOperationClick("SUB")} />
      </div>
      <Result title={"Temporary"} result={calculator.temporaryValue} />
      <Result title={"Result"} result={calculator.showingResult ? calculator.resultValue : calculator.inputValue} />
    </div>
  );
};

上から順に

  const dispatch = useDispatch();
  const calculator = useSelector((state: AllState) => state.calculator);

以前は、mapStateToPropsとかDispatchがどうこうというおまじないをcontainerの下のほうに書いて、connectするという作業を行っていました。それの代わりとなります。詳しい使い方は公式ドキュメントをみると良いかも。https://react-redux.js.org/api/hooks
AllStateは、Redux管理しているすべてのステータスを保持する構造体で、store.tsで定義します。

calculatorには、reduxから取ってきた計算に使うstatusが入っています。

  const onNumClick = (number: number) => {
    dispatch(GetAllActions.onNumClick(number));
  };
  const onOperationClick = (opt: OPT) => {
    dispatch(GetAllActions.onOperationClick(opt));
  };
  const onEqualClick = () => {
    dispatch(GetAllActions.onEqualClick());
  };
  const onResetClick = () => {
    dispatch(GetAllActions.onResetClick());
  };

UI上のボタンクリック時の挙動をReduxのActionとつないでいます。つないだ先での挙動はmodulesで説明します。ここでは、ViewとLogicを接続しているとだけ理解すればよいです。

  return (
    <div>
      <div>
        <CommonBtn character={1} onClick={() => onNumClick(1)} />
        <CommonBtn character={2} onClick={() => onNumClick(2)} />
        <CommonBtn character={3} onClick={() => onNumClick(3)} />
        <CommonBtn character={"/"} onClick={() => onOperationClick("DIV")} />
      </div>
      <div>
        <CommonBtn character={4} onClick={() => onNumClick(4)} />
        <CommonBtn character={5} onClick={() => onNumClick(5)} />
        <CommonBtn character={6} onClick={() => onNumClick(6)} />
        <CommonBtn character={"*"} onClick={() => onOperationClick("MUL")} />
      </div>
      <div>
        <CommonBtn character={7} onClick={() => onNumClick(7)} />
        <CommonBtn character={8} onClick={() => onNumClick(8)} />
        <CommonBtn character={9} onClick={() => onNumClick(9)} />
        <CommonBtn character={"+"} onClick={() => onOperationClick("ADD")} />
      </div>
      <div>
        <CommonBtn character={"c"} onClick={onResetClick} />
        <CommonBtn character={0} onClick={() => onNumClick(0)} />
        <CommonBtn character={"="} onClick={onEqualClick} />
        <CommonBtn character={"-"} onClick={() => onOperationClick("SUB")} />
      </div>

これは、実際のUIを見たほうが早いと思うので、説明の前に見せます。

CommonBtn1個につき1つのボタンが割り当てられています。
character={0~9}が渡されているのは、数字ボタンです。同時に、onNumClickという関数が渡されています。onNumClickは数字ボタンが押された時にイベント発火する関数で先に述べたreduxのactionに押した数字を引数として渡しています。

character={"/"} character={"*"} character={"+"} character={"-"}を渡しているのは、四則演算の記号です。onOperationClickでつないだreduxのactionに紐づいています。引数の文字列については、modulesで登場します。

character={"c"} character={"="}はそれぞれつないでいるActionが異なりますが、記述方法はほぼ同じです

      <Result title={"Temporary"} result={calculator.temporaryValue} />
      <Result title={"Result"} result={calculator.showingResult ? calculator.resultValue : calculator.inputValue} />

ここは、ResultComponentにtitleと値を渡しています。temporaryとResultを表示します。
calculatorは、本節の序盤で話したように、reduxから取ってきたstateが入っているので、temporaryValueや、inputValueというstatusにアクセスできます。reduxなので、このContainerで管理するステータスは存在せず、あくまでもstateはreduxで管理して、使いたいときに取得するという書き方になります。

modules

CalculatorContainer.ts

CalculatorContainer.ts

import { OPT, Calculator } from "src/services/CalculatorService";

const INPUT_NUMBER = "INPUT_NUMBER";
const OPERATION = "OPERATION";
const EQUAL = "EQUAL";
const RESET = "RESET";

const onNumClick = (number: number) => ({
  type: INPUT_NUMBER,
  number
});

const onOperationClick = (opt: OPT) => ({
  type: OPERATION,
  opt
});

const onEqualClick = () => ({
  type: EQUAL
});

const onResetClick = () => ({
  type: RESET
});

type ClickActions =
  | ReturnType<typeof onNumClick>
  | ReturnType<typeof onOperationClick>
  | ReturnType<typeof onEqualClick>
  | ReturnType<typeof onResetClick>;

interface CalcState {
  inputValue: number;
  resultValue: number;
  temporaryValue: number;
  lastOperation?: OPT;
  showingResult: boolean;
}

export const GetAllActions = {
  onNumClick: onNumClick,
  onOperationClick: onOperationClick,
  onEqualClick: onEqualClick,
  onResetClick: onResetClick
};

const initialAppState: CalcState = {
  inputValue: 0,
  temporaryValue: 0,
  resultValue: 0,
  showingResult: false
};

const calculator = (state = initialAppState, action: ClickActions) => {
  switch (action.type) {
    case INPUT_NUMBER:
      const numAction = action as ReturnType<typeof onNumClick>;
      return {
        ...state,
        inputValue: state.inputValue * 10 + numAction.number,
        showingResult: false
      };
    case OPERATION:
      const opAction = action as ReturnType<typeof onOperationClick>;
      const temp = state.lastOperation
        ? Calculator(state.lastOperation, state.temporaryValue, state.inputValue)
        : state.showingResult
        ? state.resultValue
        : state.inputValue;
      return {
        ...state,
        inputValue: 0,
        temporaryValue: temp,
        resultValue: 0,
        lastOperation: opAction.opt
      };
    case EQUAL:
      if (state.showingResult) {
        return state;
      }
      const result = state.lastOperation
        ? Calculator(state.lastOperation, state.temporaryValue, state.inputValue)
        : state.inputValue;
      return {
        ...state,
        inputValue: 0,
        temporaryValue: 0,
        resultValue: result,
        lastOperation: undefined,
        showingResult: true
      };
    case RESET:
      return initialAppState;
    default:
      return state;
  }
};

export default calculator;

また上から順に説明します

Action

const INPUT_NUMBER = "INPUT_NUMBER";
const OPERATION = "OPERATION";
const EQUAL = "EQUAL";
const RESET = "RESET";

const onNumClick = (number: number) => ({
  type: INPUT_NUMBER,
  number
});

const onOperationClick = (opt: OPT) => ({
  type: OPERATION,
  opt
});

const onEqualClick = () => ({
  type: EQUAL
});

const onResetClick = () => ({
  type: RESET
});

action定義です。最上部で、actionの名称を定義しています。そのあとに、各関数のtypeと引数の定義を行っています。
例えば、onNumClickはINPUT_NUMBERという名称のtypeのactionで、numberという引数を受け取ります。

type ClickActions =
  | ReturnType<typeof onNumClick>
  | ReturnType<typeof onOperationClick>
  | ReturnType<typeof onEqualClick>
  | ReturnType<typeof onResetClick>;

interface CalcState {
  inputValue: number;
  resultValue: number;
  temporaryValue: number;
  lastOperation?: OPT;
  showingResult: boolean;
}

export const GetAllActions = {
  onNumClick: onNumClick,
  onOperationClick: onOperationClick,
  onEqualClick: onEqualClick,
  onResetClick: onResetClick
};

ClickActionsは、定義したActionの戻り値の型定義。
CalcStateは、reduxで管理したい型定義。
GetAllActionsは、上部で定義した関数を取りまとめたもの。（名前微妙かも）

Reducer

const initialAppState: CalcState = {
  inputValue: 0,
  temporaryValue: 0,
  resultValue: 0,
  showingResult: false
};

stateの初期値です。

const calculator = (state = initialAppState, action: ClickActions) => {

stateには、reduxで現在保持しているstateが入る。初期値はinitialAppState。第二引数がClickActionsで定義されたactionでtypeによって後述されるactionが異なる。

  switch (action.type) {
    case INPUT_NUMBER:
      const numAction = action as ReturnType<typeof onNumClick>;
      return {
        ...state,
        inputValue: state.inputValue * 10 + numAction.number,
        showingResult: false
      };
    case OPERATION:
      const opAction = action as ReturnType<typeof onOperationClick>;
      const temp = state.lastOperation
        ? Calculator(state.lastOperation, state.temporaryValue, state.inputValue)
        : state.showingResult
        ? state.resultValue
        : state.inputValue;
      return {
        ...state,
        inputValue: 0,
        temporaryValue: temp,
        resultValue: 0,
        lastOperation: opAction.opt
      };
    case EQUAL:
      if (state.showingResult) {
        return state;
      }
      const result = state.lastOperation
        ? Calculator(state.lastOperation, state.temporaryValue, state.inputValue)
        : state.inputValue;
      return {
        ...state,
        inputValue: 0,
        temporaryValue: 0,
        resultValue: result,
        lastOperation: undefined,
        showingResult: true
      };
    case RESET:
      return initialAppState;
    default:
      return state;
  }
};

switch~caseでactionごとの挙動を定義。
case INPUT_NUMBERではinputValueに値を入れていきます。10*で加算することで、数字入力を表現しています。
const numAction = action as ReturnType;と書いているのは、onNumClickのactionだけが持つnumberという値を使いたいからです。ここはもう少しきれいに書けそう。ReturnType使っているので型推論だけでうまくいかなくなっている。(typescriptの話掘り下げるときりがないので気になる方はtype guardとかで調べてみてください)

case OPERATIONでは、Optを入れてstateを更新します。Optには四則演算のどれかが入るOPTという型が定義されています。Containerで登場したDIVや、ADDといった引数はここで利用されstateに保存されます。
temporaryValueに入れる値は、Calculatorという関数の計算結果または、現在入力された数字が入ります。ReturnTypeの下りはnumActionと同じ理由。
なんで条件が多少ごちゃごちゃしているかというと、
1+2=3とした後に結果を計算したいとき対応や、1+2+3-4*...のように計算を連ねるときの対応のために三項演算子を使用している。本筋ではないため深堀はしない。

case EQUALでは、計算結果をresultValueに入れます。計算自体はCalculatorで行います。今回は面倒くさかったので、=を連打されても再計算はしません。演算子直後のイコールも対応しません。イコール後に数字入れると結果がリセットされます。バグではなく仕様です(言い訳)。

case RESETは初期化です。initialStateをstateに設定します。

services

この分け方は私のやり方であり、ほかの書き方もたくさんあるのであくまでも一例です。
servicesには、react,reduxに依存しないロジックを書きます。急にreactやめてangularにするで～とか言われても困るからね。

CalculatorService.ts

CalculatorService.ts

export type OPT = "DIV" | "MUL" | "ADD" | "SUB";

export const Calculator = (opt: OPT, firstNumber: number, secondNumber: number) => {
  switch (opt) {
    case "DIV":
      return firstNumber / secondNumber;
    case "MUL":
      return firstNumber * secondNumber;
    case "ADD":
      return firstNumber + secondNumber;
    case "SUB":
      return firstNumber - secondNumber;
    default:
      return 0;
  }
};

計算はここにまとめています。今までもちらほら登場していたOPTはここで定義しています。規模が大きいなら、modelsとかでtypeの定義は別ファイルにするのが良いでしょう。今回は面倒くさくて規模が小さいため同じファイルです。OPTは四則演算4つを表すstring文字だけ入るtypeです。
Calculatorは、演算子と2つの数字を受け取って演算子ごとの計算結果を返します。

その他のファイル

store.ts

redux必須のやつ。

store.ts

import { combineReducers, createStore } from "redux";
import calculator from "./modules/CalculatorContainer";

// 全てのReducerが集約される。Reducerが増えたらここに追加する
export const rootReducer = combineReducers({
  calculator
});

// 全てのStatusが集約される。書き換え不要
export type AllState = ReturnType<typeof rootReducer>;

// Reactとreduxをつなぐためのstoreを作成。書き換え不要
const store = createStore(rootReducer);

export default store;

コメントに書いた通りです。
AllStateはredux管理の全てのstateのタイプを持ち、Containerごとに必要なStateを呼び出します(ここ言い切ってるけど合ってるよね？)

App.tsx

Container名だけ今回のものにしただけ

App.tsx

import React from "react";
import "./App.css";
import { CalculatorContainer } from "./containers/CalculatorContainer";

function App() {
  return (
    <div className="App">
      <CalculatorContainer />
    </div>
  );
}

export default App;

index.tsx

storeの紐づけをした。ググればわかると思う。

index.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import * as serviceWorker from "./serviceWorker";
import { Provider } from "react-redux";
import store from "./store";
import App from "./App";

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

今回触れなかったファイルはデフォルトのままなので説明省略。

まとめ

電卓アプリで学ぶReact/Redux入門(実装編)の説明+本記事で、react-reduxかつtypescriptで初心者でも電卓が作れる！！！ことを願う。

stateの更新に伴うライフサイクルメソッドは４種類

stateが更新されるとReactではcomponentが再度読み込まれます。そのタイミングで以下の４つのメソッドが用意されます。

・componentWillReceiveProps
・shouldComponentMount
・componentWillUpdate
・componentDidUpdate

それぞれザックリ解説します。

componentWillReceivePropsメソッド

このメソッドは親コンポーネントの情報が更新され、渡されてくるpropsの情報も更新されている時に呼び出されます。使い方は、propsとstateがイコールの関係にあるとき、更新されたpropsをsetStateで、stateを同じ値に更新します。

shouldComponentMountメソッド

このメソッドはcomponentが更新される直前で、componentWillUpdateの直前に呼び出されます。使い道は、componentを更新するかしないかを判断する際に使います。更新前のpropsとstateの値と、更新後のそれらの値を比較することで、componentの更新の有無を決定します。返り値はtrue or falseで表現され、trueの場合componentが更新されることになります。

componentWillUpdateメソッド

componentが更新される直前で、shouldComponentUpdateがtrueだった場合のみ呼び出されます。使い道はcomponentWillMountと同じくcomponentが更新されるたびに実行したい処理を記述します。

componentDidUpdateメソッド

componentが更新された直後に呼び出されます。componentDidMountと同じく、更新されるたび行われて欲しい処理を記述します。

まとめ

長々と書きましたが、とりあえずcomponentmが更新されたら４種類の便利なメソッドが使えるようになるよくらいの認識で良さそうです。

Webサイトをリリースしました

https://racoon.vlue.blue

今年はコロナの影響で卒業式が中止になったりしましたね。
それと比べるとあまり知られてないかもしれませんが、
美大・アート系の学校の卒業展示、
いわゆる 卒展 も数多くが中止を余儀なくされました。

部活でいうと引退試合が中止になったようなものです。
悲しいですね。

そこで、卒展で展示する予定だった作品をTwitteにアップするムーブメントが起きました。
#桑沢2020 #かってに卒制展 などのハッシュタグで様々な作品が見れます。

卒業制作

くつ下の柄によって靴の表情が変わる靴を制作。

透明や半透明の素材を使っている靴が増えていているけど『くつ下を見せるため』の靴はないよなぁってとこから発想しました。
LINE(くつ下の色彩を見せる)FRAME(くつ下の柄を見せる)の2種類デザインしました。#桑沢2020 pic.twitter.com/nq0apG4uzs

— 蓮(Hasu) (@hasu_ird) February 28, 2020

#桑沢2020

私は紙で椅子をつくりました。

桑沢の卒展は、自分にとってすごくすごく特別な想いがありました。

小学生から憧れ続けた桑沢卒展、中止。 pic.twitter.com/2Q1oZ0RvAm

— 藤原光平 (@fuji_kohei) February 27, 2020

これらの作品をアーカイブしたのが今回のWebサイトになります。

使用技術

• React
• GatsbyJS
• GraphQL
• Twitter API
• S3
• CloudFront
• Lambda@Edge

特に要となっているのは GatsbyJS です。

GatsbyJS とは

詳細は色々と記事が見つかるのでそちらに任せますが、
（例：Reactの最強フレームワークGatsby.jsの良さを伝えたい！！）

GatsbyJSとは、静的サイトジェネレータであり、
Reactアプリケーションを動かすフレームワークです。
npmでインストールして、create-react-app的なノリで使用できます。

ビルドしてHTMLを生成する部分はGo製の Hugo みたいのをイメージしてもらえればいいんですが、Gatsby はただの静的ジェネレータにはとどまりません。

完全なReactアプリとして動作するので、
外部のデータソースと接続すれば、動的なアプリとして振る舞います。

この辺りの仕組みを理解するには以下の記事が最高にわかりやすいです。

Reactベース静的サイトジェネレータGatsbyの真の力をお見せします

GatsbyはGraphQLを介してデータにアクセスするのですが、
ビルド時には、ローカルのGraphQLからデータを抽出して静的ファイルを出力します。
それに加えて、ブラウザでの実行時に外部のデータソースと接続してアプリにマージすることもできるのです。

例えばブログアプリを作るときに、記事はマークダウンとしてソースに含めてビルドし、
スター数やコメントはDynamoDBに保存してAppSync経由でリアルタイムに取得・表示する、
といった設計とかが可能。

データソースをどうするかで迷う

ブログやコーポレーションサイト、ポートフォリオなどの事例が多く、
それらではファイルシステムがデータソースとなっていました。
任意のディレクトリにマークダウンとしてデータを記述しておく形です。

今回使うデータは、元ツイートと、ツイートに含まれる画像の2つです。
Twitter APIの制限もあるし、コンテンツもちゃんとフィルタリングしたかったので、
静的に固めることは早々に決めたのですが、マークダウンはちょっと抵抗があります。

最初はローカルでMySQLを立てて実装しました。
データベースの接続もプラグインによって幅広くサポートされています。

ただSQLは情報が少なく、ジョインが絡む複雑なクエリを書くのが難しかったり、
サロゲートキーがGraphQLが生成するNodeのIDとバッティングしたり、
なんやかんやで面倒だったので途中からJSONに変更しました。
静的なのにソースとデータが分離されてるのもなんか気持ち悪いし。。。

ファイルシステムのプラグインを使えばJSONもこんな感じで簡単にクエリできます。

tweets.json

[
    {
        "tweet_id": "1232842391867912192",
        "created_at": "2020-02-27T01:38:25.000Z",
        "text": "#桑沢2020 \n\n私は紙で椅子をつくりました。\n\n桑沢の卒展は、自分にとってすごくすごく特別な想いがありました。\n\n小学生から憧れ続けた桑沢卒展、中止。 https://t.co/2Q1oZ0RvAm",
        "hashtags": "桑沢2020",
        "user_id": "1093916680504336384",
        "user_screen_name": "fuji_kohei",
        "embed_html": "<blockquote class=\"twitter-tweet\"><p lang=\"ja\" dir=\"ltr\"><a href=\"https://twitter.com/hashtag/%E6%A1%91%E6%B2%A22020?src=hash&amp;ref_src=twsrc%5Etfw\">#桑沢2020</a> <br><br>私は紙で椅子をつくりました。<br><br>桑沢の卒展は、自分にとってすごくすごく特別な想いがありました。<br><br>小学生から憧れ続けた桑沢卒展、中止。 <a href=\"https://t.co/2Q1oZ0RvAm\">pic.twitter.com/2Q1oZ0RvAm</a></p>&mdash; kohei_fuji (@fuji_kohei) <a href=\"https://twitter.com/fuji_kohei/status/1232842391867912192?ref_src=twsrc%5Etfw\">February 27, 2020</a></blockquote>\n",
        "images": [
            "https://pbs.twimg.com/media/ERvvnNqUYAAKtTL.jpg",
            "https://pbs.twimg.com/media/ERvvnVmVUAA71I6.jpg",
            "https://pbs.twimg.com/media/ERvvnYPU4AA5u5w.jpg",
            "https://pbs.twimg.com/media/ERvvnsOVUAA5_ht.jpg"
        ]
    },
    {...

export const query = graphql`
  query {
    allTweetsJson {
      edges {
        node {
          id
          tweet_id
          text
          user_screen_name
          images
        }
      }
    }
  }
`

ツイートの取得

Twitter APIを使ってツイートを取得してMySQLにぶっ込むNode.jsのスクリプトが手元にあったのでそれを流用しました（最初MySQLを使ってたのはこういう事情もある）。

流れとしてはこんな感じ。

1. それっぽいハッシュタグで検索をかける。
2. 取得したツイートでサイトに展示するものを目視で選定する。
3. 選定したツイートの埋め込みコードをAPIで取得・保存する。

検索の search/tweets ではパラメータに include_entities: true を指定して、画像のURLが取れるようにする（ものによっては画像があるのになぜか取れない謎）。

キーワードはハッシュタグを指定するのだが、以下のようにしてリツイートを省かないとノイズが大きい。
{q: "#岡山県立大学卒展2020 exclude:retweets}
レートリミットがあるので、効率的に取得するためにcountは最大の100件を指定。
最新のツイートが取得されるので、さかのぼって取得するループを回すためには、
都度 max_id を指定してカーソルを移動させる必要がある。

埋込み用のコードは statuses/oembed で取得できる。
この埋め込みコードには、ツイート展開用の

<script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>

が含まれるが、各ツイートに含める必要はないので、これは削除しておく。

必要なフィールドをいい感じにJSONに保存してデータの準備は完了。

無限スクロール

ページングはユーザー側の操作が手間なので避けたくて、
TwitterやPinterestのような無限スクロールを実装した。

IntiniteScroll の dataLength が21ずつ増えているのがわかると思う。

Twitterのウィジェットが重いので、カード展開前に素のテキストが一瞬見えてしまうことがあるが、もう少しみ読み込み位置を早くすれば対処は可能。
いまはコンテナの高さの85%まで来ると読み込みが走るようになっている。

ライブラリには react-infinite-scroll-component を使用した。
これをラップしたコンポーネントを作り、
親コンポーネントの useState, useEffectで更新を制御している。

let allTweets = null

export default ({data}) => {  
  const [tweets, setTweets] = useState([])
  const [hasMore, setHasMore] = useState(true)
  const [page, setPage] = useState(0)
  const PER = 21 // dividable by 3

  useEffect(() => {
    allTweets = data.allTweetsJson.edges.sort(() => { return Math.random() - .5 })
    fetchTweets() // initialize
  }, [])

  const fetchTweets = () => {
    const pageResult = allTweets.slice(page * PER, page * PER + PER)
    setTweets(tweets.concat(pageResult))
    setPage(page + 1)

    if (page * PER >= allTweets.length) {
      setHasMore(false)
    }

    if (window.twttr) {
      window.twttr.widgets.load(document.getElementById(styles.tweet_container))
    }
  }

まず useEffect 内で全てのツイートをJSONから読み込んでランダムにソートしている。
なるべくいろんな作品を見てもらえるように閲覧のたびにファーストビューの作品は入れ替えたかったので、ランダムに取得する必要があった。

静的に作った場合だとこれは不可能。
ビルド時に順番は固定されてしまい、再ビルドされるまでは変わらないことになってしまう。
これは無限スクロールの話とは別で、静的なページにはデータを持たせずに、
非同期に外部からデータを取得してくる設計にする必要がある。

そうなると別にGatsbyじゃなくてよくね...という話になるのだが、
他のページは静的にビルドしているし、動的にしたいのはここだけ、
そこはReactでいろいろ書けばいいよね！というのがまさにこのフレームワークの強みなんだと思う。

無限スクロールの話に戻るが、propsには、新しいページの結果だけでなく、
これまでの結果をマージして渡す必要があるので結合している。

const pageResult = allTweets.slice(page * PER, page * PER + PER)
setTweets(tweets.concat(pageResult))

そして新たに追加されたツイートをカードとして展開するには、再度ウィジェットの読み込みを走らせる必要がある（Twitterの公式ドキュメント）。

if (window.twttr) 
  window.twttr.widgets.load(document.getElementById(styles.tweet_container))
}

そもそもカードの展開には最初 gatsby-plugin-twitter というプラグインを使っているのだが、
こいつの仕組みがよくわからなかったのでやめた。
widgets.js が読み込まれた形跡がなく、
twttr オブジェクトもスコープに存在しないため、load() を呼び出すことができなかったからだ。

代わりに自前で <script>タグを追加する方法を取っている。

import Helmet from "react-helmet"

<Helmet>
  <script src="https://platform.twitter.com/widgets.js" type="text/javascript" async></script>
</Helmet>

Pinterest風レイアウト

ツイートには最大4枚の画像が含まれるので、それらを取り出してランダムに並べる画面を別で作っています。
無限スクロールで仕組みは前述のものと同じです。

GatsbyJSで画像を使う際は、gatsby-image コンポーネント使うことが推奨されています。
Working with Images in Gatsby

これは何かというと、閲覧しているデバイスに応じて複数のサイズ・解像度に画像を最適化してくれるライブラリで、GraphQLでクエリできるようになっています。
他にも以下のような特徴があります。

gatsby-image is a plugin that automatically creates React components for optimized images that:

・Loads the optimal size of image for each device size and screen resolution
・Holds the image position while loading so your page doesn’t jump around as images load
・Uses the “blur-up” effect i.e. it loads a tiny version of the image to show while the full image is loading
・Alternatively provides a “traced placeholder” SVG of the image
・Lazy loads images, which reduces bandwidth and speeds the initial load time
Uses WebP images, if browser supports the format

使い方には fluid と fixed があって、
コンテナのサイズに応じて伸び縮みする fluid と、固定サイズの fixed を使い分けます。
レスポンシブ対応で、スマホサイズでは fixed にするみたいな使い分けをしています。

GraphQLはこういう風に書く

query($id: String!) {
  tweetsJson(tweet_id: { eq: $id }) {
    id
    text
    tweet_id
    embed_html
    featuredImg {
      childImageSharp {
        fluid(maxWidth: 400, quality: 100) {
          ...GatsbyImageSharpFluid
        }
        fixed(width: 200, height: 200) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
}

と、ここまで説明したところでなんなんですが、
アニメーションやスタイルの関係上、この画面ではあえて使っていません。
flexboxと一緒に使うと表示されなかったり、なかなか使い勝手が難しいライブラリです?

（※ホバー時に元ツイートの情報を表示するようにしてたりする）

スタイルの問題は他にもあって、

Pinterest風にマルチカラムにするのにCSSのcolumnsプロパティを使っているんですが、
画像の高さがそれぞれ違うので次ページ読み込み時に並び替えが起こってしまいます。
columnsはコンテンツを左から埋めていくので、
画像が追加された時に前ページの画像が全て左に寄せられてしまい、
見ていたコンテンツが消える事象が発生することなります。

これではユーザーが？となるので、これまで見ていたページの並びは固定するために、
ページごとにcolumnsを指定するコンテナでラップすることにしました。

画像の組み合わせによっては不要な余白が生じてしまうのですが。
別の仕組みでグリッドレイアウトを作れば良い話なんですが、
時間があるときでもやろうと思います。

外部画像を最適化するトリック

ソースファイルに含まれているデータは tweets.json 1ファイルのみです。

tweets.json

[
    {
        "tweet_id": "1232842391867912192",
        "created_at": "2020-02-27T01:38:25.000Z",
        "text": "#桑沢2020 \n\n私は紙で椅子をつくりました。\n\n桑沢の卒展は、自分にとってすごくすごく特別な想いがありました。\n\n小学生から憧れ続けた桑沢卒展、中止。 https://t.co/2Q1oZ0RvAm",
        "hashtags": "桑沢2020",
        "user_id": "1093916680504336384",
        "user_screen_name": "fuji_kohei",
        "embed_html": "<blockquote class=\"twitter-tweet\"><p lang=\"ja\" dir=\"ltr\"><a href=\"https://twitter.com/hashtag/%E6%A1%91%E6%B2%A22020?src=hash&amp;ref_src=twsrc%5Etfw\">#桑沢2020</a> <br><br>私は紙で椅子をつくりました。<br><br>桑沢の卒展は、自分にとってすごくすごく特別な想いがありました。<br><br>小学生から憧れ続けた桑沢卒展、中止。 <a href=\"https://t.co/2Q1oZ0RvAm\">pic.twitter.com/2Q1oZ0RvAm</a></p>&mdash; kohei_fuji (@fuji_kohei) <a href=\"https://twitter.com/fuji_kohei/status/1232842391867912192?ref_src=twsrc%5Etfw\">February 27, 2020</a></blockquote>\n",
        "images": [
            "https://pbs.twimg.com/media/ERvvnNqUYAAKtTL.jpg",
            "https://pbs.twimg.com/media/ERvvnVmVUAA71I6.jpg",
            "https://pbs.twimg.com/media/ERvvnYPU4AA5u5w.jpg",
            "https://pbs.twimg.com/media/ERvvnsOVUAA5_ht.jpg"
        ]
    },

画像のURLとしてTwitterのURLが格納されていますが、
アプリケーションから参照しているのはこのURLではありません。

これは作品の詳細ページですが、画像のsrcは
/static/f6862a78b0b14267e3e9188b58d053a6/25252/ESUa1ooUYAAOn4I.jpg
となっています。

GatsbyJSの仕様では、プロジェクトルートに static という名前のフォルダを置いて、
画像などのアセットを含めるのが通例です。
そうすると、ビルド時に成果物の public の下に static が残ります。

しかし今回は static の下に画像を置くのではなく、JSONにリモートのURLを記述しているだけです。
これをビルドの成果物に含める、かつ、先述の gatsby-image の最適化を施す必要があります。

gatsby-imageに処理をさせるためには、なんらかの形でこのURLをGraphQLのNodeに変換する必要があるのですが、これを createRemoteFileNode という Gatsby Node APIs を利用して実現します。
そしてGraphQLのresolverとしてこのNodeを登録します。
（うまく説明できなくてすまぬ...）
GraphQLのリゾルバとは

コードはこんな感じ。

gatsby-node.js

exports.createResolvers = ({
  actions,
  cache,
  createNodeId,
  createResolvers,
  store,
  reporter,
}) => {
  const { createNode } = actions
  createResolvers({
    TweetsJson: {
      featuredImg: {
        type: [`File`],
        resolve(source, args, context, info) {
          return source.images.map((image) => {
            return createRemoteFileNode({
              url: image,
              store,
              cache,
              createNode,
              createNodeId,
              reporter,
            })
          })
        },
      },
    },
  })
}

まずこのファイルだが、プロジェクトルートにある gatsby-node.js いうファイルで、
ビルド時に実行されるもの。
ここにコードを書いておくと、GraphQLのNode生成などのイベントを拾ってなんらかの処理を行うことができる。

そこで createResolvers を呼んで、TweetsJson（tweets.jsonから生成されたスキーマ）に featuredImg というフィールドを生やしている。
中身は File の配列で（画像が複数枚の場合があるため）、
createRemoteFileNode の戻り値を追加している。

この前処理があってこそ、前述のこのクエリが実行できるという仕組み。

query($id: String!) {
  tweetsJson(tweet_id: { eq: $id }) {
    id
    text
    tweet_id
    embed_html
    featuredImg {
      childImageSharp {
        fluid(maxWidth: 400, quality: 100) {
          ...GatsbyImageSharpFluid
        }
        fixed(width: 200, height: 200) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
}

Nodeにあるフィールドを追加したければ、
onCreateNode で createNodeFieldを呼ぶのがシンプルで簡単な方法です。
実際 チュートリアル でもそうやっています。

わざわざ createResolvers なんてややこしいのを使っているのはちょっとしたハックで、
これが、全てのスキーマの処理が完了してから最後に呼ばれるAPIだからです。

TweetsJson というスキーマの元はJSONファイルであり、
このファイルをまずGraphQLのスキーマに変換する処理が発生します。
必ずこの作業が終わった後に処理をする必要があるため、createResolvers にしてあるというわけです。

これで無事に gatsby-image が処理できる形にリモートの画像URLが変換されたので、
ビルド時に様々なデバイスサイズ、解像度向けに static 配下に画像が生成されるようになります。

作品ページの生成

作品ごとのページを作ります。

（サムネイルをクリックすると画像が変わる仕様。）

チュートリアルでは、マークダウンから記事ページを作成しています。
Programmatically create pages from data
ユースケースとしてはこういう使い方が多いと思いますが、今回のデータソースはJSONです。

GatsbyJSでは、あらかじめ src/pages に置いてあるファイルはビルド時に自動的にページとして出力されています。

それ以外に任意にページを作成したい場合は、先述の gatsby-node.js から createPage APIを呼び出すことになります。

gatsby-node.js

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
  const result = await graphql(`
    query {
      allTweetsJson {
        edges {
          node {
            id
            tweet_id
            images
          }    
        }
      }
    }
  `)
  result.data.allTweetsJson.edges.forEach(({ node }, index) => {
    createPage({
      path: `/work/${node.tweet_id}/`,
      component: path.resolve(`./src/templates/work.js`),
      context: {
        id: node.tweet_id,
        next: index !== result.data.allTweetsJson.edges.length - 1 ? result.data.allTweetsJson.edges[index + 1].node : null,
        prev: index !== 0 ? result.data.allTweetsJson.edges[index - 1].node : null,
      },
    })
  })
}

component にテンプレートとなる Reactコンポーネントのファイルを渡しています。
context で渡した値は、テンプレート側で pageContext で受けることができます。
前後のページのリンクを作りたかったので、ここでは前後のNodeを受け渡すようにしています。

src/templates/work.js

export default ({data, pageContext}) => {

}

idは該当記事を取得するページクエリで $id で参照します。

js/src/templates/work.js

export const query = graphql`
  query($id: String!) {
    tweetsJson(tweet_id: { eq: $id }) {
      id
      text
      tweet_id
      embed_html
      hashtags
      images
      featuredImg {
        publicURL
        childImageSharp {
          fluid(maxWidth: 400, quality: 100) {
            ...GatsbyImageSharpFluid
          }
          fixed(width: 200, height: 200) {
            ...GatsbyImageSharpFixed
          }
        }
      }
    }
  }

URLは path で指定するのですが、Nodeの id は避けたほうがよいです。
コンテンツの追加/削除、再ビルドで変化する可能性があるので、
不変なユニークな値を指定しておくのが無難です。
チュートリアルにならってスラッグを指定するといいと思います。

OGP画像

デフォルトで SEO というコンポーネントがついてくる。
内部的には react-helmet を使っている。
作品のページでは、その作品の画像やテキストに切り替えたいので以下のようにして使う。

<SEO description={data.tweetsJson.text} image={data.tweetsJson.featuredImg[0].publicURL} />

createRemoteFileNode で Nodeにした外部画像ですが、
出力された static/***のパスを publicURL で取得することができます。

作品のOGPはこんな感じ。

https://t.co/iiiXq7mwBx

— 青いエンジニア? (@itmono_sakuraya) March 21, 2020

通常のOGPと変わっていることがわかります。

#桑沢2020 #かってに卒制展 #岡山県立大学卒展2020 #日本工学院卒制展https://t.co/Q8Sgg3F5ot

— 青いエンジニア? (@itmono_sakuraya) March 21, 2020

（アライグマ（racoon）は Corona のアナグラムです）

ホスティング

このサイトは CloudFront で配信しています。
S3のWebホスティング機能は使用していません。

独自ドメイン（CNAME）とSSLも設定済み。

Origin Access Identity を指定して、バケットの直接参照は禁止しています。

以下バケットポリシー

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ******"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{bucket_name}/*"
        }
    ]
}

また、サブディレクトリのルートオブジェクトを設定するために、Lambda@edgeをかましてあります。
静的Webサイトホスティングでは、 /hoge/ へのアクセスを /hoge/index.html に補完してくれるのですが、
CloudFront単体ではルートでしかこれが効かないので、自前で対処する必要があります。
サブディレクトリ以下のアクセス /*/ に対して、
Lambda@Edge を関連づけた Behavior を最優先で設定します。

lambda@edge

'use strict';

exports.handler = (event, context, callback) => {
    const request = event.Records[0].cf.request;
    request.uri = request.uri.replace(/\/$/i, '/index.html');
    callback(null, request);
};

Lambda@Edgeってなに？っていう方は拙著をお読みください。
Lambda@Edgeを完全に理解する?‍♀️

さらにもう一手間。
存在しないURLに対して正しく404を出すために、Custom Error Response の設定をします。

404だけでなく403も設定しているのは、
S3は404エラーを403エラーで隠蔽することがあるからです。
ListBucket権限がないのが原因だったりします。

詳しくは。これも拙著です。
CloudFront×S3で403 Access Deniedが出るときに確認すべきこと

デプロイ

gatsby-plugin-s3 でやってます。
npm run deploy を流すだけです。

ドキュメントがないのですが、acl: null を指定しないと権限エラーになります。

{
  resolve: `gatsby-plugin-s3`,
  options: {
    bucketName: "******",
    acl: null
  },
},

まとめ

こんなところです。
GraphQL初めて触るし、React書くの2年ぶりとかなので割と時間がかかってしまいましたが、
GatsbyJSはかなり可能性のあるフレームワークだなーと感じました。

特有の癖はありつつも、覚えてしまえばまあ。
あまりWebに馴染みのない人が、楽にWebサイトを構築できる手段だと思って使うと痛い目を見るかもしれません。

この記事でも紹介した通り、基本静的で動かしたい、でも動的にしたいところもある、
というユースケースでは力を発揮するんじゃないですかね。

何はともあれみなさんアートを楽しんでください。

https://t.co/MGh77VptDw

— 青いエンジニア? (@itmono_sakuraya) March 22, 2020

はじめに

WordPress 5.0からGutenbergと呼ばれるブロックエディターがデフォルトのエディターとして採用されました。
そのため、今後はこのブロックエディターによる開発が増えてくると思われます。

個人的には、今までのWysiWygエディターに不満を感じていたわけではありませんが、ブロックエディターという選択肢が増えたことで、できる事の幅が増えてくる と思います。
本記事では、このブロックエディターの新規ブロック（以降、カスタムブロック）の作り方を記載して行きます。

ブロックエディターとは？

ブロックエディターは、名前の通り、HTMLをブロックように積み上げてHTMLを作成していくエディターです。

詳細は、以下を参照ください。

https://ja.wordpress.org/gutenberg/

ブロックエディターの特徴の1つとして、上記リンク先のページにも記載がありますが、 実際のサイトと同様に表示されるエディター。 であることです。
これから記載するカスタムブロックも、実際のサイトと同様に表示されるよう作成して行きます。

また、WordPressのブロックエディターは、大きく分けて以下の2種類のカスタムブロックを作成できます。

• 動的ブロック ・・・ 最新の投稿を表示するブロック等の動的にブロックの内容が変化するブロック
• 静的ブロック ・・・ 動的とは反対で、画像アップロードやテキストフィールド等のブロックの内容が変化しないブロック

これから記載するカスタムブロックは静的ブロックを作成して行きます。（動的ブロックは別途記載予定）

作成するカスタムブロック

以下のようなテキストが書けて、背景色をサイドナビゲーションから選択できるカスタムブロックを作成して行きます。
サンプルブロックは、エディターと画面表示（以降、フロント）にCSSが適応されるブロックと、エディターのみCSSが適応されるブロックの2種類作成します。

環境準備

以下がインストールされている事が前提です。

• PHP: 7.1以上
• Node: v10.x
• Yarn: v1.9.4

WordPressのブロックエディターはReactで作成されています。
これから作成するカスタムブロックも、ReactのComponentを使って開発して行きます。
しかし、通常のReactを使用するのではなく、WordPress側で用意されているReactを使用します。そのため、Reactをインストールする必要はありません。

以降、ライブラリのインストールです。

[必須]package.jsonを用意する

以下のようなpackage.jsonを作成します。

{
  "name": "sample-block",
  "version": "1.0.0",
  "description": "Sample Block",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Kodak",
  "license": "GPL-2.0"
}

[任意]webpackを用意する

こちらは任意です。
JavaScriptをwebpackを通してビルドしたい方は、以下をインストールしてください。
今回は、後述する@wordpress/scriptsを使ってビルドをするので、インストールしません。

yarn add -D webpack webpack-cli

[必須]BABELを用意する

以下をインストールします。
カスタムブロックはJSXを使いたいので@babel/preset-reactもインストールします。

yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

• @babel/core ・・・ BABEL本体
• babel-loader ・・・ webpackからBABELを通すためのライブラリ
• @babel/preset-env ・・・ 特定の環境（ブラウザ）に合わせた変換をしてくれるライブラリ
• @babel/preset-react ・・・ JSXのコンパイル可能にするライブラリ

[任意]SASSに対応させるためのライブラリを用意する

こちらは任意です。
今回はSASSに対応させたいため、以下をインストールします。

yarn add -D node-sass css-loader sass-loader

• node-sass ・・・ SASS(SCSS)をCSSに変換するライブラリ
• sass-loader ・・・ webpackからSASS(SCSS)をCSSに変換するライブラリ
• css-loader ・・・ CSSをJavaScriptにバンドルするライブラリ

[任意]CSSを拡張するためのライブラリを用意する

こちらは任意ですが、インストールしておいたほうが良いです。
ベンダープレフィックスやCSSを別ファイルとして出力してくれます。

yarn add -D postcss-loader autoprefixer mini-css-extract-plugin optimize-css-assets-webpack-plugin terser-webpack-plugin

• postcss-loader ・・・ ベンダープレフィックスをCSSに追加するため＆ネストしたCSSを解析してくれるライブラリ
• autoprefixer ・・・ ベンダープレフィックスをCSSに追加（postcss-loaderのプラグイン）
• mini-css-extract-plugin ・・・ CSSを別ファイルとして出力するためのライブラリ
• optimize-css-assets-webpack-plugin ・・・ 作成するCSSを圧縮するためのライブラリ
• terser-webpack-plugin ・・・ CSSを圧縮する際、さらにCSSを縮小してくれる（邪魔なコメントやscourceMapを削除してくれる）ライブラリ

[必須]ビルドフォルダーにゴミファイルを残さないためのライブラリを用意する

ビルドフォルダーにゴミファイルを残さないようにするため、これはインストールしておきましょう。

yarn add -D clean-webpack-plugin

• clean-webpack-plugin ・・・ ビルドする度に、ビルドフォルダーを削除するライブラリ

[必須]カスタムブロックを作るライブラリを用意する

カスタムブロックを作成するためのライブラリです。

yarn add -D @wordpress/browserslist-config @wordpress/scripts @wordpress/blocks @wordpress/dependency-extraction-webpack-plugin

• @wordpress/browserslist-config ・・・ WordPressのブロックエディターが動くブラウザリストのライブラリ
• @wordpress/scripts ・・・ WordPressのブロックエディター用のwebpackが詰め込まれたライブラリ。これを使用しない場合は、webpackを別途インストールする必要がある。
• @wordpress/blocks ・・・ WordPressでカスタムブロックを作るためのライブラリ。
• @wordpress/dependency-extraction-webpack-plugin ・・・ ライブラリの依存関係を自動で解決するassets.phpファイルを生成してくれるライブラリ

[任意]作成するカスタムブロックに合わせてライブラリを用意する

作りたいカスタムブロックに合わせて、ライブラリをインストールします。
今回は、@wordpress/block-editorと@wordpress/componentsを使用します。

yarn add -D @wordpress/block-editor @wordpress/components

各ライブラリの詳細は、公式サイトを参照してください。

https://developer.wordpress.org/block-editor/packages/

事前準備

package.json（折りたたんでいます）

{
  "name": "sample-block",
  "version": "1.0.0",
  "description": "Sample Block",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "wp-scripts build --mode=development --config webpack.config.js --watch",
    "build": "wp-scripts build --mode=production --config webpack.config.js"
  },
  "author": "Kodak",
  "license": "GPL-2.0",
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "@babel/preset-react": "^7.8.3",
    "@wordpress/block-editor": "^3.7.5",
    "@wordpress/blocks": "^6.12.1",
    "@wordpress/browserslist-config": "^2.6.0",
    "@wordpress/components": "^9.2.4",
    "@wordpress/dependency-extraction-webpack-plugin": "^2.4.0",
    "@wordpress/scripts": "^7.1.3",
    "autoprefixer": "^9.7.4",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.4.2",
    "mini-css-extract-plugin": "0.6.0",
    "node-sass": "^4.13.1",
    "optimize-css-assets-webpack-plugin": "^5.0.3",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^8.0.2",
    "terser-webpack-plugin": "^2.3.5"
  },
  "browserslist": [
    "extends @wordpress/browserslist-config"
  ]
}

WordPress用のwebpack（wp-scripts）を使用して、ビルドをするため、以下のように定義します。

  "scripts": {
    "start": "wp-scripts build --mode=development --config webpack.config.js --watch",
    "build": "wp-scripts build --mode=production --config webpack.config.js"
  },

ブラウザリストはextendsを使用して読み込みます。

  "browserslist": [
    "extends @wordpress/browserslist-config"
  ]

注）mini-css-extract-pluginは、chunkFilenameを使用しているとエラーが出たのでバージョンを0.6.0にしています。

webpack.config.js（折りたたんでいます）

const autoprefixer                      = require('autoprefixer');
const MiniCSSExtractPlugin              = require('mini-css-extract-plugin');
const OptimizeCSSAssetsWebpackPlugin    = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin               = require('terser-webpack-plugin');
const { CleanWebpackPlugin }            = require('clean-webpack-plugin');
const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin');

module.exports = (env, argv) => {
                // mode('development'と'production')によって動作を切り替える関数
        function isDevelopment() {
            return argv.mode === 'development'
        }

        var config = {
        entry: {
                        editor: './src/editor.js',
                        script: './src/script.js',
        },
        output: {
            filename: "[name].js"
        },
        optimization: {
            minimizer: [
                                // sourceMapをmodeによって削除する
                new TerserWebpackPlugin({
                    sourceMap: isDevelopment()
                                }),
                                // CSSを圧縮する
                new OptimizeCSSAssetsWebpackPlugin(
                    {
                        cssProcessorOptions: {
                            map: {
                                inline: false,
                                annotation: true
                            }
                        }
                    }
                )
            ]
        },
        plugins: [
                        // assets.phpファイルを出力する
                        new DependencyExtractionWebpackPlugin(),
                        // ビルドの度にビルドフォルダーを削除する
                        new CleanWebpackPlugin(),
                        // CSSファイルを別ファイルで出力する
            new MiniCSSExtractPlugin({
                            chunkFilename: "[id].css",
                            filename: chunkData => {
                                    return chunkData.chunk.name === "script" ? 'style.css' : '[name].css';
                            }
                        })
                ],
                // source-mapを使用する
        devtool: 'source-map',
        module: {
            rules: [
                {
                                        // JavaScriptのローダーの設定
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                                                // BABELを使用する
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-env',
                                [
                                    '@babel/preset-react',
                                    {
                                                                                // Reactで使用する関数をBABELをトランスパイルします
                                                                                // 通常は"React.createElement.xxxx"を記述しますが、WordPressのブロックエディターはWordPress用のReactを使用するため、以下のように記述します
                                        "pragma": "wp.element.createElement",
                                        "pragmaFrag": "wp.element.Fragment",
                                        "development": isDevelopment()
                                    }
                                ]
                            ]
                        }
                    }
                },
                {
                                        // SASSのローダーの設定
                    test: /\.(sa|sc|c)ss$/,
                    use: [
                                                // CSSを別ファイル化するためのローダーを指定
                        MiniCSSExtractPlugin.loader,
                        'css-loader',
                        {
                                                        // postcss-loaderのプラグインを使って、ベンダープレフィックスをCSSに追加
                            loader: 'postcss-loader',
                            options: {
                                plugins: [
                                    autoprefixer()
                                ]
                            }
                        },
                        'sass-loader'
                    ]
                }
            ]
        },
    };
    return config;
}

Reactで使用する関数をBABELをトランスパイルします。
通常は"React.createElement.xxxx"を記述しますが、WordPressのブロックエディターはWordPress用のReactを使用するため、以下のように記述します。

'@babel/preset-react',
{
    "pragma": "wp.element.createElement",
    "pragmaFrag": "wp.element.Fragment",
}

WordPress用のwebpack（wp-scripts、dependency-extraction-webpack-plugin）を使用して、ビルドをしない方は、WordPressの依存関係を解決するために以下のような記述が必要なので注意してください。

ご参考）https://developer.wordpress.org/block-editor/packages/packages-dependency-extraction-webpack-plugin/

externals: {
    "@wordpress/blocks": ["wp", "blocks"],
    "@wordpress/editor": ["wp", "editor"],
    "@wordpress/components": ["wp", "components"],
    "@wordpress/element": ["wp", "element"],
}

プラグインとしてカスタムブロックを開発

カスタムブロックを作成する流れを図にすると以下のような感じです。

どこから作成しても問題ありませんが、カスタムブロックJSメインコードとカスタムブロックスタイルコードを作成して、最後にカスタムブロック登録コードを作るのが良いと思います。

firstblock/editor.js（折りたたんでいます）

import './editor.scss';
import { registerBlockType } from "@wordpress/blocks";
import { RichText, InspectorControls } from "@wordpress/editor";
import { PanelBody, ColorPalette } from "@wordpress/components";

registerBlockType('sample-block/firstblock', {
    title: 'サンプルブロック(editor)',

    icon: 'wordpress-alt',

    category: 'common',

    example: {},

    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p'
        },
        colorPrefix: {
            type: 'string',
            default: ''
        }
    },

    edit( { className, attributes, setAttributes } ) {
        const { content, colorPrefix } = attributes;

        const changeBackGroundColor = (backGroundColor) => {
            let color_prefix = '';

            switch ( backGroundColor ) {
                case 'blue':
                    color_prefix = '--blue' ;
                    break;
                case 'red':
                    color_prefix = '--red';
                    break;
                case 'green':
                    color_prefix = '--green';
                    break;
                case 'yellow':
                    color_prefix = '--yellow';
                    break;
                default:
                    color_prefix = '';
                    break;
            }
            setAttributes({colorPrefix: color_prefix})
        }

        return (
            <div className={ className }>
                <InspectorControls>
                        <PanelBody title='背景カラー設定'>
                                <ColorPalette
                                    colors={[
                                        {name: 'ブルー', color: 'blue'},
                                        {name: 'レッド', color: 'red'},
                                        {name: 'グリーン', color: 'green'},
                                        {name: 'イエロー', color: 'yellow'},
                                    ]}
                                    disableCustomColors='true'
                                    onChange={ changeBackGroundColor }
                                />
                        </PanelBody>
                </InspectorControls>
                <RichText
                    className={`wp-block-sample-block-firstblock__content${colorPrefix}`}
                    tagName='p'
                    onChange={ ( content ) => setAttributes( { content: content } ) }
                    value={ content }
                />
            </div>
        );
    },

    save( { attributes } ) {
        const { content, colorPrefix } = attributes;

        return (
            <div>
                { content && (
                    <RichText.Content
                        className={`wp-block-sample-block-firstblock__content${colorPrefix}`}
                        tagName='p'
                        value={ content }
                    />
                )}
            </div>
        );
    }
});

firstblock/editor.scss（折りたたんでいます）

.wp-block-sample-block-firstblock {
  &__content {
    color: black;
    background-color:   white;
  }

  &__content--red {
    color: white;
    background-color:   red;
  }

  &__content--green {
    color: white;
    background-color:   green;
  }

  &__content--blue {
    color: white;
    background-color:   blue;
  }

  &__content--yellow {
    color: red;
    background-color:   yellow;
  }
}

edit関数がエディター表示の部分、save関数がフロントを表示する部分になります。
attributesは、主にエディターで設定した値（edit関数で設定した値）をフロントへ渡す値（save関数へ渡す値）を定義します。
上記だと、RichText書かれたValue値やColorPaletteで選択したクラス名のプレフィックスなどです。

サイドナビゲーションは、InspectorControls、PanelBodyなどを組み合わせれば簡単に実装できます。

plugin.php（折りたたんでいます）

<?php
/**
 * Plugin Name: Sample-Block
 * Plugin URI: *
 * Description: Sample用カスタムブロック.
 * Version: 1.0
 * Author: Kodak
 * Author URI: *
 * License: GPL2
 *
 * @package sample-block
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * カスタムブロックの登録.
 */
function sample_block_register() {
    // スクリプトファイルをWordPressに登録する.
    $editor_asset_file = include( plugin_dir_path( __FILE__ ) . 'dist/editor.asset.php' );
    $script_asset_file = include( plugin_dir_path( __FILE__ ) . 'dist/script.asset.php' );

    // editor-script用のJSファイル.
    wp_register_script(
        'sample-block-editor-script',
        plugins_url( 'dist/editor.js', __FILE__ ),
        $editor_asset_file['dependencies'],
        $editor_asset_file['version']
    );

    // editor-style用のCSSファイル.
    wp_register_style(
        'sample-block-editor-style',
        plugins_url( 'dist/editor.css', __FILE__ ),
        [ 'wp-edit-blocks' ],
        filemtime( plugin_dir_path( __FILE__ ) . 'dist/editor.css' )
    );

    // script用のJSファイル.
    wp_register_script(
        'sample-block-script',
        plugins_url( 'dist/script.js', __FILE__ ),
        $script_asset_file['dependencies'],
        $script_asset_file['version']
    );

    // style用のCSSファイル.
    wp_register_style(
        'sample-block-style',
        plugins_url( 'dist/style.css', __FILE__ ),
        [ 'wp-edit-blocks' ],
        filemtime( plugin_dir_path( __FILE__ ) . 'dist/style.css' )
    );

    // カスタムブロックの登録(editor).
    register_block_type(
        'sample-block/firstblock',
        [
            'editor_script' => 'sample-block-editor-script', // エディター画面の時のみスクリプトを読み込む.
            'editor_style'  => 'sample-block-editor-style', // エディター画面の時のみスタイルを読み込む.
        ]
    );

    // カスタムブロックの登録.
    register_block_type(
        'sample-block/secondblock',
        [
            'script' => 'sample-block-script', // エディター・フロントの両画面でスクリプトを読み込む.
            'style'  => 'sample-block-style', // エディター・フロントの両画面でスタイルを読み込む.
        ]
    );
}
add_action( 'enqueue_block_editor_assets', 'sample_block_register' );
add_action( 'enqueue_block_assets', 'sample_block_register', 1 );

WordPress用のwebpack（wp-scripts、dependency-extraction-webpack-plugin）を使用して、ビルドした場合、スクリプトファイル（xxxx.asset.php）が作られます。
ライブラリの依存関係やバージョン情報が書かれているので、それらを使ってJSファイルを登録します。

カスタムブロックの登録は、editor_script、editor_style、script、styleの4種類があります。
4つの違いは以下の通りです。

• editor_script ・・・ エディター画面の時のみスクリプトを読み込む
• editor_style ・・・ エディター画面の時のみスタイルを読み込む
• script ・・・ エディター・フロントの両画面でスクリプトを読み込む
• style ・・・ エディター・フロントの両画面でスタイルを読み込む

例えば、本記事の最初に見せたブロックをプレビューしてフロントから見てみると以下のように表示されます。

上：エディターとフロントにCSSが適応されるブロック（script、style）を使用した場合
下：エディターのみCSSが適応されるブロック（editor_script、editor_style）を使用した場合

上の方は、エディターで指定した背景色（赤色）がフロントに適用されていることがわかります。
対して、下の方はエディターで指定した背景色（緑色）がフロントには反映されていないことがわかります。

最後にHookですが、editor_script、editor_styleを使用する場合はenqueue_block_editor_assetsを使いましょう。
script、styleを使用する場合はenqueue_block_assetsを使いましょう。
ちゃんとブロックエディター用のHookが用意されているので、適切なHookを使用するようにしましょう。間違ってもinitは使用しないようにしましょう。

さいごに

というわけで、長々とカスタムブロックの作り方を書いてみましたが、いかがだったでしょうか。
個人的に一番苦労したのはwebpackの設定です。
私自身バックエンドのエンジニアなので、webpackの設定方法を理解するのにえらい時間が掛かりました・・・
カスタムブロックはモダンな作りになっていて面白いのですが、学習コストが高いのが辛いところですね。

今度は、動的ブロックの作成にも挑戦したいと思います。

昨今のReactのテスト事情は、react-testing-library が主流です。
create-react-app でデフォルトで生成されるテストテンプレートもすでに @testing-library が使われるようになっています。

Add @testing-library to the default templates by kentcdodds · Pull Request #7881 · facebook/create-react-app

また、携わっていたプロジェクトでもenzymeからtesting-libraryに移行しました。

さて、testing-libraryでサポートされているクエリに data-testid があります。data-testidについて詳しくは、以下の記事を参考にしてください。

idやclassを使ってテストを書くのは、もはやアンチパターンである - Qiita

また、data-testidをいつ使うかについては、Testing Libraryのガイドプリンシパルが役に立ちます。
Guiding Principles · Testing Library

さて、testid 属性ですが以下のように自分で書くものですが、これを、ある程度自動的に付加できると便利かつソースコードをクリーンに保てます。

function App() {
  return <div data-testid="App">App</div>
}

インストール

npm install --save-dev babel-plugin-react-data-testid

api.envを用いて、test環境だけ有効にすることをオススメします。

babel.config.js

module.exports = api => {
  const isTest = api.env("test");
  return {
    presets: ["react-app"],
    plugins: isTest ? ["react-data-testid"] : []
  };
};

これで、テスト時のみコンポーネントの最初の要素に対して、コンポーネント名でdata-testidを付加します。
すでにdata-testidがある場合は処理をスキップし、ネストしてる場合は、一番上のタグに対してdata-testidを付加します。

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

// ↓↓↓ テスト時のみ

function App() {
  return <div data-testid="App">App</div>
}

これで、data-testidが自動生成できるようになりました。なお、クラスコンポーネントはサポートしていません。PRは歓迎です。

akameco/babel-plugin-react-data-testid: babel plugin for react data-testid attributes

バグや要望については、気軽にIssue立ててください。
使ってみていい感じだなと思ったら していただけると嬉しいです。

streampackのminsuです。
以前の記事で Docker + Rails + React の環境構築を行いindexページの表示まで行ったのでCRUD機能を追加します。
ですが期間も空いているため、折角なので以前の環境である

• Rails 5.1.4
• Ruby 2.4.1
• mysql 5.7

ではなく、新しい環境で作り直します。

最新版確認
https://rubygems.org/gems/rails
https://www.ruby-lang.org/ja/downloads/

作成環境

• Rails 6.0.2
• Ruby 2.7
• mysql 5.7

ファイルの用意

Gemfile Gemfile.lock Dockerfile docker-compose.yml を作成します。

Gemfile

source "https://rubygems.org"
gem "rails", "6.0.2"

Gemfile.lock

FROM ruby:2.7.0

RUN apt-get update -qq && \
apt-get install -y \
nodejs \
build-essential

RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
apt-get update && apt-get install -y yarn

RUN mkdir /app
WORKDIR /app

ADD Gemfile* /app/

RUN bundle install -j4 --retry 3

ADD . /app

WORKDIR /app

CMD ["bundle", "exec", "puma", "-C", "config/puma.rb"]

docker-compose.yml

version: '3'
services:
  db:
    image: mysql:5.7
    command: mysqld --character-set-server=utf8 --collation-server=utf8_unicode_ci
    ports:
      - "4306:3306"
    environment:
      - MYSQL_ROOT_PASSWORD=root
    volumes:
      - mysql_vol:/var/lib/mysql
  app:
    build: . 
    command: /bin/sh -c "rm -f /app/tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/app
    ports:
      - "3000:3000"
    depends_on:
      - db
volumes:
  mysql_vol:

rails app作成

rails new

rails new を行います。

$ docker-compose run app rails new . --force --database=mysql

db設定を変更します。

database.yml

  username: root
  password: root #docker-compose.ymlのMYSQL_ROOT_PASSWORD
  host: db #docker-compose.ymlのサービス名

今回も gem react-rails を利用するのでGemfileに追記します。

Gemfile

gem 'react-rails'

再度 build して

$ docker-compose build

reactを使うので下記コマンドを実行

$ docker-compose run app rails webpacker:install
$ docker-compose run app rails webpacker:install:react
$ docker-compose run app rails generate react:install

model 作成

$ docker-compose run app rails g model List title:string description:string
$ docker-compose run app rails db:create
$ docker-compose run app rails db:migrate

かなりの数の warning 出てきた。
Ruby 2.7.0に対応していないgemが存在することに起因しているようで非表示にすることもできる* が必要なwarningも見逃す可能性があるのでスルーすることにする。
*bash_profileにexport RUBYOPT='-W:no-deprecated -W:no-experimental'を追加

controller 作成

lists controller と view を作成

$ docker-compose exec app rails g controller Lists index

lists_controller.rb

class ListsController < ApplicationController
  def index
    @lists = List.all
  end
end

index.html.erb

<%= react_component 'ListsIndex', lists: @lists %>

react_component タグを用いてreactを呼び出します。

react file 作成

viewから呼び出すreact fileを実装していきます。

$ rails g react:component ListsIndex

コマンドで app/javascript/components/ListsIndex.js が作成されるので編集します。

ListsIndex.js

import React from "react"
import PropTypes from "prop-types"
export default class Lists extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      lists: []
    };
  }
  componentDidMount(){
    this.setState({
      lists: this.props.lists
    })
  }
  render () {
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Title</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            {this.state.lists.map((list) => {
              return (
                <tr key={list.id}>
                  <td>{list.id}</td>
                  <td>{list.title}</td>
                  <td>{list.description}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    );
  }
}

動作確認

List モデルに適当な値を保存して動作確認をしてみます。

無事に一覧が表示されました。

simple CRUD の実装

railsにapiを追加します。
apiで行うアクションは index, create, update, destroy です。

/api/v1/xxxでアクセスできるようにrouteを設定し、controllerを追加します。

routes.rb

Rails.application.routes.draw do
  get 'lists/index'
  namespace :api do 
    namespace :v1 do 
     resources :lists, only: [:index, :create, :update, :destroy]
    end 
  end 
end

app/controllsers/api/v1/lists_controllser.rb

class Api::V1::ListsController < ApplicationController
  protect_from_forgery with: :null_session
  def index
    render json: List.all
  end
  def create
    list = List.create(list_params)
    render json: list
  end
  def update
    list = List.find(params[:id])
    list.update(list_params)
    render json: list
  end
  def destroy
    List.destroy(params[:id])
  end
  private
  def list_params
    params.require(:list).permit(:id, :title, :description)
  end
end

controllerには基本的なメソッド、そしてprotect_from_forgery with: :null_sessionを記述しました。

http://localhost:3000/api/v1/listsでindexが呼び出されリストが取得できるはずです。

index

reactからapiを利用してlists を取得します。
componentDidMountを書き換えます。

ListsIndex.js

  componentDidMount(){
    this.getIndex();
  }
  getIndex(){
    fetch('/api/v1/lists.json')
    .then((response) => {return response.json()})
    .then((data) => {this.setState({ lists: data }) });
  }

delete

delete機能を実装します。
ボタンを追加

    return (
      <div>
        <div>this is list</div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Title</th>
              <th>Description</th>  
              <th>function</th>
            </tr>
          </thead>
          <tbody>
            {this.state.lists.map((list) => {
              return (
                <tr key={list.id}>
                  <td>{list.id}</td>
                  <td>{list.title}</td>
                  <td>{list.description}</td>
                  <td>
                    <button onClick={() => this.handleDelete(list.id)}>delete</button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

    );

ボタンから呼び出されるhandleDeleteを実装します。

  handleDelete(id){
    fetch(`http://localhost:3000/api/v1/lists/${id}`, 
      {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json'
        }
    })
    .then((response) => { 
        console.log('List was deleted');
        this.deleteList(id);
    })
  }
  deleteList(id){
    let lists = this.state.lists.filter((list) => list.id != id)
    this.setState({
      lists: lists
    })
  }

apiでのdestroyだけではstateの値は変わらないので、画面は更新されません。
そのためdeleteListにてstateの値を変更しています。

constructorに下記も追記します。

  constructor(props){
...
    this.getIndex = this.getIndex.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
    this.deleteList = this.deleteList.bind(this);
  }

画面を確認すると deleteボタンが追加されており、要素の削除が行えます。

create

要素追加のformを作成します。
stateにてformの値を管理するために下記のように追記します。

  constructor(props){
    super(props)
    this.state = {
      // lists: this.props.lists
      lists: [],
      form: {
        title: "",
        description: "",
      }
    };
...

各inpuフォームとaddボタンを追加

    return (
      <div>
        <div>this is list</div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Title</th>
              <th>Description</th>  
              <th>function</th>
            </tr>
          </thead>
          <tbody>
            {this.state.lists.map((list) => {
              return (
                <tr key={list.id}>
                  <td>{list.id}</td>
                  <td>{list.title}</td>
                  <td>{list.description}</td>
                  <td>
                    <button onClick={() => this.handleDelete(list.id)}>delete</button>
                  </td>
                </tr>
              );
            })}
            <tr>
              <td></td>
              <td><input type="text" value={this.state.form.title} onChange={e=>this.handleChange(e,'title')} /></td>
              <td><input type="text" value={this.state.form.description} onChange={e=>this.handleChange(e,'description')} /></td>
              <td><button onClick={() => this.handleCreate()}>add</button></td>
            </tr>
          </tbody>
        </table>
      </div>

    );
  }

ここで利用するhandleChangeとhandleCreateを実装します。
handleChangeではinputフォームの入力値をstateにて管理させています。

  handleChange(e,key){
    let target = e.target;
    let value = target.value;
    let form = this.state.form;
    form[key] = value;

    this.setState({
      form: form
    });
  }

handleCreateではapiのcreateメソッドを呼び出して要素の追加を行います。
追加後はstateのlistsの更新と
inputフォームの値のリセットを行なっています。

  handleCreate(){
    let body = JSON.stringify({
      list: {
        title: this.state.form.title, 
        description: this.state.form.description
      } 
    })
    fetch('http://localhost:3000/api/v1/lists', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: body,
    })
    .then((response) => {return response.json()})
    .then((list)=>{
      this.addList(list);
      this.formReset();
    })
  }
  addList(list){
    this.setState({
      lists: this.state.lists.concat(list)
    })
  }
  formReset(){
    this.setState({
      form:{
        title: "",
        description: ""
      }
    })
  }

constructorに下記を追記

    this.handleChange = this.handleChange.bind(this);
    this.addList = this.addList.bind(this);
    this.formReset = this.formReset.bind(this);

画面を確認するとcreate用のinputフォームが追加され、addボタンのクリックにより要素の追加を行えます。

完成したListIndex.js

ListIndex.js

import React from "react"
import PropTypes from "prop-types"
class ListsIndex extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      // lists: this.props.lists
      lists: [],
      form: {
        title: "",
        description: "",
      }
    };
    this.getIndex = this.getIndex.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
    this.deleteList = this.deleteList.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.addList = this.addList.bind(this);
    this.formReset = this.formReset.bind(this);
  }
  componentDidMount(){
    this.getIndex();
  }
  getIndex(){
    fetch('/api/v1/lists.json')
    .then((response) => {return response.json()})
    .then((data) => {this.setState({ lists: data }) });
  }
  handleDelete(id){
    fetch(`http://localhost:3000/api/v1/lists/${id}`, 
      {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json'
        }
    })
    .then((response) => { 
        console.log('List was deleted');
        this.deleteList(id);
    })
  }
  deleteList(id){
    let lists = this.state.lists.filter((list) => list.id != id)
    this.setState({
      lists: lists
    })
  }
  handleChange(e,key){
    let target = e.target;
    let value = target.value;
    let form = this.state.form;
    form[key] = value;

    this.setState({
      form: form
    });
  }
  handleCreate(){
    let body = JSON.stringify({
      list: {
        title: this.state.form.title, 
        description: this.state.form.description
      } 
    })
    fetch('http://localhost:3000/api/v1/lists', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: body,
    })
    .then((response) => {return response.json()})
    .then((list)=>{
      this.addList(list);
      this.formReset();
    })
  }
  addList(list){
    this.setState({
      lists: this.state.lists.concat(list)
    })
  }
  formReset(){
    this.setState({
      form:{
        title: "",
        description: ""
      }
    })
  }
  render () {
    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>Title</th>
              <th>Description</th>  
              <th>function</th>
            </tr>
          </thead>
          <tbody>
            {this.state.lists.map((list) => {
              return (
                <tr key={list.id}>
                  <td>{list.id}</td>
                  <td>{list.title}</td>
                  <td>{list.description}</td>
                  <td>
                    <button onClick={() => this.handleDelete(list.id)}>delete</button>
                  </td>
                </tr>
              );
            })}
            <tr>
              <td></td>
              <td><input type="text" value={this.state.form.title} onChange={e=>this.handleChange(e,'title')} /></td>
              <td><input type="text" value={this.state.form.description} onChange={e=>this.handleChange(e,'description')} /></td>
              <td><button onClick={() => this.handleCreate()}>add</button></td>
            </tr>
          </tbody>
        </table>
      </div>

    );
  }
}

export default ListsIndex

まとめ

Ruby2.7, Rails6
Docker
react
での環境構築
reactからのrails api利用の実装を行いました。
自分用のまとめですが、誰かの助けとなれば幸いです。