JavaScript チートシート

すべてのツール

無料

検索・印刷できるモダン JavaScript のリファレンス — 構文、配列、文字列、オブジェクト、async/await、DOM、ES2022+ の機能。無料。

Variables & types

let x = 1;

Block-scoped, reassignable variable

const PI = 3.14;

Block-scoped constant binding

typeof value

Returns the type as a string

Number('42')

Convert a string to a number

String(42)

Convert a value to a string

parseInt('42px', 10)

Parse a leading integer (base 10)

Boolean(0)

Coerce a value to true/false

value ?? 'default'

Nullish coalescing (null/undefined only)

a?.b?.c

Optional chaining, short-circuits on null

Array.isArray(x)

Check whether a value is an array

Functions

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

Named function declaration

const add = (a, b) => a + b;

Arrow function with implicit return

const f = (a = 1) => a;

Default parameter value

function f(...args) {}

Rest parameters collect into an array

f(...arr)

Spread an array into arguments

const { a, b } = obj;

Object destructuring

const [x, y] = arr;

Array destructuring

(function(){})()

Immediately-invoked function (IIFE)

fn.bind(this)

Bind a fixed this context

Strings

`Hello ${name}`

Template literal interpolation

str.length

Number of characters

str.includes('a')

Check if a substring exists

str.slice(0, 3)

Extract part of a string

str.replace(/a/g, 'b')

Replace matches (regex)

str.split(',')

Split into an array

str.trim()

Remove surrounding whitespace

str.toUpperCase()

Convert to upper case

str.padStart(3, '0')

Pad the start to a length

str.at(-1)

Character at index (supports negatives)

Arrays

arr.map(x => x * 2)

Transform each element

arr.filter(x => x > 0)

Keep matching elements

arr.reduce((a, b) => a + b, 0)

Reduce to a single value

arr.find(x => x.id === 1)

First matching element

arr.some(x => x > 0)

True if any element matches

arr.every(x => x > 0)

True if all elements match

arr.includes(3)

Check for a value

arr.sort((a, b) => a - b)

Numeric ascending sort

[...new Set(arr)]

Remove duplicate values

arr.flat(Infinity)

Fully flatten nested arrays

arr.at(-1)

Last element (negative index)

Objects

Object.keys(obj)

Array of own enumerable keys

Object.values(obj)

Array of own values

Object.entries(obj)

Array of [key, value] pairs

{ ...a, ...b }

Merge objects (spread)

Object.assign({}, a, b)

Copy/merge into a target

Object.freeze(obj)

Make an object immutable

{ [key]: value }

Computed property name

obj.hasOwnProperty('x')

Check for an own property

structuredClone(obj)

Deep clone an object

Async & promises

async function f() {}

Declare an async function

await fetch(url)

Pause until a promise resolves

Promise.all([p1, p2])

Wait for all to resolve

Promise.allSettled([p1, p2])

Wait for all to settle

Promise.race([p1, p2])

Resolve with the first to settle

new Promise((res, rej) => {})

Create a promise manually

try { await f(); } catch (e) {}

Handle async errors

setTimeout(fn, 1000)

Run after a delay (ms)

queueMicrotask(fn)

Schedule a microtask

Control flow

if (a) {} else if (b) {} else {}

Conditional branches

a ? b : c

Ternary expression

switch (x) { case 1: break; }

Multi-way branch

for (const x of arr) {}

Iterate values (iterables)

for (const k in obj) {}

Iterate object keys

while (cond) {}

Loop while a condition holds

arr.forEach((x, i) => {})

Run a callback per element

break / continue

Exit or skip a loop iteration

label: for (...) { break label; }

Break out of nested loops

DOM & events

document.querySelector('.x')

First matching element

document.querySelectorAll('.x')

All matching elements (NodeList)

el.addEventListener('click', fn)

Attach an event listener

el.classList.toggle('active')

Toggle a CSS class

el.dataset.id

Read a data-id attribute

el.textContent = 'hi'

Set text safely (no HTML)

el.setAttribute('aria-hidden', true)

Set an attribute

e.preventDefault()

Cancel the default action

el.closest('.parent')

Nearest matching ancestor

document.createElement('div')

Create a new element

Classes & modules

class A extends B {}

Class with inheritance

constructor() { super(); }

Initialize and call the parent

#private = 1;

Private class field

static create() {}

Static method on the class

get value() {}

Getter accessor

export default fn;

Default module export

export { a, b };

Named module exports

import x, { y } from './m.js'

Default + named imports

const m = await import('./m.js')

Dynamic import

「:q」に一致する項目はありません。

JavaScript チートシートについて

このJavaScriptチートシートは、現代の言語を1ページで検索できるリファレンスです。変数と型、関数、文字列、配列、オブジェクト、非同期とプロミス、制御フロー、DOMとイベント、クラスとモジュールを扱います。各項目には実際のコードスニペットと、それが何をするかの一行説明が対になっています。

let/const、アロー関数、分割代入、スプレッド、オプショナルチェイニング、テンプレートリテラル、async/await、ESモジュールなど、今日実際に使われているJavaScriptを対象にしているため、別の言語から戻ってきたときの手早い復習にもなります。

シート全体はクライアントサイドで読み込まれ、無料です。検索ボックスでライブにフィルタリングし、固定表示の目次でセクション間を移動し、任意のスニペットをクリックしてコピーし、机の脇に置くJavaScriptリファレンスとしてページを印刷できます。

JavaScript チートシートの使い方

シートを開き、Variables & typesからDOM & events、Classes & modulesまでのセクション一覧をざっと確認します。
検索ボックスに入力して全行をライブにフィルタリングします。マッチ数のカウンターがいくつのスニペットが該当するかを示します。
固定表示の目次を使って、Async & promisesのようなセクションに直接ジャンプします。
スニペットまたはそのコピーアイコンをクリックして、コードをクリップボードにコピーします。
Printをクリックして、リファレンス全体をきれいな紙用のコピーとして印刷します。

よくある質問

9つのセクションです。変数と型、関数、文字列、配列、オブジェクト、非同期とプロミス、制御フロー、DOMとイベント、クラスとモジュールで、それぞれコピーしてすぐ使えるスニペットと短い説明が付いています。

はい。スニペットはlet/const、アロー関数、分割代入、オプショナルチェイニング、async/await、クラス、ESモジュールといった現行の構文を使用しており、古い記法ではなくES2022以降のJavaScriptを反映しています。

はい。任意のコードスニペット、または行にカーソルを合わせたときに表示されるコピーアイコンをクリックすれば、すぐにクリップボードに反映され、「コピーしました！」という短い確認メッセージが表示されます。

はい。Printボタンは検索バー、ナビゲーション、ボタンを取り除いたきれいなレイアウトを生成するので、印刷されたページにはスニペットとその説明だけが含まれます。

はい。無料で、すべてブラウザ内で読み込まれ、アカウント登録も不要です。

JavaScript チートシート

Variables & types

Functions

Strings

Arrays

Objects

Async & promises

Control flow

DOM & events

Classes & modules

JavaScript チートシートについて

JavaScript チートシートの使い方

よくある質問

JavaScriptチートシートは何をカバーしていますか？

最新のJavaScriptに対応していますか？

ワンクリックでスニペットをコピーできますか？

チートシートを印刷できますか？

このチートシートは無料ですか？

関連ツール

人気の検索

このツールを埋め込む