フロントエンド フロントエンドのセキュリティ対策 フロントエンドで特に注意すべき攻撃 XSS(Cross Site Scripting / クロスサイトスクリプティング) 悪意のあるスクリプトがウェブサイトに注入される攻撃。ユーザーからの入力を検証またはエンコードせずに生成す... 2022.09.10 フロントエンド
React 【React×TypeScript】propsの型を条件分岐させる propsの型を条件によって分岐させる方法を2つ記録しておきます🙋♀️※コンポーネントのサンプルコードに関しては、あくまでコードの書き方を示すものとして見てください。 1つ... 2022.07.31 ReactTypeScriptフロントエンド
React globalThis.IS_REACT_ACT_ENVIRONMENTを設定してもエラーが解決しないとき エラー内容 actがテスト環境に設定されてないという、React18から発生する可能性があるエラーです。 Warning: The current testing environment is not configured t... 2022.07.25 React
JavaScript 【Jest / React Testing Library】フォームのテストをすっきり書く フォームのテストって、項目数の多さや、複雑な仕様のために、テストケースが多くなってどんどん見にくくなることってありませんか🥲そんな時にちょっと役に立つ、フォームのテストをすっきり書く方法を紹介します。 テストするフォ... 2022.07.16 JavaScriptReactフロントエンド
TypeScript 【TypeScript】ユニオン型のジェネリクス使用時、Arrayメソッド(map,filter,sort…)の返り値の型が合わない 問題 ユニオン型のジェネリクスを使用した値を、配列のメソッドに適用したときに発生した問題です。以下が、エラーが発生するサンプルコードです。 type Dog = { type: 'dog' id: st... 2022.07.03 TypeScript
HTML/CSS/Sass CSSでチェックマーク・チェックボックスを自作する 忘れた頃に、CSSでチェックマークやチェックボックスを作る機会がやってくるので、記録しておきます🖋 チェックマーク チェックマークをCSSで作る時に行うことは以下3点です。 長方形の作成長方形の左... 2022.06.18 HTML/CSS/Sassフロントエンド
Docker Next.jsをDockerコンテナでデプロイする Next.jsをDockerコンテナ化してデプロイする際のDockerfile, docker-composeファイルを残してます。 前提 ローカルの開発環境はDockerで動かさず、デプロイ時のみDockerコンテナを利用す... 2022.06.05 DockerNext.js
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... 2022.05.18 JavaScriptNext.jsReactTypeScriptフロントエンド
JavaScript 【Testing Library】userEvent v14の破壊的変更(BREAKING CHANGE) React Testing Library使用時、よくお世話になるuserEventですが、v14になって破壊的変更が入り、使用感が変わってました!個人的には「いいな!」と思える変更でした🙆♀... 2022.05.01 JavaScriptフロントエンド
React 【React Hook Form×Material UI】 defaultValue, defaultCheckedが効かない時に確認すること React Hook Form(以下RHF)とMaterial UIを組み合わせた、defaultValue系にハマりやすいので備忘録です。 useFormのresetを実行しているか APIでdefaultValueをフェッ... 2022.03.24 Reactフロントエンド
フロントエンド 【Vue Router v4/Vue3】404ページを表示する方法 /* や * では効かなかった 404ページを表示したい場合、/* や * と記載すればOKという記事をいくつか見ましたが、私の環境(Vue Router v4, Vue v3)では効きませんでした>< const... 2022.02.11 フロントエンド
HTML/CSS/Sass 【CSS】枠線の付け方3つ(内側も含む) 「CSSで枠線をつけるといえばborder!」ではありますが、borderだと思い通りのスタイルにならないこともしばしば。。そこで、私が用途に合わせて使い分けている、枠線の付け方を紹介します。 枠線を表現できるプロパティ3つ ... 2022.01.29 HTML/CSS/Sassフロントエンド
JavaScript 【JavaScript】基本的なことを言語化してまとめてみた 普段何気なく使っている仕組みや機能でも「説明して」って言われると、うまく言えないこともしばしば。・・・でも答えたい!ということで、JavaScriptの基本的な部分を言語化してまとめてみました。 ホイスティング(巻き上げ)とは ... 2022.01.08 JavaScriptフロントエンド
React 【React/Formik】入力時に自動送信する方法 Formikを使用しているときに、入力に合わせて自動送信させたかったので、調べて実装してみました。 方針 FormikのuseFormikContextを使用する!FormikのForm内の子コンポーネント等で呼び出すと、Fo... 2021.12.15 Reactフロントエンド
React ReactSelect(AsyncSelect)でデバウンスする方法 ReactSelect、とても便利ですね!初めて使った時は感動しました。今回はReactSelectで用意されているAsyncSelectでデバウンスする方法を記しておきます。 デバウンスとは 連続して呼び出される同じ... 2021.12.06 Reactフロントエンド
OSS 【npmライブラリ作成】デモページの作り方(GitHub Pages) 方針 デモページのコードはexamplesディレクトリで管理。examples/srcには開発用のコードをまとめ、examples/publicは本番用のコードを格納する。デモページにはGithub Pagesを使用。example... 2021.12.04 OSSフロントエンド
OSS 【npmライブラリ作成】パッケージサイズ(package size, unpacked size)を減らす2つの方法 自分でnpmライブラリを作ったのですが、そのパッケージサイズが大きく、減らす方法を模索しました。npmサイトでは、各ライブラリのページにUnpacked Sizeが表示されますし、ユーザーがライブラリを選択するときの基準にもなるので、でき... 2021.11.20 OSSフロントエンド
Next.js 【npmライブラリ作成×webpack×Next.js】ReferenceError: document is not defined 作成したnpmライブラリをNext.jsで読み込む時、ReferenceError: document is not definedというエラーに遭いました。 状況 作成していたnpmライブラリは、webpackを使用してバン... 2021.11.18 Next.jsOSSフロントエンド
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... 2021.11.18 Next.jsOSSフロントエンド
JavaScript CJS, UMD, ESMとは?その違い。 cjs, umd, esmって何?と思ったので調べました。 まずはざっくり結論から これらは、モジュールの仕様を指します。JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みのようなものです... 2021.11.16 JavaScript