エラーハンドリング：失敗しても落ちないアプリを作る Reactアプリを作っていて、APIエラーで画面が真っ白になったり、原因不明のクラッシュが発生したりしたことはないだろうか？そんなときに必要なのが、適切なエラーハンドリ ...
続きを読むカスタムHooks（useXXX）：ロジックを使い回す最強の武器 Reactアプリがある程度複雑になってくると、「似たようなロジックがあちこちに出てくる」。そういうときに活躍するのがカスタムフック。 使い回せて、読みやす ...
続きを読むlocalStorage連携：状態を保存しても消えないアプリを作る Reactで作ったアプリ、ページをリロードすると全部初期化されてしまう。これでは「Todoアプリで入力したタスクが消える」「ログイン状態が保持できない」 ...
続きを読むContext API / Zustand：アプリ全体で状態を共有する方法 Reactアプリが少しずつ大きくなってくると、「この値、どの画面でも使いたい」「ログインユーザーを全画面で保持したい」みたいなニーズが出てくる。 ...
続きを読むStorybook導入：UIを見える化して再利用しやすくする Reactでコンポーネントを増やしていくと、「この部品どう使うんだっけ？」「見た目崩れてない？」みたいな問題が出てくる。Storybookを導入すると、それが ...
続きを読むReact Hook Form： Reactでフォームを扱おうとすると、毎回useStateで状態を管理して、バリデーションを書いて、エラー表示して…これ、地味に手間。React Hook Form（略：RHF）を使えば ...
続きを読むアトミックデザインと構成ルール：ReactのUI設計を整える Reactでの開発が進むにつれて、「どこに何を置くべきか分からない問題」が出てくる。特にチーム開発になると、誰が書いたどのコンポーネントを使えばいいのか混乱す ...
続きを読むuseCallback / useMemo：無駄な再レンダリングを減らす武器たち Reactアプリが大きくなってくると気になってくるのが「再レンダリングの無駄」。useCallbackとuseMemoは、処理の無駄を減ら ...
続きを読むMUI（Material UI）でUIは一気に整う Reactでアプリを作ってると、「見た目がショボい」と感じるタイミングが必ず来る。そんなときの救世主が MUI（Material UI）。GoogleのMaterial ...
続きを読む