フロントエンド フロントエンドのセキュリティ対策
フロントエンドで特に注意すべき攻撃
XSS（Cross Site Scripting / クロスサイトスクリプティング）
悪意のあるスクリプトがウェブサイトに注入される攻撃。ユーザーからの入力を検証またはエンコードせずに生成す...
フロントエンド
フロントエンド 
React 【React×TypeScript】propsの型を条件分岐させる
propsの型を条件によって分岐させる方法を２つ記録しておきます🙋♀️※コンポーネントのサンプルコードに関しては、あくまでコードの書き方を示すものとして見てください。
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ファイルを読み込む仕組みのようなものです...