JavaScript 【Jest / React Testing Library】フォームのテストをすっきり書く
フォームのテストって、項目数の多さや、複雑な仕様のために、テストケースが多くなってどんどん見にくくなることってありませんか🥲そんな時にちょっと役に立つ、フォームのテストをすっきり書く方法を紹介します。テストするフォーム（ReactHookF...
JavaScript
JavaScript JavaScript 【Jest/Testing Library/ next/link】TypeError: Cannot read properties of null (reading ‘push’)
Jest,ReactTestingLibraryを用いたテスト時に、next/link周りで出たエラーの対処法です。エラー内容TypeError:Cannotreadpropertiesofnull(reading'push'...
JavaScript 【Testing Library】userEvent v14の破壊的変更（BREAKING CHANGE）
ReactTestingLibrary使用時、よくお世話になるuserEventですが、v14になって破壊的変更が入り、使用感が変わってました！個人的には「いいな！」と思える変更でした🙆♀️userEventってなに？テスト上で、ユーザー...
JavaScript 【JavaScript】基本的なことを言語化してまとめてみた
普段何気なく使っている仕組みや機能でも「説明して」って言われると、うまく言えないこともしばしば。・・・でも答えたい！ということで、JavaScriptの基本的な部分を言語化してまとめてみました。ホイスティング（巻き上げ）とは変数や関数の定義...
JavaScript CJS, UMD, ESMとは？その違い。
cjs,umd,esmって何？と思ったので調べました。まずはざっくり結論からこれらは、モジュールの仕様を指します。JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みのようなものです。JavaScript界隈にも...
JavaScript 【JavaScript】変数を定義する時の{}波カッコって何？意味は？
以下のようなコードを見たときに、解読が出来なかったので備忘録です。const{data:itemList}=getData(id){}の正体は？ズバリ、分割代入です。例えば、以下のようなコードがあるとします。const{apple}={or...
JavaScript 【JavaScriptライブラリ/React Particles-js】簡単にParticleアニメーションを作る
しゃぼん玉のような丸がふわふわ飛ぶアニメーションを作りたくて、実際に使用したJSライブラリを紹介します。上のGIFは実際に私が作ったものです。どんなアニメーションが作れるのかこちらにデモが載っているので、ぜひ見てみてください。インストール方...
HTML/CSS/Sass 【JavaScript/jQuery】モーダル内の外部リンクが飛べない
問題モーダル内で、aタグにhrefを使用してリンク先を指定していたのですが、何をしても外部リンクに飛べませんでした。解決策いろいろ調べましたが、HTML部分でどうにかするのは難しいようだったので、ちょうど使っていたjQueryで実装しました...
JavaScript 【React × JavaScript or TypeScript】ページネーションをreact-paginateライブラリを使って実装してみた
使用したライブラリreact-paginateを使用しました。Reactのnpmでインストール可能なページネーション系で、本日時点でpopularityが第2位のものです。1位のものよりこちらの方がスタイルの調整が効きそうな気がしたのでこの...
JavaScript 【JavaScript】ホイスティング（巻き上げ）とは
ホイスティング（巻き上げ）とは変数や関数の定義（宣言）をコード実行前にメモリに配置すること。メリット定義する前に呼び出しても、問題なく実行されます（例：関数の定義よりも、実行を先に書く）。以下のようなコードも実行可能です◎findName(...
JavaScript 【JavaScript】getElementsByClassNameでうまくクラスを取得できないとき
クラス名に基づいて要素を取得したいときに用いられるgetElementsByClassNameですが、うまくいかないときに注意したい点があります。それは、idなどとは異なり、複数の要素を取得してしまうことです。そもそもidは1ドキュメントあ...
JavaScript 【JavaScript】var, let, const の違い・使い分け
理解に必要な前知識①再宣言・再代入>>>>>「【JavaScript】再宣言・再代入とは？」②スコープ>>>>>「【JavaScript】スコープとは？スコープの種類と違い」var再宣言できる再代入もできる関数スコープは持つが、それ以外は｛...
JavaScript 【JavaScript】再宣言・再代入とは？
再宣言・再代入とはどういうことかお伝えします。基本的な内容ですが、理解しておかないと「var,let,constの違い」が判りづらいです。再宣言・再代入とは簡単な例を挙げます。まず、以下のコードは、「aという変数を宣言して、aに1を代入」し...
JavaScript 【JavaScript】スコープとは？スコープの種類と違い
スコープとは？スコープとは、変数の適用範囲（使える範囲）を示す概念です。大きく分けて２種類のスコープがあります。グローバルスコープローカルスコープ（ブロックスコープ・関数スコープ）以下がざっくりとした図解です。1つ1つ説明していきます。グロ...