JavaScript Bunとは？Remixと一緒に動かしてみた
Bunとは JavaScriptのランタイム。Node.jsと同じ立ち位置のもので、Node.jsと代替できるようにデザインされている。ただ、バンドラー・テストランナー・パッケージマネージャーとしてのツールを備えている。 以下、特徴で気にな...
JavaScript
JavaScript JavaScript 【Jest / React Testing Library】フォームのテストをすっきり書く
フォームのテストって、項目数の多さや、複雑な仕様のために、テストケースが多くなってどんどん見にくくなることってありませんか🥲そんな時にちょっと役に立つ、フォームのテストをすっきり書く方法を紹介します。 テストするフォーム（React Hoo...
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 (reading &...
JavaScript 【Testing Library】userEvent v14の破壊的変更（BREAKING CHANGE）
React Testing Library使用時、よくお世話になるuserEventですが、v14になって破壊的変更が入り、使用感が変わってました！個人的には「いいな！」と思える変更でした🙆♀️ userEventってなに？ テスト上で、...
JavaScript 【JavaScript】基本的なことを言語化してまとめてみた
普段何気なく使っている仕組みや機能でも「説明して」って言われると、うまく言えないこともしばしば。・・・でも答えたい！ということで、JavaScriptの基本的な部分を言語化してまとめてみました。 ホイスティング（巻き上げ）とは 変数や関数の...
JavaScript CJS, UMD, ESMとは？その違い。
cjs, umd, esmって何？と思ったので調べました。 まずはざっくり結論から これらは、モジュールの仕様を指します。JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みのようなものです。 JavaScrip...
JavaScript 【JavaScript】変数を定義する時の{}波カッコって何？意味は？
以下のようなコードを見たときに、解読が出来なかったので備忘録です。 const { data: itemList } = getData(id) {}の正体は？ ズバリ、分割代入です。 例えば、以下のようなコードがあるとします。 const...
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】ホイスティング（巻き上げ）とは
ホイスティング（巻き上げ）とは 変数や関数の定義（宣言）をコード実行前にメモリに配置すること。 メリット 定義する前に呼び出しても、問題なく実行されます（例：関数の定義よりも、実行を先に書く）。以下のようなコードも実行可能です◎ findN...
JavaScript 【JavaScript】getElementsByClassNameでうまくクラスを取得できないとき
クラス名に基づいて要素を取得したいときに用いられるgetElementsByClassNameですが、うまくいかないときに注意したい点があります。 それは、idなどとは異なり、複数の要素を取得してしまうことです。 そもそもid は1ドキュメ...
JavaScript 【JavaScript】var, let, const の違い・使い分け
理解に必要な前知識 ①再宣言・再代入 >>>>> 「【JavaScript】再宣言・再代入とは？」 ②スコープ >>>>> 「【JavaScript】スコープとは？スコープの種類と違い」 var 再宣言できる再代入もできる関数スコープは持つ...
JavaScript 【JavaScript】再宣言・再代入とは？
再宣言・再代入とはどういうことかお伝えします。 基本的な内容ですが、理解しておかないと「var, let, const の違い」が判りづらいです。 再宣言・再代入とは 簡単な例を挙げます。 まず、以下のコードは、「 a という変数を宣言して...
JavaScript 【JavaScript】スコープとは？スコープの種類と違い
スコープとは？ スコープとは、変数の適用範囲（使える範囲）を示す概念です。 大きく分けて２種類のスコープがあります。 グローバルスコープローカルスコープ（ブロックスコープ・関数スコープ） 以下がざっくりとした図解です。1つ1つ説明していきま...