背景
以前からReactの学習マイルストーンとして、学習記録アプリを作成していました。
今回は別のアプリケーションを作成しました。
それが名刺アプリです。以下が作成したアプリのデモになります
ユーザーはユーザーid, 名前、自己紹介や好きな技術などを登録する事ができます。この登録内容はSupabase上に登録され、Useridにより検索する事が可能です。
検索結果としては、登録内容に基づいて、デジタル名刺が表示されるというものです。
使用した技術スタックは学習記録アプリの時と大きく異なる訳ではなく、次のような構造になっています。インターフェースはChakra UI v3により実装されています。
名刺アプリ開発を通して学んだこと
今回、実装する中で、この名刺アプリにはWebアプリ開発における様々な重要な要素がカバーされている事に気が付きました。以下にいくつかを列挙します。
画面遷移
まず始めに、画面遷移です。Webアプリケーションでは検索ボックスにキーワードを入れて、検索結果の画面に遷移したり、今回のように登録アイコンからユーザー登録が出来たりと、複数の画面遷移が必ず生じます。
この名刺アプリにはHome画面からRegisterの画面や特定のユーザーidの検索結果などRoutingの設定が行われています。
Many to Manyの処理
今回、ユーザーとスキルとの関係はMany to Many(多対多)の関係にあります。このような多対多の状況というのは一般的なWebアプリケーションでも頻繁に起きうる状況であり、課題の中で、この対応関係を適切に管理する為に中間テーブル(user_skill)を作成しています。
デザインパターンの使用
この名刺アプリではGitHubのidからGitHubのurlを作成するというようなFactoryパターンを使用しています。
私は本業ではデータサイエンティストとして機械学習パイプラインの実装やABテストの検証、内製ツールの開発などを行っているのですが、FactoryパターンやStrategryパターンはよく使用しています。例えば、機械学習パイプラインも抽象的なベースのパイプラインを実装しておいて、実際のパイプラインはサービスごとの設定に基づいて、Factoryで作るというような事をやっていますし、サービスごとのSQLの集計にはに共通のインタフェースを持っておいて、SQLの中身はStrategyパターンで作るみたいなことをやっています。
このようなデザインパターンを使っていくことで、保守性や可読性の高いコードを実装する事が出来、実用上も非常に重要です。
ジョブの定期実行
今回の名刺アプリでは朝6時に特定のジョブがGitHub Actionsから定期実行されるように開発しています。これも本番稼働していてバッチ処理で動くようなシステムの場合だと非常によくある事であり、この内容も今回の実装に盛り込まれているわけです。
普段の本業ではこのような定期実行されるジョブの管理はAirFlowで行っています。ジョブに依存関係が無いような簡易的なWebアプリケーションであれば、GitHub Actionsは迅速に設定でき、非常に便利だと思いました。
網羅的なテストとMockの作成
今回の開発ではVitestを使用して、各コンポーネント毎に様々なテストを実施しています。例えば、名刺のカードコンポーネントであれば、そもそも検索フォームが表示されているという所から始まり、IDを入力して、検索ボタンを押すと該当のcardのページに遷移する、IDが空の状態だとエラーを出すなど、実際のユースケースに応じたテストを実施しています。
この時に、NavigateやSupabaseのMockなどが必要になるわけで、これらのMockを作る過程だけでも非常に学びが有ったと思います。
まとめ
名刺アプリというアプリ開発要素を分解したり、抽象化してあげると、それは単なる名刺アプリではなく、実は他のWebアプリケーションでもそのまま使いまわせる多くの開発要素を含んだマイルストーンなんだなと思いました。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼