JavaScript チートシート
最終更新
変数 (let、const、var)
値を宣言します。まず const、次に let を使い、var は避けます。
| 操作 | 構文 |
|---|---|
| ブロックスコープ、再代入可 | let count = 0; |
| ブロックスコープ、再代入不可 | const name = "Ada"; |
| 関数スコープ (旧式) | var x = 1; |
| 値なしで宣言 | let result; |
| 複数の宣言 | let a = 1, b = 2; |
| 定数オブジェクト (中身は変更可) | const user = {}; user.id = 1; |
データ型
プリミティブ型と参照型、そしてそれらを調べる方法。
| 型 | 例 |
|---|---|
| 数値 | let n = 42; |
| 文字列 | let s = "hi"; |
| 真偽値 | let ok = true; |
| 配列 | let arr = [1, 2, 3]; |
| オブジェクト | let obj = { id: 1 }; |
| null / undefined | let a = null;, let b; |
| 型を調べる | typeof n |
| 変換 | Number("7"), String(42), Boolean(0) |
文字列とテンプレートリテラル
テキストを構築・操作します。
| 操作 | 構文 |
|---|---|
| テンプレートリテラル | Hi ${name}, age ${age} (バッククォートで囲む) |
| 長さ | text.length |
| 大文字 / 小文字 | text.toUpperCase(), text.toLowerCase() |
| 空白を除去 | text.trim() |
| すべて置換 | text.replaceAll("a", "b") |
| 配列に分割 | text.split(",") |
| 含むかどうか | text.includes("js") |
| 切り出し | text.slice(0, 3) |
配列と配列メソッド
順序のあるコレクションと、それを反復処理するメソッド。
| 操作 | 構文 |
|---|---|
| 末尾に追加 / 削除 | arr.push(4), arr.pop() |
| 先頭に追加 / 削除 | arr.unshift(0), arr.shift() |
| 各要素を変換 | arr.map(x => x * 2) |
| 一致する要素を残す | arr.filter(x => x > 0) |
| 単一の値に畳み込む | arr.reduce((sum, x) => sum + x, 0) |
| 要素を探す | arr.find(x => x.id === 1) |
| 一部 / すべてを判定 | arr.some(f), arr.every(f) |
| 値のインデックス | arr.indexOf(3), arr.includes(3) |
| 文字列に連結 | arr.join(", ") |
オブジェクト
キーと値のコレクション。
| 操作 | 構文 |
|---|---|
| 作成 | const user = { id: 1, name: "Ada" }; |
| プロパティにアクセス | user.name, user["name"] |
| プロパティを追加 / 更新 | user.age = 25; |
| プロパティを削除 | delete user.age; |
| すべてのキー / 値を取得 | Object.keys(user), Object.values(user) |
| エントリを取得 | Object.entries(user) |
| オブジェクトを結合 | Object.assign({}, a, b) |
| 浅いコピー | const copy = { ...user }; |
制御フロー
条件分岐とループ。
| 操作 | 構文 |
|---|---|
| if / else if / else | if (x > 0) { … } else { … } |
| 三項演算子 | const y = x > 0 ? 1 : 0; |
| switch | switch (x) { case 1: … break; } |
| for ループ | for (let i = 0; i < 5; i++) { … } |
| for-of (値) | for (const item of arr) { … } |
| for-in (キー) | for (const key in obj) { … } |
| while ループ | while (x < 10) { … } |
関数とアロー関数
再利用できる呼び出し可能なブロックを定義します。
| 操作 | 構文 |
|---|---|
| 関数宣言 | function add(a, b) { return a + b; } |
| アロー関数 | const add = (a, b) => a + b; |
| 引数 1 つのアロー | const sq = x => x * x; |
| 引数なしのアロー | const now = () => Date.now(); |
| デフォルト引数 | function f(x = 0) { … } |
| 残余引数 | function f(...args) { … } |
| 即時実行 (IIFE) | (() => { … })(); |
分割代入とスプレッド
値を取り出し、構造をコピー・結合します。
| 操作 | 構文 |
|---|---|
| 配列の分割代入 | const [a, b] = arr; |
| オブジェクトの分割代入 | const { id, name } = user; |
| 取り出しつつ名前を変更 | const { id: userId } = user; |
| デフォルト値 | const { age = 0 } = user; |
| 配列を展開 | const all = [...a, ...b]; |
| オブジェクトを展開 | const next = { ...user, age: 25 }; |
| 分割代入での残余 | const [first, ...rest] = arr; |
Promise と async/await
ネットワークリクエストのような非同期処理を扱います。
| 操作 | 構文 |
|---|---|
| 非同期関数 | async function load() { … } |
| Promise を await | const data = await fetch(url); |
| then / catch | promise.then(res => …).catch(err => …) |
| await を try / catch で | try { await f(); } catch (e) { … } |
| 解決 / 拒否 | Promise.resolve(1), Promise.reject(err) |
| すべてを待つ | await Promise.all([a, b]) |
| 最初に確定したもの | await Promise.race([a, b]) |
最もよく使うモダンな JavaScript の構文を 1 ページにまとめました。この JavaScript チートシートは、日常的な ES6 以降のクイックリファレンスです。変数の宣言、文字列と配列のメソッド、オブジェクト、アロー関数、分割代入、async/await を収録しています。
ここに載っているものはすべて標準の JavaScript で、モダンなブラウザと Node.js で動きます。必要なものをコピーするか、JS プレイグラウンドでどのスニペットもその場で試してみてください。インストールは不要です。
JavaScript チートシート よくある質問
この JavaScript チートシートは無料ですか?
はい。この JavaScript チートシートは完全に無料で、登録も不要です。ブックマークしておけば、構文や配列メソッド、非同期のパターンを調べたいときにいつでも戻ってこられます。
JavaScript の == と === の違いは何ですか?
== は緩い等価で、比較する前にオペランドを同じ型に変換するため、0 == "0" は true になります。=== は厳密な等価で、変換せずに値と型の両方を比較するため、0 === "0" は false になります。ほとんどの場合 === (と !==) を使いましょう。予測しやすく、意外な型変換を避けられます。let、const、var の違いは何ですか?
const と let はブロックスコープで ES6 で追加され、var は関数スコープで古いものです。再代入しない値には const、再代入する値には let を使い、巻き上げやスコープのバグを防ぐため var は避けます。なお、const のオブジェクトや配列でも中身は変更でき、定数なのは束縛だけです。JavaScript をオンラインで練習できますか?
はい。JS プレイグラウンドを開けば、このチートシートのどのスニペットもブラウザ上で実行できます。インストールは不要です。体系的に学びたいときは、Coddy の無料インタラクティブ JavaScript コースが、変数とループから配列メソッド、async/await まで段階的に導いてくれます。
このチートシートは初心者に向いていますか?
はい。基本 (変数、データ型、文字列) から分割代入や async/await へと並べてあるので、初日から上のセクションを使い、モダンな ES6 以降の機能には慣れながら進めます。
関連リソース
他のチートシート
