開発

Thoughts

セルフレビューの観点と意識していること

最近聞かれることがあったので、自分がセルフレビュー時に意識していること・観点を言語化しておこうと思いました🙋‍♀️※以下、「Pull Request」を「PR」、「Merge Re...
開発

ローカル環境でクロスドメイン状態を作り出す方法

ローカル環境でクロスドメイン状態を作る方法を記録しておきます。 なぜクロスドメイン状態をローカルで作りたかったか 本番環境に近い状態を一時的に作りたかったからです。 本番環境ではフロントとバックエンドが異なるドメインで動...
React

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

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

Gitのブランチ図作成にはMermaidがおすすめ!

Gitフローを図示するのにMermaidを使ってみたのですが、かなり使いやすくわかりやすかったので、記録しておきます。 やりたかったこと プロジェクトで採用するブランチ管理(フロー)を図示すること。既に出回っているフロー図では...
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になって破壊的変更が入り、使用感が変わってました!個人的には「いいな!」と思える変更でした🙆‍♀...
エラー

【husky/lint-staged】tscを実行するとエラーになる

huskyとlint-stagedを使用して、pre-commit時にtscを実行するとエラーになっていたので、解決方法を記録します。 エラー内容 数十行のエラーが出てきますが、内容は主に以下でした。 node_modu...
開発

【VSCode】拡張機能の推奨設定方法、インストール方法

推奨する拡張機能を共有するための設定手順です。VSCodeでチーム開発を行う時に便利な機能です。プロジェクトの開発環境構築時に使用したので記録しておきます。 設定手順 設定ファイルを作成する extensions.jso...
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::createFro...
開発

nodenvの基本コマンドまとめ

Nodeのバージョンを設定する度検索しているので、備忘録として残します。nodenv GitHub: インストール可能なバージョン確認 nodenv install -l 指定バージョンをインストール noden...
フロントエンド

【Vue Router v4/Vue3】404ページを表示する方法

/* や * では効かなかった 404ページを表示したい場合、/* や * と記載すればOKという記事をいくつか見ましたが、私の環境(Vue Router v4, Vue v3)では効きませんでした>< const...
バックエンド

【MySQL】複数条件で絞った件数を取得する

複数条件で集計 コード例は、「usersテーブルから、nameが空 かつ genderがmaleのレコード数を取得する」実行命令です。 その1 # AND条件 select count(name=""...
開発

知っておきたいRustの基本

Rustを勉強してみて、押さえておきたい点をいくつかまとめました。 周辺ツール rustup Rustのバージョン管理ツール。rustupをインストールすると、通常以下もインストールされる。 rustc:Rustコ...
Git/Github

【zsh/bash/git】おすすめのエイリアス

zshrc/bashrc, gitconfigに設定するおすすめのエイリアスを紹介します。エイリアスをうまく使えば、効率アップや、危ないコマンドの回避ができます! .zshrc (.bashrc) # git alias g=...
スポンサーリンク
タイトルとURLをコピーしました