ゆめみのフロントコーディング試験のデモアプリをReactで実装しました

2023年2月26日

デモアプリの概要について RESAS(地域経済分析システム) API経由で取得した都道府県・総人口のデータをグ…

Rails: Strong Parameterのpermit/require/fetchメソッドまとめ

2023年1月24日

permitについて permitは許可する要素を指定するメソッドです。 permitによって生成されたpar…

rails consoleからControllerにリクエストを送る方法

2023年1月23日

基本構文 appオブジェクトを利用することでrails console上からControllerへリクエストを…

Rails: クラス,モデル,モジュールなどでURLヘルパー(xxx_path, xxx_url)を利用する方法

2023年1月22日

URLヘルパーについて URLヘルパーはxxx_path、xxx_urlの形式でアプリケーションのパスを表現で…

【Rails】HTTPヘッダを利用した値の受け渡し方法と注意点

2023年1月22日

Rails上でHTTPヘッダを取得する方法 RailsアプリケーションでHTTPヘッダの情報を取得する場合はr…

【Ruby】inject（reduce）の概要と具体例

2023年1月21日

injectについて injectとはリストのたたみこみ演算をするEnumableモジュールのメソッドです。 …

【Ruby】『&&』と『&』の違い

2023年1月18日

&&について &&は論理積(AND)を求める演算子です。 &&…

【Ruby】method(:xxx)と表現するコード（Object#method）について

2023年1月17日

Object#methodについて Object#methodはレシーバーのメソッドを引数に受け取り、当該メソ…

【JavaScript】スクロールの開始位置を一番下にする方法

2022年12月19日

スクロールの開始位置を一番下にする方法、つまり下から上に向かってスクロールするUIを実現する方法について紹介し…

【JavaScript】スクロール操作に関する基礎知識

2022年12月19日

スクロールに関するプロパティスクロールを操作する際に覚えておくとよいプロパティの知識について紹介します。 s…

Reduxを利用した非同期処理中のローディング機能実装

2022年10月3日

今回ローディング機能を実装するアプリケーションの仕様について今回はToDoリスト管理アプリを例に、ローディン…

Redux Toolkitを利用して非同期処理のステータスをStateで管理する

2022年10月3日

今回実現すること AsyncThunkによって生成されたActionCreatorが返すActionTypeに…

【Redux】JSONオブジェクトを正規化(byId, allIds)する実装例

2022年10月1日

Redux『Redux Style Guide#Normalize Complex Nested/Relati…

【Redux】Immerを利用してState更新のイミュータビリティを保証する

2022年9月17日

前提知識: データ更新とイミュータビリティ Immerを理解するために必要な前提知識について紹介します。詳細…

【Redux】ReselectのcreateSelectorでSelectorをメモ化する

2022年9月17日

今回利用するサンプルアプリケーションについて Selectorのメモ化を検証するにあたり、今回はTodo管理機…

【React】UAParser.jsを利用したモバイル判定方法

2022年9月3日

UAParser.jsとはユーザーエージェント（User-Agent）からブラウザやエンジン、OS、CPU、デ…

React環境で手軽にSVGを表示する方法

2022年8月28日

ダウロードしたSVGを手軽にReactアプリケーション上で表示する方法について書きました。今回は以下の3つの…

Reactによるアコーディオンメニューの実装方法

2022年8月28日

アコーディオンとはクリックをトリガとした開閉式のUIコンテンツのことを指します。今回はReactで実装したア…

【React】useRef/forwardRefの概要と使いどころ

2022年8月25日

Refについて Refとはrenderメソッドで作成されたDOMノードもしくはReact要素の参照を保持するオ…

【CSS】transitionでアニメーションを実現する方法

2022年8月20日

transitionについて transitionとはプロパティの状態変化を定義するCSSプロパティで、tra…

【CSS】スケルトンスクリーンの実装方法

2022年8月19日

スケルトンスクリーン（スケルトンローダー）とはコンテンツの枠組のみを表現したデザインのことを指します。スケル…

react-popper-tooltipでツールチップを作成する方法

2022年8月14日

react-popper-tooltipを導入することでreact-popperとpopper.jsをベースに…

【React】コンポジションで複数の子コンポーネントを表示する方法

2022年8月14日

おさらい: 子要素をコンポジションで出力する方法コンポジションとはコンポーネント間のコードを再利用するための…

React Hook Formの基本的な使い方

2022年8月11日

React Hook FormはReactでフォームを実装する際に広く利用されているライブラリです。今回はR…

Next.js(TypeScript)にJestを設定する方法

2022年7月20日

Next.jsアプリケーションにJestを導入する方法は3つあります。1 Rust Compilerを利用する…

Next.jsでSVGを利用する方法(babel-plugin-inline-react-svgの使い方)

2022年7月17日

babel-plugin-inline-react-svgというプラグインを利用することでSVGをコンポーネン…

【React】classNameでよく使う定義方法(複数クラス、条件付きクラス)

2022年7月16日

基礎知識: classNameの利用方法について classNameにクラス名をセットすると当該CSSクラスが…

【React】汎用コンポーネントの実装テクニックまとめ

2022年7月16日

本記事で紹介する汎用コンポーネントとは、ボタンをはじめとした複数の箇所から呼び出されるUIパーツの基本となるコ…

【React】実務におけるuseMemo/useCallback/React.memoの適用方針

2022年6月12日

useMemo・useCallback・React.memoによるメモ化を活用することでReactアプリケーシ…

【JavaScript】filterでFalsyな値(偽値)を配列から除去する方法

2022年5月5日

前提知識: JavaScriptにおけるFalsyな値について falsyな値（偽値、falseyな値）とはf…

【JavaScript】lodashの概要とmergeの使い方

2022年5月5日

lodashは便利なメソッドをまとめて提供しているライブラリです。今回はlodashのメソッドの1つであるme…

【JavaScript】Fetch APIを良い感じにメソッド化するリファクタ例

2022年5月5日

今回やりたいこと Fetch APIを利用してGETとPOSTを実行する以下のようなコードがあったとします。 …

【JavaScript】fetchとaxiosの非同期処理の違いまとめ

2022年5月4日

JavaScriptで非同期処理を実装する際によく利用されるFetch APIとaxiosの違いについて紹介し…

【React】createPortalとContextによるトースト(Toast)実装

2022年5月2日

前回、【React】createPortalによるポータルの作成・利用方法でポータルの概要について紹介しました…

【React】createPortalとContextによるモーダル実装

2022年5月1日

前回、【React】createPortalによるポータルの作成・利用方法でポータルの概要について紹介しました…

【React】createPortalによるポータルの作成・利用方法

2022年4月30日

ポータル（Portal）を利用することでモーダルやトーストのような『画面上に飛び出すUIパーツ』を実装できます…

【React】JSXにおけるコンポーネントの表示・非表示の制御方法まとめ

2022年4月26日

今回想定するケース FormコンポーネントのローカルState（visible）の真偽値に応じて、Formコン…

【CSS】display/visibility/opacityの比較・違いまとめ

2022年4月26日

要素を非表示にする方法であるdisplay: none, visibility: hidden, opacit…

useContextをuseState・useReducer・関数と組み合わせる方法

2022年4月23日

前回、【React】useContexでContextを参照する手順でReact Contextの概要について…

【React】useContexでContextを参照する手順

2022年4月23日

React ContextはReduxのようにグローバルなデータの定義と参照ができるReactのAPIです。 …