JavaScript
JavaScriptでclass・styleを操作する方法｜classListとgetComputedStyle
JavaScriptでHTML要素のclassとstyleを操作する方法を解説します。classListのadd・remove・toggle・contains・replace、style、setProperty、CSS変数、getComputedStyle、classNameとの違い、アクセシビリティとパフォーマンスまで実例で確認できます。
ARCHIVE
月: 2021年2月
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
JavaScriptのbind()、call()、apply()メソッドの使い方と違いについて
JavaScriptのbind()メソッドの基本的な使い方とcall()/apply()メソッドとの違いを具体例とともに紹介します。 また、bind()メソッドにはとても便利な使い方ができるので、実際によく使われるbin…
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でランダムに配色を変えるソースコード //乱数を作る const randomInt = (min, max) =>…
JavaScript
JavaScriptのsetInterval()とsetTimeout()を使い方
JavaScriptのsetInterval()とsetTimeout()を使い方をまとめました。 setInterval()の使い方 時刻を指定した時間ごとに返したい場合に、使えるのがsetInterval()命令です…
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の配列を加工するmap(),filter(),reduce()メソッドの使い方
配列データを加工するmap(),filter(),reduce()メソッドの使い方をまとめました。 データを転送する配列のメソッドには3種類あります。 map()メソッド,filter()メソッド,reduce()メソッ…
JavaScript
JavaScriptの配列を条件指定して確認するsome()とevery()メソッド
JavaScriptの配列を条件指定して確認するsome()メソッドとevery()メソッドをまとめました。 some()メソッド 似たようなメソッドにincludes()メソッドがあります。 includes()メソッ…
JavaScript
JavaScriptの配列のネストを解除するflat()とflatMap()メソッド
JavaScriptの配列のネストを解除するflat()メソッドとflatMap()メソッドの使い方と具体例をまとめました。 flat()メソッドの使い方 配列の中に配列があった場合でも、flat()メソッドを使うと簡単…
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…