Reactコンポーネントの再レンダリング発生条件と防止方法
コンポーネントが再レンダリングされる条件について コンポーネントは以下の条件のいずれかに当てはまると再レンダリングされます。 以下では再レンダリングが発生する具体例について紹介します。 コンポーネントのStateが更新さ…
JavaScriptJavaScriptReact
JavaScriptJavaScript【React】mapによるJSXループ処理の実装方法パターン集
Reactではオブジェクトの配列をJSX内でループ処理するケースがよくあります。 今回はmapを利用したループ処理の実装パターンを紹介します。 今回はTodoアプリケーションを例にとり、JSXでのループ処理の方法を説明し…
JavaScript【React】JSXでif文を利用して要素を出し分ける（条件付きレンダー）方法
条件によってレンダーするコンポーネントを出し分ける際は条件付きレンダーを利用します。 今回は条件付きレンダーの記述方法について紹介します。 条件付きレンダーの記述方法 条件付きレンダーの記述方法について紹介します。 条件…
JavaScript【RxJS】concatMap, mergeMap, switchMap, exhaustMapの違い
xxxMapという名前のOperatorの処理フローは以下の通りです。 たとえば以下のコードでは、mergeMapを利用して『1 → 2 → 3』というストリームを『1A → 1B → 1C → 2A → 2B → 2C…
JavaScript【RxJS】mapとmergeMapの違い
Observable（ストリーム）のOperatorでよく使われるものにmapとmergeMapがあります。 メソッド名は似ていますが役割は異なります。今回はmapとmergeMapの違いについて紹介します。 RxJSに…
JavaScript【redux-observable】Epicで複数のActionを発行する方法
Action inとAction outが1対1の場合 以下はGET_TODOS_REQUESTというAction Typeの発行をトリガーに、APIへのリクエストとsetTodosというAction Creatorを実…
JavaScriptTodoアプリで理解するredux-observableによる非同期処理の実装方法
Reduxで非同期処理を実装する方法は主にRedux Thunk、Redux-Saga、redux-observableがあります。 今回はAPIを利用してTodoリストを取得するTodoアプリを例に、redux-obs…
JavaScript初学者のためのredux-observable・Epic入門
Observableについて ObaservableはRxJSにおけるストリームを表現するクラスです。 RxJSではObservableを操作することでリアクティブプログラミングを実現します。 リアクティブプログラミング…
JavaScript【RxJS入門】Observable、Observer、subscribe、Operatorの概要・関係性
リアクティブプログラミングについて リアクティブプログラミングとは時間経過によって変化するデータを観測し、変更が生じた際にあらかじめ宣言した操作するというプログラミングのパラダイムです。 リアクティブプログラミングでは時…
インフラNextでSSGアプリを作成し、CircleCIでS3に自動デプロイする方法
SSGとは静的なHTMLを事前に生成し、配信する方法です。 SSGではファイルの配置をするだけでアプリケーションが公開できるためサーバの準備が不要です。 今回はNextで作成したSSGアプリケーションを、CircleCI…
JavaScript具体例で理解するuseMemoとuseCallbackの使い方。Reactパフォーマンスチューニング
コンポーネントや関数のメモ化を行うことで、不要な計算やレンダリングを抑えられるためパフォーマンス向上が期待できます。 useMemoやuseCallbackはメモ化の機能を提供するフックです。 関数コンポーネントにおいて…
JavaScriptパフォーマンス改善やバグ防止に理解必須。useEffect第2引数の利用パターン集
useEffectはReact Hooks APIの中でも使用頻度の高いフックです。 レンダリングのタイミングで副作用を実行したい場合はuseEffectを活用します。 useEffectには依存配列と呼ばれる第2引数を…
JavaScriptCreate React AppでTypeScriptやReduxやコードフォーマットの環境を整える
Create React Appを利用したReactアプリケーションの作成方法についてまとめます。 アプリケーションの作成方法 アプリケーションの作成は以下の通りです。1 ### npx $ npx create-rea…
JavaScriptRedux ToolkitのcreateAsyncThunkで非同期処理を実装する方法
createAsyncThunkはRedux Toolkit 1.3.0から利用できる非同期処理用の機能です。 前回、Todoアプリで理解するRedux Thunkによる非同期処理の実装方法でRedux Thunk(Th…
JavaScriptTodoアプリで理解するRedux Thunkによる非同期処理の実装方法
Reduxで非同期処理を実装する方法は主にRedux Thunk、Redux Saga、Redux Observableがあります。 Redux ThunkはRedux Toolkitにデフォルトでインストールされている…
JavaScript【Redux不要】React ReduxチュートリアルのRedux部分をReact Hooksに書き換えてみた
「React Hooks APIを活用することでReduxが不要になる」という話を聞いたことがある方もいるかもしれません。 今回は、Reduxの機能をReactのみで実装する検証として、React ReduxのBasic…
JavaScriptReact Reduxのチュートリアル（Todoアプリ）をRedux Toolkitで書き換えてみた
Redux ToolkitとはReduxの記述を簡潔にするためのツールです。 Redux Toolkitを利用することで、以下のようなReduxの問題点が解決できます。1 Redux Tookitで提供されているAPIは…
JavaScriptReact Reduxのチュートリアル(Todoアプリ)をReact Redux Hooksで書き換えてみた
React Redux hooksはconnect()の代わりとなるAPIです。 React Redux hooks APIを利用することでReduxのStateやActionの実行（dispatch）がconnect(…
JavaScriptReact Reduxのチュートリアル（Todoアプリ）をTypeScriptで書き換えてみた
2020年2月現在、React ReduxのBasic Tutorialで紹介されているサンプルアプリケーション（Todoアプリ）はJavaScriptで書かれています。 今回、サンプルアプリケーションのTypeScri…
JavaScriptReactチュートリアルを関数コンポーネントとTypeScriptで書き換えてみた
2021年2月現在、Reactの公式ドキュメントで紹介されているチュートリアルのサンプルアプリケーション（三目並べ）はクラスコンポーネントとJavaScriptで書かれています。 前回、サンプルアプリケーションを関数コン…
JavaScriptReactチュートリアルをTypeScriptで書き換えてみた
2021年2月現在、Reactの公式ドキュメントで紹介されているチュートリアルのサンプルアプリケーション（三目並べ）はJavaScriptで書かれています。 今回、サンプルアプリケーションのTypeScript版を作成し…
JavaScriptReactチュートリアルを関数コンポーネントで書き換えてみた
2021年2月現在、Reactの公式ドキュメントで紹介されているチュートリアルのサンプルアプリケーション（三目並べ）はクラスコンポーネントで作られています。 今回、サンプルアプリケーションの関数コンポーネント版を作成した…
