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

最近聞かれることがあったので、自分がセルフレビュー時に意識していること・観点を言語化しておこうと思いました‍♀️※以下、「Pull Request」を「PR」、「Merge Request」を「MR」と記載します。 セルフレビューとは 他の人にレビューを依頼する前に、自分で…

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

propsの型を条件によって分岐させる方法を２つ記録しておきます‍♀️※コンポーネントのサンプルコードに関しては、あくまでコードの書き方を示すものとして見てください。 1つのpropの値で分岐させる あるpropの値を元に型を分岐させるやり方です。以下だと、…

エラー内容 actがテスト環境に設定されてないという、React18から発生する可能性があるエラーです。 Warning: The current testing environment is not configured to support act(...) 対応したこと Jestのセットアップファイルに以下を追記しました。実行…

フォームのテストって、項目数の多さや、複雑な仕様のために、テストケースが多くなってどんどん見にくくなることってありませんかそんな時にちょっと役に立つ、フォームのテストをすっきり書く方法を紹介します。 テストするフォーム（React Hook Form + Yu…

問題 ユニオン型のジェネリクスを使用した値を、配列のメソッドに適用したときに発生した問題です。以下が、エラーが発生するサンプルコードです。 type Dog = { type: 'dog' id: string name: string kind: 'poodle' | 'shiba' } type Cat = { type: 'cat' …

Gitフローを図示するのにMermaidを使ってみたのですが、かなり使いやすくわかりやすかったので、記録しておきます。 やりたかったこと プロジェクトで採用するブランチ管理（フロー）を図示すること。既に出回っているフロー図では対応しきれないので、オリ…

忘れた頃に、CSSでチェックマークやチェックボックスを作る機会がやってくるので、記録しておきます🖋 チェックマーク チェックマークをCSSで作る時に行うことは以下3点です。 長方形の作成長方形の左辺と下辺のみ、ボーダーをつける45度回転させる HTML <span class="check" /> CSS </span>…

Next.jsをDockerコンテナ化してデプロイする際のDockerfile, docker-composeファイルを残してます。 前提 ローカルの開発環境はDockerで動かさず、デプロイ時のみDockerコンテナを利用するNext.jsのexample with-dockerで使用されているstandalone機能が実験…

Jest, React Testing Libraryを用いたテスト時に、next/link周りで出たエラーの対処法です。 エラー内容 TypeError: Cannot read properties of null (reading 'push') 対処法 対処法はどちらでも問題ないです。 その１：next/linkをモックする jest.mock('n…

React Testing Library使用時、よくお世話になるuserEventですが、v14になって破壊的変更が入り、使用感が変わってました！個人的には「いいな！」と思える変更でした‍♀️ userEventってなに？ テスト上で、ユーザー操作によるシステム動作をシミュレートする…

huskyとlint-stagedを使用して、pre-commit時にtscを実行するとエラーになっていたので、解決方法を記録します。 エラー内容 数十行のエラーが出てきますが、内容は主に以下でした。 node_modules/next/dist/client/image.d.ts(1,8): error TS1259: Module '…

推奨する拡張機能を共有するための設定手順です。VSCodeでチーム開発を行う時に便利な機能です。プロジェクトの開発環境構築時に使用したので記録しておきます。 設定手順 設定ファイルを作成する extensions.jsonを.vscodeディレクトリ内に作成します。 お…

React Hook Form（以下RHF）とMaterial UIを組み合わせた、defaultValue系にハマりやすいので備忘録です。 useFormのresetを実行しているか APIでdefaultValueをフェッチするときにやることです。RHFは最初に渡ってきたdefaultValueをキャッシュするので、de…

コード <p>{{ \Carbon\Carbon::now()->format('Y/m/d') }}</p> <p>{{ \Carbon\Carbon::createFromTimeString($created_at)->format('Y/m/d') }}</p> ポイント ネームスペースから記載する「\Carbon\Carbon」createFromTimeStringは文字列からCarbonインスタンスを生成する…

Nodeのバージョンを設定する度検索しているので、備忘録として残します。nodenv GitHub: https://github.com/nodenv/nodenv インストール可能なバージョン確認 nodenv install -l 指定バージョンをインストール nodenv install 16.14.0 リハッシュ nodenv re…

/* や * では効かなかった 404ページを表示したい場合、/* や * と記載すればOKという記事をいくつか見ましたが、私の環境（Vue Router v4, Vue v3）では効きませんでした>< const routes = [ { path: '/', component: Home}, { path: '/*', component: NotF…

複数条件で集計 コード例は、「usersテーブルから、nameが空 かつ genderがmaleのレコード数を取得する」実行命令です。 その１ # AND条件 select count(name="" and gender="male" or null) from users; # OR条件 select count(name="" or gender="male" or…

Rustを勉強してみて、押さえておきたい点をいくつかまとめました。 周辺ツール rustup Rustのバージョン管理ツール。rustupをインストールすると、通常以下もインストールされる。 rustc：Rustコンパイラcargo：Rustのパッケージマネージャrust-std：Rustの…

zshrc/bashrc, gitconfigに設定するおすすめのエイリアスを紹介します。エイリアスをうまく使えば、効率アップや、危ないコマンドの回避ができます！ .zshrc (.bashrc) # git alias g='git' # ls系 alias ll='ls -l' alias la='ls -a' # cd系 alias ..='cd .…

「CSSで枠線をつけるといえばborder！」ではありますが、borderだと思い通りのスタイルにならないこともしばしば。。そこで、私が用途に合わせて使い分けている、枠線の付け方を紹介します。 枠線を表現できるプロパティ3つ border 枠線といえば、一番に上が…

久しぶりにWindowsでNode.jsのバージョン管理をしようとしたときに、nodistは実質メンテナンスされてないようだったので、別のNode.jsのバージョン管理ツールに乗り換えることにしました。 fnmやnvsなど他にもパッケージマネージャーがあるなかでnvm-windows…

SOFT SKILLS ソフトウェア開発者の人生マニュアルという本の中で、集中力・生産性を向上するためのテクニックとして、ポモドーロ・テクニックが紹介されていました。 ちょうど「集中力が足りないな」と思っていた時期だったんです。何かしらタスクをやってい…

docker-composeとは docker-composeは、Docker(Docker Engine)とは別のソフトウェアで、Dockerアプリケーションをもっと使いやすくするためのツール。 通常は、Dockerでサービスを立ち上げるために、Dockerfileでイメージを作成した後、コマンドでネットワー…

普段何気なく使っている仕組みや機能でも「説明して」って言われると、うまく言えないこともしばしば。・・・でも答えたい！ということで、JavaScriptの基本的な部分を言語化してまとめてみました。 ホイスティング（巻き上げ）とは 変数や関数の定義（宣言…

GitHub Actionsで現在の日時を取得する方法をメモしておきます。タイムゾーンや時刻表記は任意に変更可能です。 name: Show current date on: [push] jobs: build: name: Show current date runs-on: ubuntu-latest steps: - name: Get current date and tim…