フロントエンド

フロントエンド

フロントエンドのセキュリティ対策

フロントエンドで特に注意すべき攻撃 XSS(Cross Site Scripting / クロスサイトスクリプティング) 悪意のあるスクリプトがウェブサイトに注入される攻撃。ユーザーからの入力を検証またはエンコードせずに生成する出力内で使用...
React

【React×TypeScript】propsの型を条件分岐させる

propsの型を条件によって分岐させる方法を2つ記録しておきます🙋‍♀️※コンポーネントのサンプルコードに関しては、あくまでコードの書き方を示すものとして見てください。 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...
スポンサーリンク