はじめに
自分のスキルや情報を共有できるデジタル名刺アプリを開発しました。
その感想を書いていきます。
作成したアプリの概要
今回作成したのは、個人のプロフィールやスキルセットをオンラインで簡単に共有できる「デジタル名刺アプリ」です。主な機能は以下の通りです。
新規名刺登録ページ
ユーザー名、自己紹介、扱える技術スタック、SNSリンク（GitHub, X, Qiita）などを登録し、自分だけのデジタル名刺を作成できます。
名刺検索ページ
トップページからIDを入力して、特定の名刺を検索できます。
検索された名刺
各ユーザーに割り当てられたユニークなID（URL）にアクセスすることで、その人の名刺を閲覧できます。
使用技術スタック
モダンなフロントエンド開発の技術を中心に構築しました。
| カテゴリ | 技術 |
|---|---|
| フロントエンド | React 19 / TypeScript / Vite |
| UIフレームワーク | Chakra UI v3 |
| ルーティング | React Router |
| フォーム管理 | react-hook-form |
| バックエンド/DB | Supabase |
| テスト | Vitest / React Testing Library |
| CI/CD | GitHub Actions |
| ホスティング | Firebase Hosting |
何をやったのか
開発の過程で、以下の実装を行いました。
- プロジェクトセットアップ: Vite + React + TypeScript の環境を構築しました。ESLintによる静的解析も導入し、コードの品質を保つようにしました。
- UIコンポーネント設計: Chakra UI を利用して、デザインシステムを構築しました。
-
ページ作成とルーティング:
TopPage、CardPage、RegisterCardPageの3つの主要ページを作成し、React Router で各ページへのルーティングを実装しました。 -
データベース連携: Supabase をバックエンドとして採用し、ユーザー情報やスキル情報を管理するテーブル（
users,skills,user_skill）を設計しました。supabaseClient.tsとsupabaseFunctions.tsにSupabaseとの通信処理をまとめています。 - 名刺登録機能の実装: React Hook Form を用いて、入力フォームとバリデーションを効率的に実装しました。
- テストの実装: Vitest と React Testing Library を用いて、各ページコンポーネントの単体テストを作成し、品質保証を行いました。
- デプロイ: Firebase Hosting を利用して、アプリケーションをデプロイしました。firebase.json にSPAとして動作させるための設定を記述しています。
大変だったこと・気づき
エラーの解消や実装のヒントを得るために生成AIも活用しましたが、最初からAIに聞くではなく、なるべく公式ドキュメントや、記事を見てエラーを解消していきました。その分時間はかかりましたが、今までAIを使って理解したつもりになっていた実装部分もAIを使わずに実装をしないことで、なぜこうすべきかの理解が深まりました。
また、テストコードで最初は何をどこまでテストすれば良いのかよく分かりませんでしたが、やっていく中でだいぶ理解度も上がってきたと思います。
おわりに
コードでの技術部分の理解は深まりました。今後は、実装を始める前にコンポーネント構造やデータフローなどの設計部分もしっかりと作り込み、「より改修しやすく、将来的にスケールしやすい綺麗な設計」を常に意識できるエンジニアを目指して、開発を続けていきます！
参考
- react-router-domドキュメント
- ChakraUI 公式ドキュメント
- supabase公式ドキュメント
- ts-node公式
- その他参考記事
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼