フロントエンド フロントエンドのセキュリティ対策
フロントエンドで特に注意すべき攻撃 XSS（Cross Site Scripting / クロスサイトスクリプティング） 悪意のあるスクリプトがウェブサイトに注入される攻撃。ユーザーからの入力を検証またはエンコードせずに生成する出力内で使用...
フロントエンド
フロントエンド 
React 【React×TypeScript】propsの型を条件分岐させる
propsの型を条件によって分岐させる方法を２つ記録しておきます🙋♀️※コンポーネントのサンプルコードに関しては、あくまでコードの書き方を示すものとして見てください。 1つのpropの値で分岐させる あるpropの値を元に型を分岐させるや...
React globalThis.IS_REACT_ACT_ENVIRONMENTを設定してもエラーが解決しないとき
エラー内容 actがテスト環境に設定されてないという、React18から発生する可能性があるエラーです。 Warning: The current testing environment is not configured to suppo...
JavaScript 【Jest / React Testing Library】フォームのテストをすっきり書く
フォームのテストって、項目数の多さや、複雑な仕様のために、テストケースが多くなってどんどん見にくくなることってありませんか🥲そんな時にちょっと役に立つ、フォームのテストをすっきり書く方法を紹介します。 テストするフォーム（React Hoo...
TypeScript 【TypeScript】ユニオン型のジェネリクス使用時、Arrayメソッド(map,filter,sort…)の返り値の型が合わない
問題 ユニオン型のジェネリクスを使用した値を、配列のメソッドに適用したときに発生した問題です。以下が、エラーが発生するサンプルコードです。 type Dog = { type: 'dog' id: string name: ...
HTML/CSS/Sass CSSでチェックマーク・チェックボックスを自作する
忘れた頃に、CSSでチェックマークやチェックボックスを作る機会がやってくるので、記録しておきます🖋 チェックマーク チェックマークをCSSで作る時に行うことは以下3点です。 長方形の作成長方形の左辺と下辺のみ、ボーダーをつける45度回転させ...
Docker Next.jsをDockerコンテナでデプロイする
Next.jsをDockerコンテナ化してデプロイする際のDockerfile, docker-composeファイルを残してます。 前提 ローカルの開発環境はDockerで動かさず、デプロイ時のみDockerコンテナを利用するNext.j...
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 (reading &...
JavaScript 【Testing Library】userEvent v14の破壊的変更（BREAKING CHANGE）
React Testing Library使用時、よくお世話になるuserEventですが、v14になって破壊的変更が入り、使用感が変わってました！個人的には「いいな！」と思える変更でした🙆♀️ userEventってなに？ テスト上で、...
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 routes = [ {...
HTML/CSS/Sass 【CSS】枠線の付け方3つ（内側も含む）
「CSSで枠線をつけるといえばborder！」ではありますが、borderだと思い通りのスタイルにならないこともしばしば。。そこで、私が用途に合わせて使い分けている、枠線の付け方を紹介します。 枠線を表現できるプロパティ3つ border ...
JavaScript 【JavaScript】基本的なことを言語化してまとめてみた
普段何気なく使っている仕組みや機能でも「説明して」って言われると、うまく言えないこともしばしば。・・・でも答えたい！ということで、JavaScriptの基本的な部分を言語化してまとめてみました。 ホイスティング（巻き上げ）とは 変数や関数の...
React 【React/Formik】入力時に自動送信する方法
Formikを使用しているときに、入力に合わせて自動送信させたかったので、調べて実装してみました。 方針 FormikのuseFormikContextを使用する！FormikのForm内の子コンポーネント等で呼び出すと、Formikの変数...
React ReactSelect(AsyncSelect)でデバウンスする方法
ReactSelect、とても便利ですね！初めて使った時は感動しました。今回はReactSelectで用意されているAsyncSelectでデバウンスする方法を記しておきます。 デバウンスとは 連続して呼び出される同じ処理を制御すること。呼...
OSS 【npmライブラリ作成】デモページの作り方（GitHub Pages）
方針 デモページのコードはexamplesディレクトリで管理。examples/srcには開発用のコードをまとめ、examples/publicは本番用のコードを格納する。デモページにはGithub Pagesを使用。examples/pu...
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を使用してバンドルし、そのJ...
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...
JavaScript CJS, UMD, ESMとは？その違い。
cjs, umd, esmって何？と思ったので調べました。 まずはざっくり結論から これらは、モジュールの仕様を指します。JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みのようなものです。 JavaScrip...