はじめに
Web上で情報の表示ができる名刺アプリを今回Reactの勉強のため、開発したのでご紹介です。
作ったアプリ
| 名刺表示 | 新規登録 |
|---|---|
 |
 |
使った技術
- React
- vite
- Typescript
- Jest
- chakra-ui
- supabase
- react-hook-form
- react-router-dom
- firebase
- githubActions
- githubActionsでcron処理
工夫したところ、苦労したところ
- できるだけ共通ファイルをimportする形にして、コードの記載量を減らしたこと
typeをできるだけ一つのファイルとしたこと
カスタムフックを利用してsupabaseの通信を一つのファイルにまとめたこと - DOMPurify.sanitaizeを利用して、自己紹介のフォームでいれることのできるタグを制限したこと
- 自動テストの書き方には苦労しました。。。awaitの付け忘れで処理を待てていなかったり、、DomPurify.sanitaizeのimportエラーがでたり
このアプリを通じて成長できたところ
- githubActionsでcron設定を行いバッチ処理ができることを初めて知れたこと
- Jestの書き方に徐々に慣れてきていること
- typescriptの書き方に慣れることができたこと
- カスタムフックの使い方が身についてきたこと
おわりに
一番勉強になることはやはり、アプリを作ることだなと実感できました。
今回はJISOUのコミュニティで出されたアプリを作る際の仕様を課題に書いてあったので、それを自分で調べて実装していくことでいろいろなことを新しく学ぶことができました。
Jest・typescriptの型定義など徐々に慣れてきたので、今後はUI/UXの視点もしっかり考えながらアプリ開発を行いたいと思います
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからお願いします:下向き指差し:
https://projisou.jp