ReactでCleanにレイヤリングしながらTDDで実装進めるためのアーキテクチャ模索
色々なプログラム言語やアーキテクチャに触れ、少しずつですがプログラマとしての経験値が上がっているのではと思い始めてきたので、そろそろお気に入りの React を使ったフロントエンド設計を良い感じに考えられるのでは？と思い、コード書きながら記事も書いてみることにしました。
この記事および一連のシリーズは模索です。誰かに推奨するわけでもなく、自分もこれからのプロジェクト全部こうするというわけでもないです。
大切にしたいこと
SOLID の原則を極力守れていること、極力 TDD で進められることを重視します。気持ち的にはこれらは完全に守りたいものの、わたしが完全に理解できている自信がないのでわかっている範囲で守ろうという形です。
ユーザー情報を表示する画面を作る
良くある API から情報を取得して画面に反映する画面を作ります。ユーザー情報の取得に使用する API は jsonplaceholder を利用させてもらいます。
https://jsonplaceholder.typicode.com/
下記のような形で使用するとユーザーの名前などが表示される想定です。
return <UserInfo userId="xxx" />;
開発環境
Create React App の TypeScript テンプレートを利用します。この一連のシリーズでは interface を利用して実装を進めるので TypeScript 必須です。
構成のイメージ
今回作るユーザー情報表示画面では大きく 2 つの流れを想定しています。
- ユーザー情報を外部から取得してアプリケーションにセットする
- アプリケーションにセットされたユーザー情報を読み取って表示する
fetch して setState して終了！なんか考えることあんの？という突っ込みを受けそうですね。今回は考えたいのです。
ユーザー情報を外部から取得してアプリケーションにセットする
※矢印の向きちょっと適当です
まずはユーザー情報を取得する方です。流れはシンプルで React の Component がユーザー情報の取得をしたいという関数(恐らく hooks ベースで提供される)を実行すると API から情報を取ってきて、state にセットする関数を動かすです。今回は context を作成してそこに情報を入れることにします。
アプリケーションにセットされたユーザー情報を読み取って表示する
こちらはこんな形を想定しています。
データをセットする方で context に入れることを想定しているので、表示するデータも context から取得します。
作成していく
前提の説明はこれで終わったので次の記事からコードを書いていきます。コード量が多くなりそうなので下記のリポジトリに push していこうと思います。
https://github.com/Hidekazoo/react-practice
実は 1 つの記事で今回取り扱いたかった情報を全部書いて公開する予定だったのですが、長くて全然書き終わらず、書いているうちに修正したくなるしで嫌になりました。記事を細かく分けることで記事を公開したというモチベーションを保ちつつ進めたいと思います。
関連する記事は上記シリーズにまとめます。