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.というエラーが立ちはだかりました。 エラー内容 Global CS...
フロントエンド
Next.js 
JavaScript CJS, UMD, ESMとは？その違い。
cjs, umd, esmって何？と思ったので調べました。 まずはざっくり結論から これらは、モジュールの仕様を指します。JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みのようなものです。 JavaScrip...
React 【React/Portal】関数コンポーネントで作るPortalの使い方
モーダルやスナックバーなどを使用するとき、z-indexの関係でうまく一番上に出てこない...なんてことありますよね。そんな悩みに、React Portalという救世主がいるのでご紹介します。 React Portalとは Reactの公式...
フロントエンド 【GraphQL/Apollo】クエリのrefetch時にonCompletedが動かない
問題 apollo clientでクエリのリフェッチ時にonCompletedで指定した処理が動かない。（今回は取得情報に基づいて一覧を表示する処理でした） 解決方法 notifyOnNetworkStatusChange: true を追...
HTML/CSS/Sass 本番環境にデプロイしたらTailwind CSSが効かない時に確認すること
tailwindを使用していた時に、本番環境やdev環境にデプロイしたらスタイルが効いてない時がありました。そんな時に確認することを２つ紹介します。 tailwindcss.config.jsのpurge設定を見直す tailwindcss...
フロントエンド 【Jest・エラー】serializes to the same string
エラー内容 toBeを使用して、配列とオブジェクトのテストをしていたのですが、serializes to the same string というエラーに躓きました。 解決方法 toBeではなくtoEqualを使用すればOKです。 そもそも、...
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などを使用するコンポーネントを受け取る際は、引数にpropsを受け取...
エラー 【Jest】ReferenceError: Element is not defined
エラー内容 以下のようにコードを書いていたのですが、ReferenceError: Element is not defined というエラーに遭遇していました。 ... Element.prototype.scrollIntoView =...
HTML/CSS/Sass 数値入力するスライドバー・スライダーの作り方
下の画像のような、数値入力できるインディケーターというか、スライドバー・スライダーみたいなものを作りたかったので、その備忘録です。 作り方 HTMLのinput要素で作れます。 <input type="range" min="2" max...
HTML/CSS/Sass モーダル内のみスクロールする方法
モーダルを表示した時、モーダル内のみスクロール可能にしたくて調べた記録です。 やり方 CSSでできます🙆♀️スクロールさせたい要素の親要素に、以下のCSSプロパティを付与します。 overflow: scroll; 縦方向のスクロールだけ...
Next.js 【Next.js×TypeScript】_app.tsx内のMyAppの型定義でエラーが出る
eslintを使用しているのですが、Next.jsの_app.tsx内でMyappのエラーが出ていました。その解消方法を記録します。 元のコード ({ Component, pageProps }: AppProps) =>に波線が引かれ、...
JavaScript 【JavaScript】変数を定義する時の{}波カッコって何？意味は？
以下のようなコードを見たときに、解読が出来なかったので備忘録です。 const { data: itemList } = getData(id) {}の正体は？ ズバリ、分割代入です。 例えば、以下のようなコードがあるとします。 const...
JavaScript 【JavaScriptライブラリ/React Particles-js】簡単にParticleアニメーションを作る
しゃぼん玉のような丸がふわふわ飛ぶアニメーションを作りたくて、実際に使用したJSライブラリを紹介します。上のGIFは実際に私が作ったものです。 どんなアニメーションが作れるのか こちらにデモが載っているので、ぜひ見てみてください。 インスト...
Next.js 【Next.js】データ取得時の、getStaticProps, getServerSideProps, SWRの使い分け
Next.jsを勉強しており、使いどころをはっきりさせたかったため、まとめてみました。 getStaticProps 特徴 ビルド時に、サーバーサイドで実行されるいわゆるSSG（静的生成） 使いどころ リクエストごとにコンテンツが変わったり...
HTML/CSS/Sass Next.jsにTailwind.cssを導入する方法
Tailwind.cssをインストール Next.jsのバージョンが10以上の場合 # npm の場合 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest...