はじめに
デジタル名刺を登録しシェアできるアプリの開発を行いました。
自己紹介やGitHub,Qiita,Xへのリンクを登録・閲覧することが可能です。
今回の開発では、中間テーブルを用いた多対多のリレーションやReact Routerを用いたルーティング、レコードの登録・削除のトランザクション処理、GitHub Actionsのクーロンジョブで定期的にテーブルのレコードを削除するなど新しいスキルの獲得にも挑戦しました。
今回開発したアプリと内容をご紹介します。
開発の流れ
- React + TypeScript + Viteでプロジェクトを作成
- Supabaseに中間テーブルを用いた多対多のリレーションテーブルを作成
- アプリの機能を作成し、Chakra UI V3でUIをスタイリング
- Jest + React Testing LibraryでCIを作成
- Firebaseでデプロイ + GitHub ActionsでCICDパイプラインを作成
完成したアプリ
TOPページ
新規名刺登録画面
※ React Hook Formを使用しており、必須項目にはバリデーションがかかります
名刺詳細ページ
- TOPページからIDを入力して閲覧可能
- GitHubなどの各リンクへ遷移可能
GitHub Actionsのクーロンジョブを設定し、毎朝6時に前日の名刺データを削除する設定にしています。
開発で苦労した・学んだ点
以前TODOアプリを作成した時の感想とも重複していますが、Chakra UI V3がまだ安定版ではないので、buildやJestのテストを実行した際に型のエラーが多発した点が最も苦労した気がします。
型エラーが出ないように型の定義を合わせたり、どうしても解決できない箇所は型チェックを無視させるその場しのぎの対応になってしまいました。
次回のアプリ開発では現時点の安定版であるChakra UI V2を使おうと思いました。
DBはSupabaseを使いましたが、Supabaseで中間テーブルを用いた多対多の設定をGUI上で行ったり、トランザクション処理の際はSupabase上でPostgreSQLの構文を使ってトランザクションのメソッドを作成しフロントエンドで呼び出すなどの処理の仕方を覚えることが出来て、バックエンドの知識も増やすことが出来ました。
React Routerのルーティングを使うことでページ遷移が出来てより実用的なアプリになったと思います。
GitHub Actionsのクーロンでバッチファイルを実行させる設定では、ts-nodeではなくtsxでTypeScriptのバッチファイルを実行させたり、環境変数の読み込ませ方にも注意したりと色々と知識を増やすことが出来ました。
まとめ
以前開発したTODOアプリでは単一のページを使ったアプリでしたが、今回はルーティングや多対多のリレーションテーブルを使うことでより実用的なアプリを開発することが出来て良かったです。
新しい技術を使うことにより、未知のエラーに遭遇することも増えましたが自身の引き出しを増やしているんだと思ってこれからも頑張っていきたいです。
次の開発では、よりユーザーの課題を解決できるようなアプリ作成を目標に挑戦していきたいです。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼