フロントエンド

React

【React×TypeScript】propsの型を条件分岐させる

propsの型を条件によって分岐させる方法を2つ記録しておきます🙋‍♀️※コンポーネントのサンプルコードに関しては、あくまでコードの書き方を示すものとして見てください。 1つ...
React

globalThis.IS_REACT_ACT_ENVIRONMENTを設定してもエラーが解決しないとき

エラー内容 actがテスト環境に設定されてないという、React18から発生する可能性があるエラーです。 Warning: The current testing environment is not configured t...
JavaScript

【Jest / React Testing Library】フォームのテストをすっきり書く

フォームのテストって、項目数の多さや、複雑な仕様のために、テストケースが多くなってどんどん見にくくなることってありませんか🥲そんな時にちょっと役に立つ、フォームのテストをすっきり書く方法を紹介します。 テストするフォ...
TypeScript

【TypeScript】ユニオン型のジェネリクス使用時、Arrayメソッド(map,filter,sort…)の返り値の型が合わない

問題 ユニオン型のジェネリクスを使用した値を、配列のメソッドに適用したときに発生した問題です。以下が、エラーが発生するサンプルコードです。 type Dog = { type: 'dog' id: st...
HTML/CSS/Sass

CSSでチェックマーク・チェックボックスを自作する

忘れた頃に、CSSでチェックマークやチェックボックスを作る機会がやってくるので、記録しておきます🖋 チェックマーク チェックマークをCSSで作る時に行うことは以下3点です。 長方形の作成長方形の左...
Docker

Next.jsをDockerコンテナでデプロイする

Next.jsをDockerコンテナ化してデプロイする際のDockerfile, docker-composeファイルを残してます。 前提 ローカルの開発環境はDockerで動かさず、デプロイ時のみDockerコンテナを利用す...
JavaScript

【Jest/Testing Library/ next/link】TypeError: Cannot read properties of null (reading ‘push’)

Jest, React Testing Libraryを用いたテスト時に、next/link周りで出たエラーの対処法です。 エラー内容 TypeError: Cannot read properties of null (re...
JavaScript

【Testing Library】userEvent v14の破壊的変更(BREAKING CHANGE)

React Testing Library使用時、よくお世話になるuserEventですが、v14になって破壊的変更が入り、使用感が変わってました!個人的には「いいな!」と思える変更でした🙆‍♀...
React

【React Hook Form×Material UI】 defaultValue, defaultCheckedが効かない時に確認すること

React Hook Form(以下RHF)とMaterial UIを組み合わせた、defaultValue系にハマりやすいので備忘録です。 useFormのresetを実行しているか APIでdefaultValueをフェッ...
フロントエンド

【Vue Router v4/Vue3】404ページを表示する方法

/* や * では効かなかった 404ページを表示したい場合、/* や * と記載すればOKという記事をいくつか見ましたが、私の環境(Vue Router v4, Vue v3)では効きませんでした>< const...
HTML/CSS/Sass

【CSS】枠線の付け方3つ(内側も含む)

「CSSで枠線をつけるといえばborder!」ではありますが、borderだと思い通りのスタイルにならないこともしばしば。。そこで、私が用途に合わせて使い分けている、枠線の付け方を紹介します。 枠線を表現できるプロパティ3つ ...
JavaScript

【JavaScript】基本的なことを言語化してまとめてみた

普段何気なく使っている仕組みや機能でも「説明して」って言われると、うまく言えないこともしばしば。・・・でも答えたい!ということで、JavaScriptの基本的な部分を言語化してまとめてみました。 ホイスティング(巻き上げ)とは ...
React

【React/Formik】入力時に自動送信する方法

Formikを使用しているときに、入力に合わせて自動送信させたかったので、調べて実装してみました。 方針 FormikのuseFormikContextを使用する!FormikのForm内の子コンポーネント等で呼び出すと、Fo...
React

ReactSelect(AsyncSelect)でデバウンスする方法

ReactSelect、とても便利ですね!初めて使った時は感動しました。今回はReactSelectで用意されているAsyncSelectでデバウンスする方法を記しておきます。 デバウンスとは 連続して呼び出される同じ...
OSS

【npmライブラリ作成】デモページの作り方(GitHub Pages)

方針 デモページのコードはexamplesディレクトリで管理。examples/srcには開発用のコードをまとめ、examples/publicは本番用のコードを格納する。デモページにはGithub Pagesを使用。example...
OSS

【npmライブラリ作成】パッケージサイズ(package size, unpacked size)を減らす2つの方法

自分でnpmライブラリを作ったのですが、そのパッケージサイズが大きく、減らす方法を模索しました。npmサイトでは、各ライブラリのページにUnpacked Sizeが表示されますし、ユーザーがライブラリを選択するときの基準にもなるので、でき...
Next.js

【npmライブラリ作成×webpack×Next.js】ReferenceError: document is not defined

作成したnpmライブラリをNext.jsで読み込む時、ReferenceError: document is not definedというエラーに遭いました。 状況 作成していたnpmライブラリは、webpackを使用してバン...
Next.js

【npmライブラリ作成/Next.js】Global CSS cannot be imported from within node_modules.

自分で作成したライブラリをNext.jsにインストールした際に、Global CSS cannot be imported from within node_modules.というエラーが立ちはだかりました。 エラー内容 Gl...
JavaScript

CJS, UMD, ESMとは?その違い。

cjs, umd, esmって何?と思ったので調べました。 まずはざっくり結論から これらは、モジュールの仕様を指します。JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みのようなものです...
React

【React/Portal】関数コンポーネントで作るPortalの使い方

モーダルやスナックバーなどを使用するとき、z-indexの関係でうまく一番上に出てこない...なんてことありますよね。そんな悩みに、React Portalという救世主がいるのでご紹介します。 React Portalとは R...
スポンサーリンク
タイトルとURLをコピーしました