ゆめみのフロントコーディング試験のデモアプリをReactで実装しました
デモアプリの概要について RESAS(地域経済分析システム) API経由で取得した都道府県・総人口のデータをグラフにプロットするというものです。 詳細はフロントエンドコーディング試験に記載されています。 技術スタックにつ…
JavaScriptJavaScriptJavaScript
JavaScript
JavaScript【JavaScript】スクロールの開始位置を一番下にする方法
スクロールの開始位置を一番下にする方法、つまり下から上に向かってスクロールするUIを実現する方法について紹介します。 スクロールの開始位置を一番下にする方法 以下では上記の方法の詳細について紹介します。 方法1: スクロ…
JavaScript【JavaScript】スクロール操作に関する基礎知識
スクロールに関するプロパティ スクロールを操作する際に覚えておくとよいプロパティの知識について紹介します。 scrollTop scrollTopはスクロールの一番上から現在のスクロール位置までのピクセル数を保存するプロ…
JavaScriptReduxを利用した非同期処理中のローディング機能実装
今回ローディング機能を実装するアプリケーションの仕様について 今回はToDoリスト管理アプリを例に、ローディング機能の実装方法を紹介します。 当該アプリケーションは、非同期処理の実行状況に応じてActionの発行とRed…
JavaScriptRedux Toolkitを利用して非同期処理のステータスをStateで管理する
今回実現すること AsyncThunkによって生成されたActionCreatorが返すActionTypeに応じてRedux StoreのState（以下State）の値を変更することで、非同期処理の実行状況をRedu…
JavaScript【Redux】JSONオブジェクトを正規化(byId, allIds)する実装例
Redux『Redux Style Guide#Normalize Complex Nested/Relational State』にもあるように、『Redux Store内のState（以下State）』のデータは正規…
JavaScript【Redux】Immerを利用してState更新のイミュータビリティを保証する
前提知識: データ更新とイミュータビリティ Immerを理解するために必要な前提知識について紹介します。 詳細は【React】JavaScriptのイミュータビリティを理解して正しくState更新するで紹介しています。 …
JavaScript【Redux】ReselectのcreateSelectorでSelectorをメモ化する
今回利用するサンプルアプリケーションについて Selectorのメモ化を検証するにあたり、今回はTodo管理機能とカウンタ機能を組み合わせたアプリケーションを利用します。 アプリケーションの仕様は以下の通りです。 アプリ…
JavaScript【React】UAParser.jsを利用したモバイル判定方法
UAParser.jsとはユーザーエージェント（User-Agent）からブラウザやエンジン、OS、CPU、デバイスの種類/モデルを検出するJavaScriptライブラリです。 今回はReactおよびNext.jsの環境…
JavaScriptReact環境で手軽にSVGを表示する方法
ダウロードしたSVGを手軽にReactアプリケーション上で表示する方法について書きました。 今回は以下の3つの方法について紹介します。 なお、今回紹介するサンプルコードではGoogle FontsのSVGを利用します。 …
JavaScriptReactによるアコーディオンメニューの実装方法
アコーディオンとはクリックをトリガとした開閉式のUIコンテンツのことを指します。 今回はReactで実装したアコーディオンメニューのサンプルコードについて紹介します。 今回紹介するアコーディオンのサンプルコード App….
JavaScript【React】useRef/forwardRefの概要と使いどころ
Refについて Refとはrenderメソッドで作成されたDOMノードもしくはReact要素の参照を保持するオブジェクトです。 Refオブジェクトのcurrent属性を参照することでノードにアクセスできます。 Refの使…
JavaScriptreact-popper-tooltipでツールチップを作成する方法
react-popper-tooltipを導入することでreact-popperとpopper.jsをベースにしたカスタムフックが利用でき、簡単にツールチップが作成できます。 今回はreact-popper-toolti…
JavaScript【React】コンポジションで複数の子コンポーネントを表示する方法
おさらい: 子要素をコンポジションで出力する方法 コンポジションとはコンポーネント間のコードを再利用するためのReactの機能です。 コンポジションではchildrenという特別なPropsを利用して子コンポーネントを出…
JavaScriptReact Hook Formの基本的な使い方
React Hook FormはReactでフォームを実装する際に広く利用されているライブラリです。 今回はReact Hook Formの基本的な使い方について紹介します。 なお、今回はあくまでReact Hook F…
JavaScriptNext.js(TypeScript)にJestを設定する方法
Next.jsアプリケーションにJestを導入する方法は3つあります。1 Rust Compilerを利用する方法では、バージョン12以降のNext.jsに組み込まれているJestの設定を活用します。 今回はRust C…
JavaScriptNext.jsでSVGを利用する方法(babel-plugin-inline-react-svgの使い方)
babel-plugin-inline-react-svgというプラグインを利用することでSVGをコンポーネントのように扱えます。 今回はbabel-plugin-inline-react-svgをNext.jsのアプリ…
JavaScript【React】classNameでよく使う定義方法(複数クラス、条件付きクラス)
基礎知識: classNameの利用方法について classNameにクラス名をセットすると当該CSSクラスが適用されます。 以下はbuttonタグにstyles.btnクラスを適用する例です。 src/componen…
JavaScript【React】汎用コンポーネントの実装テクニックまとめ
本記事で紹介する汎用コンポーネントとは、ボタンをはじめとした複数の箇所から呼び出されるUIパーツの基本となるコンポーネントのことを指します。 使い回しのしやすい形で汎用コンポーネントを実装することで、必要となる汎用コンポ…
JavaScript【React】実務におけるuseMemo/useCallback/React.memoの適用方針
useMemo・useCallback・React.memoによるメモ化を活用することでReactアプリケーションのパフォーマンスの向上が期待できます。 しかしメモ化の効果や挙動について理解しても、実際の開発ではどのよう…
JavaScript【JavaScript】filterでFalsyな値(偽値)を配列から除去する方法
前提知識: JavaScriptにおけるFalsyな値について falsyな値（偽値、falseyな値）とはfalseと評価される値のことを指します。 JavaScriptにおけるfalsyな値は以下の8つです。1 なお…
JavaScript【JavaScript】lodashの概要とmergeの使い方
lodashは便利なメソッドをまとめて提供しているライブラリです。今回はlodashのメソッドの1つであるmergeについて紹介します。 lodashのインストール方法 $ yarn add lodash ### Typ…
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…
JavaScript【React】createPortalとContextによるトースト(Toast)実装
前回、【React】createPortalによるポータルの作成・利用方法でポータルの概要について紹介しました。 トーストは代表的なポータルの応用例です。今回はポータルとContextを利用してトーストを実装する方法につ…
JavaScript【React】createPortalとContextによるモーダル実装
前回、【React】createPortalによるポータルの作成・利用方法でポータルの概要について紹介しました。 モーダルは代表的なポータルの応用例です。今回はポータルとContextを利用してモーダルを実装する方法につ…
JavaScript【React】createPortalによるポータルの作成・利用方法
ポータル（Portal）を利用することでモーダルやトーストのような『画面上に飛び出すUIパーツ』を実装できます。 今回はcreatePortalを利用したポータルの実装方法について紹介します。 検証環境はnext 12….
JavaScript【React】JSXにおけるコンポーネントの表示・非表示の制御方法まとめ
今回想定するケース FormコンポーネントのローカルState（visible）の真偽値に応じて、Formコンポーネントから呼び出されるMessageコンポーネントの表示を制御する場合を考えます。 src/compone…
JavaScriptuseContextをuseState・useReducer・関数と組み合わせる方法
前回、【React】useContexでContextを参照する手順でReact Contextの概要について紹介しました。 実際のアプリケーションでは、useContextはuseState・useReducer・関数…
JavaScript【React】useContexでContextを参照する手順
React ContextはReduxのようにグローバルなデータの定義と参照ができるReactのAPIです。 React Contextには「Reduxなしでグローバルなデータの定義ができる」「Props drillin…
JavaScriptEmotionをNext.js x TypeScriptの環境にインストールする手順
Emotionは比較的最近できたCSS in JSライブラリです。後発ということもあり多機能で使い勝手がよいと評判です。 今回はNext.js with TypeScriptの環境にEmotionをインストールする手順に…
JavaScript【React】JavaScriptのイミュータビリティを理解して正しくState更新する
JavaScriptのイミュータブル（immutable）やミュータブル（mutable）の意味、ReactのState更新で重要なイミュータビリティ（immutability）について紹介します。 事前知識: データの…
JavaScript【JavaScript】オブジェクトの浅い比較(shallow compare)のロジックと比較の具体例
オブジェクトを浅い比較する際のロジックについて オブジェクトの浅い比較(shallow compare, shallow equal checking)がtrueになるケースは以下の通りです。 上記の『プロパティが一致』…
JavaScript【React】4ステップで作成するカスタムフック実装手順
前回、【React】カスタムフックの概要・メリット・使いどころでカスタムフックの概要について紹介しました。 今回はカスタムフックの具体的な作成手順について紹介します。 今回利用するサンプルコードについて 今回は『API経…
JavaScript【React】カスタムフックの概要・メリット・使いどころ
カスタムフック（Custom Hooks）について カスタムフックとはデフォルトのフックを利用して実装された関数です。 カスタムフックを実装する際のルール カスタムフックはコンポーネントに実装されたロジックを取り出したも…
JavaScriptNext.js+TypeScript+自動コードフォーマットの環境構築手順
以下の仕様のNext.jsアプリケーションの作成手順について紹介します。 Create Next AppでNext.jsの雛形を作成 今回はTypeScriptベースのNext.jsアプリケーションを作成するため、–t…
JavaScriptNext.jsのSSR回避(クライアントサイドでのみ実行)の実装パターン集
Next.jsのページはデフォルトでPre-renderingです。 ですので、 今回はNext.jsでSSR回避、つまりクライアントサイドでのみ処理を実行するように制御する方法について紹介します。 検証環境のnextは…
JavaScript【Next.js】dynamic import(動的インポート)の概要と使いどころ
dynamic import（動的インポート）について dynamic import（動的インポート）とは動的にimportを実行するための機能です。ES2020でJavaScriptの仕様として導入されました。dyna…
JavaScript【React】4つの観点で理解するCSR・SSR・next/linkの挙動の違い
ReactアプリケーションにおけるCSR・SSR・next/linkの挙動の違いについて4つの観点で紹介をします。 CSRはフレームワークを利用していないReactアプリケーション、SSRはNext.jsを利用したRea…
JavaScript【Next.js】Warningが発生する誤ったCookieの使用例と改善方法
Next.jsのページのレンダリングはデフォルトでPre-rendering、つまりSSR（Server-side Rendering）もしくはSG（Static Generation）です1。 サーバサイドではブラウザ…
