JavaScript 使い方メモ
たたたmap()
const numbers = [1, 2, 3, 4, 5]; の配列の値をそれぞれ2倍にする。
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function (item) {
return item * 2;
});
console.log(doubled); // 出力: [2, 4, 6, 8, 10]
上記のプログラムを1行にまとめる。
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(item => item * 2);
console.log(doubled); // 出力: [2, 4, 6, 8, 10]
some(), every()
some()
someメソッドは、配列内の少なくとも一つの要素が指定されたテスト関数を満たす場合にtrueを返す。
const numbers = [1, 3, 5, 7, 9];
const hasEvenNumber = numbers.some(num => num % 2 === 0); // 偶数があるかどうかをチェック
console.log(hasEvenNumber); // false
every()
everyメソッドは、配列のすべての要素が指定されたテスト関数を満たす場合にtrueを返す。一つでも条件を満たさない要素があればfalseを返す。
const numbers = [2, 4, 6, 8, 10];
const areAllEven = numbers.every(num => num % 2 === 0); // 全て偶数かどうかをチェック
console.log(areAllEven); // true
stopPropagation／stopImmediatePropagation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Event Propagation Example</title>
</head>
<body>
<div id="grandparent" style="padding: 50px; background: lightblue">
Grandparent
<div id="parent" style="padding: 30px; background: lightcoral">
Parent
<div id="child" style="padding: 10px; background: lightgray">Child</div>
<div id="child2" style="padding: 10px; background: lightgreen">
Child2（stopPropagation）
</div>
<div
id="child3"
style="padding: 10px; background: lightgoldenrodyellow"
>
Child3（stopImmediatePropagation）
</div>
</div>
</div>
<script>
document
.getElementById("grandparent")
.addEventListener("click", function (e) {
alert("Grandparent clicked");
});
document.getElementById("parent").addEventListener("click", function (e) {
alert("Parent clicked");
});
/**
* child
*/
document.getElementById("child").addEventListener("click", function (e) {
alert("Child clicked");
});
/**
* child2
*/
document.getElementById("child2").addEventListener("click", function (e) {
e.stopPropagation(); // 伝播停止
alert("First listener on Child2 (stopPropagation)");
});
document.getElementById("child2").addEventListener("click", function (e) {
alert("Second listener on Child2 (stopPropagation)"); // 同階層は伝播する
});
/**
* child3
*/
document.getElementById("child3").addEventListener("click", function (e) {
alert("First listener on Child3 (stopImmediatePropagation)");
e.stopImmediatePropagation(); // 伝播停止
});
document.getElementById("child3").addEventListener("click", function (e) {
alert("Second listener on Child3 (stopImmediatePropagation)"); // 同階層も伝播しない
});
</script>
</body>
</html>
なぜ伝播する？
-
一貫したイベント処理:
イベントバブリングとキャプチャリングの仕組みにより、イベントが親子関係の元素を通して伝わるため、開発者はより一貫した方法でイベントを処理できます。
例えば、リストの各項目について同じクリックイベントを処理したい場合、親要素にイベントリスナーを追加するだけで済みます。 -
コードの簡潔化:
子要素ごとにイベントリスナーを追加しなくても、親要素に一度にイベントリスナーを追加するだけで済みます。これによりコードがシンプルかつメンテナンスしやすくなります。
例として、多数の要素で同じ種類のイベントを管理する場合を考えると、個別にハンドラーを設定するよりも効率的です。 -
柔軟なイベント処理:
イベントのキャプチャリングとバブリングにより、必要に応じてどの段階でイベントを処理したいかを選ぶことができます。これにより、より柔軟なイベントハンドリングが可能になります。
キャプチャリング（外側から内側へ）とバブリング（内側から外側へ）の両方の段階を利用できるため、多様なシナリオに対応します。
たたたpreventDefault
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>preventDefault Example</title>
</head>
<body>
<a href="https://example.com" id="myLink">Click me</a>
<script>
document
.getElementById("myLink")
.addEventListener("click", function (event) {
event.preventDefault(); // デフォルトの動作をキャンセル
alert("Link click prevented"); // カスタム動作
});
</script>
</body>
</html>
なぜ妨げる？
-
ブラウザの既定の動作をキャンセル:
ユーザーの操作に対して特定のブラウザの既定の動作（例：リンクのクリック、フォームの送信）をキャンセルすることができます。
これは、カスタムの挙動を実装したい場合に便利です。 -
カスタム操作の実装:
例えば、フォームの送信をAJAXリクエストで処理する場合、その前にブラウザの標準的な送信動作を防ぐことができます。