JavaScript チートシート
検索・印刷できるモダン JavaScript のリファレンス — 構文、配列、文字列、オブジェクト、async/await、DOM、ES2022+ の機能。無料。
変数と型
10let x = 1;
ブロックスコープの再代入可能な変数
const PI = 3.14;
ブロックスコープの定数束縛
typeof value
型を文字列で返す
Number('42')
文字列を数値に変換
String(42)
値を文字列に変換
parseInt('42px', 10)
先頭の整数を解析 (10進)
Boolean(0)
値を true/false に変換
value ?? 'default'
Null合体演算子 (null/undefined のみ)
a?.b?.c
オプショナルチェーン、null で短絡
Array.isArray(x)
値が配列か判定
関数
9function add(a, b) { return a + b; }
名前付き関数宣言
const add = (a, b) => a + b;
暗黙の return を持つアロー関数
const f = (a = 1) => a;
デフォルト引数値
function f(...args) {}
残余引数を配列にまとめる
f(...arr)
配列を引数に展開
const { a, b } = obj;
オブジェクトの分割代入
const [x, y] = arr;
配列の分割代入
(function(){})()
即時実行関数 (IIFE)
fn.bind(this)
固定された this コンテキストを束縛
文字列
10`Hello ${name}`
テンプレートリテラルの補間
str.length
文字数
str.includes('a')
部分文字列の有無を確認
str.slice(0, 3)
文字列の一部を抽出
str.replace(/a/g, 'b')
一致箇所を置換 (regex)
str.split(',')
配列に分割
str.trim()
前後の空白を除去
str.toUpperCase()
大文字に変換
str.padStart(3, '0')
先頭を指定長まで埋める
str.at(-1)
インデックスの文字 (負数対応)
配列
11arr.map(x => x * 2)
各要素を変換
arr.filter(x => x > 0)
一致する要素を保持
arr.reduce((a, b) => a + b, 0)
単一の値に集約
arr.find(x => x.id === 1)
最初に一致する要素
arr.some(x => x > 0)
いずれかが一致すれば true
arr.every(x => x > 0)
すべて一致すれば true
arr.includes(3)
値の有無を確認
arr.sort((a, b) => a - b)
数値の昇順ソート
[...new Set(arr)]
重複値を除去
arr.flat(Infinity)
ネストした配列を完全に平坦化
arr.at(-1)
最後の要素 (負のインデックス)
オブジェクト
9Object.keys(obj)
自身の列挙可能なキーの配列
Object.values(obj)
自身の値の配列
Object.entries(obj)
[key, value] ペアの配列
{ ...a, ...b }
オブジェクトを結合 (spread)
Object.assign({}, a, b)
対象にコピー/結合
Object.freeze(obj)
オブジェクトを不変にする
{ [key]: value }
計算されたプロパティ名
obj.hasOwnProperty('x')
自身のプロパティの有無を確認
structuredClone(obj)
オブジェクトをディープクローン
非同期と Promise
9async function f() {}
async 関数を宣言
await fetch(url)
Promise が解決するまで待機
Promise.all([p1, p2])
すべての解決を待つ
Promise.allSettled([p1, p2])
すべての確定を待つ
Promise.race([p1, p2])
最初に確定したもので解決
new Promise((res, rej) => {})
Promise を手動で作成
try { await f(); } catch (e) {}
非同期エラーを処理
setTimeout(fn, 1000)
遅延後に実行 (ms)
queueMicrotask(fn)
マイクロタスクをスケジュール
制御フロー
9if (a) {} else if (b) {} else {}
条件分岐
a ? b : c
三項演算子
switch (x) { case 1: break; }
多方向分岐
for (const x of arr) {}
値を反復 (イテラブル)
for (const k in obj) {}
オブジェクトのキーを反復
while (cond) {}
条件が真の間ループ
arr.forEach((x, i) => {})
要素ごとにコールバック実行
break / continue
ループの反復を中断またはスキップ
label: for (...) { break label; }
ネストしたループから脱出
DOM とイベント
10document.querySelector('.x')
最初に一致する要素
document.querySelectorAll('.x')
一致する全要素 (NodeList)
el.addEventListener('click', fn)
イベントリスナーを登録
el.classList.toggle('active')
CSS クラスをトグル
el.dataset.id
data-id 属性を読む
el.textContent = 'hi'
テキストを安全に設定 (HTML 無効)
el.setAttribute('aria-hidden', true)
属性を設定
e.preventDefault()
デフォルト動作を取り消し
el.closest('.parent')
最も近い一致する祖先
document.createElement('div')
新しい要素を作成
クラスとモジュール
9class A extends B {}
継承を持つクラス
constructor() { super(); }
初期化して親を呼び出す
#private = 1;
プライベートクラスフィールド
static create() {}
クラスの静的メソッド
get value() {}
ゲッターアクセサ
export default fn;
モジュールのデフォルトエクスポート
export { a, b };
名前付きエクスポート
import x, { y } from './m.js'
デフォルト + 名前付きインポート
const m = await import('./m.js')
動的インポート
「:q」に一致する項目はありません。
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。