🏃
フロントエンド初心者が勉強を兼ねて簡易ポケモン図鑑を作ってる vol.2
はじめに
これの続きです
相変わらず初心者なのでお手柔らかに
成果物
前回からの成長
ディレクトリ構成更新
新しいコンポーネントやhooks, ディレクトリやファイルが増えました
src
├── App.css
├── App.test.tsx
├── App.tsx
├── components
│ ├── CardUI.tsx
│ ├── Form ← コンポーネント(フォーム)
│ │ └── Auth
│ │ ├── LoginForm.tsx
│ │ └── SignupForm.tsx
│ ├── Header.tsx
│ ├── ProfileButton.tsx
│ └── SelectRegionButton.tsx ← コンポーネント(ボタン)
├── hooks
│ ├── context
│ │ └── AuthContext.tsx ← コンテクスト(React Context)
│ ├── firebase
│ │ └── auth.ts ← カスタムフック(firebaseの認証ロジック)
│ ├── get-pokemon.ts
│ ├── get-pokemons.ts
│ └── select-region.ts
├── index.css
├── index.tsx
├── logo.svg
├── pages
│ ├── auth
│ │ ├── Login.tsx
│ │ └── Signup.tsx
│ └── pokemon
│ ├── Detail.tsx
│ └── Index.tsx
├── react-app-env.d.ts
├── reportWebVitals.ts
├── schemas
│ └── auth
│ └── signUpSchema.ts ← バリデーションスキーマ
├── setupTests.ts
└── types
└── Pokemon.ts
コンポーネントへ分割していく
ヘッダー部分、プロフィールボタン、地方選択ボタン
Prettierの導入
いちいち自分でフォーマットを気にしていると辛かったので導入。これで可読性が上がりました。
機能の追加/拡張
対応地方を追加
ジョウト地方のポケモンも表示され251匹に増えました
フィルタリング機能を実装してみた
ボタンでフィルタリングできます。カントー地方だけのポケモンだけ表示が可能です。
今はどれを選んでいるのかわからないUIなのでこれは改善の余地ありです
超簡易な認証機能の実装
Firebase Authenticationを使いました
- 新規登録
- ログイン
は可能です
パスワードリセット機能はまだありませんので次の課題です
バリデーションの導入
新規登録フォームにバリデーションを導入しました。使ったライブラリはZodとReact Hook Formです
Zod
React Hook Form
公式ドキュメントに書き方は紹介されています
今後どうする予定か
1.認証機能を活かしてパーソナルな機能を作ってみよう
簡易なWebAPIを立ててパーソナルな機能を作りたい
認証認可はFirebase Authenticationの検証を使っていきたい(Firebase Admin SDKの導入)
追加したい機能例
- プロフィールページの導入
- お気に入りポケモンの登録
- メール通知機能(何を通知するかは決まっていない...)
2.今度こそ自動テストを導入
Jest, React Testing Libraryが候補です
3.Biomeを試したい
一旦Prettierを導入しましたが、その後Biomeという存在を知りました。個人的に興味のあるツールですのでPrettierから移行してみたいところです
まとめ
少しづつですが、できることは確実に？増えてる気がします
もっと手に馴染ませていきつつテストコードの書き方やフォーマッターやリンターなどフロントエンド開発を支えるツールにも詳しくなりたい
実務でもフロントエンド領域をもっと任せていただけるよう無理のないペースで精進続けていきます
Discussion