ゆめみのフロントコーディング試験のデモアプリをReactで実装しました
デモアプリの概要について RESAS(地域経済分析システム) API経由で取得した都道府県・総人口のデータをグ…
JavaScriptJavaScriptReact
JavaScript
JavaScriptReduxを利用した非同期処理中のローディング機能実装
今回ローディング機能を実装するアプリケーションの仕様について 今回はToDoリスト管理アプリを例に、ローディン…
JavaScriptRedux Toolkitを利用して非同期処理のステータスをStateで管理する
今回実現すること AsyncThunkによって生成されたActionCreatorが返すActionTypeに…
JavaScript【Redux】JSONオブジェクトを正規化(byId, allIds)する実装例
Redux『Redux Style Guide#Normalize Complex Nested/Relati…
JavaScript【Redux】Immerを利用してState更新のイミュータビリティを保証する
前提知識: データ更新とイミュータビリティ Immerを理解するために必要な前提知識について紹介します。 詳細…
JavaScript【Redux】ReselectのcreateSelectorでSelectorをメモ化する
今回利用するサンプルアプリケーションについて Selectorのメモ化を検証するにあたり、今回はTodo管理機…
JavaScript【React】UAParser.jsを利用したモバイル判定方法
UAParser.jsとはユーザーエージェント（User-Agent）からブラウザやエンジン、OS、CPU、デ…
JavaScriptReactによるアコーディオンメニューの実装方法
アコーディオンとはクリックをトリガとした開閉式のUIコンテンツのことを指します。 今回はReactで実装したア…
JavaScript【React】useRef/forwardRefの概要と使いどころ
Refについて Refとはrenderメソッドで作成されたDOMノードもしくはReact要素の参照を保持するオ…
JavaScriptreact-popper-tooltipでツールチップを作成する方法
react-popper-tooltipを導入することでreact-popperとpopper.jsをベースに…
JavaScript【React】コンポジションで複数の子コンポーネントを表示する方法
おさらい: 子要素をコンポジションで出力する方法 コンポジションとはコンポーネント間のコードを再利用するための…
JavaScriptReact Hook Formの基本的な使い方
React Hook FormはReactでフォームを実装する際に広く利用されているライブラリです。 今回はR…
JavaScriptNext.js(TypeScript)にJestを設定する方法
Next.jsアプリケーションにJestを導入する方法は3つあります。1 Rust Compilerを利用する…
JavaScriptNext.jsでSVGを利用する方法(babel-plugin-inline-react-svgの使い方)
babel-plugin-inline-react-svgというプラグインを利用することでSVGをコンポーネン…
JavaScript【React】classNameでよく使う定義方法(複数クラス、条件付きクラス)
基礎知識: classNameの利用方法について classNameにクラス名をセットすると当該CSSクラスが…
JavaScript【React】汎用コンポーネントの実装テクニックまとめ
本記事で紹介する汎用コンポーネントとは、ボタンをはじめとした複数の箇所から呼び出されるUIパーツの基本となるコ…
JavaScript【React】実務におけるuseMemo/useCallback/React.memoの適用方針
useMemo・useCallback・React.memoによるメモ化を活用することでReactアプリケーシ…
JavaScript【React】createPortalとContextによるトースト(Toast)実装
前回、【React】createPortalによるポータルの作成・利用方法でポータルの概要について紹介しました…
JavaScript【React】createPortalとContextによるモーダル実装
前回、【React】createPortalによるポータルの作成・利用方法でポータルの概要について紹介しました…
JavaScript【React】createPortalによるポータルの作成・利用方法
ポータル（Portal）を利用することでモーダルやトーストのような『画面上に飛び出すUIパーツ』を実装できます…
JavaScript【React】JSXにおけるコンポーネントの表示・非表示の制御方法まとめ
今回想定するケース FormコンポーネントのローカルState（visible）の真偽値に応じて、Formコン…
JavaScriptuseContextをuseState・useReducer・関数と組み合わせる方法
前回、【React】useContexでContextを参照する手順でReact Contextの概要について…
JavaScript【React】useContexでContextを参照する手順
React ContextはReduxのようにグローバルなデータの定義と参照ができるReactのAPIです。 …
JavaScriptEmotionをNext.js x TypeScriptの環境にインストールする手順
Emotionは比較的最近できたCSS in JSライブラリです。後発ということもあり多機能で使い勝手がよいと…
JavaScript【React】JavaScriptのイミュータビリティを理解して正しくState更新する
JavaScriptのイミュータブル（immutable）やミュータブル（mutable）の意味、Reactの…
JavaScript【JavaScript】オブジェクトの浅い比較(shallow compare)のロジックと比較の具体例
オブジェクトを浅い比較する際のロジックについて オブジェクトの浅い比較(shallow compare, sh…
JavaScript【React】4ステップで作成するカスタムフック実装手順
前回、【React】カスタムフックの概要・メリット・使いどころでカスタムフックの概要について紹介しました。 今…
JavaScript【React】カスタムフックの概要・メリット・使いどころ
カスタムフック（Custom Hooks）について カスタムフックとはデフォルトのフックを利用して実装された関…
JavaScriptNext.js+TypeScript+自動コードフォーマットの環境構築手順
以下の仕様のNext.jsアプリケーションの作成手順について紹介します。 Create Next AppでNe…
JavaScriptNext.jsのSSR回避(クライアントサイドでのみ実行)の実装パターン集
Next.jsのページはデフォルトでPre-renderingです。 ですので、 今回はNext.jsでSSR…
JavaScript【Next.js】dynamic import(動的インポート)の概要と使いどころ
dynamic import（動的インポート）について dynamic import（動的インポート）とは動的…
JavaScript【React】4つの観点で理解するCSR・SSR・next/linkの挙動の違い
ReactアプリケーションにおけるCSR・SSR・next/linkの挙動の違いについて4つの観点で紹介をしま…
JavaScript【Next.js】Warningが発生する誤ったCookieの使用例と改善方法
Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-si…
JavaScript【Next.js】Hydration時にReact.hydrate()による警告が発生するケースとその解決方法
Hydrationについて HydrationとはHTMLに付随したJavaScriptを利用してイベントリス…
JavaScript【Next.js】SSR/SGでブラウザ機能(Cookieなど)を活用する際の注意点
SSR/SGではレンダリング時にブラウザの機能を使えない 具体例は以下の通りです。 Next.jsのページのレ…
JavaScript【Next.js】ページのレンダリング種別(SSR/SG/ISR/Static)の決定・確認方法
Next.jsではページごと（pagesディレクトリ直下のコンポーネントごと）にレンダリングの種類を決められま…
JavaScript【Next.js】SSRとSG(SSG)のPre-renderingの挙動の違い
Next.jsの公式ドキュメントによるPre-renderingの説明は以下の通りです。1 上記のプロセスを手…
JavaScript【初学者向け】Next.jsのSSR/SG(SSG)/CSRに関する基礎知識
『SSR（Server-side Rendering）はサーバサイドでHTMLを生成する仕組み』『SG（Sta…
JavaScript【Next.js】next/linkの画面遷移（CSR）から画面反映までの流れの図解解説
Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-si…
JavaScript【図解】Next.jsのSSRが画面反映されるまでの具体的な流れ
Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-si…
プロフィール
人気の記事
【図解】IPアドレスの仕組み(クラス分類からサブネットまで) 
退職日と最終出社日ってどう違う？有給休暇はいつ消化すればいい？ 
矢印キーがなくて不便？iPhoneのテンキーでカーソル移動をスムーズ行う方法 
【React】JSXにおけるコンポーネントの表示・非表示の制御方法まとめ 
AWS EC2にALBを導入し、Webサーバーのロードバランシングを実現する手順 
iPhoneの連絡先の保存がうまくできない！？原因は同期設定かも。 
ACMでSSLサーバー証明書を発行し、ALBを利用したWebサーバーでHTTPS通信を実現する手順 
【SQL】JOIN(Nested loop join)の仕組みを理解し、インデックスで高速化する 
成田空港へ行く電車は何線がある？線路の一覧紹介と所用時間・料金の比較まとめ 
【Rails】in_batches、find_in_batches、find_eachの違いと使いどころ