⚡ JavaScriptチートシート
| 構文 | 用途 | 例 |
|---|---|---|
let / const | 変数宣言 | const name = "田中"; |
if / else | 条件分岐 | if (x > 0) { ... } else { ... } |
for | 繰り返し | for (let i = 0; i < 5; i++) { ... } |
while | 条件付き繰り返し | while (条件) { ... } |
function | 関数定義 | function greet(name) { return "Hello " + name; } |
=> | アロー関数 | const add = (a, b) => a + b; |
console.log() | コンソールに出力 | console.log("hello"); |
getElementById() | idで要素を取得 | document.getElementById("title") |
querySelector() | CSSセレクタで要素を取得 | document.querySelector(".btn") |
textContent | テキストを変更 | el.textContent = "新しいテキスト"; |
addEventListener() | イベント登録 | btn.addEventListener("click", fn) |
createElement() | 新しい要素を作る | document.createElement("li") |
appendChild() | 子要素を追加 | ul.appendChild(li) |
Math.random() | ランダムな数 | Math.floor(Math.random() * 10) |
localStorage | データを保存 | localStorage.setItem("key", "value") |
push / pop / shift / unshift | 配列の追加・削除 | arr.push("新要素"); arr.pop(); |
map / filter / reduce | 配列の変換・絞り込み | arr.map(x => x * 2) |
split / join | 文字列⇔配列の変換 | "a,b".split(",") → ["a","b"] |
setTimeout / setInterval | 時間差・繰り返し実行 | setTimeout(fn, 1000) |
fetch | サーバーからデータ取得 | const res = await fetch(url); |
async / await | 非同期処理 | async function getData() { ... } |
try / catch | エラー処理 | try { ... } catch (e) { ... } |
JSON.parse / stringify | JSON変換 | JSON.parse(text); JSON.stringify(obj); |
classList.add / remove / toggle | クラスの操作 | el.classList.add("active") |
dataset | data属性の読み書き | el.dataset.id → data-id の値 |
| テンプレートリテラル | 文字列に変数を埋め込む | `Hello ${name}` |
| スプレッド構文 | 配列・オブジェクトの展開 | const copy = [...arr]; |
| 分割代入 | 値の取り出し | const [a, b] = [1, 2]; |
import / export | モジュールの読み込み | import { fn } from "./utils.js" |
Promise | 非同期処理の結果 | fetch(url).then(res => res.json()) |
📖 関連する用語
❓ よくある質問
JavaScriptチートシートはどんな人向け？
JS初心者〜中級者向け。基本構文からDOM操作・非同期処理まで網羅しています。
エラーが出たときは？
エラー辞典でエラーメッセージから原因を調べられます。
印刷して使える？
はい。印刷に最適化されたレイアウトで出力されます。
⚠️ よくあるエラー
- ReferenceError: xxx is not defined — 変数名のタイポ
- Cannot read properties of null — idが存在しない
- SyntaxError: Unexpected token — 括弧の閉じ忘れ
📎 このチートシートを紹介する
ブログや記事で紹介する際は、以下のURLをご利用ください。
https://start-web-programming.com/cheatsheet/js/