LTech

JavaScriptリファレンス

JavaScriptの主要な文法、関数、オブジェクトと使用例を確認できます。

JavaScript基本 DOM操作 イベント処理 非同期処理

JavaScript基本

変数宣言

変数を宣言して値を代入します。

使用例：

// let - 再代入可能な変数
let name = "太郎";
name = "次郎";  // 再代入OK

// const - 定数（再代入不可）
const PI = 3.14;
// PI = 3.1415;  // エラー

// var - 古い変数宣言方法（スコープの問題があるため推奨されません）
var age = 25;

データ型

JavaScriptの主要なデータ型です。

使用例：

// プリミティブ型
let string = "テキスト";
let number = 42;
let boolean = true;
let nullValue = null;
let undefinedValue = undefined;
let symbol = Symbol("一意の値");
let bigint = 9007199254740991n;

// 参照型
let array = [1, 2, 3];
let object = { name: "太郎", age: 25 };
let func = function() { return "こんにちは"; };

関数

関数を定義して使用します。

使用例：

// 関数宣言
function greet(name) {
  return `こんにちは、${name}さん！`;
}

// 関数呼び出し
console.log(greet("太郎"));  // "こんにちは、太郎さん！"

// 関数式
const add = function(a, b) {
  return a + b;
};

// アロー関数
const multiply = (a, b) => a * b;
console.log(multiply(5, 3));  // 15

条件分岐

条件に応じて処理を分岐します。

使用例：

// if-else文
if (age >= 20) {
  console.log("成人です");
} else if (age >= 18) {
  console.log("18歳以上です");
} else {
  console.log("未成年です");
}

// switch文
const day = "月曜日";
switch (day) {
  case "月曜日":
    console.log("仕事始め");
    break;
  case "金曜日":
    console.log("仕事納め");
    break;
  default:
    console.log("平日");
}

// 三項演算子
const status = age >= 20 ? "成人" : "未成年";

ループ

繰り返し処理を行います。

使用例：

// for文
for (let i = 0; i < 5; i++) {
  console.log(`カウント: ${i}`);
}

// while文
let count = 0;
while (count < 5) {
  console.log(`whileカウント: ${count}`);
  count++;
}

// 配列のループ
const fruits = ["りんご", "バナナ", "オレンジ"];

// for...of (値を取得)
for (const fruit of fruits) {
  console.log(fruit);
}

// forEach (コールバック関数)
fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});

配列操作

配列を操作するための主なメソッドです。

使用例：

const numbers = [1, 2, 3, 4, 5];

// 要素の追加
numbers.push(6);        // 末尾に追加: [1, 2, 3, 4, 5, 6]
numbers.unshift(0);     // 先頭に追加: [0, 1, 2, 3, 4, 5, 6]

// 要素の削除
const last = numbers.pop();     // 末尾を削除して返す: 6
const first = numbers.shift();  // 先頭を削除して返す: 0

// スライス・結合
const sliced = numbers.slice(1, 3);      // [2, 3]
const combined = numbers.concat([7, 8]); // [1, 2, 3, 4, 5, 7, 8]

// 検索
const index = numbers.indexOf(3);   // 2
const exists = numbers.includes(5); // true

// 変換
const doubled = numbers.map(num => num * 2);           // [2, 4, 6, 8, 10]
const evens = numbers.filter(num => num % 2 === 0);    // [2, 4]
const sum = numbers.reduce((acc, num) => acc + num, 0); // 15

DOM操作

要素の取得

HTMLから要素を取得するためのメソッドです。

使用例：

// IDで要素を取得
const element = document.getElementById('myElement');

// クラス名で要素を取得（複数の場合はコレクションが返る）
const elements = document.getElementsByClassName('myClass');

// CSSセレクタで要素を取得（最初にマッチする要素）
const element = document.querySelector('.myClass');

// CSSセレクタで要素を取得（マッチする全ての要素）
const elements = document.querySelectorAll('p');

要素の内容を変更

取得した要素の内容を変更するプロパティとメソッドです。

使用例：

// テキスト内容を変更
element.textContent = '新しいテキスト';

// HTML内容を変更
element.innerHTML = '<strong>太字テキスト</strong>';

要素の作成と追加

新しい要素を作成してDOMに追加します。

使用例：

// 新しい要素を作成
const newDiv = document.createElement('div');
newDiv.textContent = '新しい要素';
newDiv.className = 'highlight';

// 親要素に追加
const container = document.getElementById('container');
container.appendChild(newDiv);

// 特定の位置に挿入
const referenceElement = document.getElementById('reference');
container.insertBefore(newDiv, referenceElement);

// 要素の削除
container.removeChild(newDiv);
// または
newDiv.remove();

属性の操作

要素の属性を操作するためのメソッドです。

使用例：

// 属性の取得
const value = element.getAttribute('data-value');

// 属性の設定
element.setAttribute('data-value', '100');

// 属性の削除
element.removeAttribute('data-value');

スタイルの操作

要素のスタイルを操作するためのプロパティです。

使用例：

// インラインスタイルの設定
element.style.color = 'red';
element.style.backgroundColor = 'lightgray';
element.style.fontSize = '16px';

// クラスの操作
element.classList.add('highlight');
element.classList.remove('old-class');
element.classList.toggle('visible');
const hasClass = element.classList.contains('active');

イベント処理

イベントリスナーの追加

要素にイベントリスナーを追加して、特定のイベントが発生したときの処理を定義します。

使用例：

const button = document.getElementById('myButton');

// クリックイベントのリスナーを追加
button.addEventListener('click', function() {
  alert('ボタンがクリックされました！');
});

// アロー関数を使用した例
button.addEventListener('mouseover', () => {
  button.style.backgroundColor = 'red';
});

// リスナーの削除
function handleClick() {
  alert('クリック');
}
button.addEventListener('click', handleClick);
// あとで削除する場合
button.removeEventListener('click', handleClick);

主なイベントタイプ：

  • click: 要素がクリックされたとき
  • mouseover: マウスが要素の上に移動したとき
  • mouseout: マウスが要素から離れたとき
  • keydown: キーが押されたとき
  • submit: フォームが送信されたとき
  • change: フォーム要素の値が変更されたとき

イベントオブジェクト

イベントハンドラに渡されるイベント情報を含むオブジェクトです。

使用例：

document.addEventListener('keydown', function(event) {
  console.log(`キーが押されました: ${event.key}`);
  if (event.key === 'Escape') {
    // 何か処理
  }
});

document.getElementById('myLink').addEventListener('click', function(event) {
  event.preventDefault(); // リンクのデフォルト動作をキャンセル
  console.log('リンクがクリックされましたが、ページは移動しません');
});

主なイベントオブジェクトのプロパティ：

  • target: イベントが発生した要素
  • currentTarget: イベントハンドラがアタッチされている要素
  • type: イベントのタイプ（'click', 'keydown' など）
  • preventDefault(): デフォルト動作をキャンセルするメソッド
  • stopPropagation(): イベントの伝播を停止するメソッド

イベント伝播

イベントが親要素から子要素へ、または子要素から親要素へ伝わる仕組みです。

使用例：

// キャプチャフェーズ（親→子）
document.getElementById('parent').addEventListener('click', function() {
  console.log('親要素がクリックされました（キャプチャフェーズ）');
}, true);

// バブリングフェーズ（子→親：デフォルト）
document.getElementById('child').addEventListener('click', function(event) {
  console.log('子要素がクリックされました');
  event.stopPropagation(); // 親要素へのイベント伝播を停止
});

非同期処理

コールバック関数

処理の完了後に実行される関数です。

使用例：

// コールバック関数を使った非同期処理
function fetchUserData(userId, callback) {
  setTimeout(() => {
    const user = { id: userId, name: 'ユーザー' + userId };
    callback(user);
  }, 1000);
}

fetchUserData(123, function(user) {
  console.log(`ユーザー名: ${user.name}`);
});

Promise

非同期処理の結果を表すオブジェクトです。

使用例：

// Promiseを使った非同期処理
function fetchUserData(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId > 0) {
        const user = { id: userId, name: 'ユーザー' + userId };
        resolve(user); // 成功時
      } else {
        reject(new Error('無効なユーザーID')); // 失敗時
      }
    }, 1000);
  });
}

// Promiseの使用
fetchUserData(123)
  .then(user => {
    console.log(`ユーザー名: ${user.name}`);
    return fetchUserData(456);
  })
  .then(user2 => {
    console.log(`別のユーザー名: ${user2.name}`);
  })
  .catch(error => {
    console.error('エラー発生:', error);
  })
  .finally(() => {
    console.log('処理完了');
  });

async/await

Promiseをより直感的に扱うための構文です。

使用例：

// async/awaitを使った非同期処理
async function loadUsers() {
  try {
    const user1 = await fetchUserData(123);
    console.log(`ユーザー名: ${user1.name}`);
    
    const user2 = await fetchUserData(456);
    console.log(`別のユーザー名: ${user2.name}`);
    
    return [user1, user2];
  } catch (error) {
    console.error('エラー発生:', error);
  } finally {
    console.log('処理完了');
  }
}

// async関数の実行
loadUsers().then(users => {
  console.log(`読み込んだユーザー数: ${users.length}`);
});

fetch API

ネットワークリクエストを行うための標準的なAPIです。

使用例：

// データを取得する
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('ネットワークレスポンスが正常ではありません');
    }
    return response.json();
  })
  .then(data => {
    console.log('取得したデータ:', data);
  })
  .catch(error => {
    console.error('フェッチエラー:', error);
  });

// async/awaitを使った例
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('ネットワークレスポンスが正常ではありません');
    }
    const data = await response.json();
    console.log('取得したデータ:', data);
    return data;
  } catch (error) {
    console.error('フェッチエラー:', error);
  }
}