React 【入門編】 reducer関数における純粋関数としての実装ルール – React実践ガイド
こんにちは！Reactの学習、楽しく進めていますか？画面を思い通りに動かせるようになってくると本当にワクワクしますが、同時に「あれ？ 画面の値が変わらない…？」「さっきまで動いていたのに、なぜかバグる…」なんて壁にぶつかることも、この世界で...
React
React React 【入門編】 アクションオブジェクトの設計とペイロードの受け渡し – React実践ガイド
こんにちは！フロントエンドの現場を渡り歩いてきたチーフアーキテクトの私です。Reactを触り始めると、避けて通れないのが「状態管理（State Management）」ですよね。特に`useState`を使って画面のデータをゴニョゴニョいじ...
React 【入門編】 useReducerの基本構文とdispatchの役割 – React実践ガイド
こんにちは！Reactの学習、毎日お疲れ様です。「よし、useStateを使ってカウンターアプリが作れるようになったぞ！」と意気込んだのも束の間、「あれ？なんか状態が複雑になりすぎて、どこで値を更新してるのか分かんなくなっちゃった……」「入...
React 【入門編】 React Testing Libraryによる状態更新のテスト – React実践ガイド
こんにちは！フロントエンドの現場を渡り歩いてきた、チーフアーキテクトの私です。Reactを学び始めて、`useState`で画面の数字が変わったり、入力した文字が反映されたりするようになったときって、なんだか魔法みたいでワクワクしますよね。...
React 【入門編】 React DevToolsによる状態のデバッグ – React実践ガイド
こんにちは！Reactの学習、楽しく進めていますか？「画面に表示されるはずのデータが変わらない…」「え、なんで今のタイミングでその値になってないの！？」Reactを触り始めると、誰もが一度はこんな「状態（State）のミステリー」に頭を抱え...
React 【入門編】 propsからstateへの同期パターン – React実践ガイド
こんにちは！Reactの学習、楽しく進めていますか？画面がスイスイ動くようになってくると、「おっ、私にもできるぞ！」というワクワク感がたまりませんよね。でも、Reactを触り始めて多くの人が「あれ……？」と最初に立ち止まる、ちょっとした魔物...
React 【入門編】 非同期イベントハンドラ内での状態更新 – React実践ガイド
こんにちは！Reactの学習、楽しく進められていますか？画面がスイスイ動く魔法のようなアプリが作れる一方で、触れば触るほど「あれ？なんだか画面の表示が古いまま変わらないぞ……？」とか、「コンソールに変なエラーが出て赤くなっちゃった！」という...
React 【入門編】 key属性を利用した状態のリセット – React実践ガイド
こんにちは！フロントエンドの現場を渡り歩いているチーフアーキテクトです。日々、多くの開発者から「Reactの状態管理でどうしてもハマってしまう……」という相談を受けます。Reactの `useState`、本当に便利ですよね。画面のデータを...
React 【入門編】 useStateとReact.memoの連携 – React実践ガイド
こんにちは！Reactの学習、楽しく進められていますか？画面のボタンを押したら数字が増えたり、文字がパッと切り替わったりする仕組みが作れるようになると、「おっ、自分、すごいアプリを作ってるぞ！」ってワクワクしてきますよね。でも、少しずつ複雑...
React 【入門編】 useStateとuseReducerの使い分け基準 – React実践ガイド
こんにちは！Reactの世界へようこそ。チーフアーキテクトの私です。Reactを触り始めて最初に覚える魔法のフック、それが `useState` ですよね。「画面のデータを保持して、変わったら再描画してくれるなんて便利！」と、最初は誰もが感...