| したいこと | 書き方 | 章 |
|---|---|---|
| 変数を作る | const x = 1;（入れ直すなら let） | 03 |
| 値の型を調べる | typeof x ・ 配列は Array.isArray(x) ・ null は x === null | 03 |
| 文字列に値を埋め込む | `${name}さん` | 03 |
| 含まれているか調べる | s.includes("abc") | 03 |
| 一部を取り出す | s.slice(開始, 終了) | 03 |
| 区切りで分ける | s.split(",") ・ 改行は s.split(/\r?\n/) | 03 |
| 置き換える | s.replace("a", "b")（全部なら replaceAll） | 03 |
| 前後の空白を除く | s.trim() | 13 |
| 見た目の文字数を数える | [...s].length | 03 |
| 文字列を数値にする | Number(s) ・ 先頭だけなら parseInt(s, 10) | 04 |
| 数値でないか調べる | Number.isNaN(n) | 04 |
| 3 桁区切り ・ 小数の桁をそろえる | n.toLocaleString() ・ n.toFixed(2) | 04 |
| 切り捨て ・ 四捨五入 | Math.floor(n) ・ Math.round(n) | 03 |
| したいこと | 書き方 | 章 |
|---|---|---|
| 末尾に足す ・ 取り出す | arr.push(x) ・ arr.pop() | 05 |
| 含まれているか | arr.includes(x) | 05 |
| 1 つずつ処理する | for (const x of arr) { … } ・ 番号も要るなら arr.forEach((x, i) => …) | 05 |
| 各要素を変えた配列を作る | arr.map((x) => x * 2) | 05 |
| 条件に合うものだけ選ぶ | arr.filter((x) => x > 0) | 05 |
| 条件に合う最初の 1 つ | arr.find((x) => x.id === id) | 05 |
| 合計する | arr.reduce((sum, x) => sum + x, 0) | 05 |
| 数値を小さい順に並べる | [...arr].sort((a, b) => a - b) | 05 |
| コピーする ・ つなげる | [...arr] ・ [...a, ...b] | 05 |
| 重なりを除く | [...new Set(arr)]（Set は同じ値を 1 つしか持たない入れ物） | 05 |
| 文字列につなぐ | arr.join(", ") | 05 |
| 配列の配列を 1 段にする | arr.flat() | 13 |
| したいこと | 書き方 | 章 |
|---|---|---|
| 作る ・ 読む | const o = { a: 1 }; ・ o.a ・ o[key] | 05 |
| キーがあるか | "a" in o | 05 |
| キー ・ 値を全部取り出す | Object.keys(o) ・ Object.values(o) ・ Object.entries(o) | 05 |
| 中身を取り出して変数にする | const { a, b } = o; | 05 |
| コピーして一部を変える | { ...o, a: 2 } | 05 |
| 入れ子まで全部コピーする | structuredClone(o) | 05 |
| JSON の文字列にする ・ 戻す | JSON.stringify(o, null, 2) ・ JSON.parse(text) | 05 |
| したいこと | 書き方 | 章 |
|---|---|---|
| 短い関数を書く | const f = (x) => x * 2; | 06 |
| 引数の既定値 | function f(x = 0) { … } | 06 |
| いくつでも引数を受け取る | function f(...args) { … } | 06 |
| 名前付きの引数のように渡す | function f({ id, role = "guest" }) { … } | 06 |
| 値を複数返す | return { min, max }; → const { min, max } = f(); | 05 |
| 状態を持つ関数を作る | 関数を返す関数（クロージャ） | 09 |
| クラスを作る ・ 継承する | class A { constructor() {} } ・ class B extends A {} | 08 |
| 外から触れないフィールド | #count = 0; | 08 |
| メソッドをコールバックに渡す | () => obj.method() ・ obj.method.bind(obj) | 07 |
| したいこと | 書き方 | 章 |
|---|---|---|
| エラーを起こす | throw new Error("説明"); | 10 |
| エラーを受け取る | try { … } catch (e) { e.message } finally { … } | 10 |
| 自分のエラーを作る | class MyError extends Error { … } ・ e instanceof MyError | 10 |
| 少し待ってから実行する | setTimeout(() => { … }, ミリ秒) | 11 |
| くり返し実行する ・ 止める | const id = setInterval(f, ミリ秒) ・ clearInterval(id) | 09 |
| await で待てるようにする | new Promise((resolve) => setTimeout(resolve, ミリ秒)) | 11 |
| 結果を待つ | const x = await f();（async 関数の中か .mjs の一番外側） | 11 |
| 複数を同時に待つ | await Promise.all([f(), g()]) | 11 |
| ファイルを読む ・ 書く | await readFile(path, "utf8") ・ await writeFile(path, text) | 11 |
| フォルダの一覧 | await readdir(path) | 11 |
| 別のファイルの関数を使う | export function f() {} ・ import { f } from "./x.mjs"; | 10 |
| スクリプトの隣のファイルを指す | join(import.meta.dirname, "x.txt") | 12 |
| コマンドラインの引数を受け取る | process.argv.slice(2) | 13 |
| したいこと | 書き方 | 章 |
|---|---|---|
| HTML からスクリプトを読み込む | <script type="module" src="main.js"></script> | 14 |
| 手元のページをブラウザで開く | ローカルサーバを立てて http://localhost:… で開く（ダブルクリックの file:// では module が動かない） | 14 |
| 要素を 1 つ探す | document.querySelector("#title")（無ければ null） | 15 |
| 要素をまとめて探す | document.querySelectorAll(".item") | 15 |
| 文字を入れる | el.textContent = text;（外から来た文字を innerHTML に入れない） | 15 |
| クラスを付ける ・ 付いているか調べる | el.classList.add("done") ・ el.classList.contains("done") | 15 |
| クラスを付けたり外したりする | el.classList.toggle("done") | 16 |
| 要素を作って足す | const li = document.createElement("li"); ・ list.append(li); | 15 |
| 要素を消す | el.remove() | 15 |
| 近くの親を探す | el.closest("li") | 15 |
| 要素に持たせた値を読む | <li data-id="3"> → li.dataset.id（文字列） | 15 |
| したいこと | 書き方 | 章 |
|---|---|---|
| クリックに反応する | button.addEventListener("click", () => { … }); | 16 |
| 操作された要素を知る | event.target ・ 登録した要素は event.currentTarget | 16 |
| たくさんの子の操作を親でまとめて受ける | list.addEventListener("click", (e) => { const li = e.target.closest("li"); … }); | 16 |
| 既定の動き（ページの移動など）を止める | event.preventDefault() | 16 |
| 1 回だけ反応する ・ 登録を外す | { once: true } ・ removeEventListener("click", onClick)（登録したのと同じ関数を渡す） | 16 |
| 入力欄の値を数で使う | Number(input.value)（value はいつも文字列） | 17 |
| チェックされているか | box.checked | 17 |
| フォームの送信を JavaScript で受け取る | form.addEventListener("submit", (e) => { e.preventDefault(); const data = new FormData(form); … }); | 17 |
| 入力のたびに表示を変える | input.addEventListener("input", …) ・ 選択が変わったら "change" | 17 |
| したいこと | 書き方 | 章 |
|---|---|---|
| サーバから JSON を受け取る | const res = await fetch(url); ・ const data = await res.json(); | 18 |
| サーバが失敗を返したか調べる | if (!res.ok) throw new Error(`失敗: ${res.status}`); | 18 |
| JSON を送る | fetch(url, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(o) }) | 18 |
| ブラウザにデータを残す | localStorage.setItem(key, JSON.stringify(o)) ・ JSON.parse(localStorage.getItem(key)) | 19 |
| タブを閉じるまでだけ残す | sessionStorage.setItem(key, value) | 19 |
| どの保存先を使うか選ぶ | cookie ・ localStorage ・ sessionStorage ・ IndexedDB の比較 | 19 |
| 日時を日本時間で表示する | d.toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" }) | 19 |
URL の ? の後ろを読む | new URL(s).searchParams.get("q") | 19 |
| クリップボードにコピーする | await navigator.clipboard.writeText(text) | 19 |