JavaScript チートシート

値やオブジェクトを格納するための名前付きの入れ物を宣言します。

コード例

// var (非推奨)
var message = "Hello";
var message = "Hi"; // 再宣言可能
message = "Hey";    // 再代入可能
console.log(message); // 出力: Hey

// let
let count = 0;
// let count = 1; // エラー:同一スコープ内で再宣言不可
count = 5;       // 再代入可能
console.log(count); // 出力: 5
if (true) {
  let count = 10; // ブロックスコープなので別の変数
  console.log(count); // 出力: 10
}
console.log(count); // 出力: 5

// const
const PI = 3.14;
// const PI = 3; // エラー: 再宣言不可
// PI = 3.1415; // エラー: 再代入不可
console.log(PI); // 出力: 3.14

const user = { name: "Alice", age: 30 };
// user = { name: "Bob", age: 25 }; // エラー: 再代入不可
user.age = 31; // オブジェクトのプロパティは変更可能
console.log(user); // 出力: { name: 'Alice', age: 31 }

const colors = ["red", "green"];
// colors = ["blue", "yellow"]; // エラー: 再代入不可
colors.push("blue"); // 配列の要素は変更可能
console.log(colors); // 出力: ['red', 'green', 'blue']
        

JavaScriptが扱うデータの種類です。プリミティブ型とオブジェクト型に大別されます。

プリミティブ型 (Primitive Types)

• String: 文字列 (“Hello”, ‘World’, `Template`)
• Number: 数値 (10, 3.14, NaN, Infinity)
• BigInt: 任意精度の整数 (123n) – Number.MAX_SAFE_INTEGER を超える整数を扱う
• Boolean: 真偽値 (true, false)
• Undefined: 未定義値 (変数が宣言されたが値が代入されていない状態)
• Null: 値が存在しないことを意図的に示す値
• Symbol: 一意で不変な値 (Symbol('description')) – オブジェクトプロパティのキーなどに使用

オブジェクト型 (Object Type)

• Object: キーと値のペアのコレクション ({ key: 'value' })
• Array: 順序付けられた値のリスト ([1, 2, 3])
• Function: 実行可能なコードのブロック
• Date: 日付と時刻
• RegExp: 正規表現
• その他 (Map, Set, WeakMap, WeakSet など)

typeof 演算子

値のデータ型を文字列で返します。ただし、null は "object" を返すなど、注意点があります。

console.log(typeof "hello");    // "string"
console.log(typeof 123);        // "number"
console.log(typeof 123n);       // "bigint"
console.log(typeof true);       // "boolean"
console.log(typeof undefined);  // "undefined"
console.log(typeof Symbol("id")); // "symbol"

console.log(typeof null);       // "object" (歴史的な理由による仕様)
console.log(typeof { a: 1 });   // "object"
console.log(typeof [1, 2]);     // "object" (配列もオブジェクトの一種)
console.log(typeof function(){});// "function" (オブジェクトだが typeof では "function")
console.log(typeof new Date()); // "object"
console.log(typeof /abc/);    // "object" (環境によっては "function" の場合も)

// 配列かどうかを正確に判定するには Array.isArray() を使う
console.log(Array.isArray([1, 2])); // true
console.log(Array.isArray({ a: 1 })); // false
        

値に対して操作を行う記号です。

プログラムの実行フローを制御します。

条件分岐

const score = 75;

if (score >= 80) {
  console.log("優 👍");
} else if (score >= 60) {
  console.log("良 😊");
} else {
  console.log("可 🤔");
}
          

const fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("リンゴです 🍎");
    break; // breakを忘れないように！
  case "banana":
    console.log("バナナです 🍌");
    break;
  case "orange":
    console.log("オレンジです 🍊");
    break;
  default:
    console.log("その他の果物です。");
}
          

ループ (繰り返し処理)

for (let i = 0; i < 5; i++) {
  console.log(i); // 0, 1, 2, 3, 4
}
const arr = ['a', 'b', 'c'];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]); // 'a', 'b', 'c'
}
                  

const obj = { a: 1, b: 2 };
for (const key in obj) {
  console.log(key, obj[key]); // 'a' 1, 'b' 2
}
                  

const arr = ['x', 'y', 'z'];
for (const value of arr) {
  console.log(value); // 'x', 'y', 'z'
}
const str = "abc";
for (const char of str) {
  console.log(char); // 'a', 'b', 'c'
}
                  

let n = 0;
while (n < 3) {
  console.log(n); // 0, 1, 2
  n++;
}
                  

let m = 0;
do {
  console.log(m); // 0
  m++;
} while (m < 0); // 条件は最初から false だが1回実行される
                  

ループ制御

• break: 現在のループ (for, while, do...while, switch) を終了します。
• continue: 現在のループの残りの処理をスキップし、次のイテレーションに進みます (for, while, do...while で使用)。

for (let i = 0; i < 10; i++) {
  if (i === 3) {
    continue; // iが3の場合はスキップ
  }
  if (i === 7) {
    break; // iが7になったらループ終了
  }
  console.log(i); // 0, 1, 2, 4, 5, 6 が出力される
}
        

特定の処理をまとめたブロックで、再利用可能です。

関数の定義方法

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("World")); // "Hello, World!"
                            

const greet = function(name) {
  return `Hello, ${name}!`;
};
console.log(greet("World")); // "Hello, World!"
                            

const greet = (name) => {
  return `Hello, ${name}!`;
};
// 引数が1つの場合は()省略可
const greetShort = name => `Hello, ${name}!`;
// 処理が単一式の場合は{}とreturn省略可
console.log(greet("World"));       // "Hello, World!"
console.log(greetShort("Again")); // "Hello, Again!"

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
                            

(function() {
  const localVar = "I am local";
  console.log(localVar); // "I am local"
})();
// アロー関数でも可
(() => {
  console.log("IIFE with arrow");
})();
                            

引数と戻り値

• 引数 (Arguments): 関数に渡される値。
  • デフォルト引数 (Default Parameters, ES6): 引数が渡されなかった場合のデフォルト値を設定可能。

    
    function greet(name = "Guest") {
      console.log(`Hello, ${name}!`);
    }
    greet(); // "Hello, Guest!"
    greet("Alice"); // "Hello, Alice!"
                                

  • Rest Parameters (ES6): 不定数の引数を配列として受け取る (...args)。

    
    function sum(...numbers) {
      return numbers.reduce((total, num) => total + num, 0);
    }
    console.log(sum(1, 2, 3));    // 6
    console.log(sum(10, 20));     // 30
                                

  • arguments オブジェクト: (アロー関数以外) 関数に渡された引数をすべて保持する配列風オブジェクト (非推奨、Rest Parameters推奨)。

    
    function logArgs() {
      console.log(arguments); // Arguments(2) [ 'a', 1, callee: ƒ, Symbol(Symbol.iterator): ƒ ]
      console.log(arguments.length); // 2
      console.log(arguments[0]); // 'a'
    }
    logArgs('a', 1);
                               

• 戻り値 (Return Value): 関数が処理結果として返す値。return 文で指定する。return がない場合や return; の場合は undefined を返す。

キー (文字列またはSymbol) と値のペアを格納するコレクションです。

オブジェクトの作成とアクセス

// オブジェクトリテラルによる作成
const person = {
  name: "Bob",
  age: 28,
  "is Student": false, // キーにスペースが含まれる場合は引用符で囲む
  greet: function() { // メソッド (オブジェクト内の関数)
    console.log(`Hi, I'm ${this.name}`);
  },
  // ES6 メソッド短縮記法
  sayBye() {
    console.log("Bye!");
  }
};

// プロパティへのアクセス
console.log(person.name); // ドット記法: "Bob"
console.log(person["age"]); // ブラケット記法: 28
console.log(person["is Student"]); // キーが特殊な場合はブラケット記法必須

// メソッドの呼び出し
person.greet(); // "Hi, I'm Bob"
person.sayBye(); // "Bye!"

// プロパティの追加・更新
person.city = "Tokyo";
person.age = 29;
console.log(person); // { name: 'Bob', age: 29, ..., city: 'Tokyo' }

// プロパティの削除
delete person["is Student"];
console.log(person["is Student"]); // undefined
        

this キーワード

this が参照する値は、関数の呼び出し方によって決まります。

• メソッド呼び出し: object.method() の場合、this は object を参照します。
• 通常の関数呼び出し: func() の場合、厳格モード (strict mode) では undefined、そうでなければグローバルオブジェクト (ブラウザでは window) を参照します。
• コンストラクタ呼び出し: new Constructor() の場合、this は新しく生成されるインスタンスを参照します。
• アロー関数: 自身の this を持たず、外側のレキシカルスコープの this を参照します。
• call(), apply(), bind(): this の値を明示的に指定できます。

便利なObjectメソッド

Object.keys(person);
// ['name', 'age', 'greet', 'sayBye', 'city']

Object.values(person);
// ['Bob', 29, ƒ(), ƒ(), 'Tokyo']

Object.entries(person);
// [['name','Bob'], ['age',29], ...]

const obj1 = { a: 1 };
const obj2 = { b: 2, c: 3 };
const merged = Object.assign({}, obj1, obj2);
// merged: { a: 1, b: 2, c: 3 }
// obj1: { a: 1 } (変更されない)

const proto = { greet: function() { console.log('Hello'); } };
const obj = Object.create(proto);
obj.greet(); // "Hello"

person.hasOwnProperty('name'); // true
person.hasOwnProperty('toString'); // false (継承されたメソッド)

順序付けられた値のリストです。インデックス (0から始まる整数) を使って要素にアクセスします。

配列の作成とアクセス

// 配列リテラルによる作成
const fruits = ["apple", "banana", "orange"];
const mixed = [1, "two", true, null, { id: 3 }];
const empty = [];

// 要素へのアクセス (インデックスは0から)
console.log(fruits[0]); // "apple"
console.log(fruits[1]); // "banana"
console.log(mixed[4].id); // 3

// 要素の更新
fruits[1] = "grape";
console.log(fruits); // ["apple", "grape", "orange"]

// 配列の長さ (要素数)
console.log(fruits.length); // 3
        

主要な配列メソッド 🚀

const arr = [1, 2];
arr.push(3, 4); // arr is now [1, 2, 3, 4]
// returns 4

const arr = [1, 2, 3];
const last = arr.pop(); // last is 3, arr is [1, 2]

const arr = [2, 3];
arr.unshift(0, 1); // arr is [0, 1, 2, 3]
// returns 4

const arr = [0, 1, 2];
const first = arr.shift(); // first is 0, arr is [1, 2]

const arr = [0, 1, 2, 3, 4];
arr.splice(2, 1); // [0, 1, 3, 4] (index 2から1つ削除)
arr.splice(1, 0, 'a', 'b'); // [0, 'a', 'b', 1, 3, 4] (index 1に'a','b'挿入)
arr.splice(0, 2, 'X'); // ['X', 'b', 1, 3, 4] (index 0から2つ削除し'X'挿入)

const arr = [0, 1, 2, 3, 4];
arr.slice(1, 3); // [1, 2] (index 1から3の手前まで)
arr.slice(2);    // [2, 3, 4] (index 2から最後まで)

const arr1 = [1, 2];
const arr2 = [3, 4];
arr1.concat(arr2, 5); // [1, 2, 3, 4, 5]

['a', 'b', 'c', 'b'].indexOf('b'); // 1
['a', 'b', 'c', 'b'].indexOf('b', 2); // 3
['a', 'b', 'c'].indexOf('d'); // -1

['a', 'b', 'c', 'b'].lastIndexOf('b'); // 3

['a', 'b', 'c'].includes('b'); // true
['a', 'b', 'c'].includes('d'); // false
[NaN].includes(NaN); // true (indexOfでは不可)

const users = [{id:1, name:'A'}, {id:2, name:'B'}];
users.find(u => u.id === 2); // {id:2, name:'B'}
users.find(u => u.id === 3); // undefined

const users = [{id:1, name:'A'}, {id:2, name:'B'}];
users.findIndex(u => u.name === 'B'); // 1
users.findIndex(u => u.name === 'C'); // -1

['a', 'b'].forEach((val, idx) => {
  console.log(idx, val); // 0 'a', 1 'b'
});

const nums = [1, 2, 3];
const doubled = nums.map(n => n * 2);
// doubled is [2, 4, 6]

const nums = [1, 2, 3, 4, 5];
const evens = nums.filter(n => n % 2 === 0);
// evens is [2, 4]

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, cur) => acc + cur, 0);
// sum is 10
// 0 + 1 => 1
// 1 + 2 => 3
// 3 + 3 => 6
// 6 + 4 => 10

const arr = ['a', 'b', 'c'];
arr.reduceRight((acc, cur) => acc + cur, ''); // "cba"

const nums = [1, 2, 3];
nums.some(n => n > 2); // true
nums.some(n => n < 0); // false

const nums = [1, 2, 3];
nums.every(n => n > 0); // true
nums.every(n => n > 1); // false

['a', 'b', 'c'].join();    // "a,b,c" (default separator is ',')
['a', 'b', 'c'].join('');   // "abc"
['a', 'b', 'c'].join('-'); // "a-b-c"

const fruits = ['banana', 'apple', 'cherry'];
fruits.sort(); // ['apple', 'banana', 'cherry']

const nums = [10, 5, 100, 1];
nums.sort(); // [1, 10, 100, 5] (文字列としてソートされる！) 🤔
nums.sort((a, b) => a - b); // [1, 5, 10, 100] (数値昇順) 👍
nums.sort((a, b) => b - a); // [100, 10, 5, 1] (数値降順) 👍

const arr = [1, 2, 3];
arr.reverse(); // arr is now [3, 2, 1]

Array.isArray([1, 2]); // true
Array.isArray({});   // false

Array.from('abc'); // ['a', 'b', 'c']
Array.from(new Set([1, 2, 3])); // [1, 2, 3]
Array.from({ length: 3 }, (_, i) => i * i); // [0, 1, 4]

Array.of(1, 2, 3); // [1, 2, 3]
Array.of(5);     // [5] (new Array(5) との違い)

オブジェクト指向プログラミングのための構文糖衣 (シンタックスシュガー) です。プロトタイプベースの継承をより分かりやすく扱えます。

クラス定義とインスタンス化

class Animal {
  // コンストラクタ: インスタンス生成時に呼ばれる初期化メソッド
  constructor(name) {
    this.name = name; // インスタンスプロパティ
  }

  // メソッド
  speak() {
    console.log(`${this.name} makes a noise.`);
  }

  // 静的メソッド: クラス自体に属し、インスタンスからは呼び出せない
  static info() {
    console.log("This is an Animal class.");
  }

  // ゲッター: プロパティのようにアクセスできるメソッド
  get upperName() {
    return this.name.toUpperCase();
  }

  // セッター: プロパティのように代入できるメソッド
  set nickname(value) {
    console.log(`Setting nickname for ${this.name} to ${value}`);
    this._nickname = value; // 通常、内部プロパティには _ を付ける慣習
  }
  get nickname() {
    return this._nickname;
  }
}

// インスタンスの生成
const animal = new Animal("Generic Animal");
animal.speak(); // "Generic Animal makes a noise."
console.log(animal.upperName); // "GENERIC ANIMAL" (ゲッター呼び出し)
animal.nickname = "Gen"; // (セッター呼び出し)
console.log(animal.nickname); // "Gen" (ゲッター呼び出し)

// 静的メソッドの呼び出し
Animal.info(); // "This is an Animal class."
// animal.info(); // エラー: animal.info is not a function
        

継承 (Inheritance)

extends キーワードで他のクラスを継承し、super キーワードで親クラスのコンストラクタやメソッドを呼び出せます。

class Dog extends Animal { // Animal クラスを継承
  constructor(name, breed) {
    // 親クラスのコンストラクタを呼び出す (必須)
    super(name);
    this.breed = breed;
  }

  // 親クラスのメソッドをオーバーライド (上書き)
  speak() {
    console.log(`${this.name} barks.`);
  }

  // 親クラスのメソッドを呼び出す
  parentSpeak() {
      super.speak(); // 親クラス (Animal) の speak メソッドを呼び出す
  }

  wagTail() {
    console.log(`${this.name} wags tail.`);
  }
}

const dog = new Dog("Buddy", "Golden Retriever");
dog.speak(); // "Buddy barks." (オーバーライドされたメソッド)
dog.parentSpeak(); // "Buddy makes a noise." (親クラスのメソッド呼び出し)
dog.wagTail(); // "Buddy wags tail."
console.log(dog.name); // "Buddy" (親クラスから継承したプロパティ)
console.log(dog.breed); // "Golden Retriever"
        

時間のかかる処理 (ネットワークリクエスト、ファイル読み込みなど) を、他の処理をブロックせずに行うための仕組みです。

コールバック関数 (Callback Function)

非同期処理が完了した後に実行される関数。処理がネストするとコールバック地獄 (Callback Hell) になりやすい 🤔。

function fetchData(url, callback) {
  console.log(`Fetching data from ${url}...`);
  // 非同期処理をシミュレート
  setTimeout(() => {
    const data = { result: `Data from ${url}` };
    callback(null, data); // 成功時は error に null、data に結果を渡す
    // エラーの場合: callback(new Error("Fetch failed!"), null);
  }, 1000);
}

fetchData("example.com/data1", (error1, data1) => {
  if (error1) {
    console.error("Error 1:", error1.message);
    return;
  }
  console.log("Data 1:", data1);
  // data1 を使って次の処理
  fetchData("example.com/data2", (error2, data2) => {
    if (error2) {
      console.error("Error 2:", error2.message);
      return;
    }
    console.log("Data 2:", data2);
    // さらにネスト...
  });
});
        

Promise (ES6)

非同期処理の最終的な結果 (成功または失敗) を表現するオブジェクト。.then() で成功時、.catch() で失敗時の処理を繋げられる。コールバック地獄を解消 👍。

function fetchDataPromise(url) {
  return new Promise((resolve, reject) => {
    console.log(`Fetching data from ${url} (Promise)...`);
    setTimeout(() => {
      const success = Math.random() > 0.2; // 80% の確率で成功
      if (success) {
        const data = { result: `Data from ${url}` };
        resolve(data); // 成功時に resolve を呼ぶ
      } else {
        reject(new Error(`Failed to fetch data from ${url}`)); // 失敗時に reject を呼ぶ
      }
    }, 1000);
  });
}

fetchDataPromise("example.com/dataA")
  .then(dataA => { // 成功時の処理 (resolve の値を受け取る)
    console.log("Data A:", dataA);
    return fetchDataPromise("example.com/dataB"); // 次の Promise を返す
  })
  .then(dataB => { // 前の then が返した Promise の成功時の処理
    console.log("Data B:", dataB);
    return "Processing complete!";
  })
  .then(message => {
    console.log("Final message:", message);
  })
  .catch(error => { // いずれかの Promise で失敗した場合の処理 (reject の値を受け取る)
    console.error("An error occurred:", error.message);
  })
  .finally(() => { // 成功・失敗に関わらず最後に実行される処理 (ES2018)
    console.log("Fetch attempt finished.");
  });

// Promise.all: 複数の Promise がすべて成功するのを待つ
const promise1 = fetchDataPromise("url1");
const promise2 = fetchDataPromise("url2");
Promise.all([promise1, promise2])
  .then(([result1, result2]) => {
    console.log("All succeeded:", result1, result2);
  })
  .catch(error => {
    console.error("At least one promise failed:", error.message);
  });

// Promise.race: 複数の Promise のうち、最初に完了 (成功または失敗) した結果を得る
Promise.race([promise1, promise2])
    .then(firstResult => {
        console.log("First settled (resolved):", firstResult);
    })
    .catch(firstError => {
        console.error("First settled (rejected):", firstError.message);
    });
        

async / await (ES2017)

Promise をベースにした、非同期処理を同期処理のように書ける構文糖衣 🌟。async 関数内で await を使うと、Promise が解決されるまで処理を一時停止する。

// 上記の fetchDataPromise 関数を async/await で使用する例

async function processData() {
  try {
    console.log("Starting data processing...");
    // await は Promise が解決されるまで待つ
    const dataA = await fetchDataPromise("example.com/dataAsyncA");
    console.log("Async Data A:", dataA);

    const dataB = await fetchDataPromise("example.com/dataAsyncB");
    console.log("Async Data B:", dataB);

    // エラーを発生させる例 (上記の Promise が失敗した場合)
    // const dataC = await fetchDataPromise("example.com/dataAsyncC");
    // console.log("Async Data C:", dataC);

    console.log("Processing finished successfully!");
    return "Async Complete";

  } catch (error) { // await した Promise が reject されると catch ブロックに移行
    console.error("Async Error:", error.message);
    // エラー発生時の処理
    return "Async Failed";

  } finally {
    console.log("Async function execution finished.");
  }
}

// async 関数は常に Promise を返す
processData()
  .then(result => console.log("Result from async function:", result))
  .catch(err => console.error("Unhandled error from async function:", err)); // try...catch で捕捉されなかったエラー

// トップレベル await (ES2022): モジュールのトップレベルで await が使える (async 関数で囲む必要がない)
// (環境によるサポート状況に注意)
// const dataTop = await fetchDataPromise("example.com/dataTop");
// console.log("Top-level await result:", dataTop);
        

HTML や XML ドキュメントをプログラムから操作するためのインターフェースです。要素の取得、変更、追加、削除などを行います。

要素の選択・取得

// HTML例: 
Hello
World

const mainDiv = document.getElementById('main');
const contentParas = document.getElementsByClassName('content'); // HTMLCollection
const allParas = document.getElementsByTagName('p'); // HTMLCollection
const firstContentPara = document.querySelector('#main .content'); // Element
const allContentParas = document.querySelectorAll('.content'); // NodeList
const specialPara = document.querySelector('.special'); // Element
const parentMain = specialPara.closest('#main'); // mainDiv と同じ要素
        

要素の作成・追加・削除

// HTML例: 
Item 1

const list = document.getElementById('list');

// 新しい li 要素を作成して追加
const newItem = document.createElement('li');
const newText = document.createTextNode('Item 2');
newItem.appendChild(newText);
list.appendChild(newItem); // 末尾に追加

// 新しい要素を作成して先頭に追加 (モダンな方法)
const newerItem = document.createElement('li');
newerItem.textContent = 'Item 0'; // テキスト設定の簡単な方法
list.prepend(newerItem);

// 最初の要素を削除
const firstItem = list.querySelector('li');
if (firstItem) {
  list.removeChild(firstItem); // 古い方法
  // firstItem.remove(); // モダンな方法
}
        

属性・テキスト・HTMLの操作

// HTML例: Click Me

const link = document.getElementById('link');

console.log(link.getAttribute('href')); // "about:blank"
link.setAttribute('href', 'https://example.com');
link.setAttribute('target', '_blank');
console.log(link.dataset.info); // "some data"
link.dataset.info = "new data";

console.log(link.textContent); // "Click Me"
link.textContent = "Visit Example";

// 注意: innerHTML はサニタイズされていない入力を設定すると危険
// link.innerHTML = "Safe HTML"; // OK
// link.innerHTML = ""; // 危険！
        

クラスとスタイルの操作

// HTML例: 
Box

const box = document.getElementById('box');

console.log(box.className); // "item active"
box.className = "item"; // "active" が消える

box.classList.add('highlight', 'large'); // class="item highlight large"
box.classList.remove('item'); // class="highlight large"
box.classList.toggle('active'); // class="highlight large active" (active が追加される)
console.log(box.classList.contains('highlight')); // true

box.style.color = 'white';
box.style.padding = '20px';
box.style.backgroundColor = 'navy'; // CSS: background-color

const styles = window.getComputedStyle(box);
console.log(styles.paddingTop); // "20px" (計算された値)
console.log(styles.fontWeight); // "400" (デフォルト値など)
        

ユーザーのアクション (クリック、キー入力など) やブラウザの状態変化 (読み込み完了など) に応じて処理を実行する仕組みです。

イベントリスナーの登録と解除

// HTML例: Click Me
const button = document.getElementById('myButton');

// イベントハンドラ関数
function handleClick(event) {
  console.log('Button clicked!');
  console.log('Event type:', event.type); // "click"
  console.log('Target element:', event.target); // button 要素
  // event.preventDefault(); // イベントのデフォルト動作をキャンセル (例: フォーム送信)
  // event.stopPropagation(); // イベントの伝播 (バブリング/キャプチャリング) を停止
}

// イベントリスナーの登録 (推奨される方法) ✨
button.addEventListener('click', handleClick);

// アロー関数を使った登録
button.addEventListener('mouseover', (event) => {
  console.log('Mouse over button!');
  event.target.style.backgroundColor = 'lightgray';
});

button.addEventListener('mouseout', (event) => {
    event.target.style.backgroundColor = ''; // 元に戻す
});


// イベントリスナーの解除 (登録時と同じ関数参照が必要)
// button.removeEventListener('click', handleClick);

// 古い方法 (非推奨: 1つのイベントに1つのハンドラしか登録できない) 🤔
// button.onclick = function() {
//   console.log('Button clicked (old way)');
// };
// button.onclick = null; // 解除
        

イベントオブジェクト

イベントハンドラ関数には、イベントに関する情報を持つイベントオブジェクトが引数として渡されます。

• event.type: イベントの種類 (例: “click”, “keydown”)
• event.target: イベントが発生した要素
• event.currentTarget: イベントリスナーが登録されている要素 (通常 this と同じ)
• event.preventDefault(): イベントのデフォルトの動作 (例: リンクの遷移、フォーム送信) をキャンセルするメソッド。
• event.stopPropagation(): イベントの伝播 (親要素へのバブリングなど) を停止するメソッド。
• マウスイベント: event.clientX, event.clientY (ウィンドウ座標), event.pageX, event.pageY (ドキュメント座標)
• キーボードイベント: event.key (押されたキー), event.code (物理キーコード), event.altKey, event.ctrlKey, event.shiftKey (修飾キーの状態)

主なイベントの種類

イベント伝播 (Event Propagation)

イベントは通常、発生した要素から親要素へと伝播していきます。

• バブリング (Bubbling): デフォルトの挙動。イベントがターゲット要素からルート要素 (document, window) へと順に伝播する。
• キャプチャリング (Capturing): ルート要素からターゲット要素へと順にイベントを捕捉する。addEventListener の第3引数に true または { capture: true } を指定するとキャプチャフェーズで処理できる。

// HTML: 
Click
const parentDiv = document.getElementById('parent');
const childButton = document.getElementById('child');

// バブリングフェーズで実行 (デフォルト)
parentDiv.addEventListener('click', () => {
  console.log('Parent clicked (Bubbling)');
});
childButton.addEventListener('click', (event) => {
  console.log('Child clicked (Bubbling)');
  // event.stopPropagation(); // ここで止めると親のリスナーは呼ばれない
});

// キャプチャリングフェーズで実行
parentDiv.addEventListener('click', () => {
  console.log('Parent clicked (Capturing)');
}, true); // 第3引数を true にする
childButton.addEventListener('click', () => {
  console.log('Child clicked (Capturing)');
}, { capture: true }); // オブションオブジェクトでも指定可能

// クリック時の出力順:
// Parent clicked (Capturing)
// Child clicked (Capturing)
// Child clicked (Bubbling)
// Parent clicked (Bubbling)
        

コードをファイル単位で分割し、再利用性や保守性を高める仕組みです。export で公開し、import で読み込みます。

通常、HTMLファイルから利用する場合は <script type="module" src="main.js"></script> のように type="module" 属性が必要です。

エクスポート (Export)

export キーワードを使って、関数、クラス、変数などを他のモジュールから利用できるように公開します。

// utils.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Helper {
  log(message) {
    console.log(message);
  }
}

const privateVar = "secret"; // エクスポートされない

// greet.js
function greetUser(name) {
  return `Hello, ${name}!`;
}

// export default greetUser; // 関数をデフォルトエクスポート

// または無名関数/クラスを直接エクスポート
export default function(name) {
    return `こんにちは、${name}さん！`;
}

// export default class MyClass { ... }

インポート (Import)

import キーワードを使って、他のモジュールからエクスポートされた要素を読み込みます。

// main.js

// 名前付きインポート (utils.js から)
// {} 内にインポートしたい要素名を記述
import { PI, add, Helper } from './utils.js';

// 別名でのインポート (as を使用)
import { add as sum } from './utils.js';

// すべての名前付きエクスポートをオブジェクトとしてインポート
import * as utils from './utils.js';

// デフォルトインポート (greet.js から)
// 任意の名前 (ここでは myGreet) を付けられる
import myGreet from './greet.js';

// デフォルトと名前付きを同時にインポート (あまり一般的ではない)
// import defaultExport, { namedExport } from './module.js';

console.log(PI); // 3.14159
console.log(add(5, 3)); // 8
console.log(sum(10, 20)); // 30

const helper = new Helper();
helper.log("Using Helper class");

console.log(utils.PI); // 3.14159 (名前空間経由)
console.log(utils.add(1, 1)); // 2

console.log(myGreet("太郎")); // こんにちは、太郎さん！

注意点:

• import / export 文は通常、モジュールのトップレベルに記述する必要があります (関数内などでは不可)。
• モジュール内のコードはデフォルトで Strict Mode (厳格モード) として扱われます。
• モジュールは一度しか読み込まれません (キャッシュされる)。
• 動的インポート (Dynamic Import) import() を使うと、必要なタイミングでモジュールを非同期に読み込むことも可能です。これは Promise を返します。

  
  button.addEventListener('click', async () => {
    try {
      const module = await import('./heavy-module.js');
      module.doSomething();
    } catch (error) {
      console.error("Failed to load module:", error);
    }
  });
                  

プログラム実行中に発生する可能性のあるエラーを適切に処理し、プログラムの意図しない停止を防ぎます。

try...catch...finally 文

エラーが発生する可能性のあるコードを try ブロックで囲み、エラーが発生した場合の処理を catch ブロックで記述します。finally ブロックは、エラーの有無に関わらず最後に必ず実行されます。

function divide(a, b) {
  try {
    console.log("Attempting division...");
    if (b === 0) {
      // エラーを意図的に発生させる
      throw new Error("Division by zero is not allowed!");
    }
    const result = a / b;
    console.log("Division successful:", result);
    return result;

  } catch (error) { // エラーオブジェクトを受け取る
    console.error("An error occurred:", error.message); // エラーメッセージ
    console.error("Error name:", error.name); // エラーの種類 (例: "Error", "TypeError")
    // console.error("Stack trace:", error.stack); // スタックトレース (デバッグに有用)
    // エラー発生時の処理 (例: デフォルト値を返す、ログを記録する)
    return undefined; // または null や特定の値を返す

  } finally {
    // このブロックは try が成功しても catch が実行されても必ず実行される
    console.log("Division attempt finished.");
  }
}

divide(10, 2);
// Output:
// Attempting division...
// Division successful: 5
// Division attempt finished.

divide(10, 0);
// Output:
// Attempting division...
// An error occurred: Division by zero is not allowed!
// Error name: Error
// Division attempt finished.
        

throw 文

カスタムエラーや組み込みのエラーオブジェクトを意図的に発生させます。

function checkAge(age) {
  if (typeof age !== 'number') {
    throw new TypeError("Age must be a number."); // 組み込みエラー
  }
  if (age < 0) {
    throw new RangeError("Age cannot be negative."); // 組み込みエラー
  }
  if (age < 18) {
    // カスタムエラーオブジェクト (推奨)
    class UnderageError extends Error {
        constructor(message) {
            super(message);
            this.name = "UnderageError";
        }
    }
    throw new UnderageError("User is underage.");
    // または throw "User is underage."; (非推奨: 文字列や数値も投げられるがエラーオブジェクトが望ましい)
  }
  console.log("Age is valid.");
}

try {
  checkAge(25); // "Age is valid."
  checkAge("twenty"); // TypeError catch
  // checkAge(-5); // RangeError catch
  // checkAge(15); // UnderageError catch
} catch (e) {
  console.error(`Caught [${e.name}]: ${e.message}`);
}
        

主なエラーオブジェクトの種類

• Error: すべてのエラーの基底オブジェクト。
• SyntaxError: JavaScript の構文エラー。通常 try...catch では捕捉できない (コード解析時点で発生するため)。
• ReferenceError: 存在しない変数や関数を参照しようとした場合のエラー。
• TypeError: 値が期待される型でない場合 (例: 関数でないものを呼び出す、null や undefined のプロパティにアクセスする)。
• RangeError: 数値が許容範囲外の場合 (例: 配列の不正な長さ)。
• URIError: URI 関連の関数 (encodeURI など) の引数が不正な場合。

Promise のエラーハンドリングは .catch() メソッドや async/await と組み合わせた try...catch で行います (非同期処理のセクション参照)。

データ交換フォーマットとして広く使われる、軽量なテキストベースの形式です。JavaScript のオブジェクトリテラルと似た構文を持ちます。

JavaScript オブジェクト ↔ JSON 文字列 の変換

const user = {
  id: 101,
  name: "Charlie",
  email: "charlie@example.com",
  isAdmin: false,
  lastLogin: new Date(), // Date オブジェクト
  settings: undefined, // undefined プロパティ
  greet: function() {}, // 関数
  [Symbol('secret')]: 'value' // Symbol キー
};

// オブジェクト -> JSON 文字列
// undefined, 関数, Symbol は含まれない
// Date は ISO 8601 形式の文字列になる
const jsonString = JSON.stringify(user);
console.log(jsonString);
// 出力例: {"id":101,"name":"Charlie","email":"charlie@example.com","isAdmin":false,"lastLogin":"2025-04-03T09:40:00.000Z"}

// 整形して出力 (インデント = 2スペース)
const prettyJsonString = JSON.stringify(user, null, 2);
console.log(prettyJsonString);
/*
出力例:
{
  "id": 101,
  "name": "Charlie",
  "email": "charlie@example.com",
  "isAdmin": false,
  "lastLogin": "2025-04-03T09:40:00.000Z"
}
*/

// replacer 関数の例 (name プロパティだけ大文字にする)
const replacerFunc = (key, value) => {
    if (key === 'name') {
        return value.toUpperCase();
    }
    if (typeof value === 'function' || typeof value === 'undefined' || typeof value === 'symbol') {
        return undefined; // 明示的に除外
    }
    return value;
};
const replacedJson = JSON.stringify(user, replacerFunc, 2);
console.log(replacedJson);
/*
出力例:
{
  "id": 101,
  "name": "CHARLIE",
  "email": "charlie@example.com",
  "isAdmin": false,
  "lastLogin": "2025-04-03T09:40:00.000Z"
}
*/


// JSON 文字列 -> オブジェクト
const jsonToParse = '{"id":102,"name":"Dana","isActive":true,"tags":["a","b"]}';
const parsedObject = JSON.parse(jsonToParse);
console.log(parsedObject); // { id: 102, name: 'Dana', isActive: true, tags: [ 'a', 'b' ] }
console.log(parsedObject.name); // "Dana"

// reviver 関数の例 (日付文字列を Date オブジェクトに戻す)
const jsonWithDate = '{"event":"Meeting","date":"2025-05-10T10:00:00.000Z"}';
const reviverFunc = (key, value) => {
    if (key === 'date' && typeof value === 'string') {
        // ISO 8601 形式の日付文字列を Date オブジェクトに変換
        const datePattern = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
        if (datePattern.test(value)) {
             return new Date(value);
        }
    }
    return value;
};
const parsedWithDate = JSON.parse(jsonWithDate, reviverFunc);
console.log(parsedWithDate); // { event: 'Meeting', date: Date object }
console.log(parsedWithDate.date.getFullYear()); // 2025
        

JSON の構文ルール:

• データは名前/値のペア (オブジェクト: {"key": "value"})。キーは常にダブルクォートで囲まれた文字列。
• データは順序付けられた値のリスト (配列: [value1, value2])。
• 値として使えるのは、文字列 (ダブルクォート)、数値、true, false, null、オブジェクト、配列。
• コメントは許可されない。

文字列のパターンマッチングを行うための表現式です。文字列の検索、置換、抽出、検証などに使われます。

正規表現の作成

// リテラル記法 (推奨: パターンが静的な場合)
const regex1 = /abc/; // "abc" という文字列にマッチ
const regex2 = /hello/i; // "hello" に大文字小文字を区別せずにマッチ (i フラグ)

// RegExp コンストラクタ (パターンが動的に変わる場合や文字列から生成する場合)
const pattern = "world";
const flags = "gi"; // g: グローバル検索, i: 大文字小文字無視
const regex3 = new RegExp(pattern, flags); // /world/gi と同じ

// 特殊文字をエスケープする必要がある場合
const variablePattern = "a.b"; // "." は特殊文字なのでエスケープが必要
const regex4 = new RegExp(variablePattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')); // /a\.b/ と同じ
        

主な正規表現メソッド

const text = "The quick brown fox jumps over the lazy dog. The fox is quick.";
const pattern = /quick/g; // "quick" をグローバル検索
const patternIgnoreCase = /fox/gi; // "fox" を大文字小文字無視でグローバル検索
const patternWithGroup = /(\w+) fox/; // 単語 + " fox" にマッチ (単語をキャプチャ)

// test()
console.log(/quick/.test(text)); // true
console.log(/slow/.test(text)); // false

// exec()
const regex = /T(h)(e)/g; // 'T', 'h', 'e' にマッチし、'h'と'e'をキャプチャ
let match;
while ((match = regex.exec(text)) !== null) {
    console.log(`Found "${match[0]}" at index ${match.index}. Captured: ${match[1]}, ${match[2]}`);
    console.log(`Next search starts at ${regex.lastIndex}`);
}
// Found "The" at index 0. Captured: h, e / Next search starts at 3
// Found "the" at index 31. Captured: h, e / Next search starts at 34

// match()
console.log(text.match(/the/i));
// ['the', index: 31, input: '...', groups: undefined] (g なし、最初のマッチ詳細)
console.log(text.match(patternIgnoreCase));
// ['fox', 'fox'] (g あり、全てのマッチ文字列)
console.log(text.match(patternWithGroup));
// ['brown fox', 'brown', index: 10, input: '...', groups: undefined] (g なし、キャプチャグループ含む)

// search()
console.log(text.search(/brown/)); // 10
console.log(text.search(/Lazy/)); // -1 (大文字小文字区別)
console.log(text.search(/Lazy/i)); // 35 (i フラグでマッチ)

// replace()
console.log(text.replace("fox", "cat")); // "The quick brown cat jumps over the lazy dog..." (最初の "fox" のみ)
console.log(text.replace(/fox/g, "cat")); // "The quick brown cat jumps over the lazy dog. The cat is quick." (全ての "fox")
console.log(text.replace(patternIgnoreCase, "CAT")); // "The quick brown CAT jumps over the lazy dog. The CAT is quick." (大文字小文字無視で全て置換)
console.log(text.replace(/(\w+) (\w+)/g, '$2, $1')); // "quick The, brown quick, fox brown, ..." (単語の順序入れ替え)
console.log(text.replace(/quick/gi, (matched) => matched.toUpperCase())); // "The QUICK brown fox jumps over the lazy dog. The fox is QUICK." (マッチ部分を大文字に)

// split()
console.log("apple,banana,orange".split(",")); // ['apple', 'banana', 'orange']
console.log("one two three".split(/\s+/)); // ['one', 'two', 'three'] (スペースで分割)
console.log("item1|item2||item3".split(/\|/)); // ['item1', 'item2', '', 'item3']
        

主要なメタ文字と量指定子

コードをより簡潔かつ効率的に書くための比較的新しい機能です。

スプレッド構文 (Spread Syntax) ...

イテラブルオブジェクト (配列、文字列など) やオブジェクトを展開します。

// 配列の展開
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [...arr1, 0, ...arr2]; // [1, 2, 3, 0, 4, 5, 6]
const copiedArray = [...arr1]; // 配列の浅いコピー

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6 (配列要素を引数として展開)

// 文字列の展開
const str = "hello";
const chars = [...str]; // ['h', 'e', 'l', 'l', 'o']

// オブジェクトの展開 (ES2018)
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObject = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 } (obj2のbで上書き)
const copiedObject = { ...obj1 }; // オブジェクトの浅いコピー
        

分割代入 (Destructuring Assignment)

配列やオブジェクトから値を取り出して、個別の変数に代入します。

// 配列の分割代入
const colors = ["red", "green", "blue"];
const [firstColor, secondColor] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"

const [a, , c, d = "yellow"] = colors; // 要素のスキップ、デフォルト値
console.log(a); // "red"
console.log(c); // "blue"
console.log(d); // "yellow" (元の配列にないためデフォルト値)

// Rest パターンとの組み合わせ
const [x, ...rest] = [10, 20, 30, 40];
console.log(x); // 10
console.log(rest); // [20, 30, 40]

// 関数の引数での分割代入
function printCoords([lat, lon]) {
    console.log(`Latitude: ${lat}, Longitude: ${lon}`);
}
printCoords([35.68, 139.76]);

// オブジェクトの分割代入
const user = { id: 42, name: "Alice", age: 30, city: "London" };
const { name, age } = user;
console.log(name); // "Alice"
console.log(age); // 30

// 異なる変数名への代入、デフォルト値
const { id: userId, city = "Unknown", country = "UK" } = user;
console.log(userId); // 42
console.log(city); // "London" (元のオブジェクトの値を使用)
console.log(country); // "UK" (元のオブジェクトにないためデフォルト値)

// ネストしたオブジェクトの分割代入
const data = { info: { score: 95, rank: 1 } };
const { info: { score } } = data;
console.log(score); // 95

// 関数の引数での分割代入 (オブジェクト)
function displayUser({ name, age }) {
    console.log(`User: ${name}, Age: ${age}`);
}
displayUser(user);
        

テンプレートリテラル (Template Literals)

バッククォート (`) を使って文字列を定義します。埋め込み式 (${expression}) や複数行文字列が簡単に扱えます。

const userName = "Bob";
const userAge = 25;

// 埋め込み式
const message = `Hello, my name is ${userName} and I am ${userAge} years old.`;
console.log(message); // "Hello, my name is Bob and I am 25 years old."

// 複数行文字列
const multiLine = `This is the first line.
This is the second line.
  Indentation is preserved.`;
console.log(multiLine);

// タグ付きテンプレートリテラル (高度な利用法)
function highlight(strings, ...values) {
  let result = '';
  strings.forEach((str, i) => {
    result += str;
    if (values[i]) {
      result += `${values[i]}`;
    }
  });
  return result;
}
const highlightedMessage = highlight`User ${userName} (age ${userAge}) logged in.`;
console.log(highlightedMessage);
// "User Bob (age 25) logged in."
        

Optional Chaining Operator (?.) (ES2020)

オブジェクトのプロパティにアクセスする際、途中のプロパティが null または undefined でもエラーにならず、undefined を返します。

const userProfile = {
  name: "Carol",
  address: {
    street: "123 Main St",
    city: "Anytown"
  },
  // contact: null
  getContactInfo() {
      return this.contact?.email;
  }
};

// 通常のアクセスではエラーになる場合がある
// const zipCode = userProfile.address.zipCode; // OK if address exists
// const phone = userProfile.contact.phone; // TypeError: Cannot read properties of undefined (reading 'phone')

// Optional Chaining を使用
const zipCode = userProfile.address?.zipCode; // undefined (address は存在するが zipCode がない)
const street = userProfile.address?.street; // "123 Main St"
const phone = userProfile.contact?.phone; // undefined (contact が undefined/null)
const country = userProfile.address?.country?.code; // undefined (ネストして使用可能)

// メソッド呼び出しにも使える
const contactInfo = userProfile.getContactInfo?.(); // undefined (getContactInfo内でも ?. を使用)

// 配列要素へのアクセス
const firstHobby = userProfile.hobbies?.[0]; // undefined (hobbies がない)
        

Nullish Coalescing Operator (??) (ES2020)

左辺が null または undefined の場合に右辺の値を返します。それ以外の偽値 (0, '', false, NaN) では左辺の値を返します。(|| 演算子との違い)

const settings = {
  timeout: 0, // タイムアウト 0ms は有効な値
  retries: null,
  theme: '' // 空文字列も有効なテーマ設定の可能性
};

// || 演算子の場合 (0 や '' も偽値として扱われる)
const timeoutValue = settings.timeout || 5000; // 5000 (0 が偽値のため右辺が採用される) 🤔
const themeValue = settings.theme || 'dark';   // 'dark' ('' が偽値のため右辺が採用される) 🤔

// ?? 演算子の場合 (null と undefined のみ右辺を採用) 👍
const timeoutValueCoalescing = settings.timeout ?? 5000; // 0 (左辺が null/undefined でないので左辺を採用)
const retriesValue = settings.retries ?? 3;            // 3 (左辺が null なので右辺を採用)
const themeValueCoalescing = settings.theme ?? 'dark';   // '' (左辺が null/undefined でないので左辺を採用)
const undefinedValue = settings.username ?? 'Guest';     // 'Guest' (settings.username が undefined のため右辺を採用)