JavaScript Bunとは？Remixと一緒に動かしてみた
Bunとは JavaScriptのランタイム。Node.jsと同じ立ち位置のもので、Node.jsと代替できるようにデザインされている。ただ、バンドラー・テストランナー・パッケージマネージャーとしてのツールを備えている。 以下、特徴で気にな...
開発
JavaScript Next.js Next.js14のチュートリアルやってみて思ったことを書きなぐる
え、起動早くない？ yarn dev実行したところ、サーバーが起動するのが早いなと感じた。 使いたいライブラリめもっとく clsx。これ何回か見たことあるけどいいよね。今度合いそうなプロジェクトあったら使おう。 page.tsxがなるものが...
フロントエンド 【Vue】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 actual value
エラー内容 Vue2からVue3に移行する際、以下のエラーが出ました。 Uncaught (in promise) TypeError: 'get' on proxy: property 'property'...
フロントエンド フロントエンドのセキュリティ対策
フロントエンドで特に注意すべき攻撃 XSS（Cross Site Scripting / クロスサイトスクリプティング） 悪意のあるスクリプトがウェブサイトに注入される攻撃。ユーザーからの入力を検証またはエンコードせずに生成する出力内で使用...
Thoughts セルフレビューの観点と意識していること
最近聞かれることがあったので、自分がセルフレビュー時に意識していること・観点を言語化しておこうと思いました🙋♀️※以下、「Pull Request」を「PR」、「Merge Request」を「MR」と記載します。 セルフレビューとは 他...
開発 ローカル環境でクロスドメイン状態を作り出す方法
ローカル環境でクロスドメイン状態を作る方法を記録しておきます。 なぜクロスドメイン状態をローカルで作りたかったか 本番環境に近い状態を一時的に作りたかったからです。 本番環境ではフロントとバックエンドが異なるドメインで動いていました。しかし...
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: ...
開発 Gitのブランチ図作成にはMermaidがおすすめ！
Gitフローを図示するのにMermaidを使ってみたのですが、かなり使いやすくわかりやすかったので、記録しておきます。 やりたかったこと プロジェクトで採用するブランチ管理（フロー）を図示すること。既に出回っているフロー図では対応しきれない...
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ってなに？ テスト上で、...
エラー 【husky/lint-staged】tscを実行するとエラーになる
huskyとlint-stagedを使用して、pre-commit時にtscを実行するとエラーになっていたので、解決方法を記録します。 エラー内容 数十行のエラーが出てきますが、内容は主に以下でした。 node_modules/next/d...
開発 【VSCode】拡張機能の推奨設定方法、インストール方法
推奨する拡張機能を共有するための設定手順です。VSCodeでチーム開発を行う時に便利な機能です。プロジェクトの開発環境構築時に使用したので記録しておきます。 設定手順 設定ファイルを作成する extensions.jsonを.vscodeデ...
React 【React Hook Form×Material UI】 defaultValue, defaultCheckedが効かない時に確認すること
React Hook Form（以下RHF）とMaterial UIを組み合わせた、defaultValue系にハマりやすいので備忘録です。 useFormのresetを実行しているか APIでdefaultValueをフェッチするときにや...
Laravel 【Laravel/Carbon】blade.phpで文字列を日付に変換する
コード <p>{{ \Carbon\Carbon::now()->format('Y/m/d') }}</p> <p>{{ \Carbon\Carbon::createFromTimeString($created_at)-...
開発 nodenvの基本コマンドまとめ
Nodeのバージョンを設定する度検索しているので、備忘録として残します。nodenv GitHub: インストール可能なバージョン確認 nodenv install -l 指定バージョンをインストール nodenv install 16.1...