フロントエンドワークショップ React入門ハンズオン

Reactで仕訳入力画面を作っていきます

コードは基本的には簡単な方法を選択したものになってるはず…

カンニングに使ってください

コード書く前にReactについておさらい

React Componentは関数の形で記述する

JSXという記法でHTMLやReact Componentを記述する

基本的にはPropsやStateが変わると再レンダリングが走る

関数のトップレベルで呼ぶ

early returnする前に必ず呼ぶ

仕訳入力画面について

左側に「借方勘定科目」と「金額」の入力欄がある

右側に「貸方勘定科目」と「金額」の入力欄がある

それぞれの「科目」の項目はAPIからJSONで取得する

金額はユーザーが数字を入力する

左右それぞれの合計を最後の行に表示する

そのとき、左右が一致して無ければその旨を表示する

こういう感じになる予定という図

https://gyazo.com/cdc4f9fb836c759e98f926fa9e77c3c6

Create React Appでの環境セットアップ

Create React App(以下、craと省略することがあります)はReactの開発環境を一発でバシッと作ってくれるツール

継続的に改善がされていて、その時々のベストプラクティス集的な感じにもなっている

npm init react-app -- . --template typescript

自動でリロードとかもしてくれて便利

何が中で動いてるかとかの詳細は次のパートでやるので、ここでは一旦便利に全部動くぞという世界観で進めていきます

自動リロードの様子を眺める

便利

まず全体で利用することになる型を書いておく

各行のデータとそれの配列があれば良さそうということでざっくりこんな感じ

code: src/types/journal.ts

export type JournalRow = Readonly<{

debitItem: string,

debitValue: number

creditItem: string,

creditValue: number,

}>

export type JournalData = Readonly<JournalRow[]>

Propsを考えてみる

code: src/Row.tsx

type RowProps = Readonly<{

data: JournalRow

update: (newData: JournalRow) => void

}>

export const Row: React.VFC<RowProps> = () => null; //一旦中身無いので、nullを返しておく

コラム: Function Componentの書き方・宣言方法について

ですが、今回は明示的に型を書いていく方法を取っていきます。このハンズオンでは型を書くことに慣れたり、それによりコードを書いていく手助けになるという考えからです。

まずは素朴にJSX部分から書いてみましょう

必要そうな要素を並べる

code: src/Row.tsx

<div>

<select>{/* ここに課目が並ぶ */}</select>

<input type='number' />

<select>{/* ここに課目が並ぶ */}</select>

<input type='number' />

</div>

code: src/Journal.tsx

import { useState } from "react"

import { Row } from "./Row";

import { JournalData } from "./types/journal"

export const Journal = () => {

return <>{

data.map((d) => <Row data={d} update={() => {/* 一旦空の関数を渡してごまかす */}} />)

}</>

}

このままだと配列が空なので、適当に初期データを生成しておけるようにしておく

code: ts

const createInitialData = () => ({

debitItem: '',

debitValue: 0,

creditItem: '',

creditValue: 0,

});

code: diff

code: src/App.tsx.diff

<div className="App">

- <header className="App-header">

- <img src={logo} className="App-logo" alt="logo" />

- <p>

- Edit <code>src/App.tsx</code> and save to reload.

- </p>

- <a

- className="App-link"

- target="_blank"

- rel="noopener noreferrer"

- >

- Learn React

- </a>

- </header>

+ <Journal />

</div>

表示されましたか 🎉🎉🎉

<Journal>で行を追加出来るようにする

code: src/Journal.tsx.diff

export const Journal = () => {

+ const addRow = () => {

+ }

+

return <>{

data.map((d) => <Row data={d} update={() => {/* 一旦空の関数を渡してごまかす */}} />)

- }</>

+ }

+ <button onClick={addRow}>行を追加</button>

+ </>

}

ここで一旦Devtoolのconsoleを見てみてください

Warning: Each child in a list should have a unique "key" prop.

keyを使うことでリスト内の要素の順番などが変更された場合にも要素がどのように対応しているかが検証され、更新される範囲を最小限に出来る

というわけで今回はuuidを与えておきます

JournalDataにidを追加する

code: src/Journal.tsx.diff

const createInitialData = () => ({

+ id: crypto.randomUUID(),

debitItem: '',

debitValue: 0,

creditItem: '',

このときTSの型エラーが出る

code: src/types/global.d.ts

declare interface Crypto {

randomUUID: () => string;

}

VSCodeをリロードすると読み込まれるはず

idを使ってkeyを設定する

JournalRowの型にidを足しておくこと

Warningが消えていることを確認する

行の追加をテストする

一方で、Appの中身は変更していて今は用をなさないので削除しておく

というわけで、ボタンを押したら行が追加される様子をテストしてみましょう

code: src/Journal.test.tsx

import { screen, render, fireEvent } from "@testing-library/react";

import {Journal} from "./Journal";

test('「行を追加」ボタンをクリックすると1行増える', () => {

render(<Journal />);

const button = screen.getByText('行を追加');

fireEvent.click(button);

expect(screen.getAllByRole('row').length).toBe(2);

})

code: src/Row.tsx.diff

- <div>

+ <div role="row">

<select>{/* ここに課目が並ぶ */}</select>

code: src/setupTests.ts

global.crypto = require('crypto');

テスト成功しましたか？

コラム: React Componentのテストとモック

一方で子要素が増えるとテスト時に影響を受ける範囲が広がり、純粋に「行を追加する」という機能だけをテストし辛くなっていく

そのような場合はJestの機能を用いてmockするのも1つのアイデア

code: src/Journal.test.tsx

jest.mock("./Row", () => ({

Row: () => <div role="row"></div>

}));

課目を取得する①

code: public/api/items.json

["現金",

"当座預金",

"普通預金",

"定期預金",

"その他の預金",

"受取手形",

"売掛金",

"有価証券",

"商品"]

課目を取得する②

第2引数に配列で依存する値を渡すことでその値が更新されたら処理を実行できる

第1引数の関数が関数を返すとき、その返ってきた関数が副作用を呼び出す前に呼ばれる

code: example.tsx

useEffect(() => {

subscribe(onUpdate);

return () => unsubscribe()

↑はアンマウント時に購読を取り消してくれる

code: src/Row.tsx.diff

+type ItemsAPI = Readonly<string[]>

+

type RowProps = Readonly<{

data: JournalRow

update: (newData: JournalRow) => void

}>

export const Row: React.VFC<RowProps> = () => {

+

+ useEffect(() => {

+ fetch('/api/items.json')

+ .then((res) => res.json())

+ .then((json: ItemsAPI) => {

+ setItems(json);

+ });

+ }, []);

return <div role="row">

- <select>{/* ここに課目が並ぶ */}</select>

+ <select>{

+ items?.map(item => <option value={item}>{item}</option>)

+ }</select>

<input type='number' />

- <select>{/* ここに課目が並ぶ */}</select>

+ <select>{

+ items?.map(item => <option value={item}>{item}</option>)

+ }</select>

<input type='number' />

</div>

}

更新を反映できるようにする

code: src/Journal.tsx.diff

export const Journal = () => {

-

- const addRow = () => {

- }

+ const {data, updateDataById, addRow} = useJournalData();

return <>{

- data.map((d) => <Row key={d.id} data={d} update={() => {/* 一旦空の関数を渡してごまかす */}} />)

+ data.map((d) => <Row key={d.id} data={d} update={updateDataById} />)

}

<button onClick={addRow}>行を追加</button>

</>

欲しい形も決まってるので、先にテストを書く作戦で向き合ってみる

npm i -D @testing-library/react-hooks

code: src/journal-data.ts

import { JournalData, JournalRow } from "./types/journal"

export const useJournalData = (): Readonly<{

data: JournalData,

updateDataById: (id: string, newData: Partial<JournalRow>) => void;

addRow: () => void;

}> => {

return {

data: [],

updateDataById: (id: string, newData: Partial<JournalRow>) => {},

addRow: () => {}

}

}

code: src/journal-data.test.ts

import { renderHook } from '@testing-library/react-hooks'

import { act } from 'react-dom/test-utils';

import { useJournalData } from './journal-data';

test('updateDateByIdで特定のデータを更新できる', () => {

const {result} = renderHook(useJournalData);

act(() => {

result.current.addRow();

result.current.addRow();

result.current.addRow();

result.current.addRow();

})

act(() => {

result.current.updateDataById(id, {debitValue: 100});

});

expect.objectContaining({debitValue: 100})

)

act(() => {

result.current.updateDataById(id, {debitItem: 'test',debitValue: 200});

})

expect.objectContaining({debitItem: 'test',debitValue: 200})

)

})

テストで一通り欲しい振る舞いは書かれているので、それを満たすように実装を書く

素朴に書くとこういう感じになると思う

code: src/journal-data.ts.diff

+

return {

- data: [],

- updateDataById: (id: string, newData: Partial<JournalRow>) => {},

- addRow: () => {}

+ data,

+ updateDataById: (id: string, newData: Partial<JournalRow>) => {

+ setData(prev => prev.map((d) => d.id === id ? { ...d, ...newData } : d))

+ },

}

}

code: src/Journal.tsx.diff

-

- const addRow = () => {

- }

+ const {data, updateDataById, addRow} = useJournalData();

return <>{

- data.map((d) => <Row key={d.id} data={d} update={() => {/* 一旦空の関数を渡してごまかす */}} />)

+ data.map((d) => {

+ const update = (_data: Partial<JournalRow>) => updateDataById(d.id, _data)

+ return <Row key={d.id} data={d} update={update} />

+ })

}

<button onClick={addRow}>行を追加</button>

code: src/Row.tsx.diff

type RowProps = Readonly<{

data: JournalRow

- update: (newData: JournalRow) => void

+ update: (newData: Partial<JournalRow>) => void

}>

- export const Row: React.VFC<RowProps> = ({ }) => {

+ export const Row: React.VFC<RowProps> = ({ update }) => {

code: ts

onChange: (event: React.SyntheticEvent<HTMLSelectElement>)

という感じのインターフェイスで型を与えておくと良い感じに出来る

code: src/Row.tsx.diff

return <div role="row">

- <select>{

+ <select onChange={(e: React.SyntheticEvent<HTMLSelectElement>) => update({

+ debitItem: e.currentTarget.value

+ })}>{

items?.map(item => <option value={item}>{item}</option>)

}</select>

- <input type='number' />

- <select>{

+ <input type='number' onChange={(e: React.SyntheticEvent<HTMLInputElement>) => update({

+ debitValue: e.currentTarget.valueAsNumber

+ })}/>

+ <select onChange={(e: React.SyntheticEvent<HTMLSelectElement>) => update({

+ creditItem: e.currentTarget.value

+ })}>{

items?.map(item => <option value={item}>{item}</option>)

}</select>

- <input type='number' />

+ <input type='number' onChange={(e: React.SyntheticEvent<HTMLInputElement>) => update({

+ creditValue: e.currentTarget.valueAsNumber

+ })}/>

</div>

合計を計算する

借方と貸方それぞれの合計

不足額がある場合はどっちがいくら足りないか表示する

code: src/Sum.tsx

type SumProps = Readonly<{

data: JournalData

}>

export const Sum: React.VFC<SumProps> = ({data}) => {

const debit = data.reduce((sum, d) => sum + d.debitValue, 0);

const credit = data.reduce((sum, d) => sum + d.creditValue, 0);

return <div role="row">

借方の合計 {debit}円<br/>

貸方の合計 {credit}円<br/>

{

debit !== credit ?

<span style={{color: 'red'}}>

{debit > credit ? "貸方" : "借方"}の不足額: {Math.abs(debit - credit)}円

</span>

: null

}

</div>

}

お疲れ様でした

ひとまず一通り動くようなものが出来たはず

いかがでしたか？

値や関数をメモ化するための組み込みフック

code: src/Journal.tsx.diff

const {data, updateDataById, addRow} = useJournalData();

+ useEffect(() => {

+ console.log('addRow is updated')

+

return <>{

code: src/journal-data.ts.diff

+

+ const addRow = useCallback(() => {

+ }, []);

return {

data,

updateDataById: (id: string, newData: Partial<JournalRow>) => {

setData(prev => prev.map((d) => d.id === id ? { ...d, ...newData } : d))

},

+ addRow

}

メモ化とパフォーマンス

コラム: React Component自体の設計について

今回のハンズオンではかなり素朴にあらゆるComponentやフックを設計しました

React Componentは素朴な関数なので、関数合成を用いてクリーンアーキテクチャ的なアイデアを持ち込んで債務を分離するということも出来ます

PresenterはPropsを受け取って加工したりしてViewに渡す

code: connect.tsx

// 実際にはもう少し色々やることになると思うので、イメージ図みたいな感じです

function connect(usePresenter, View) {

const Component: React.FC = (props) => {

const propsForView = usePresenter(props);

return <View {...props} />

};

return Component;

}

Container ComponentとPresentational Componentに分けて実装する

こういうことが出来るとより良くなりそうという変更の例です

DevToolのconsoleを見ると、inputが空になったときにNaNになってしまうという問題があるので修正する

行を削除できるようにする

巨大な状態を1つ親が持っていて、それを配る形になっているが、もう少し良い設計を採用してみる

inputの値などをバリデーションする

科目名を貸方と借方で分離させる

フックに切り出して、共通化。その上でなんらかのキャッシュを入れる