はじめに
今回、JISOUの課題としてデジタル名刺アプリを作成しました。
以前の学習記録アプリと違い、ページ遷移するアプリケーションとなっております。
また、毎日朝6時に名刺を削除するバッチ処理の実装にも取り組みました。
アプリ画面
gifがちょっと長いです🙇♂️
主な技術スタック
- React
- React Router
- TypeScript
- Chakra UI V3
- Firebase
- Supabase
- Vitest × Testing Library
- Github Actions(CI/CDとバッチ処理)
Github
工夫したこと・大変だったこと
supabaseでの複数テーブルの取得・登録
今までの学習記録アプリでは、単一テーブルでのDBの操作でしたが、今回は中間テーブルを含んだ複数テーブルを扱いました。
取得の時は、ドキュメントの書き方をまねて取得しようとしたら、外部キーをつけておらずエラー解決につまずきました。
また、supabaseでトランザクションを直接設定するものはないようで、PostgreSqlのRPC関数を利用しました。
React Routerのテスト
React Routerを今回のアプリで利用しているわけですが、コンポーネントテストで<Link>を押した際のテストがただ単純にmockを作るだけでは、実現できず、色々調べました。
最終的に、<MemoryRouter>を利用して実現できました。
コード
render(
<MemoryRouter initialEntries={['/']}>
<Provider>
<Routes>
<Route path="/" element={<Top />} />
<Route path="/cards/register" element={<CardRegister />} />
</Routes>
</Provider>
</MemoryRouter>
);
const user = UserEvent.setup();
const registerLink = screen.getByRole('link');
await user.click(registerLink);
// ページ遷移されたことをテストする。
expect(screen.getByTestId('register-page')).toBeInTheDocument();
）
TypeScriptの型・インターフェースの定義
前回の学習記録アプリの時と比べて、型やインターフェースの定義の方法を工夫しました。
新たに型やインターフェースを定義するときにextendsや交差型(&)、keyof、Recordなどを用いて、定義済みの型を利用することを意識しました。
アプリ作成を通じて成長を感じた点
まだまだ調べながらではありますが、TypeScriptの簡易的な実装については少しずつスピードは上がっているかなと思います。
また、外部API・サービスの型についての調べ方についても徐々に慣れていっているかなと思いました。
コンポーネントテストでは、要素の指定方法やユーザー操作については比較的スムーズに書けるようになってきたかなと思います。
おわりに
設計や実装スピードなど、まだまだ課題が多いと思います。しかし、アウトプットを通じてこのことを自覚できていることがプラスなのかなと思います。
また、単純にどうやって実装していくかを考えるのは楽しいなと改めて思いました。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼
https://projisou.jp