フロントエンド初心者が勉強を兼ねて簡易ポケモン図鑑を作った vol.3
はじめに
これの続きです
まだまだ初心者で野良フロントエンドエンジニアなのでお手柔らかに
成果物
前回からの成長
ディレクトリ構成
新しいディレクトリが誕生。また、元々のコードからファイルを分離
src
├── App.css
├── App.test.tsx
├── App.tsx
├── components
│ ├── CardUI.tsx
│ ├── Form
│ │ └── Auth
│ │ ├── LoginForm.tsx
│ │ ├── PasswordResetForm.tsx ← パスワードリセットフォーム
│ │ └── SignupForm.tsx
│ ├── Header.tsx
│ ├── ProfileButton.tsx
│ └── SelectRegionButton.tsx
├── constants
│ └── firebase.ts
├── hooks
│ ├── context
│ │ └── AuthContext.tsx
│ ├── firebase
│ │ └── auth.ts
│ ├── get-pokemon.ts
│ ├── get-pokemons.ts
│ ├── lang.ts ← 多言語操作のカスタムhook
│ └── select-region.ts
├── index.css
├── index.tsx
├── locales ← 多言語対応用
│ ├── en
│ │ └── lang.json
│ ├── i18n.ts
│ └── jp
│ └── lang.json
├── logo.svg
├── pages
│ ├── Home.tsx
│ ├── auth
│ │ ├── Login.tsx
│ │ ├── PasswordReset.tsx ← パスワードリセットページ
│ │ └── Signup.tsx
│ └── pokemon
│ ├── Detail.tsx
│ └── Index.tsx
├── react-app-env.d.ts
├── reportWebVitals.ts
├── schemas
│ └── auth
│ ├── passwordResetSchema.ts ← パスワードリセット時のバリデーション
│ └── signUpSchema.ts
├── setupTests.ts
└── types
├── Auth.ts ← 認証で使う型を分離
└── Pokemon.ts
機能面
ホウエン、シンオウを追加
追加自体は簡単である。ここからどう展開していくかをそろそろ考えていきたいところ
機能するパスワードリセット画面ができたよ
ひとまずパスワードリセットができます。パスワードリセットというよりパスワード変更の方が正しいかもしれません。なぜならパスワードリセット機能なのに現在のパスワードを知らないと変更できないというイマイチな状態だからです。今後改善します
ポケモンの位置ズレを修正
Before
After
スタイルを修正。何でもかんでもChakraUIのStackを使っていたが、Flexの方が便利な気がしてきました。
多言語対応したよ
react-i18nextを導入しました
react-i18next
これで日本語でポケモンの名前が見れます
参考にした記事
// i18n
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";
// 翻訳リソースを読み込む
import translationJP from "./jp/lang.json";
import translationEN from "./en/lang.json";
// i18nの初期化
i18n
.use(initReactI18next) // react-i18nextを初期化
.use(LanguageDetector) // 言語検出を初期化
.init({
// 翻訳リソース
resources: {
jp: {
translation: translationJP,
},
en: {
translation: translationEN,
},
},
// フォールバック言語
fallbackLng: "en",
// デバッグモード
debug: true,
// リソースをHTMLでエスケープするかどうか
interpolation: {
escapeValue: false,
},
});
export default i18n;
今後の予定
1.認証機能を活かしてパーソナルな機能を作って行きたいのだが...
「簡易なWebAPIを立ててパーソナルな機能を作りたい」
これは変わらないのですが、作り方を少し模索している
認証をFirebaseのままいくのか？
AWSサービスの導入？ or また別のもの？
AWSサービスを使えば1.Cognito + 2.App Sync + 3.Lambda + 4.API Gateway + 5.DynamoDBを組み合わせてお手軽WebAPIを作成できて認証機能も提供していただける。しかしCognitoにするということは認証部分を組み直すことを意味します。悩みどころです。
2.パスワードリセットが辛い
現在のパスワードを知らないといけない構造になってる
パスワードリセットというよりパスワード変更の方が正しいかもしれません。なぜならパスワードリセット機能なのに現在のパスワードを知らないと変更できないというイマイチな状態
メール飛ばしてパスワードリセット画面へ遷移する形の方が良い
3.自動テストを導入を進める
そろそろ自動テストが欲しい
hooksから書くのかUIから書くのか考えた。「UIは変わりやすいのでhooksからテストを書いていこう」という結論を今は出した
4.アクセシビリティの配慮がない
現状、ボタンの色が統一されている。そのため視覚的な区別をつけるのが難しくなってしまっている。
アクセシビリティの観点を取り入れて使いやすいアプリケーションにしていく。時間を見つけてアクセシビリティを勉強したい
アクセシビリティで参考になりそうな記事
5.状態管理がおかしい
何ヶ所かstateが想定通りに動いてくれない(ページ遷移すると状態がリセットされてしまうようです)
1つずつ直していく
6.Biomeを本当に入れるか？
Prettierで困ってないため導入する理由を見出せていない。引き続き様子を見て導入を検討
まとめ
プロジェクトが少しづつ大きくなってきた。やりたいこともだんだん細かくなってきた。状態管理の制御やテストコードの知識を拡充させながら初級者を脱していきたい
TypeScriptやReact.jsの抵抗は無くなってきたが、HTMLやCSSはいまだに慣れない。また、アクセシビリティやUIもまるでわからないことがわかってきた。プログラミング以外の部分にも興味を持っていかないと次のステージにはいけなそう
Discussion