JavaScript
JavaScriptでランダムな色を作る方法｜HSL・HEXの実装例
JavaScriptのMath.randomでHSL・16進数カラーを生成し、ボタンで背景色を変える実装を解説します。整数範囲、CSS変数、コントラスト、セキュリティ用途との違いも確認できます。
ARCHIVE
月: 2021年2月
JavaScript
JavaScriptのflat()とflatMap()｜違い・深さ・使い分け
JavaScriptのflat()は配列のネストを指定した深さまで解除し、flatMap()は各要素を変換して1段だけ平坦化します。元配列、空スロット、Infinity、filterとの違い、失敗時の確認方法を解説します。
JavaScript
JavaScript setTimeout・setIntervalの使い方と解除方法
JavaScriptのsetTimeoutとsetIntervalの違い、clearによる解除、指定時間より遅れる理由、再帰的setTimeout、requestAnimationFrameとの使い分けを解説します。
JavaScript
JavaScriptのcall()・apply()・bind()の使い方と違い｜thisを固定する方法
JavaScriptのcall()・apply()・bind()の違いは、call()とapply()がthisを指定してその場で実行し(引数は個別か配列か)、bind()がthisと引数を固定した新しい関数を返す点です。イベントリスナーでのthisのずれ、部分適用の例も紹介します。
JavaScript
JavaScriptのmap・filter・reduceの違いと使い分け
mapは全要素を変換、filterは条件に合う要素を抽出、reduceは配列を1つの結果へ集約します。戻り値、元配列、初期値、疎な配列、メソッドチェーンの注意点を実例で整理します。
JavaScript
JavaScriptでclass・styleを操作する方法｜classListとgetComputedStyle
JavaScriptでHTML要素のclassとstyleを操作する方法を解説します。classListのadd・remove・toggle・contains・replace、style、setProperty、CSS変数、getComputedStyle、classNameとの違い、アクセシビリティとパフォーマンスまで実例で確認できます。
JavaScript
JavaScriptのfind()とfindIndex()メソッドの使い方と具体例
JavaScriptの配列やオブジェクトから見つけ出すfind()メソッドとfindIndex()メソッドを紹介します。 JavaScriptのfind()メソッド find()メソッドは、コールバック関数を引数に持ちま…
JavaScript
JavaScriptのsort()の使い方と昇順・降順(並び替え)のやり方
JavaScriptのsort()メソッドの使い方と昇順・降順のやり方をまとめました。 sort()メソッドの基本的な使い方 sort()メソッドはオリジナルの配列をソートします。 すべての配列要素は文字列に変換され、文…
JavaScript
JavaScriptで文字列を操作する
JavaScriptで文字列を操作のまとめです。 JavaScriptで文字列の基本操作 文字を一文字ずつ取得する { //文字を一文字ずつ取得する const plane = 'D456'; console.log(p…
JavaScript
JavaScirptのラッパーオブジェクト(Wrapper Object)とは
ラッパーオブジェクト(Wrapper Object)について、簡単にまとめました。 ラッパーオブジェクトとは ラッパーオブジェクト(Wrapper Object)とは、プリミティ値を内包するオブジェクトのことです。 デー…
JavaScript
JavaScriptの配列メソッド、どれを使えばいいのか？まとめ
たくさん配列のメソッドがあるけど、どれを使えばいいのか？に対しては、何をしたいのかをまず決める必要があります。 配列のメソッドで「何をしたいのか」をカテゴライズしたので、それに合わせて選択しましょう。 配列のメソッドのカ…
JavaScript
JavaScriptのforEachの使い方、for-ofループとの違い、MapとSetとの組み合わせ
JavaScriptのforEachの使い方とfor-ofループとの違いをまとめました。 また、forEachとmapとsetとの組み合わせ方も紹介します。 for-ofループの使い方については、次の記事を参考にしてみて…
JavaScript
JavaScriptのaddEventListenerで関数に引数をわたす方法(bind)
JavaScriptのaddEventListenerで関数に引数をわたす方法を紹介します。 bind()メソッドを使った方法です。 なぜ失敗するのかを把握することも大事なので、失敗例も合わせて記載します。 addEve…
JavaScript
JavaScriptの第一級関数と高階関数とは何かについてとそれらの違い
JavaScriptの第一級関数と高階関数とは何かについてとそれらの違いについてまとめました。 JavaScriptの第一級関数(first-class functions) JavaScriptは関数を第…
JavaScript
JavaScriptの関数で引数に値を渡すときと参照先を渡すときの挙動の差
とてもバグに繋がりやすいJavaScriptの関数で引数に値を渡すときと参照先を渡すときの挙動の差の具体例をみてみましょう。 JavaScriptの関数で引数に値を渡すときと参照先を渡すときの挙動の差 まずは下の具体例を…
JavaScript
JavaScriptのIIFE (即時関数、即時実行関数式)の使い方と具体例
JavaScriptのIIFE (即時関数、即時実行関数式)の使い方と具体例を紹介します。 JavaScriptのIIFE (即時実行関数式)の使い方と具体例 即時実行関数式は、(IIFE,immediately inv…
JavaScript
JavaScriptのクロージャーについて
JavaScriptのクロージャーについてまとめました。 クロージャー(closures)について クロージャーとは、レキシカルスコープの変数を関数が使用している状態のことです。 クロージャーを使ったプライベート変数の定…
JavaScript
JavaScriptの配列を条件指定して確認するsome()とevery()メソッド
JavaScriptの配列を条件指定して確認するsome()メソッドとevery()メソッドをまとめました。 some()メソッド 似たようなメソッドにincludes()メソッドがあります。 includes()メソッ…
JavaScript
JavaScriptのfill()とArray.from()メソッドで配列を作成
JavaScriptのfill()とArray.from()メソッドで配列を作成方法をまとめました。 fill()メソッドの使い方 { const arr = [1,2,3,4,4,5,6,6,7]; console.l…
JavaScript
JavaScriptのMathメソッドと数値と文字列の変換や確認方法のまとめ
JavaScriptの数値確認方法をまとめました。 JavaScriptの数値で気をつけるべき挙動 Base 10（10進数）というのは、0から9で数値を表します。 Banary base 2(2進数)は0か1かで数…
JavaScript
JavaScriptのデータ型：Bigintについての基本まとめ
JavaScriptのデータ型であるBigint型についてまとめました。 JavaScriptのBigint型の導入背景 JavaScriptのNumber（数値型）は倍精度浮動小数点数です。 これはどういう意味かという…
JavaScript
JavaScriptでDOMはどうやって動いているのか？その背景事情
ブラウザが、HTMLを読み込むとDOM(Document Object Model、文書オブジェクトモデル)と呼ばれるデータ構造が作られます。 DOMはHTMLやXMLという文書のためのAPI(アプリケーションプログラミ…
JavaScript
JavaScriptで属性を操作する方法まとめ
JavaScriptで属性を操作する方法まとめました。 要素の属性を操作する DOMではいくつかの値以外は、属性と同じプロパティが用意されています。 たとえば、下の例では、alt属性を指定するために、JavaScript…
JavaScript
JavaScriptでスクロールをするプログラムの書き方(旧式とモダンなやり方)
JavaScriptでスクロールをするプログラムの書き方を旧式の方法とモダンなやり方の両方をまとめました。 モダンなやり方はまだブラウザサポートが完璧ではないので、状況に応じて使いこなせるといいでしょう。 JavaScr…
JavaScript
JavaScriptのイベントの伝播について【キャプチャリングとバブリング】
JavaScriptのイベントの伝播(Event Propagation)についてまとめました。 イベントの伝播(Event Propagation) 子要素にクリックイベントがある場合、親をたどってどんどん伝播していく…
JavaScript
JavaScript【タブ機能】のプログラムの書き方
JavaScriptでタブ機能のプログラムの書き方を紹介します。 タブ機能のプログラムの書き方 HTML <div class="about"> <div class="a…