フロントエンド
え、起動早くない？ yarn dev実行したところ、サーバーが起動するのが早いなと感じた。 使いたいライブラリめもっとく clsx。これ何回か見たことあるけどいいよね。今度合いそうなプロジェクトあったら使おう。 page.tsxがなるものがページの肝ね ページ作る…
エラー内容 Vue2からVue3に移行する際、以下のエラーが出ました。 Uncaught (in promise) TypeError: 'get' on proxy: property 'property' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actua…
フロントエンドで特に注意すべき攻撃 XSS（Cross Site Scripting / クロスサイトスクリプティング） 悪意のあるスクリプトがウェブサイトに注入される攻撃。ユーザーからの入力を検証またはエンコードせずに生成する出力内で使用する場合に発生しやすい。ブ…
propsの型を条件によって分岐させる方法を２つ記録しておきます♀️※コンポーネントのサンプルコードに関しては、あくまでコードの書き方を示すものとして見てください。 1つのpropの値で分岐させる あるpropの値を元に型を分岐させるやり方です。以下だと、…
フォームのテストって、項目数の多さや、複雑な仕様のために、テストケースが多くなってどんどん見にくくなることってありませんかそんな時にちょっと役に立つ、フォームのテストをすっきり書く方法を紹介します。 テストするフォーム（React Hook Form + Yu…
忘れた頃に、CSSでチェックマークやチェックボックスを作る機会がやってくるので、記録しておきます🖋 チェックマーク チェックマークをCSSで作る時に行うことは以下3点です。 長方形の作成長方形の左辺と下辺のみ、ボーダーをつける45度回転させる HTML <span class="check" /> CSS </span>…
Jest, React Testing Libraryを用いたテスト時に、next/link周りで出たエラーの対処法です。 エラー内容 TypeError: Cannot read properties of null (reading 'push') 対処法 対処法はどちらでも問題ないです。 その１：next/linkをモックする jest.mock('n…
React Testing Library使用時、よくお世話になるuserEventですが、v14になって破壊的変更が入り、使用感が変わってました！個人的には「いいな！」と思える変更でした♀️ userEventってなに？ テスト上で、ユーザー操作によるシステム動作をシミュレートする…
React Hook Form（以下RHF）とMaterial UIを組み合わせた、defaultValue系にハマりやすいので備忘録です。 useFormのresetを実行しているか APIでdefaultValueをフェッチするときにやることです。RHFは最初に渡ってきたdefaultValueをキャッシュするので、de…
/* や * では効かなかった 404ページを表示したい場合、/* や * と記載すればOKという記事をいくつか見ましたが、私の環境（Vue Router v4, Vue v3）では効きませんでした>< const routes = [ { path: '/', component: Home}, { path: '/*', component: NotF…
「CSSで枠線をつけるといえばborder！」ではありますが、borderだと思い通りのスタイルにならないこともしばしば。。そこで、私が用途に合わせて使い分けている、枠線の付け方を紹介します。 枠線を表現できるプロパティ3つ border 枠線といえば、一番に上が…
普段何気なく使っている仕組みや機能でも「説明して」って言われると、うまく言えないこともしばしば。・・・でも答えたい！ということで、JavaScriptの基本的な部分を言語化してまとめてみました。 ホイスティング（巻き上げ）とは 変数や関数の定義（宣言…
Formikを使用しているときに、入力に合わせて自動送信させたかったので、調べて実装してみました。 方針 FormikのuseFormikContextを使用する！FormikのForm内の子コンポーネント等で呼び出すと、Formikの変数や関数を取得することができます。values, submi…
ReactSelect、とても便利ですね！初めて使った時は感動しました。今回はReactSelectで用意されているAsyncSelectでデバウンスする方法を記しておきます。 デバウンスとは 連続して呼び出される同じ処理を制御すること。呼び出された間隔が特定の時間より短い…
方針 デモページのコードはexamplesディレクトリで管理。examples/srcには開発用のコードをまとめ、examples/publicは本番用のコードを格納する。デモページにはGithub Pagesを使用。examples/public/index.htmlを読み込ませる。 // Reactプロジェクトの例。…
自分でnpmライブラリを作ったのですが、そのパッケージサイズが大きく、減らす方法を模索しました。npmサイトでは、各ライブラリのページにUnpacked Sizeが表示されますし、ユーザーがライブラリを選択するときの基準にもなるので、できるだけパッケージサイ…
作成したnpmライブラリをNext.jsで読み込む時、ReferenceError: document is not definedというエラーに遭いました。 状況 作成していたnpmライブラリは、webpackを使用してバンドルし、そのJSファイルをエンドポイントとしてエクスポートしていました。 使…
自分で作成したライブラリをNext.jsにインストールした際に、Global CSS cannot be imported from within node_modules.というエラーが立ちはだかりました。 エラー内容 Global CSS cannot be imported from within node_modules. つまり、何がNGかというと…
モーダルやスナックバーなどを使用するとき、z-indexの関係でうまく一番上に出てこない...なんてことありますよね。そんな悩みに、React Portalという救世主がいるのでご紹介します。 React Portalとは Reactの公式ドキュメントでは、以下のように説明されて…
問題 apollo clientでクエリのリフェッチ時にonCompletedで指定した処理が動かない。（今回は取得情報に基づいて一覧を表示する処理でした） 解決方法 notifyOnNetworkStatusChange: true を追加する。 const { loading, data, refetch } = useQuery( GET_DO…
tailwindを使用していた時に、本番環境やdev環境にデプロイしたらスタイルが効いてない時がありました。そんな時に確認することを２つ紹介します。 tailwindcss.config.jsのpurge設定を見直す tailwindcssにはパージ機能があり、使用していないクラス名のCSS…
エラー内容 toBeを使用して、配列とオブジェクトのテストをしていたのですが、serializes to the same string というエラーに躓きました。 解決方法 toBeではなくtoEqualを使用すればOKです。 そもそも、オブジェクトや配列はtoBeではなくtoEqualを使うよう…
TypeScriptでcanvasを使用するとき、型をどうしようか迷ったのでメモです。 canvasの型 エディタの候補でも出てくると思いますが、HTMLCanvasElementです。 ただ、これを以下のように当てはめるとエラーになります>< const canvas: HTMLCanvasElement = docu…
GraphqlとReactのテストを書いているときに手こずったことを記録します。 問題 MockedProviderで定義しているはずのuseQuery(useLazyQuery)のresultのdataがundefinedになってしまう。 解決方法 fetchPolicyをno-cacheに設定する！ 今回、複数のクエリを複数…
Next.jsで環境変数を読み込むのに手間取ったので備忘録。 環境変数名にNEXT_PUBLIC_をつけているか 環境変数をクライアントサイド（ブラウザ）で使用する場合、変数名ににNEXT_PUBLIC_とつける必要があります。 サーバー側（Node.js環境）で使用する場合には…
このエラーで何時間も消えていったため、確認事項を記録しておきます。 大体のエラー原因 モック化しているリクエスト、もしくはレスポンスの型や内容が異なっている。 具体的に確認すべきこと 使用するクエリのドキュメントを正しく設定できているかクエリ…
自分の中でマウントとレンダリングの違いがごちゃごちゃになったので、調べ直してみました。 マウントとは Reactコンポーネントに対応するインスタンスとDOMノードの作成と、それをDOMツリー（DOMコンテナ）への追加を行う処理。簡単にいえば、該当のReactコ…
コンポーネントをPropsとして渡す方法に少し手こずったので、メモしておきます。 ポイント 指定するPropsの型は、JSX.ElementやReact.ReactNodeなどを使用するコンポーネントを受け取る際は、引数にpropsを受け取り、propsからコンポーネントを取り出す。※関…
エラー内容 以下のようにコードを書いていたのですが、ReferenceError: Element is not defined というエラーに遭遇していました。 ... Element.prototype.scrollIntoView = jest.fn(); ... 原因 色々と調べたところ、テスト環境の設定が誤っていました。 We…
下の画像のような、数値入力できるインディケーターというか、スライドバー・スライダーみたいなものを作りたかったので、その備忘録です。 作り方 HTMLのinput要素で作れます。 <input type="range" min="2" max="32" step="1" /> type="range"：重要。これのおかげでスライダーになってます。min：最小値を…
