はじめに
こんにちは！
怪獣８号のアニメ制作会社、Production I.Gやないか！と最近やっと気がついた@nyakako13 です。
アニメ本編では全然気づかなくて、飛ばしていたオープニングをたまたま見て、めっちゃ攻殻機動隊っぽい！と思って調べたらProduction I.Gでしたw
今思えば、PSYCHO-PASS(サイコパス)1期〜2期を10年くらい前に見てから、アニメにハマった気がします。PSYCHO-PASSは刑事モノドラマや近未来系の映画好きでも楽しめる作品で大人にもオススメです！
さて本題です。
参加中のJISOUの課題として、React×TypeScriptでアプリを作ったので感想や気づきを残したいと思います。
作成したもの（シン・学習記録アプリ）
↑gifは【chrome capture】で収録
- 機能
- 学習記録を一覧でみることができる
- 新しい記録を登録できる
- 入力フォームのバリデーション
- 記録の編集ができる
- 記録の削除ができる
前回のアプリと機能には大差ありませんが、Chakra UIで見た目はだいぶ良くなりました！w
使用技術
-
Frontend:
- React 18.20.2
- react-hook-form 7.51.4 new!
- TypeScript 5.4.5 new!
- chakra-ui/react 2.8.2 new!
-
Backend:
- Supabase
-
Test：
- Jest 29.7
- testing-library/react 15.0.7
CI/CD：
- Github Actions
Deploy:
- Firebase Hosting
気づき
①TypeScriptの導入について
正直、まだ全然慣れませんが、開発中に型推論を活かせたり、事前にエラーがわかるのはやはり良いなと感じました。
エラーが増えまくることで、ここもう少し融通できんのか？と思う事もあったので、今後tsconfigについても勉強していきたいです。
②react-hook-formの導入について
バリデーションが楽！
レンダリング回数を減らせる！
reactでフォーム使うなら必須だなと感じました。
まだまだ機能をつかいこなせていないので、引き続き活用していきたいです。
③chakra-uiの導入について
簡単にいい感じのデザインを当てられるので、デザインに時間や労力をかけたくない時は良いなと思いました。
でも良いことばかりではなく、他のライブラリとの関係でいろいろ面倒になることも・・・
今回はモーダルを開いたときにインプット要素にフォーカスを当てたかったのがうまくいきませんでした。（フォーカス自体はできるのですが、記録編集時デフォルト値をsetしようとすると競合してしまう）
時間がかかりそうだったので今回は断念しました。またチャレンジしたいです。
あと、chakraに限った話ではないかもですが、importがかなり長くなるのが、ちょっとイマイチ・・・
今後改善したい点
今回の開発ではMVPにはそこまで時間がかからなかったのですが、細かい部分に時間をかけてしまうことが何度かありました。
次からは全体、フェーズ毎に開発期間を設定して、「MVP以外の内容は時間的に余裕があれば取り組む」というスタンスでやっていこうと思います。
おわりに
よかったらX(@nyakako13)もフォローしてもらえると嬉しいです。
Qiita100投稿まで残り86！
未経験や浅経験、厳しいと言われている年代でエンジニアへの転職活動されている方、負けずにがんばりましょう！！
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
実践的なカリキュラムで、あなたのエンジニアとしてのキャリアを最短で飛躍させましょう！
興味のある方は、ぜひホームページからお気軽にカウンセリングをお申し込みください！
▼▼▼