現在参加しているプログラミングスクール「JISOU」で、課題としてReactやtypescript、chakraUIを用いた学習記録アプリを作成しました。
失敗や反省を踏まえ、今回の記事では初めての技術に触れながら自分でアプリを作成する上での失敗について共有します。
作成したもの
学習記録のテーブルに対して、基本的なCRUD操作を行います。
今回は主にTypeScriptの学習として作成しました。
使用した技術
使用した技術としては以下の通りです。
- React
- typescript ⭐︎新規学習
- vite
- jest
- React-testing-liblaly
- firebase
- chakraUI
めちゃめちゃ失敗した話
今回の開発については８月中を目標にしていましたが、実際には間に合いませんでした。
失敗した事についてのお話をここに書いていきたいと思います。
1. 公式ドキュメントを読み込まなかった
これで２週間くらい無駄にしました。
まず今回詰まった内容としては、Jestというライブラリのモック機能が上手く動作しませんでした。
（参考までに、こういうところで詰まっていました。）
詰まっていた理由
Jestのモックについては以前も触っていたため特に問題ないと油断していましたが、記法やJestの仕組みについて理解できていませんでした。
書き方について理解できているわけではないのに、公式ドキュメントを見もせず色々と間違った書き方を試していました。
挙句の果てにAIへ丸投げしましたが、結局上手くいきませんでした。
解決方法
コーチの方に問題解決の方法についてお伺いしました。
その際に調査が足りていないというご指摘を頂き、解決手順についてご教示を頂きました。
具体的には「問題を切り分ける」事についての重要性を教わりました。
（ex. 環境構築が間違っているのか、テストコードが間違っているのかなど……）
調査の結果、コードの書き方に間違いがあること分かりました。（詳細は記事を参照）
2. AIを使わない
このタイトルを書くとこんな事を言われてしまうかもしれません。
「2024年にいまだにAI触ってないの？」
今までの私はあまりAIを信頼していなかったので、自分の手で書いた物が一番だと考えていました。
ですが、JISOUのメンバーがAIを活用しているのを見たのがきっかけで本格的に触りました。
AIを触ってからの変化
AIを使ってのコーディングは、どうしても初心者が理解していないコードをコピペするだけのイメージがあり倦厭していました。
実際にプロンプトを活用してみると、実際に知識不足で理解できないコードを吐き出されて難儀しました。
ですが、「なぜそのコードで動くのか？本当に正しいのか？」と疑って検索したりやドキュメントを読み込んだりで裏を取る事で、自分の知識が増えていきました。
また、最近のAIは性能が良いので吐き出されるコードの質が良いです。
すっかり魅力に取りつかれてClaudeの有料プランを契約しました、めっちゃ性能いいです。
良かったこと
悪かった事ばかり書くのも微妙なので、良かった事も書きます。
フックがちょっとわかった
Reactの概念が少しだけわかってきました。
特に関数型プログラミングという概念を今まで理解していなかったので、関数コンポーネントやフック等が何となくレベルで分かってきました。
習慣的に勉強出来た
勉強する習慣は大事です。
特に、詰まって投げてしまうと（私の場合は）やらなくなってしまいますが、JISOUのメンバーやコーチのおかけで勉強を継続できました。
最後に
個人で開発を行い新しい技術を触るというのは、どうしても躓く事が多かったです。
特に「問題を切り分けて調査する」という経験は、フロント開発だけでなく、エンジニアやそれ以外で仕事を行う上でも大切な観点でした。
20代前半をSESで働いていると、どうしても「上司から降りてきた仕事をする」だけの仕事が多いですが、そこでは積めない貴重な経験を積めました。
これからも個人開発でこういった学びを得たいです。
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからライン登録お願いします👇