カスタム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 ...
続きを読むReact Router v6：画面遷移はこれで全部できる Reactでアプリを作っていくと、「ボタンを押して別画面に移動したい」となる。そのとき登場するのがReact Router。中でもv6は、書き方がかなりシンプル ...
続きを読むPropsとコンポーネント分割：Reactは部品の世界 Reactの強みのひとつは「部品化（コンポーネント化）」が自然にできること。そしてその部品にデータを渡す仕組みが「Props（プロップス）」。 今回のテーマはこの2 ...
続きを読む