【JavaScript】コードレシピ集を全ページやって新発見したこと集(前半)

JavaScript

プログラミング歴10ヶ月、Javascript歴約150hr程の私が、コードレシピ集の全ページに目を通し、新たに学んだReact開発に使えそうなメソッドを余すことなくまとめました。

書籍はこちら

書籍詳細

JavaScript コードレシピ集

池田 秦延, 鹿野 壮 著

技術評論社 発行

2019年2月8日 初版 第1刷発行

逆に、既に知っていた、超基本的なことは本記事にはまとめていないです。

超基礎は以前にこちらにまとめていますのでご覧ください。

目次
  1. 基礎
  2. 真偽値、数値、文字の扱い
  3. 複数データの扱い
  4. データについて深く知る
  5. 日付や時間の扱い
  6. ブラウザの操作方法
  7. ユーザーアクションの扱い
  8. HTML要素の操作方法
  9. まとめ

基礎

console.logは複数の値をカンマ区切りで設定できる

console.log("現在の日時は", new Date(), "です");

> 現在の日時は Wed Feb 23 2022 19:53:11 GMT+0900 (Japan Standard Time) です

四則演算

べき乗は**

console.log(3 ** 3);

> 27

比較演算子==と===の違い

==に対し、===は型の概念が加わる。

具体例を挙げると、、

const num1 = 1;
const num2 = "1";
console.log(num1 == num2);
> true

console.log(num1 === num2);
> false

num1は「数値」、num2は「文字列」であり、型が異なりますが、値は同じです。

このような場合に、==では同じとみなされ、===では型の概念を含むため異なるとみなされます。

関数の中のreturn

returnによって、その時点で関数の処理は終了され、それ以降の処理は実行されません。

そのため、関数内にreturnはいくつも記述することができます。

function myFunction(a, b) {
  if (a >= 100) {
    return a;
  }
  return b
}

この場合、100より小さければ、bが返ります。

関数で不特定数の引数を受け取る

function calcSum(...prices) {
  console.log(prices);
  let result = 0;
  for (const value of prices) {
    result += value;
  }
  return result;
}

const result2 = calcSum(5, 10, 15);
console.log(result2);

> [5, 10, 15]
> 30

「…引数」とすることで、不特定数の引数を受け取ることができます。

受け取った引数は配列の形となっています。

switch文の応用的な使い方

switc文ではbreakを記載しないと、caseはその次(下)の処理を実行してしまいます。

この性質を利用し、逆に複数の値をまとめて処理することもできます。

const myFruit = "りんご";

switch (myFruit) {
  case "りんご":
  case "みかん":
    console.log("りんごかみかんです。");
    break;
  default:
    console.log("その他です。");
}

> りんごかみかんです。

繰り返し処理で特定の条件下のみ処理をスキップ

continue文を使います。

continueを使うと、それ以降の処理がスキップされ、次のループに移ります。

continueを使用しない場合、for文はindexの数だけ繰り返されるため、以下の出力結果とまります。

for (let index = 0; index < 5; index++) {
  if (index % 2 === 0) {
    console.log(`偶数${index}`);
  }
  console.log(`奇数${index}`);
}
console.log("ループ終了");

>
偶数0
奇数0
奇数1
偶数2
奇数2
奇数3
偶数4
奇数4
ループ終了

これにcontinueを使用すると、、

for (let index = 0; index < 5; index++) {
  if (index % 2 === 0) {
    console.log(`偶数${index}`);
    continue;
  }
  console.log(`奇数${index}`);
}
console.log("ループ終了");

>
偶数0
奇数1
偶数2
奇数3
偶数4
ループ終了

偶数だった場合、そこでループを抜けるため、奇数を出力しない、求めていた結果となりました。

continueを使ってifのネストを浅くする

上記で使用したcontinueを、ifのネストを浅くすることを目的に使用することもできます。

function myFunction(flagA) {
  for (let index = 0; index < 5; index++) {
    if (flagA === true) {
      if (index % 2 !== 0) {
        console.log(index);
      }
    }
  }
}
myFunction(true);

>
1
2

ifにifがネストされていますね。。

flagAがtrueのとき、2で割って0じゃなかったときに実行するということは、

flagAがfalseのとき、2で割って0だったときをスキップすればよいのです。

function myFunction(flagA) {
  for (let index = 0; index < 5; index++) {
    if (flagA === false) {
      continue;
    }
    if (index % 2 === 0) {
      continue;
    }
    console.log(index);
  }
}
myFunction(true);

>
1
2

continueを使っていないときと同じ結果となりました。

真偽値、数値、文字の扱い

真偽値の反転

console.log(!true);

頭に!を付けることで、真偽値が反転する。

四捨五入、切り捨て、切り上げ

Math.round四捨五入
Math.floor切り捨て
Math.ceil切り上げ
Math.trunc整数部分を返す

具体例で見てみましょう。

Math.round(3.51); // 4
Math.floor(3.51); //3
Math.ceil(3.51); //4
Math.trunc(3.51); //3

乱数を返す

乱数を返す場合は、0以上1未満の乱数を返す以下を使用します。

Math.random()

以下のような結果を返します。

Math.random();
> 0.4854626544518239
Math.random();
> 0.815232779793388
Math.random();
> 0.1752862335043157
Math.random();
> 0.34156366210002886
Math.random();
> 0.22048083127887041

文字列の両端の空白を取り除く

文字列.trim()

取り除く対象となるのは、以下3点です。

  • スペース(半角/全角 両方)
  • タブ
  • 改行(\n)

ただし、文字列中の空白は取り除かれない。

文字列のインデックス(位置)を取得する

検索文字列が最初に現れるインデックス(位置)を返す
文字列.indexOf(検索文字列)

検索文字列が最後に現れるインデックス(位置)を返す
文字列.lastIndesOf(検索文字列)

正規表現にマッチする文字列のインデックス(位置)を返す
文字列.search(正規表現)

indexOf, lastIndesOfは配列での検索でも使用できる。

使用例

const myString = "JavaScriptのプロになろう";

const a1 = myString.indexOf("a");
console.log(a1)
> 1

const a1 = myString.lastIndexOf("a");
console.log(a1)
> 3

対象の文字列に検索した文字列が含まれない場合は-1を返します。

const a1 = myString.indexOf("s");
console.log(a1)
> -1

大文字小文字は区別され判定されます。

検索開始文字インデックス(位置)を第2引数に指定することができる
const myString = "JavaScriptのプロになろう";

const a1 = myString.indexOf("a", 2);
console.log(a1)
> 3

開始インデックスを指定することで、1番目でなく3番目のaを検出することができました。

文字列が含まれているかを調べる

対象の文字列に、検索したい文字列が含まれているかを確認し、真偽値で返します。

const myString = "JavaScriptのプロになろう";

指定した文字列が含まれてれいるかを調べる
const a1 = myString.includes("Script");
console.log(a1);
> true

指定した文字列で始まるかを調べる
const a2 = myString.startsWith("プロ");
console.log(a2);
> false

指定した文字列で終わるかを調べる
const a3 = myString.endsWith("なろう");
console.log(a3);
> true

includesは配列での検索でも使用できる。

指定したインデックス(位置)の文字列を取得する

const myString = "JavaScriptのプロになろう";
myString.charAt(10);

> の

文字列から、指定の位置から指定の文字数取り出す

よく似たメソッドslice()が、始まりと終わりの位置を指定して取得するものであるのに対し、substr()は文字数を指定する。

"JavaScript".substr(4, 6);
> 'Script'

インデックス4を開始位置として、そこから6文字。

文字列を別の文字列に置き換える

電話番号の-を除く際などに使える。

let phoneNumber = "0123-456-789";
phoneNumber.replace("-", "");
> '0123456-789'

replaceを使うと、第1引数で指定した”-“を、第2引数で指定した”無し”に変更することができます。

しかし、置換対象となるのは最初にマッチした文字のみですので2つ目の”-“が置き換わっていません。

この場合、正規表現のgオプションを使い、文字列全体のマッチを指定することで置き換えが可能となります。

let phoneNumber = "0123-456-789";
phoneNumber.replace(/-/g, "");
> '0123456789'

文字列を分割し、配列で取得する

"JavaScript".split("");
> ['J', 'a', 'v', 'a', 'S', 'c', 'r', 'i', 'p', 't']

"JavaScript".split("a");
> ['J', 'v', 'Script']

引数に区切り文字を指定する。

正規表現のパターンにマッチするかを調べる

/^iP/.test("iPhone");
> true

/ /の中に正規表現を記述し、マッチするかを確認することができます。

この場合、「iPhone」が「iP」で始まっているかを見ています。

結果は真偽値で返されます。

数値の桁数を指定する

小数点以下を指定桁数にする

(1234.5678).toFixed(2)
> '1234.57'

桁数を2と指定しているので、小数点第2位までの値となるよう、小数点第3位が四捨五入されます。

指定桁数の精度にする

(1234.5678).toPrecision(6);
> '1234.57'

toPrecisionは全ての桁数を指定するため、指定桁数を6と指定すると、上記のtoFixedと同じ結果となる。

逆に、出力桁数を増やすこともできる。

(3).toPrecision(4);
> '3.000'

文字列の長さを指定して取得する

日付や、時間の10以下の値を2桁に統一する際に使えます。

"9".padStart(2, "0");
> '09'

第1引数に桁数を、第2引数に冒頭に追加する文字を指定する。

"fff".padEnd(6, "0");
> 'fff000'

第1引数に桁数を、第2引数に末尾に追加する文字を指定する。

日本語をURIにエンコード/URIをデコードする

例えば、SMSから日本語を取得して、その日本語でURLを発行するときに使える。

メソッドは2種類あります。

encodeURI('http://example/マイページ')
> 'http://example/%E3%83%9E%E3%82%A4%E3%83%9A%E3%83%BC%E3%82%B8'

encodeURIComponent('http://example/マイページ')
> 'http%3A%2F%2Fexample%2F%E3%83%9E%E3%82%A4%E3%83%9A%E3%83%BC%E3%82%B8'

この2つの違いは、どちらもエンコードをするメソッドですが、encodeURIComponentの方は、「/ ? = + : @ $ ; , #」も含めエンコードするため対象が多いです。

これらをデコードしましょう。

decodeURI("http://example/%E3%83%9E%E3%82%A4%E3%83%9A%E3%83%BC%E3%82%B8");

decodeURIComponent(
  "http%3A%2F%2Fexample%2F%E3%83%9E%E3%82%A4%E3%83%9A%E3%83%BC%E3%82%B8"
);

どちらも
> 'http://example/マイページ'

複数データの扱い

配列に要素を追加

配列の末端に要素を追加するpushはよく使いますが、

先頭に追加するメソッドもあります。

const alcohol = ["ワイン", "ビール"];
alcohol.unshift("ハイボール");
console.log(alcohol);

> ['ハイボール', 'ワイン', 'ビール']

配列の要素を削除

取り除いた値を取得することも、取り除かれた配列を取得することもできます。

先頭の要素を取り除く

const nuts = ["アーモンド", "くるみ", "カシューナッツ"];
const shiftedValue = nuts.shift();
console.log(shiftedValue);
console.log(nuts);

> アーモンド
> ['くるみ', 'カシューナッツ']

末尾の要素を取り除く

const nuts = ["アーモンド", "くるみ", "カシューナッツ"];
const poppedValue = nuts.pop();
console.log(poppedValue);
console.log(nuts);

> カシューナッツ
> ['アーモンド', 'くるみ']

配列内の要素を別の要素に置き換える

const nuts = ["アーモンド", "くるみ", "カシューナッツ"];
nuts.splice(1, 1, 'マカダミアナッツ', 'ピーナッツ')
console.log(nuts)

> ['アーモンド', 'マカダミアナッツ', 'ピーナッツ', 'カシューナッツ']

取り出す数を2個とすると
const nuts = ["アーモンド", "くるみ", "カシューナッツ"];
nuts.splice(1, 2, 'マカダミアナッツ', 'ピーナッツ')
console.log(nuts)

> ['アーモンド', 'マカダミアナッツ', 'ピーナッツ']

第1引数:追加位置

第2引数:取り出す数

第3引数以降:追加したい要素

配列を結合する

「concat()」または「スプレッド演算子」を使用します。

concat()

const array1 = ["赤", "青", "緑"];
const array2 = array1.concat(["黄"]);
console.log(array2);

> ['赤', '青', '緑', '黄']

スプレッド演算子

スプレッド演算子を使用すると、配列の要素を全て展開した配列を返してくれます。

const array1 = ["赤", "青"];
const array2 = ["緑", "白"];
const array3 = [...array1, ...array2];
console.log(array3);

> ['赤', '青', '緑', '白']

逆にスプレッド演算子を使って文字列を分割し、配列を生成することもできます。

myString = "こんにちは";

0console.log([...myString]);

> ['こ', 'ん', 'に', 'ち', 'は']

配列の要素を結合して文字列にする

「join」を使用します。

const array = [1, 2, 3];
console.log(array.join(""));
> 123

const array = [1, 2, 3];
console.log(array.join());
> 1,2,3

引数には、要素と要素の間に挿入する文字列を指定できる。

“”とした場合、挿入無しとなり、省略した場合は、カンマ,で結合される。

配列の中から、指定した条件を満たす要素を取得する

「find」を使用します。

findの引数には、真偽値を返すコールバック関数が入ります。

const array = ["赤", "青", "緑"];
const targetColor = array.find((element) => {
  console.log(element);
  return element === "青";
});

> 赤
> 青

青で終わります。これはなぜかというと、コールバック関数に合致したためです。

この処理のあとで、targetColorを出力すると、、

const array = ["赤", "青", "緑"];
const targetColor = array.find((element) => {
  return element === "青";
});
console.log(targetColor);

> 青

取得したい対象の「青」が返ってきます。

配列の並びを逆にする

「reverse()」を使用します。

const array = [1, 2, 3];
array.reverse();
console.log(array);

> [3, 2, 1]

配列内要素をソートする

「sort()」を使用します。

2つの要素(a, b)を受け取り、戻り値の数値の大小により順番を決めます。

const array = [1, 2, 2, 3];
array.sort((a, b) => {
  console.log(`a${a}`);
  console.log(`b${b}`);
  if (a < b) {
    return 1; //この場合、a, bの順にソート
  }
  if (a === b) {
    return 0; //この場合、そのまま
  }
  if (a > b) {
    return -1; //この場合、b, aの順にソート
  }
});

> [3, 2, 2, 1]

// a, bには以下のように値が入っています。
> a2
> b1
> a2
> b2
> a2
> b1
> a2
> b2
> a3
> b2
> a3
> b2

文字列の順番で配列をソート

文字列順でソートをすると、アルファベットの場合、大文字が先に来るため、意図したソートとならない。

そこで使用するのがlocaleCompare()

これにより、大文字小文字を無視してソートがされる。

localeCompare()を使わない場合

const array1 = ["Green", "blue", "Orange"];
array1.sort();
console.log(array1);

> ['Green', 'Orange', 'blue']

アルファベット順であれば、”b”から始まるblueが一番最初に来てほしいですが、大文字が先に来るようになってしまっています。

localeCompare()を使用した場合

const array = ["Green", "blue", "Orange"];
array.sort((a, b) => a.localeCompare(b));
console.log(array);

> ['blue', 'Green', 'Orange']

配列の合計値を計算する

配列の各要素を左から右に処理して組み合わせた値を生成する。

reduce()を使用する。

配列の合計を、for文を使って求める場合

const priceList = [100, 500, 900];

let sum = 0;

for (const price of priceList) {
  sum += price;
}

> 1500

reduce()を使用して順番に足していく

const priceList = [100, 500, 900];

const sum = priceList.reduce((previous, current) => {
  console.log(`previous${previous}`);
  console.log(`current${current}`);
  return previous + current;
});

console.log(sum);

> previous100
> current500
> previous600
> current900
> 1500

previousと、currentにどんな値が入っているかわかるようにconsole出力しています。

reduceは左から右に処理しましたが、reduceRightを使うと右から左に処理することが可能となります。

オブジェクトのコピー

2通りの方法がある。

Object.assignを使う方法

const object1 = {
  id: 1,
  name: "taro",
};

const copiedObject1 = Object.assign({}, object1);

console.log(copiedObject1);

> {id: 1, name: 'taro'}

スプレッド演算子を使う方法

const object1 = {
  id: 1,
  name: "taro",
};

const copiedObject2 = { ...object1 };

console.log(copiedObject2);

> {id: 1, name: 'taro'}

これら2つのコピーの仕方は、シャローコピーとなり、コピー元のオブジェクトの操作は、コピー先のオブジェクトに影響します。

const object3 = {
  id: 1,
  name: ["りんご", "バナナ", "みかん"],
};
const copiedObject2 = { ...object3 };

object3.name[2] = "オレンジ";

console.log(copiedObject2);

> 
const object3 = {
  id: 1,
  name: ["りんご", "バナナ", "オレンジ"],
};

コピー後のオブジェクトに変更を加えたはずですが、変更前のオブジェクトも変わってしまっていることが確認できました。

オブジェクトに値があるかを調べる

hasOwnPropertyを使用する方法

const userData = {
  id: 1,
  name: "Tom",
  age: 30,
};

idに値があるか
console.log(userData.hasOwnProperty("id"));
> true

emailに値があるか
console.log(userData.hasOwnProperty("email"));
> false

emailというプロパティが存在しないのでfalseになる。

プロパティ名 in オブジェクトを使用する場合

console.log("id" in userData);
> true

オブジェクトの名前

const userData = {
  id: 1,
  name: "Tom",
  age: 30,
};

このようなオブジェクトがあるとする。

この中の、キー、バリュー、プロパティとはどこのことか?

キー id, name, age
バリュー 1, "Tom", 30
プロパティ キーとバリューの括り

オブジェクトの各値(キー、バリュー、プロパティ)を取得する

const userData = {
  id: 1,
  name: "Tom",
  age: 30,
};

console.log(Object.keys(userData));
> ["id", "name", "age"][

console.log(Object.values(userData));
> [(1, "Tom", 30)]

console.log(Object.entries(userData));
> [["id", 1], [("name", "Tom")], [("age", 30)]]

オブジェクトの変更を不可にする

オブジェクトはconstで定義したとしても、オブジェクトのプロパティは、追加、削除、変更ができてしまいます。

そのような変更ができないようにするためには、freezeを使用します。

const object2 = { id: 10, name: "Tom" };
Object.freeze(object2);

変更不可かどうかの真偽値を返す

console.log(Object.isFrozen(object2));
> true

データについて深く知る

データの型を調べる

typeofを使用する。

console.log(typeof true);
> boolean

console.log(typeof 100);
> number

console.log(typeof "アーモンド");
> string

console.log(typeof null);
> object

console.log(undefined);
> undefined

console.log(typeof [1, 2, 3]);
> object

値がオブジェクトのインスタンスかどうかを調べる

instanceofを使用します。

const today = new Date();

console.log(today instanceof Date);

> true

この結果から、todayがDataのオブジェクトのインスタンスであることがわかります。

ここで、インスタンスとは?

クラスを元に作成したオブジェクトの実体をいいます。

「値渡し」と「参照渡し」の違い

プリミティブ型のデータは「値渡し」

オブジェクト型のデータは「参照渡し」となります。

この違いを見てみましょう。

「値渡し」の例

let a = 100;
let b = a;
a = 200;

console.log(a);
console.log(b);

> 200
> 100

bにはaの100が”値渡し”され、

aに200を渡しているが、bの値は変わらない。

一方で配列の場合

let a = [1, 2, 3];
let b = a;
a[0] = 100;

console.log(a);
console.log(b);

> [100, 2, 3]
> [100, 2, 3]

bにはaの[1, 2, 3]が”参照渡し”され、

a[0]の値が書き換えらる。

型の変換をする

数値⇔文字列などに使える。

const sum = 100 + Number("200");

console.log(sum);

> 300

その他の型変換

// 文字列に変換
console.log(String(100));
> '100'

// 文字列を数値型(整数)に変換
console.log(parseInt("100"));
> 100

// 文字列を数値型(浮動小数点)に変換
console.log(parseFloat("314e-2"));
> 3.14

undefinedが出る例

以下の様な時にundefinedがでます。

  • 変数、オブジェクトのプロパティに対し値をあたえていない
  • 引数に対し値をあたえていない

let a;
console.log(a);

const object = {};
console.log(object.b);

function myfunction(c) {
  console.log(c);
}
myfunction();

これらは全てundefinedとなる。

日付や時間の扱い

西暦の取得

const date = new Date();
const year = date.getFullYear();
console.log(year);

> 2022

月はgetMonth、日はgetDateでFullは付かないのに、年だけなぜかFullが付く。

時刻の取得

getHours()で0〜23の時間を取得することができるが、24時は0になるので注意

曜日の取得

日付の取得と間違えやすいが、

日付は、getDate()

曜日は、getDay()

JavaScriptでは曜日はDayと覚えておこう!

getDayは、曜日を数値で返します。

const date = new Date();
const day = date.getDay();
const dayList = ["日", "月", "火", "水", "木", "金", "土"];
console.log(date);
console.log(dayList[day]);

> Sat Mar 05 2022 20:21:12 GMT+0900 (Japan Standard Time)
> 土

日本式の日時を取得

getDate()やgetHour()を使って一つずつ取得すると、コードを記述する量が増え冗長になりがちです。

toLocaleDateString()やtoLocaleTimeString()を使用することで、シンプルに日付に関する文字列を得ることができます。

const date = new Date();

const local = date.toLocaleString();
console.log(local);
> 3/5/2022, 8:37:48 PM

const localeDate = date.toLocaleDateString();
console.log(localeDate);
> 3/5/2022

const localeTime = date.toLocaleTimeString();
console.log(localeTime);
> 8:37:48 PM

PCは使用言語をEnglishに設定していると、上記の出力結果の形式となりますが、

日本語設定にしていると、以下の結果になりました。

const date = new Date();

const local = date.toLocaleString();
console.log(local);
> 2022/3/5 20:43:58

const localeDate = date.toLocaleDateString();
console.log(localeDate);
> 2022/3/5

const localeTime = date.toLocaleTimeString();
console.log(localeTime);
> 20:43:58

日付文字列からタイムスタンプ値を取得する

タイムスタンプとは?

1970年1月1日0時0分0秒を0基準として、現在までの時間をミリ秒で表したもの。

日付や時間の差分を計算するときに使用します。

Date.parse()を使用します。

3パターン試してみました。

// 0付きで直接入力
const num1 = Date.parse("03/05/2022");
console.log(num1);
> 1646406000000

// 0無しで直接入力
const num2 = Date.parse("3/5/2022");
console.log(num2);
> 1646406000000

// toLocaleDateStringを使って値を持ってくる
const date = new Date();
const localeDate = date.toLocaleDateString();
const num3 = Date.parse(localeDate);
console.log(num3);
> 1646406000000

現在時刻のタイムスタンプを取得する場合は、Date.now()を使用します。

const num = Date.now()
console.log(num)
> 1646482295784

ストップウォッチなど、時刻測定開始終了時の時間取得に使えます。

他には、getTime()を使用する方法もある。

const date = new Date();
const getTime = date.getTime();
console.log(getTime);
> 1646486449241

Dateインスタンスに日付を設定

これまで、new Date()はそれが実行されたときの日時を返すメソッドとして使用してきましたが、このDateインスタンスには日時を設定することもできます。

設定することで、初期値として設定するなどの使い方ができます。

// 文字列で日時を指定
const date1 = new Date("2022/01/01 10:00:00");
console.log(date1);
> Sat Jan 01 2022 10:00:00 GMT+0900 (Japan Standard Time)

const date2 = new Date("Sat Jan 01 2022 10:00:00");
console.log(date2);
> Sat Jan 01 2022 10:00:00 GMT+0900 (Japan Standard Time)

// 数値で指定
const date3 = new Date(2022, 0, 1, 10, 0, 0);
console.log(date3);
> Sat Jan 01 2022 10:00:00 GMT+0900 (Japan Standard Time)

// タイムスタンプで指定
const date4 = new Date(1640998800000);
console.log(date4);
> Sat Jan 01 2022 10:00:00 GMT+0900 (Japan Standard Time)

setXXX()というメソッドで設定する方法
const date = new Date();
date.setFullYear(2022);
date.setMonth(0);
date.setDate(1);
date.setHours(10);
date.setMinutes(0);
date.setSeconds(0);
console.log(date);
> Sat Jan 01 2022 10:00:00 GMT+0900 (Japan Standard Time)

setで作るとだいぶ冗長ですね。。

日時を加算・減算する

const date = new Date();
console.log(date);
> Sat Mar 05 2022 22:03:08 GMT+0900 (Japan Standard Time)

// 3月5日から10日減算します。
date.setDate(date.getDate() - 10);
console.log(date);
> Wed Feb 23 2022 22:03:08 GMT+0900 (Japan Standard Time)

5日から10日減算するとエラーになりそうですが、ちゃんと前の月の2月の日付を取得してくれます。

日時の差分を計算

時間の差分を計算する例

const dateA = new Date("1994/01/06 10:00:00");
const dateB = new Date("2022/03/05 22:00:00");
const diffMSec = dateB.getTime() - dateA.getTime();
const diffHour = diffMSec / (60 * 60 * 1000);
console.log(diffHour);
> 246852

指定時間後に引数の関数を実行する

カウントダウン機能を作る際に使える。

setInterbal(関数, ミリ秒)を使います。

const alert = setInterval(() => {
  console.log("3秒経過");
}, 3000);

ブラウザの操作方法

alertとconfirmの違い

alertはOKボタンクリック後の返り値が無いが、

confirmはtrueまたはfalseを返す。

alert()の場合

console.log(alert("入力内容は正しいですか?"));

返り値はありません。

confirm()の場合

console.log(confirm("入力内容は正しいですか?"));

Cancelを選択するとfalseが、OKを選択するとtrueが返ることが確認できます。

文字入力ダイアログを表示する

promptを使用します。

console.log(prompt("血液型を入力してください", "◯型"));

第2引数は、placeholderであり、無くても良いです。

テキストエリアに入力された値が返されます。

ウィンドウサイズを調べる

console.log(window.innerWidth);
> 1440

console.log(window.innerHeight);
> 821

// Macbook Air 13インチのサイズです。

この値は、URLアドレス、ブックマークバー、developerツールなどのスペースは含みません。

単位はpxです。

このwindowは省略することも可能です。

デバイスのピクセル比を調べる

高解像度ディスプレイで高解像度対応をしていないと、画像がぼやけて表示されることがあります。

そのため、ディスプレイの解像度に合わせて画像が表示されるようにします。

それを調べるのにはdevicePixelRatioを使用します。

console.log(window.devicePixelRatio);

// MacBook Air (M1, 2020)での出力結果
> 2

// DellのS2319HSモニターでの出力結果
> 1

iPhone Plusなどのハイスペック端末では、「3」の出力となります。

タッチ操作可能なデバイスかを調べる

// iOSかAndroid端末であることを確認するには、ontouchstartが存在するかを調べる
"ontouchstart" in window;

// タッチ操作可能なWindowsかを調べる
navigator.pointerEnabled && navigator.maxTouchPoints > 0;
// pointerEnabledで、pointerの有効可否を判定
// maxTouchPointsで、タッチ可能なポイントの数が0より大きいことを判定

aタグを使用しないページ遷移

location.href = "https://almonta2021blog.com/";

このように記述することで、これが記述されている位置のタイミングで、リンク先にページ遷移させることができます。

現在のページのURLを確認することもできます。

Googleの検索画面で実行した場合

console.log(location.href);

> chrome://new-tab-page/

ページをリロードする

ブラウザの機能にリロードボタンがありますが、ページ内にリロード機能を埋め込むこともできます。

location.reload();

ボタンクリックでこれを呼出すというような使い方をすれば、リロードしてくれます。

履歴の前後ページに移動

ブラウザの「戻る」「進む」ボタンと同じ挙動をページ内に作ることができます。

// 戻る
history.back()

// 進む
history.forward()

// 指定した数だけ進む
history.go(-1)
// これは1個前に戻るを意味します

ページ内リンクにハッシュ#を使用する

ハッシュ#を取得する

例えば、Rect公式ドキュメントの「Reactを学ぶ」のハッシュ(#)を取得する場合

このようにハッシュを取得することができるので、これを使って、ハッシュ値に応じて処理を振り分けるなどの使い方ができます。

ハッシュ#の変更を検知する

windowオブジェクトのhashchangeイベントを監視することで、ハッシュ#変更時に処理を実行することができる。

新しいウィンドウを開く

現在のページを残したまま、新しいウィンドウを開く

const win = window.open("https://ja.reactjs.org/");
win.focus();

この場合、Reactの公式ドキュメントサイトが開かれます。

focus()は、window.openで開いたウィンドウが後ろに表示される場合に、アクティブにしてくれるものです。

ウィンドウをスクロールさせる

XとYの座標を指定してその位置までスクロールします。

window.scrollTo(0, 200);

この場合、X:0, Y:200の位置にスクロールされます。

Webページタイトルを書き換える

document.title = 'リアクト'

「React」だったタイトルを簡単に「リアクト」にかえられてしまいました。

このタイトル変更の用途としては、チャットアプリのメッセージ通知などに使用できます。

ページにフォーカスがあたっているか外れているか調べる

イベントを使って検知します。

// フォーカスがあたっているかを調べる場合
window.addEventListener("focus", () => {
  console.log("フォーカスがあたっている");
});

// フォーカスが外れているかを調べる場合
window.addEventListener("blur", () => {
  console.log("フォーカスが外れている");
});

ネットワーク状況(オンライン、オフライン)を調べる

const isOnline = navigator.onLine;
if (isOnline === true) {
  console.log("オンラインです");
} else {
  console.log("ネットワークに接続されていません");
}

ネットワーク状況の”変化”を監視する場合は、windowオブジェクトに対しonlineイベントofflineイベントを監視する以下の形で記述する。

window.addEventListener("online", () => {
  console.log("オンラインです");
});
window.addEventListener("offline", () => {
  console.log("ネットワークに接続されていません");
});

1つ目の方法だと、都度実行しないと、オンライン・オフラインを調べることができませんが、windowオブジェクトを使うと、切り替えのタイミングで結果を出力できます。

以下の動画の挙動となります。

ユーザーアクションの扱い

ユーザー操作時に「イベント」を発生させる

イベントの制御には、addEventListener()を使用する。

button要素をクリックしたときに’クリックされました’を表示する処理の場合

const button = document.querySelector(".button");
button.addEventListener("click", onClickButton);

function onClickButton() {
  console.log("クリックされました");
}

// アロー関数で記述すると
button.addEventListener("click", () => {
  console.log("クリックされました");
});

ここで覚える3つのワード

  • イベントターゲット・・・イベントを発生させるオブジェクト。button、window、div要素、p要素など
  • イベント・・・上記の例では”click”
  • イベントリスナー・・・イベントターゲットでイベントが発生したときの処理。上記の例だと、button要素でclickが発生したら実行される処理onClickButtonのこと。

これらを関連付けるのが、addEventListener()

イベンドリスナーのオプションの指定

イベントの受け付けを一度だけにしたい、などのオプションを指定することができます。

addEventListenerの第3引数に指定します。

const option = {
  once: true,
};

const button = document.querySelector(".button");
button.addEventListener("click", onClickButton, option);

function onClickButton() {
  console.log("クリックされました");
}

設定したイベントリスナーを削除する

removeEventListenerを使用します。

const box = document.querySelector(".box");
box.addEventListener("click", onClickButton);

setTimeout(() => {
  box.removeEventListener("click", onClickButton);
}, 3000);

function onClickButton() {
  alert("boxがクリックされました");
}

boxという名前のclass要素クリック時にalertを表示し、3秒後にそのイベントを削除する。

使用時の注意

  • 引数には関数名を指定し、アロー関数は不可
  • addEventListenerと同じ引数を指定する

DOM要素へアクセスできるようになったタイミングで処理を行う

DOM要素へアクセスできるようになるタイミングとは?

そのタイミングは、HTMLの読み込みと解析が完了したとき。

このときに発生するのが、DOMContentLoadedというイベント

そのため、このイベントを指定することで、HTMLの読み込みと解析が完了したタイミングで処理を実行することができます。

以下は、DOMContentLoadedイベントを使用することで、HTMLの読み込みと解析が完了したタイミングで、box classの要素数を取得してconsole出力しています。

window.addEventListener("DOMContentLoaded", () => {
  const boxNum = document.querySelectorAll(".box").length;
  console.log(`box要素の数は${boxNum}です`);
});

scriptタグのdefer

scriptタグのdefer属性は、このDOMContentLoadedと同様の役割を果たします。

<script src="main.js" defer></script>;

defer属性設定時、スクリプトはHTMLの解析終了時に実行されます。

順番としては

defer属性によるスクリプト実行 → DOMContentLoadedイベント

役割としては同じであるため、どちらか一方のみを記述すればよい。

マウス操作系のイベント

イベント名発生タイミング利用シーン
click要素のクリック時ボタンクリック
mousedownマウスボタンを押したとき
mouseupマウスボタンを離したとき
mousemoveマウスを動かしたときマウスの動きに合わせて要素を動かす
mouseenterカーソルが要素上に乗ったときマウスホバー時に処理する
mouseleaveカーソルが要素上から離れたとき
mouseoverカーソルが要素上に乗ったとき
mouseoutカーソルが要素上から離れたとき

mouseenterとmouseover、mouseleaveとmouseoutの違いは、イベントがバブリングするかどうかの違い。

バブリングとは、ある要素で発生したイベントが親要素や先祖要素に伝わり、イベントリスナーが実行されること。

カーソルの座標を取得してマウスの動きに合わせて要素を動かす

X, Y座標を取得する

ブラウザ左上を基準

event.clientX
event.clientY
要素左上を基準 event.offsetX
event.offsetY
ページ左上を基準 event.pageX
event.pageY
デバイス左上を基準 event.screenX
event.screenY

const character = document.querySelector("#logo");

document.addEventListener("mousedown", () => {
  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", () => {
    document.removeEventListener("mousemove", onMouseMove);
  });
});

function onMouseMove(event) {
  character.style.left = `${event.clientX - 100}px`;
  character.style.top = `${event.clientY - 100}px`;
}

こちらを実行するとGoogleのアイコン位置を自由自在に変更できました。

いろいろなイベント

const sample = document.querySample('.sample')

sample.addEventListener('イベント名', 関数)

イベント名発生タイミング利用シーン
scroll対象の要素がスクロールしたとき
selectstartテキストが選択されたとき選択した文字を吹き出しで表示する
touchstartタッチを開始したときスマホアプリで使用
touchmoveタッチポイントを動かしたときスマホアプリで使用
touchendタッチを終了したときスマホアプリで使用
kedownキーが押されたとき
keyupキーが離されたとき文字数カウント
keypressキーが押されたとき(文字)
visibilitychangeブラウザのダブの表示状態が切り替わったときバックグラウンド時に負荷の大きい処理を止める

タブの表示非表示を判定する

// 表示
document.visibilityState === "visible"

// 非表示
ocument.visibilityState === "hidden"

画面サイズが変わったときに処理する

レスポンシブデザインとする時に使う。

window.addEventListener("resize", () => {
  console.log("ブラウザーがリサイズされました");
});

画面サイズがブレークポイントを超えた時に処理する

matchMedia()は、引数に応じたメディアクエリの情報を返します。

そして、そのクエリの結果に対し、一致するかをmachesを使うことで確認ができます。

例えば、minのwidthを500pxとした場合

const mediaQueryList = matchMedia('(min-width: 500px)')
console.log(mediaQueryList)

>
{
  matches: true
  media: "(min-width: 500px)"
  onchange: null
}

このような結果を返す。

これがマッチしているかを確認する場合、

matchMedia('(min-width: 500px)').matches;
> true

イベントを生成して発生させる

const boxElement = document.querySelector(".logo");

boxElement.addEventListener("click", () => {
  boxElement.innerHTML = "クリックされました";
});

setTimeout(() => {
  boxElement.dispatchEvent(new Event("click"));
}, 1000);

setTimeoutにより1秒後に、dispatchEventによりイベントを発生させ、new Eventによりイベントを生成している。

これにより、本来はclickイベントは、クリックしたときに発火されるものだが、クリックをしていないのに1秒後にクリックしたこととなる。

イベントのデフォルトの機能を無効にする

何かの処理後にマウスホイール操作やタッチ操作を無効にしたい時に使用する。

マウスホイールを無効にする場合

document.querySelector(".foo").addEventListener("wheel", (event) => {
  event.preventDefault();
});

ドラッグアンドドロップ

Drag and Drop APIを使うと、HTMLの任意の要素にドラッグしたファイルを取り扱うことができる。

logoをdraggable=”true”として、以下コードを記述してドラッグします。

const logo = document.querySelector(".logo");

logo.addEventListener("dragstart", () => {
  console.log("ドラッグ開始");
});
logo.addEventListener("drag", () => {
  console.log("ドラッグ中");
});
logo.addEventListener("dragend", () => {
  console.log("ドラッグ終了");
});

dragイベントはドラッグしている間ずっと発火していることがわかります。

「Google」ロゴが検索窓に乗っている時に発火させるコードを書きます。

logoは、draggable=”true”とし、検索窓のclass SDkEPに要素が乗ったら発火するコードを作ります。

const searchWindow = document.querySelector(".SDkEP");

searchWindow.addEventListener("dragenter", () => {
  console.log("ドラッグ中にマウスポインターが要素上に乗った");
});
searchWindow.addEventListener("dragover", () => {
  console.log("ドラッグ中にマウスポインターが要素に存在する");
});
searchWindow.addEventListener("dragleave", () => {
  console.log("ドラッグ中にマウスポインターが要素上から離れた");
});

これらのドラッグを、drop を使って受け付けます。

const searchWindow = document.querySelector(".SDkEP");

searchWindow.addEventListener("dragenter", () => {
  console.log("ドラッグ中にマウスポインターが要素上に乗った");
});
searchWindow.addEventListener("dragover", () => {
  console.log("ドラッグ中にマウスポインターが要素に存在する");
});
searchWindow.addEventListener("dragleave", () => {
  console.log("ドラッグ中にマウスポインターが要素上から離れた");
});

// ドラッグアンドドロップするとページ遷移されるため、dragoverイベントのevent.preventDefault()でその挙動をキャンセルする。
searchWindow.addEventListener("dragover", (event) => {
  event.preventDefault("dropイベント");
});

searchWindow.addEventListener("drop", () => {
  console.log("dropした");
});

HTML要素の操作方法

JavaScriptでの要素の取り扱い

DOMとは

DOMとは、プログラムからHTMLを自由に操作するための仕組みのこと。

要素を取得するメソッド一覧

メソッド取得する要素戻り値
document.querySelector(セレクター名)セレクターElement
document.getElementById(ID名)IDHTMLElement
document.querySelectorAll(セレクター名)セレクター名に一致する全てNodeList
document.getElementsByClassName(クラス名)クラス名HTMCollection
document.documentElementルートhtml
document.headheadhead
document.bodybodybody

Selectorとは

要素を指定すための条件式で、#ID、クラス名などのこと。

セレクター名に合致する要素が複数ある場合は、最初の要素が返される。

querySelectorとgetElementByIdの違い

querySelectorでもIDを指定することができるが、getElementByIdはIDしか指定できない。

querySelectorでIDを指定する場合、#を付けるが、getElementByIdの場合は#は不要。

querySelector

<div id="foo">SELECTOR</div>

const element = document.querySelector("#foo");
console.log(element);

> <div id="foo">SELECTOR</div>

getElementById

<div id="foo">ID</div>

const element = document.getElementById("foo");
console.log(element);

> <div id="foo">ID</div>

以上のように、戻り値は同じ。

querySelectorAll

返り値がオブジェクトなので、forEach等を使って取得する。

    <div class="box">ボックス1</div>
    <div class="box">ボックス2</div>
    <div class="box">ボックス3</div>

const boxList = document.querySelectorAll(".box");
boxList.forEach((targetBox) => {
  console.log(targetBox);
});

>
<div class="box">ボックス1</div>
<div class="box">ボックス2</div>
<div class="box">ボックス3</div>

getElementsByClassName

    <div class="box">ボックス1</div>
    <div class="box">ボックス2</div>
    <div class="box">ボックス3</div>

const className = document.getElementsByClassName("box");
console.log(className);

> HTMLCollection(3) [div.box, div.box, div.box]

戻り値は要素の配列となる。

documentElement

ドキュメントのルート要素、つまり、html要素を指します。

そのため、html全てを取得します。

head

head要素を取得する。

head内にscriptタグやlinkタグを動的に挿入するといったケースで用いる。

body

clickイベンドでbody全体を切り替える際などに用いる。

ノード要素の取得

特定要素付近の要素を取得する。

    <div id="parent">
      <div id="child1">子要素1</div>
      <div id="child2">子要素2</div>
      <div id="child3">子要素3</div>
    </div>

const parentElement = document.querySelector("#parent");

console.log(parentElement.children);
>
[
  0: div#child1
  1: div#child2
  2: div#child3
  child1: div#child1
  child2: div#child2
  child3: div#child3
]
console.log(parentElement.firstElementChild);
> <div id="child1">子要素1</div>

console.log(parentElement.lastElementChild);
> <div id="child3">子要素3</div>

console.log(parentElement.firstElementChild.nextElementSibling);
> <div id="child2">子要素2</div>

console.log(parentElement.lastElementChild.previousElementSibling);
> <div id="child2">子要素2</div>

console.log(parentElement.firstElementChild.parentNode);
> 
<div id="parent">
  <div id="child1">子要素1</div>
  <div id="child2">子要素2</div>
  <div id="child3">子要素3</div>
</div>

要素の追加、削除

メソッド意味戻り値
親ノード.getElementById(子ノード)親ノードの末尾に子ノードを追加Element
親ノード.insertBefore(子ノード, 直前のノード)親ノード内にノードを追加Element
ノード1.before(ノード2)ノード1の前にノード2を追加なし
ノード1.after(ノード2)ノード1の後にノード2を追加なし
親ノード.hasChildNodes(子ノード)親ノードに子ノードが存在するかを確認する真偽値
親要素.insertAdjacentHTML(挿入位置, 文字列)文字列をHTMLとして挿入するElement
親ノード.removeChild(子ノード) 親要素の子要素を要素を取り除くElement
ノード.remove()自分自身の要素を取り除くなし

getElementById

    <div id="parent">
      <div id="child1">子要素1</div>
      <div id="child2">子要素2</div>
      <div id="child3">子要素3</div>
    </div>

    <div id="child4">子要素4</div>

const parent = document.getElementById("parent");
const child = document.getElementById("child4");

parent.appendChild(child);

これにより、親のparentノードにchild4が追加されました。

insertBefore

親要素内の指定要素の直前に挿入する。

HTMLは上記のままで、

const parent = document.getElementById("parent");
const child = document.getElementById("child4");
parent.insertBefore(child, parent.lastElementChild);

これにより、lastの子要素3の前に子要素4が入ります。

before

const child2 = document.getElementById("child2");
const child4 = document.getElementById("child4");

child2.before(child4);

>
子要素1
子要素4
子要素2
子要素3

after

const child2 = document.getElementById("child2");
const child4 = document.getElementById("child4");

child2.after(child4);

>
子要素1
子要素2
子要素4
子要素3

hasChildNodes

const parent = document.getElementById("parent");
const child3 = document.getElementById("child3");

const hasChildCheck = parent.hasChildNodes(child3);
console.log(hasChildCheck);

> true

insertAdjacentHTML

    <div id="parent">
      <div id="child1">子要素1</div>
      <div id="child2">子要素2</div>
      <div id="child3">子要素3</div>
    </div>

const myParent = document.getElementById("parent");
const newChild = `<div class='new-child'>新しい子要素</div>`;

myParent.insertAdjacentHTML("beforebegin", newChild);
>
新しい子要素
子要素1
子要素2
子要素3

myParent.insertAdjacentHTML("afterbegin", newChild);
>
新しい子要素
子要素1
子要素2
子要素3

myParent.insertAdjacentHTML("beforeend", newChild);
>
子要素1
子要素2
子要素3
新しい子要素

myParent.insertAdjacentHTML("afterend", newChild);
>
子要素1
子要素2
子要素3
新しい子要素

今回の例では、beforebeginとafterbegin、beforeendとafterendの出力結果に違いはなかったですが、以下のような違いがあります。

beforebegin親要素の直前
afterbegin親要素内の先頭
beforeend親要素内の末尾
afterend親要素の直後

removeChild

const parent = document.getElementById("parent");
const child2 = document.getElementById("child2");

parent.removeChild(child2);

>
子要素1
子要素3

remove

const child2 = document.getElementById("child2");

child2.remove();

>
子要素1
子要素3

その他の要素の扱い

メソッド意味戻り値
document.createElement(“タグ名”, オプション)タグ名の要素を作成する要素
ノード.cloneNode([真偽値])ノードを複製するノード
親ノード.replaceChild(新ノード, 旧ノード)新ノード内の子ノードを置き換えるノード
旧ノード.replaceWith(新ノード)旧ノードを新ノードで置き換えるなし
ノード.textContentノード内のテキスト文字列
要素.innerHTML要素内のHTML文字列文字列
要素.outerHTML要素のHTML文字列
要素.setAttribute(属性名, 値)要素の属性を設定なし
要素.getAttribute(属性名)要素の属性を取得するなし
要素.hasAttribute(属性名)要素の属性があるかどうか真偽値

createElement

const divElement = document.createElement("div");
console.log(divElement);

> <div></div>

cloneNode

    <div id="parent">
      <div id="child1">子要素1</div>
      <div id="child2">子要素2</div>
      <div id="child3">子要素3</div>
    </div>

const parent = document.getElementById("parent");
console.log(parent.cloneNode());

> <div id="parent"></div>

引数にtrueを渡すと、子ノードも複製することができる。

console.log(parent.cloneNode(true));

>
<div id="parent">
  <div id="child1">子要素1</div>
  <div id="child2">子要素2</div>
  <div id="child3">子要素3</div>
</div>

replaceChild

const parent = document.getElementById("parent");
const child2 = document.getElementById("child2");

const newChild = document.createElement("div");
newChild.textContent = "新しい子要素";

parent.replaceChild(newChild, child2);

>
子要素1
新しい子要素
子要素3

replaceWith

const child2 = document.getElementById("child2");

const newChild = document.createElement("div");
newChild.textContent = "新しい子要素";

child2.replaceWith(newChild);

>
子要素1
新しい子要素
子要素3

textContent

<div id='test-text'>このテキストを取得</div>

const getText = document.querySelector("#test-text");
console.log(getText.textContent);

innerHTML

textContentとの違い

textContentはElementオブジェクト、innerHTMLはNodeオブジェクト。

そのため、テキストだけでなく、タグの書き換えも可能

<div id='test-text'>div要素のテキスト</div>

const getText = document.querySelector("#test-text");
console.log(getText.innerHTML);
> div要素のテキスト

getText.innerHTML = "<p>pタグに変更</p>";

> pタグに変更

発火後のHTML

<div id="test-text">
  <p>pタグに変更</p>
</div>

outerHTML

<div id='test-text'>div要素のテキスト</div>

const getText = document.querySelector("#test-text");
console.log(getText.outerHTML);
> <div id="test-text">div要素のテキスト</div>

getText.outerHTML = "<p>pタグに変更</p>";

> pタグに変更

発火後のHTML

<p>pタグに変更</p>

innerHTMLは要素の中身を取得しているのに対し、outerHTMLは要素自身を取得します。

setAttribute

<img id="image" src="foo.png">

const imageElement = document.querySelector("#image");
imageElement.setAttribute("src", "bar.png");

これにより、img要素の属性srcがbar.pngに設定されます。

getAttribute

<a id="test" href="example.com">リンク</a>

const testElement = document.querySelector("#test");
console.log(testElement.getAttribute("href"));

> example.com

属性hrefを取得しました。

リンクを別タブで開く_blank属性を安全に設定する

「target=”_blank”」が設定されているaタグでウィンドウを開いた場合、開いた先のウィンドウから操作できてしまうというセキュリティ上の問題がある。

それを防ぐために有効なのが、「rel=”noopener”」を使った方法。

<a href="example.com" target="_blank">リンク</a>

const aElement = document.querySelector("a");

aElement.setAttribute("rel", "noopener");

<a href="example.com" target="_blank" rel="noopener">リンク</a>

「rel=”noopener”」属性を追加することができました。

これで危険から守ることができました。

クラス属性

メソッド意味戻り値
要素.classList.add(クラス1, クラス2, …)クラスを追加するなし
要素.classList.remove(クラス1, クラス2, …)クラスを削除するなし
要素.classList.contains(クラス)クラスが存在するかどうか真偽値
要素.classList.toggle(クラス)クラスの有無を切り替えるなし

classList.add

<div id="box">クラス属性</div>

const box = document.querySelector("#box");

box.classList.add("sample");

> <div id="box" class="sample">クラス属性</div>

classList.remove

box.classList.remove("sample");

> <div id="box" class="">クラス属性</div>

classは残り、その中身が空になる。

classList.contain

console.log(box.classList.contains("sample"));

> false

classList.toggle

クラスが設定されていれば削除し、設定されていなければ追加します。

<div id="box">クラス有無切替</div>

const box = document.querySelector("#box");
box.classList.toggle("box");

> <div id="box" class="box">クラス有無切替</div>

もともとclassが無いのでtoggleにより追加されました。

ではもともとclassがある場合はどうでしょう?

<div id="box" class="box">クラス有無切替</div>

const box = document.querySelector("#box");

box.classList.toggle("box");

> <div id="box" class="">クラス有無切替</div>

classが削除されましたね!

動的に有無を切り替える時に使えます。

スタイル

プロパティ意味
要素.style.プロパティ名スタイルの値文字列
getComputedStyle(要素).プロパティスタイルの値を取得する文字列

style

styleは一般的にcssで指定されますが、JavaScriptで指定することもできます。

<div id="box" class="box">スタイルの変更</div>

const box = document.querySelector("#box");
box.style.backgroundColor = "blue";

> <div id="box" class="box" style="background-color: blue;">スタイルの変更</div>

styleを追加することができました。

なお、ここでのプロパティのCSSはキャメルケースで書く。

getComputedStyle

<div id="box" class="box" style="background-color: blue">スタイルの値を取得</div>

console.log(getComputedStyle(box).backgroundColor);

> rgb(0, 0, 255)

まとめ

一つずつ使用例が挙げられているので、どういったシーンで使用されるのかイメージが湧きやすく、とてもわかり易く効率的に学習できる良書でした。

JavaScriptだけでアナログ時計も作れるのはなかなか衝撃でした。

その他にも気づきがいっぱいあり、150時間ほどJavaScriptを触ったあとに見ても学べることがいっぱいありました。

本記事は、Reactでの使用を想定した、私個人の解釈で抽出していますので、記載していない内容もたくさんあります。

ぜひご自身で購入して一読されることをおすすめします。

コメント

タイトルとURLをコピーしました