はじめに アプリの構成 スライスの作成 features/posts/postsSlice.js ストアに作成したスライスを追加する リスト表示 features/posts/PostsList.js コンポーネントの流用 - リスト App.js Fragmentの必要有無について 複数の子要素を返すコンポーネントで…

はじめに useDispatch Reduxストアで管理するべき状態 例 StoreのProvider コンポーネント 参考 続く… コメント はじめに Reduxの公式ドキュメントに沿って概要を押さえつつ、気になった部分を深掘って整理しています。 本記事では 、Reduxのサンプルアプリ…

はじめに Selector useSelector Stateの中身 Immer 例 参考 続く… コメント はじめに Reduxの公式ドキュメントに沿って概要を押さえつつ、気になった部分を深掘って整理しています。 本記事では 、Reduxのサンプルアプリを通してuseSelectorとImmerの概要に…

はじめに Redux サンプルアプリのディレクトリ構成 app/store.js features/counter/counterSlice.js Reduxのルール 参考 続く… コメント はじめに Reduxの公式ドキュメントに沿って概要を押さえつつ、気になった部分を深掘って整理しています。 本記事では …

はじめに Reduxのサンプルアプリを起動 ソース Devtools Storeリスト Actionタブ Diffタブ Trace 参考 続く… コメント はじめに Reduxの公式ドキュメントに沿って概要を押さえつつ、気になった部分を深掘って整理しています。 本記事では 、Reduxのサンプル…

はじめに Actions type payload Action Creators Reducers Reducersのルール Store dispatch Selectors データの再利用 参考 続く… コメント はじめに Reduxの公式ドキュメントに沿って概要を押さえつつ、気になった部分を深掘って整理しています。 本記事で…

はじめに Redux Reduxが役に立つケース 大規模なアプリケーション 共有状態が必要なアプリケーション 状態の変化を厳密に管理したい場合 状態 State View Actions 状態管理の課題 参考 続く… コメント はじめに 本記事では「モダンJavaScriptの基本から始め…

はじめに useContextとは？ React Contextの作成 Context Providerの使用 useContextフックの使用 例 1. Contextの作成 2. Context Providerの作成 3. useContextフックの使用 画面 codesandbox - 動作確認用 参考 続く… コメント はじめに 本記事では「モダ…

はじめに 単方向データフローとは 双方向バインディング Reactでフォームを実装する場合 Props バケツリレーとは？ 例 バケツリレーの問題点 参考 続く… コメント はじめに 本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と…

はじめに 再レンダリング 再レンダリングが発生する条件 React.useCallBack 例 注意点: 適切なタイミングで使用しないとコストがかかる useCallbackが有効なケース memoでカバーできないケースを補完できるのがuseCallback まとめ 参考 続く… コメント はじ…

はじめに 再レンダリングが発生する条件 Stateが更新されたら再レンダリングが発生する Propsが変更されたら再レンダリングが発生する 再レンダリングされたコンポーネントの子コンポーネント全てに対して再レンダリングが発生する 不要な再レンダリングを避…

はじめに Emotion インストール Object Styles String Styles styled まとめ 参考 続く… コメント はじめに 本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になって調べた内容や知識も含めアウトプットしています。…

はじめに styled components Styled Componentsのインポート スタイルの定義 コンポーネントの使用 styled-componentのメリット 参考 続く… コメント はじめに 本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になっ…

はじめに CSS インラインスタイル 例 CSS Modules 例 まとめ インラインスタイル インラインスタイル 参考 続く… コメント はじめに 本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になって調べた内容や知識も含め…

はじめに props または state に基づいて状態を更新する アンチパターン: 既存のプロパティや状態から算出できる値に別の状態を加える 改善例: 既存のプロパティや状態から算出できる値はレンダリング時に演算する 負荷の高い計算をキャッシュする アンチパ…

はじめに 再レンダリング useEffect コード例 補足 useEffectが必要でないケース データ変換のためにuseEffectは必要ない ユーザーイベントの処理にuseEffectは必要ない 参考 続く… コメント はじめに 本記事では「モダンJavaScriptの基本から始める React実…

はじめに State useState Reactの内部イメージ パラメーター set 予備知識 注意点 - Reactの状態更新は非同期のバッチ処理として行われる 参考 続く… コメント はじめに 本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別…

はじめに JSXのルール エラーが発生する例 正しい書き方 CSSの指定方法 props propsの分割代入 chirdren 参考 続く… コメント はじめに 本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になって調べた内容や知識も含…

はじめに ReactDOM 将来的にサポートされなくなる findDOMNode - 非推奨 hydrate render unmountComponentAtNode 最新バージョン - React 18 パッケージが２種類 render()ではなくcreateRoot()を使用する 続く… コメント はじめに Reactのアップデートに伴い…

はじめに 分割代入 例 活用方法 スプレット構文の応用 オブジェクトでも利用可能 =演算子でコピーしない 参考 続く… コメント はじめに 本記事では「モダンJavaScriptの基本から始める React実践の教科書」で学んだ内容と別途気になって調べた内容や知識も含…

はじめに パッケージマネージャー メリット node_modules モジュールバンドラー モジュールバンドラーの代表的なツール モジュールバンドラーが活用される背景 モジュールバンドラーの役割 トランスパイラ 参考 続く… コメント はじめに 本記事では「モダンJ…

はじめに 目的駆動名前設計 名前設計が不十分なケース 関心の分離 商品クラスを分ける例 参考 続く… コメント はじめに 本記事では「良いコード 悪いコードで学ぶ設計入門」で学んだ内容と別途気になって調べた内容や知識も含めアウトプットしています。 書…

はじめに 文字列型執着 文字列型執着とは 例 改善例 電話番号は文字列 グローバル変数 グローバル変数とは Rubyのグローバル変数 JavaScriptのグローバル変数 グローバル変数の弊害 参考 続く… コメント はじめに 本記事では「良いコード 悪いコードで学ぶ設…

はじめに デッドコード デッドコードとは 例 デッドコードの弊害 YAGNI原則 YAGNI原則とは 不要な機能を作る弊害 マジックナンバー マジックナンバーとは マジックナンバーの特徴 マジックナンバーを使わないコードに修正 参考 続く… コメント はじめに 本記…

はじめに 結合度 密結合 疎結合 密結合と責務 密結合なコード例 問題点 コード例 問題が発生するケース 単一責任の原則 密結合を解消 責任の明確化 責務が単一になるようにクラスを設計 改修の方針 定価クラス 通常割引・夏季割引は別個にわけて定義 参考 続…

はじめに 低凝集なコレクション処理 重複ロジックの例 - add_member 重複ロジックの例 - is_alive? 系 クラスコレクションで重複を解消する ファーストクラスコレクション 通常のクラスの初期化との比較 具体例 改修例 - ファーストコレクションクラス 改善:…

はじめに 自前でコレクション処理を実装 してしまう 標準ライブラリのメソッドを活用する - any?メソッド 車輪の再発明 ループ処理中の条件分岐ネスト 早期continue 早期break 参考 続く… コメント はじめに 本記事では「良いコード 悪いコードで学ぶ設計入…

背景 概要 update_allメソッド メリット - 高速である デメリット - バリデーションやコールバックが行われない updateメソッド メリット - データの整合性を保つことが出来る デメリット - パフォーマンスの低下 デメリット - 処理速度の低下 まとめ おわり…

はじめに ネストで複雑化した分岐コード ポリシーパターンで条件を集約する ルール Policyクラス 作成したPolicyの使い方 会員ごとのポリシーを作成しロジックを集約する ゴールド会員の条件をまとめたクラス シルバー会員の条件をまとめたクラス 参考 続く……

はじめに switch文 Rubyはswitchではなくcase文 JavaScriptのswitch文 switch文の注意点 追加漏れが発生しやすくなる 条件分岐を一箇所にまとめる 改善例 interfaceやモジュールでよりスマートに 改善例 改善例: 条件分岐の処理 参考 続く… コメント はじめ…