フロントエンド フロントエンドのセキュリティ対策 フロントエンドで特に注意すべき攻撃XSS(CrossSiteScripting/クロスサイトスクリプティング)悪意のあるスクリプトがウェブサイトに注入される攻撃。ユーザーからの入力を検証またはエンコードせずに生成する出力内で使用する場合に発... 2022.09.10 フロントエンド
Thoughts セルフレビューの観点と意識していること 最近聞かれることがあったので、自分がセルフレビュー時に意識していること・観点を言語化しておこうと思いました🙋♀️※以下、「PullRequest」を「PR」、「MergeRequest」を「MR」と記載します。セルフレビューとは他の人にレ... 2022.08.13 Thoughts開発
開発 ローカル環境でクロスドメイン状態を作り出す方法 ローカル環境でクロスドメイン状態を作る方法を記録しておきます。なぜクロスドメイン状態をローカルで作りたかったか本番環境に近い状態を一時的に作りたかったからです。本番環境ではフロントとバックエンドが異なるドメインで動いていました。しかし、ロー... 2022.08.06 開発
React 【React×TypeScript】propsの型を条件分岐させる propsの型を条件によって分岐させる方法を2つ記録しておきます🙋♀️※コンポーネントのサンプルコードに関しては、あくまでコードの書き方を示すものとして見てください。1つのpropの値で分岐させるあるpropの値を元に型を分岐させるやり方... 2022.07.31 ReactTypeScriptフロントエンド
React globalThis.IS_REACT_ACT_ENVIRONMENTを設定してもエラーが解決しないとき エラー内容actがテスト環境に設定されてないという、React18から発生する可能性があるエラーです。Warning:Thecurrenttestingenvironmentisnotconfiguredtosupportact(...)対... 2022.07.25 React
JavaScript 【Jest / React Testing Library】フォームのテストをすっきり書く フォームのテストって、項目数の多さや、複雑な仕様のために、テストケースが多くなってどんどん見にくくなることってありませんか🥲そんな時にちょっと役に立つ、フォームのテストをすっきり書く方法を紹介します。テストするフォーム(ReactHookF... 2022.07.16 JavaScriptReactフロントエンド
TypeScript 【TypeScript】ユニオン型のジェネリクス使用時、Arrayメソッド(map,filter,sort…)の返り値の型が合わない 問題ユニオン型のジェネリクスを使用した値を、配列のメソッドに適用したときに発生した問題です。以下が、エラーが発生するサンプルコードです。typeDog={type:'dog'id:stringname:stringkind:... 2022.07.03 TypeScript
開発 Gitのブランチ図作成にはMermaidがおすすめ! Gitフローを図示するのにMermaidを使ってみたのですが、かなり使いやすくわかりやすかったので、記録しておきます。やりたかったことプロジェクトで採用するブランチ管理(フロー)を図示すること。既に出回っているフロー図では対応しきれないので... 2022.06.20 開発
HTML/CSS/Sass CSSでチェックマーク・チェックボックスを自作する 忘れた頃に、CSSでチェックマークやチェックボックスを作る機会がやってくるので、記録しておきます🖋チェックマークチェックマークをCSSで作る時に行うことは以下3点です。長方形の作成長方形の左辺と下辺のみ、ボーダーをつける45度回転させるHT... 2022.06.18 HTML/CSS/Sassフロントエンド
Docker Next.jsをDockerコンテナでデプロイする Next.jsをDockerコンテナ化してデプロイする際のDockerfile,docker-composeファイルを残してます。前提ローカルの開発環境はDockerで動かさず、デプロイ時のみDockerコンテナを利用するNext.jsのe... 2022.06.05 DockerNext.js
JavaScript 【Jest/Testing Library/ next/link】TypeError: Cannot read properties of null (reading ‘push’) Jest,ReactTestingLibraryを用いたテスト時に、next/link周りで出たエラーの対処法です。エラー内容TypeError:Cannotreadpropertiesofnull(reading'push'... 2022.05.18 JavaScriptNext.jsReactTypeScriptフロントエンド
JavaScript 【Testing Library】userEvent v14の破壊的変更(BREAKING CHANGE) ReactTestingLibrary使用時、よくお世話になるuserEventですが、v14になって破壊的変更が入り、使用感が変わってました!個人的には「いいな!」と思える変更でした🙆♀️userEventってなに?テスト上で、ユーザー... 2022.05.01 JavaScriptフロントエンド
エラー 【husky/lint-staged】tscを実行するとエラーになる huskyとlint-stagedを使用して、pre-commit時にtscを実行するとエラーになっていたので、解決方法を記録します。エラー内容数十行のエラーが出てきますが、内容は主に以下でした。node_modules/next/dist... 2022.04.19 エラー
開発 【VSCode】拡張機能の推奨設定方法、インストール方法 推奨する拡張機能を共有するための設定手順です。VSCodeでチーム開発を行う時に便利な機能です。プロジェクトの開発環境構築時に使用したので記録しておきます。設定手順設定ファイルを作成するextensions.jsonを.vscodeディレク... 2022.04.07 開発
React 【React Hook Form×Material UI】 defaultValue, defaultCheckedが効かない時に確認すること ReactHookForm(以下RHF)とMaterialUIを組み合わせた、defaultValue系にハマりやすいので備忘録です。useFormのresetを実行しているかAPIでdefaultValueをフェッチするときにやることです... 2022.03.24 Reactフロントエンド
Laravel 【Laravel/Carbon】blade.phpで文字列を日付に変換する コード<p>{{\Carbon\Carbon::now()->format('Y/m/d')}}</p><p>{{\Carbon\Carbon::createFromTimeString($created_at)->form... 2022.03.02 Laravel開発
開発 nodenvの基本コマンドまとめ Nodeのバージョンを設定する度検索しているので、備忘録として残します。nodenvGitHub:インストール可能なバージョン確認nodenvinstall-l指定バージョンをインストールnodenvinstall16.14.0リハッシュn... 2022.02.24 開発
フロントエンド 【Vue Router v4/Vue3】404ページを表示する方法 /*や*では効かなかった404ページを表示したい場合、/*や*と記載すればOKという記事をいくつか見ましたが、私の環境(VueRouterv4,Vuev3)では効きませんでした><constroutes=[{path:'/'... 2022.02.11 フロントエンド
バックエンド 【MySQL】複数条件で絞った件数を取得する 複数条件で集計コード例は、「usersテーブルから、nameが空かつgenderがmaleのレコード数を取得する」実行命令です。その1#AND条件selectcount(name=""andgender="male"ornull)fromu... 2022.02.08 バックエンド
開発 知っておきたいRustの基本 Rustを勉強してみて、押さえておきたい点をいくつかまとめました。周辺ツールrustupRustのバージョン管理ツール。rustupをインストールすると、通常以下もインストールされる。rustc:Rustコンパイラcargo:Rustのパッ... 2022.02.05 開発