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