JavaScript

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】スコープとは?スコープの種類と違い

スコープとは? スコープとは、変数の適用範囲(使える範囲)を示す概念です。 大きく分けて2種類のスコープがあります。 グローバルスコープローカルスコープ(ブロックスコープ・関数スコープ) 以下がざっくりとした図解で...
スポンサーリンク
タイトルとURLをコピーしました