はじめに
初めまして、UX/UIデザイナーとして活動しているKikoといいます。
デザインエンジニアになることを目標に今年の1月からReactの勉強を始めました！
自分の簡単な自己紹介はこちら👇
2ヶ月（8週間）でやったこと
最初の3週間はReactで簡易的な学習アプリを作りました。正直ここまではそこまで辛くもなく、、、
ただ、後半の環境構築やCI/CDの構築に5週間もかかりました。これはターミナルコマンドって何？っていうところからのスタートだったので、かなり難しく感じました。
作業工程は以下になります。
- 学習記録アプリ作成（CSSなしの簡素なもの）
- Viteで環境構築
- supabaseでDB設定
- Firebaseでデプロイ
- Jestとreact-testing-libraryでテスト作成
- Github Actionsでパイプライン構築
迷走の記録
デプロイもテストも大変でしたが、中でもテストに一番苦しみました。
本番環境ではsupabaseの認証がうまくいくのにテスト環境ではエラーになったり（結局はVite環境での環境変数の扱いが原因でした）
Gitの理解が怪しいせいでローカルではない変な場所に環境を作り、リポジトリから作り直したり....
最後のテストがPASSしたときは本当にホッとしました。
エラーと対策
この課題を進める中で、環境変数やテストの設定に関していくつかのエラーに直面しました。
これらのエラーについては、以下の記事に詳しくまとめています。
取り組み方について
私は今回がっつりAI（chatGPT4o）を使いましたが、難易度的にAIがなければ難しかったと思います。
React専用のGPTsを作って、毎日キャンバスに学習内容をまとめていました。
しかし、技術的にもモチベーションの維持のためにもAIの補助はマストでしたが、やはり「頼りすぎは良くないから徐々に脱AIしなきゃ」という気持ちになりました。
そこで、console.logを状態変化のある場所に差し込むように習慣づけ、最低でも仮説を自分の中でまとめてからAIへ尋ねるようにしました。
そうすると少しずつAIに丸投げではなく、「自分の仮説が妥当なのか」「進め方はこれであっているのか」という抽象的な質問へシフトしていき、最終的にAIとの付き合い方も変わっていきました。（皆目検討がつかないものは仮説の洗い出しからAIに投げてOKで進めましたが）
それでも無理な場合はJISOUのエンジニアさんに質問しました。
Next Step
- JapvascriptからTypescriptに移行してリライトする
- 自分の作りたいアプリの像を詰めていく
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！