はじめに
Reactの学習の一環でデジタル名刺アプリの作成をしました。
Reactを学んできたものをすべて使って作ったようなイメージでした。
開発環境（使用技術）
- Vite + React + TypeScript（
- Chakra UI v3系
- Supabase
- Vitest
# 作成物
今回作成したデジタル名刺アプリは以下のgit hubにあります。
Git Hub デジタル名刺アプリ
振り返り
CI/CDの理解
今回一番学びになったのは、CI/CDの部分です。複数ページにわたってのテスト、JestからVitestへの変更...etc、新しいことを学びました。
途中作っているうちにわからなくなり、一度、テスト関係のファイルなどを全部消して一からやり直したのもいい思い出です。これのおかげで理解が深まったと思います。では 「なぜ、自分で書いていてわからなくなったのか？」 これはAI（Chat gpt）の使い方に誤りがありました。詳しくは次に書いていきたいと思います。
他にもテスト関係ではモックについて学びました。これもかなり理解が深まりました。当たり前のことなのですが、本番のDBを使ってテストを行なってしまうというのは、かなりリスキーです。学習のうちはいいですが、仕事や案件であれば、不要な操作が入ってしまい大事故になりかねないです。モックが大事かがわかりました。
AI(Chatgpt)との向き合い方
CI/CDの理解のところで、
**「なぜ、自分で書いていてわからなくなったのか？」**これはAI（Chat gpt）の使い方に誤りがありました。
と、書きました。これは何が間違いだったのか、
結論から 鵜呑みにしすぎ でした。
ハルシネーションが起きてたわけではないと思います。私の気持ち的に「早くこのアプリを作らなきゃ」という焦りから、とりあえずパッケージをインストール、config.jsonを書き換えるなどを行なって結果、エラーが解決したら次のエラーが、解決したら戻ってエラーが出てなどのループでした。
これは自分の戒めとして、
「必ず、原因は何で、その解決策はどういう影響を及ぼすのか」 を調べ理解することが大事だと！！
結果、今回思ったことは、「AIは、あくまでツールであって、エラーを解決してくれる人ではない」ということ。そして、「AIを使いエラーを解決するには自分の理解も大切」ということでした。
学び足りないこと
もう少し学びが必要だなと思ったのはビルドの仕方など、Reactの仕組みについてです。TypeScriptなどが入ってきたり、次に学ぶNext.jsが入ってきたりすると混乱しそうな予感がします。また、自分なりに理解したらQiitaの記事にしたいと思います。
終わりに
今回のアプリ作成は、自分なりに学びが多かったなと思います。成長を実感できたなと思います。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼