【Redux】JSONオブジェクトを正規化(byId, allIds)する実装例
Redux『Redux Style Guide#Normalize Complex Nested/Relational State』にもあるように、『Redux Store内のState(以下State)』のデータは正規…
Redux『Redux Style Guide#Normalize Complex Nested/Relational State』にもあるように、『Redux Store内のState(以下State)』のデータは正規…
前提知識: データ更新とイミュータビリティ Immerを理解するために必要な前提知識について紹介します。 詳細は【React】JavaScriptのイミュータビリティを理解して正しくState更新するで紹介しています。 …
基礎知識: classNameの利用方法について classNameにクラス名をセットすると当該CSSクラスが適用されます。 以下はbuttonタグにstyles.btnクラスを適用する例です。 src/componen…
本記事で紹介する汎用コンポーネントとは、ボタンをはじめとした複数の箇所から呼び出されるUIパーツの基本となるコンポーネントのことを指します。 使い回しのしやすい形で汎用コンポーネントを実装することで、必要となる汎用コンポ…
前提知識: JavaScriptにおけるFalsyな値について falsyな値(偽値、falseyな値)とはfalseと評価される値のことを指します。 JavaScriptにおけるfalsyな値は以下の8つです。1 なお…
今回やりたいこと Fetch APIを利用してGETとPOSTを実行する以下のようなコードがあったとします。 const getTodoResponse = async () => { const response…
JavaScriptで非同期処理を実装する際によく利用されるFetch APIとaxiosの違いについて紹介します。 前提知識: fetchもaxiosも戻り値はPromise fetchもaxiosも戻り値はPromi…
then(yield_self)について thenはレシーバをブロックの引数として受け取り、ブロックの評価をレシーバに反映させるメソッドです。yield_selfはthenのエイリアス(等価のメソッド)です。 ### t…
filter(select)について filterは条件を満たす全ての要素を取り出すメソッドです。selectはfilterのエイリアス(等価のメソッド)です。filterの例は以下の通りです。 > [1, 2, …
map(collect)について mapは各要素を変換して新たな配列を作成するメソッドです。collectはmapのエイリアス(等価のメソッド)です。 オブジェクトのプロパティや配列の要素から新たな配列を作成したい場合に…
concatメソッド concatは配列を自身の末尾に破壊的に連結するメソッドです。 concatを利用した配列の結合は以下の通りです。 > array1 = [‘a’, ‘b’] > array2 = [‘…
Railsアプリケーションで『nilの場合は~』を実装する際のリファクタリングについて紹介します。 今回は以下のようなパターンに分け、それぞれについて解説します。 『変数がnilの場合はデータをセットする』パターン 変数…
sortについて sortは配列を昇順でソートするメソッドです。要素の比較は<=>演算子(宇宙船演算子)が広く利用されますが、<=>演算子以外も利用できます。1 sortと<=>を組み…
「オブジェクトが存在しないケースを考慮し、オブジェクトのプロパティを参照する」、このような時にtry hashが活躍します。 try hashはdigで書き換えられます。今回はtry hashとdigの概要と、書き換えの…
TypeScriptではEnum型よりもUnoin型を利用したほうがよいという話をよく聞きます。1 2 3 今回はEnum型からUnion型に書き換えた具体例について紹介します。 Enum型を利用した例 以下はColor…
Null合体演算子(Nullish coalescing operator)について Null合体演算子(??)とはvalue ?? defaultValueのように記述し、左辺(value)がnullishな値(nul…
Null合体代入演算子(Logical nullish assignment operator)について Null合体代入演算子(??=)とはvalue ??= defaultValueのように記述し、左辺(value)…
Redux ToolkitとはReduxの記述を簡潔にするためのツールです。 Redux Toolkitを利用することで、以下のようなReduxの問題点が解決できます。1 Redux Tookitで提供されているAPIは…