フロントエンド

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...
フロントエンド

【GraphQL/Apollo】クエリのrefetch時にonCompletedが動かない

問題 apollo clientでクエリのリフェッチ時にonCompletedで指定した処理が動かない。(今回は取得情報に基づいて一覧を表示する処理でした) 解決方法 notifyOnNetworkStatusChang...
HTML/CSS/Sass

本番環境にデプロイしたらtailwindcssが効かない時に確認すること

tailwindを使用していた時に、本番環境やdev環境にデプロイしたらスタイルが効いてない時がありました。そんな時に確認することを2つ紹介します。 tailwindcss.config.jsのpurge設定を見直す tail...
フロントエンド

【Jest・エラー】serializes to the same string

エラー内容 toBeを使用して、配列とオブジェクトのテストをしていたのですが、serializes to the same string というエラーに躓きました。 解決方法 toBeではなくtoEqualを使用...
TypeScript

【TypeScript】canvas(HTMLElement)の型を指定する

TypeScriptでcanvasを使用するとき、型をどうしようか迷ったのでメモです。 canvasの型 エディタの候補でも出てくると思いますが、HTMLCanvasElementです。 ただ、これを以下のように当てはめ...
React

【GraphQL/Apollo/Jest/React】queryのresultのdataがundefinedになる

GraphqlとReactのテストを書いているときに手こずったことを記録します。 問題 MockedProviderで定義しているはずのuseQuery(useLazyQuery)のresultのdataがundefinedに...
Next.js

Next.jsで環境変数が読み込まれないときに確認すること

Next.jsで環境変数を読み込むのに手間取ったので備忘録。 環境変数名にNEXT_PUBLIC_をつけているか 環境変数をクライアントサイド(ブラウザ)で使用する場合、変数名ににNEXT_PUBLIC_とつける必要があります...
React

【Jest/GraphQL/React】Error: No more mocked responses for the query: mutation

このエラーで何時間も消えていったため、確認事項を記録しておきます。 大体のエラー原因 モック化しているリクエスト、もしくはレスポンスの型や内容が異なっている。 具体的に確認すべきこと 使用するクエリのドキュメントを...
React

【React】マウントとレンダリングとその違い

自分の中でマウントとレンダリングの違いがごちゃごちゃになったので、調べ直してみました。 マウントとは Reactコンポーネントに対応するインスタンスとDOMノードの作成と、それをDOMツリー(DOMコンテナ)への追加を行う処理...
React

【React×TypeScript】コンポーネントをPropsとして渡す方法

コンポーネントをPropsとして渡す方法に少し手こずったので、メモしておきます。 ポイント 指定するPropsの型は、JSX.ElementやReact.ReactNodeなどを使用するコンポーネントを受け取る際は、引数にpr...
エラー

【Jest】ReferenceError: Element is not defined

エラー内容 以下のようにコードを書いていたのですが、ReferenceError: Element is not defined というエラーに遭遇していました。 ... Element.prototype.scrollI...
HTML/CSS/Sass

数値入力するスライドバー・スライダーの作り方

下の画像のような、数値入力できるインディケーターというか、スライドバー・スライダーみたいなものを作りたかったので、その備忘録です。 作り方 HTMLのinput要素で作れます。 <input type="r...
HTML/CSS/Sass

モーダル内のみスクロールする方法

モーダルを表示させたときに、モーダル内のみスクロール可能にしたくて調べたので、その記録です。 やり方 CSSで調整する!以下のモーダルのエレメントにプロパティを追加すればOK。 overflow: auto; over...
Next.js

【Next.js×TypeScript】_app.tsx内のMyAppの型定義でエラーが出る

eslintを使用しているのですが、Next.jsの_app.tsx内でMyappのエラーが出ていました。その解消方法を記録します。 元のコード ({ Component, pageProps }: AppProps) =>に...
JavaScript

【JavaScript】変数を定義する時の{}波カッコって何?意味は?

以下のようなコードを見たときに、解読が出来なかったので備忘録です。 const { data: data } = getData(id) {}の正体は? ズバリ、分割代入です。 例えば、以下のようなコードがあるとし...
JavaScript

【JavaScriptライブラリ/React Particles-js】簡単にParticleアニメーションを作る

しゃぼん玉のような丸がふわふわ飛ぶアニメーションを作りたくて、実際に使用したJSライブラリを紹介します。上のGIFは実際に私が作ったものです。 どんなアニメーションが作れるのか こちらにデモが載っているので、ぜひ見てみてくださ...
スポンサーリンク
タイトルとURLをコピーしました