はじめに
今回、デジタル名刺アプリを開発しました。
開発中の気づきや躓いたことについて共有させていただきます。
技術やバージョン
react: 19.0.0
react-router: 7.3.0
jest: 29.7.0
chakra ui v2
supabase
Firebase
GigHub
気づきや躓いたポイント
これまでの開発で行っていた環境構築や、Firebase・supabaseの設定、CI/CD構築は忘れている部分もありましたが調べれば実装は問題ありませんでした。
JISOUに入学するまでCI/CDというものを知らなかったしやったこともなかった自分としてはこれが当たり前の設定である感覚になっている点も成長を感じる部分でした。
今回初めてsupabaseで中間テーブルを作成しました。少々時間がかかりましたが、こちらも調べれば設定することができました。Ruby on Railsのコードで設定した経験はありましたが、SupabaseのようなBaasでの設定は初めてで、お手軽に設定できることを知ることができたこともよかったです。
そしてアプリ開発中childrenやpropsの理解が不十分だと感じたため、再度Udemyハンズオンを一通り行う、インプットに戻りました。
最初にインプットした時は何となくの理解で終わっていた状態でしたが、children、propsに対する理解が確かなものになりました。そのほかのハンズオンでの実装も前回のインプットの時には、あいまいな理解で終了していた箇所が、より理解できていることを感じました。また、ハンズオンしながらドキュメントと照らし合わせ、動画通りの実装だけではなく、自分で様々試しながらハンズオンを行ったお陰で時間が掛かりましたが、更に実のある内容になり、ただ真似るだけのハンズオンよりも達成感のあるインプットになることも体感できました。
個人的に苦手としている同じ名称の変数名シリーズ。プロパティ名と変数名が同じことで、この変数名はどこからきてるのかわからなくなり、いつも「同じ名称やめてほしいなぁ」という状況だったものも、どこからきている変数なのか予測・理解ができるようになっている感覚も今までなかったことです。
今回の経験で、インプットする場合のインプット量、その後のアウトプットの必要性、そして理解不十分な箇所の再度のインプットでより理解が深まることを学びました。
臣さんの投稿でも言っていることですが、私たちは普段の生活の中でアウトプット主義で生活していることが多く、やりたいことがあったらまず行動してみて分からなかったら調べ（インプット）、実行し、検証、また分からなかったら調べ（インプット）、実行・検証の繰り返しを行って学んできたことをプログラミングで体験できたことは大きな収穫でした。
今回クラス、インスタンス、コンストラクター、オブジェクトについても再度復習し以前より理解することができ、より理解が深まりました。
インプットとアウトプットの繰り返しを継続することで理解が深まると実感できました。
今回もjestのテストで詰まりました。
前回のアプリ開発の時も同じくここで時間がかかりました。
過去の先輩方の投稿やAIに助けてもらいました。ドキュメントと投稿内容・AIの回答を照らし合わせ理解を深めながら進めました。
初めてルーティングのテストを行いました。ボタンの遷移テストは問題ありませんでしたが、Linkのテストで躓きmemoryRouterを活用できることを学べたのも収穫でした。
今回、AIは臣さんお勧めのperplexityを使用してみました。無料でもヒントをもらうには十分の性能でした。
chatGPT解約しようかな。
最初はチェックボックスもChakra uiのコンポーネントを使用して実装しました。しかし、Jestのテストでエラー。こちら解決できず、また見た目も大きく変わらないことから、inputタグに切り替えて対応しました。
今回の経験で、テストとの相性も考えてcssライブラリは選定した方がよい気がしました。
最後にstyleですが、優先順位を意識して文字は見やすく、違和感のない上下のフォームの隙間も意識しました。
おわりに
今回は大なり小なり沢山の躓きポイントがあり、そのたびに学びがありました。逆に躓かないと学びがありませんので、そういうポイントに出会ったらチャンス到来の感覚でアプリ開発できました。
これからも新しい技術に積極的にチャレンジしてインプットとアウトプットを繰り返しながら、よりスキルアップを図り自分の作りたいアプリの完成までの道筋が予測できるレベルになれるように、これからも続けていきます。
