JavaScriptの基本データ型と操作

基本データ型（値型）にはString、Number、Boolean、Undefined、Nullが含まれます。参照型（複合データ型）はObject、Array、Dateなどです。値型はスタックに保存され、参照型はヒープに保存されます。

console.log(+'0');      // 数値型 0
console.log(1 + '0');    // 文字列型 "10"
console.log(2 * '10');   // 数値型 20

DOM操作と仮想DOM

DOM（Document Object Model）はHTMLドキュメントを操作するためのインターフェースです。仮想DOMは実際のDOMをJavaScriptオブジェクトで模擬し、効率的なUI更新を実現します。

<div data-custom="sample">要素</div>
const el = document.querySelector('[data-custom]');
console.log(el.dataset.custom);

JSONデータの変換

サーバーから受信したJSON文字列をJavaScriptオブジェクトに変換するにはJSON.parse()、逆にJavaScriptオブジェクトをJSON形式に変換するにはJSON.stringify()を使用します。

深コピーの実装方法

深コピーには再帰処理が効果的です。展開演算子やJSON.stringify()はネストされたオブジェクトやundefined値を処理できない点に注意が必要です。

function deepClone(target) {
  if (typeof target !== 'object' || target === null) return target;
  const clone = Array.isArray(target) ? [] : {};
  for (const key in target) {
    clone[key] = deepClone(target[key]);
  }
  return clone;
}

非同期処理の最適化手法

節流（throttle）は指定間隔内で一度のみ処理を実行し、防抖（debounce）は一定時間経過後に処理を実行します。

function throttle(func, delay) {
  let active = false;
  return (...args) => {
    if (active) return;
    active = true;
    func.apply(this, args);
    setTimeout(() => active = false, delay);
  };
}

function debounce(func, wait) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), wait);
  };
}

HTTPステータスコードの分類

2xxは成功、3xxはリダイレクト、4xxはクライアントエラー、5xxはサーバーエラーを示します。201はリソース作成成功、401は認証エラー、503はサーバー過負荷を表します。

クロスオリジンリクエストの対策

ローカルサーバーを経由してリクエストを転送することで、ブラウザのセキュリティポリシーによる制限を回避できます。

イベントループの動作原理

同期タスクの実行後、マイクロタスク（Promise処理）を処理し、最後にマクロタスク（setTimeoutなど）を実行します。

async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}
async function async2() {
  console.log('async2');
}
async1();
console.log('script start');
// 実行結果: async1 start → async2 → script start → async1 end

Fetch APIの利用方法

FetchはPromiseベースのHTTPリクエストAPIで、デフォルトはGETメソッドです。レスポンス処理にはthen/catchを使用します。

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({ name: 'data' })
})
.then(response => response.json())
.then(data => console.log(data));

配列操作メソッドの違い

find()は条件に一致する要素を返却し、findIndex()はそのインデックスを返却します。includes()は文字列や配列に特定の値が含まれているかを判定します。

const arr = [{id: 1}, {id: 2}];
arr.find(item => item.id === 2); // {id: 2}
arr.findIndex(item => item.id === 2); // 1

ジェネレータ関数の基本

ジェネレータ関数はyieldキーワードで処理を一時停止し、再開できます。非同期処理の可読性向上に役立ちます。

function* generator() {
  const a = yield '処理1';
  const b = yield '処理2';
  console.log(a, b);
}
const gen = generator();
console.log(gen.next().value); // 処理1
console.log(gen.next('引数1').value); // 処理2

CDNとURIエンコーディング

CDN（コンテンツ配信ネットワーク）はユーザー近接サーバーでコンテンツをキャッシュし、高速配信を実現します。encodeURIはURI全体をエンコードし、encodeURIComponentはURIパーツをエンコードします。