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