CURRICULUM  /  APPENDIX C

付録C ─ JavaScriptよく使われる関数一覧

JavaScriptの主要な組み込み関数・メソッドを、用途別にまとめたリファレンスです。

本編で使ったものには、該当する章へのリンクを添えています。

全てを暗記する必要はありません。「こういう関数がある」と知っておけば、必要なときに調べられます。

DOM操作 ─ 要素の取得

関数 / メソッド役割使用例本編
document.getElementById() id属性で要素を1つ取得する document.getElementById("msg") 01-04
document.querySelector() CSSセレクタに一致する最初の要素を取得する document.querySelector(".btn")
document.querySelectorAll() CSSセレクタに一致する全要素をNodeListで取得する document.querySelectorAll("li")
document.getElementsByClassName() クラス名で要素を取得する(HTMLCollectionを返す) document.getElementsByClassName("item")
document.getElementsByTagName() タグ名で要素を取得する document.getElementsByTagName("p")

DOM操作 ─ 要素の作成・追加・削除

関数 / メソッド役割使用例本編
document.createElement() 新しいHTML要素を作成する document.createElement("div")
element.appendChild() 子要素として末尾に追加する parent.appendChild(child)
element.append() 子要素やテキストを末尾に追加する(複数可) parent.append(child, "テキスト")
element.remove() 要素自身をDOMから削除する el.remove()
element.insertBefore() 指定した子要素の前に新しい要素を挿入する parent.insertBefore(newEl, refEl)
element.cloneNode() 要素を複製する。trueで子要素ごと複製 el.cloneNode(true)

DOM操作 ─ 属性・テキスト・スタイル

プロパティ / メソッド役割使用例本編
element.textContent 要素内のテキストを取得・設定する(HTMLタグは解釈されない) el.textContent = "こんにちは" 01-04
element.innerHTML 要素内のHTMLを取得・設定する。XSSの原因になりやすいので要注意 el.innerHTML = "<b>太字</b>" 02-03
element.getAttribute() 属性値を取得する el.getAttribute("href")
element.setAttribute() 属性値を設定する el.setAttribute("disabled", "")
element.removeAttribute() 属性を削除する el.removeAttribute("disabled")
element.classList.add() クラスを追加する el.classList.add("active")
element.classList.remove() クラスを削除する el.classList.remove("active")
element.classList.toggle() クラスの有無を切り替える el.classList.toggle("open")
element.classList.contains() 指定クラスを持っているかを判定する el.classList.contains("active")
element.style インラインスタイルを取得・設定する el.style.color = "red"
element.closest() 自身を含む祖先から、セレクタに一致する最も近い要素を返す el.closest(".wrapper")
element.value フォーム入力欄の値を取得・設定する input.value

イベント

関数 / メソッド役割使用例本編
element.addEventListener() イベントリスナーを登録する btn.addEventListener("click", fn) 01-04
element.removeEventListener() 登録済みのイベントリスナーを解除する btn.removeEventListener("click", fn)
event.preventDefault() イベントのデフォルト動作(フォーム送信、リンク遷移等)を止める e.preventDefault()
event.stopPropagation() イベントの親要素への伝播を止める e.stopPropagation()
event.target イベントが発生した要素を参照する e.target.value
DOMContentLoaded HTMLの解析完了後に発火するイベント。DOM操作のタイミング制御に使う document.addEventListener("DOMContentLoaded", fn) 01-07

ダイアログ

関数役割使用例本編
alert() メッセージダイアログを表示する alert("注意!") 02-03
confirm() OK/キャンセルの確認ダイアログを表示する if (confirm("削除しますか?")) { ... }
prompt() テキスト入力付きダイアログを表示する const name = prompt("名前は?")

コンソール

メソッド役割使用例本編
console.log() 開発者コンソールに値を出力する console.log("値:", x) 01-04, 01-07
console.error() エラーメッセージを出力する(赤色で表示される) console.error("失敗:", err)
console.warn() 警告メッセージを出力する(黄色で表示される) console.warn("非推奨です")
console.table() 配列やオブジェクトをテーブル形式で表示する console.table(users)

文字列(String)

メソッド役割使用例本編
.length 文字列の文字数を返す "hello".length // 5
.trim() 先頭と末尾の空白を除去する " abc ".trim() // "abc"
.includes() 指定文字列が含まれるかを判定する "abc".includes("b") // true
.indexOf() 指定文字列の位置を返す(見つからなければ-1) "abc".indexOf("c") // 2
.slice() 文字列の一部を切り出す "hello".slice(1, 3) // "el"
.substring() 文字列の一部を切り出す(.slice() と似ているが負の値を扱えない) "hello".substring(0, 3) // "hel"
.replace() 最初に一致した文字列を置換する "abc".replace("a", "x") // "xbc"
.replaceAll() 一致した全ての文字列を置換する "aaa".replaceAll("a", "b") // "bbb"
.split() 区切り文字で文字列を配列に分割する "a,b,c".split(",") // ["a","b","c"]
.toUpperCase() 全て大文字に変換する "abc".toUpperCase() // "ABC"
.toLowerCase() 全て小文字に変換する "ABC".toLowerCase() // "abc"
.startsWith() 指定文字列で始まるかを判定する "hello".startsWith("he") // true
.endsWith() 指定文字列で終わるかを判定する "hello".endsWith("lo") // true
.padStart() 指定の長さになるまで先頭を埋める "5".padStart(2, "0") // "05"
.repeat() 文字列を指定回数繰り返す "ab".repeat(3) // "ababab"

テンプレートリテラル

構文役割使用例本編
`...${式}...` バッククォートで囲み、${} 内に式や変数を埋め込める文字列 `合計: ${price * qty}円`

数値(Number)・算術

関数 / メソッド役割使用例本編
parseInt() 文字列を整数に変換する parseInt("42") // 42
parseFloat() 文字列を小数に変換する parseFloat("3.14") // 3.14
Number() 値を数値に変換する Number("100") // 100
isNaN() 値が NaN(非数)かを判定する isNaN("abc") // true
Number.isInteger() 値が整数かを判定する Number.isInteger(3.0) // true
.toFixed() 小数点以下の桁数を指定して文字列に変換する (3.14159).toFixed(2) // "3.14"
Math.max() 引数の中で最大の値を返す Math.max(1, 5, 3) // 5 01-04
Math.min() 引数の中で最小の値を返す Math.min(1, 5, 3) // 1
Math.floor() 小数を切り捨てる(整数に) Math.floor(3.9) // 3
Math.ceil() 小数を切り上げる Math.ceil(3.1) // 4
Math.round() 小数を四捨五入する Math.round(3.5) // 4
Math.random() 0以上1未満のランダムな小数を返す Math.floor(Math.random() * 10)
Math.abs() 絶対値を返す Math.abs(-7) // 7

配列(Array)

メソッド役割使用例本編
.length 配列の要素数を返す [1,2,3].length // 3
.push() 末尾に要素を追加する arr.push("新しい値")
.pop() 末尾の要素を削除して返す const last = arr.pop()
.unshift() 先頭に要素を追加する arr.unshift("先頭")
.shift() 先頭の要素を削除して返す const first = arr.shift()
.splice() 指定位置で要素を削除・挿入する arr.splice(1, 2) // index 1から2個削除
.slice() 配列の一部をコピーして返す(元の配列を変更しない) arr.slice(0, 3)
.concat() 配列同士を結合した新しい配列を返す [1,2].concat([3,4]) // [1,2,3,4]
.includes() 指定値が含まれているかを判定する [1,2,3].includes(2) // true
.indexOf() 指定値の最初の位置を返す(見つからなければ-1) ["a","b"].indexOf("b") // 1
.find() 条件に一致する最初の要素を返す arr.find(x => x > 3)
.findIndex() 条件に一致する最初のインデックスを返す arr.findIndex(x => x > 3)
.forEach() 各要素に対して関数を実行する(戻り値なし) arr.forEach(x => console.log(x))
.map() 各要素を変換した新しい配列を返す [1,2,3].map(x => x * 2) // [2,4,6]
.filter() 条件に一致する要素だけの新しい配列を返す [1,2,3].filter(x => x > 1) // [2,3]
.reduce() 全要素を1つの値に集約する [1,2,3].reduce((sum, x) => sum + x, 0) // 6
.sort() 配列を並べ替える(元の配列を変更する) arr.sort((a, b) => a - b)
.reverse() 配列の順序を逆にする(元の配列を変更する) arr.reverse()
.join() 全要素を区切り文字で結合して文字列にする ["a","b","c"].join("-") // "a-b-c"
.every() 全要素が条件を満たすかを判定する [2,4,6].every(x => x % 2 === 0) // true
.some() いずれかの要素が条件を満たすかを判定する [1,2,3].some(x => x > 2) // true
.flat() ネストされた配列を平坦にする [[1,2],[3]].flat() // [1,2,3]
Array.isArray() 値が配列かどうかを判定する Array.isArray([1,2]) // true
Array.from() 配列風オブジェクトやNodeListを配列に変換する Array.from(nodeList)
スプレッド構文
[...arr]		 配列を展開してコピーや結合に使う [...arr1, ...arr2]

オブジェクト(Object)

メソッド役割使用例本編
Object.keys() オブジェクトのキーを配列で返す Object.keys({a:1, b:2}) // ["a","b"]
Object.values() オブジェクトの値を配列で返す Object.values({a:1, b:2}) // [1, 2]
Object.entries() キーと値のペアを配列の配列で返す Object.entries({a:1}) // [["a",1]]
Object.assign() オブジェクトを結合(コピー)する Object.assign({}, obj1, obj2)
スプレッド構文
{...obj}		 オブジェクトを展開してコピーや結合に使う {...obj, newKey: "値"}

JSON

メソッド役割使用例本編
JSON.stringify() JavaScriptの値をJSON文字列に変換する JSON.stringify({a: 1}) // '{"a":1}'
JSON.parse() JSON文字列をJavaScriptの値に変換する JSON.parse('{"a":1}') // {a: 1}

日付(Date)

メソッド / コンストラクタ役割使用例本編
new Date() 現在日時のDateオブジェクトを作成する new Date()
Date.now() 現在のタイムスタンプ(ミリ秒)を返す Date.now()
.getFullYear() 年(4桁)を返す new Date().getFullYear() // 2026
.getMonth() 月を返す(0〜11。1月が0) new Date().getMonth() // 3 (4月)
.getDate() 日を返す new Date().getDate()
.getDay() 曜日を返す(0〜6。日曜が0) new Date().getDay()
.toLocaleDateString() ロケールに合わせた日付文字列を返す new Date().toLocaleDateString("ja-JP")
.toISOString() ISO 8601形式の文字列を返す new Date().toISOString()

タイマー

関数役割使用例本編
setTimeout() 指定ミリ秒後に関数を1回実行する setTimeout(() => alert("3秒"), 3000)
clearTimeout() setTimeout をキャンセルする clearTimeout(timerId)
setInterval() 指定ミリ秒ごとに関数を繰り返し実行する setInterval(() => tick(), 1000)
clearInterval() setInterval をキャンセルする clearInterval(intervalId)

非同期通信(Fetch API)

関数 / メソッド役割使用例本編
fetch() HTTPリクエストを送り、レスポンスをPromiseで返す fetch("/api/data")
response.json() レスポンス本文をJSONとしてパースする res.json()
response.text() レスポンス本文をテキストとして取得する res.text()
response.ok ステータスコードが200〜299かを判定する if (!res.ok) throw new Error(...)

Promise・非同期制御

構文 / メソッド役割使用例本編
.then() Promiseが成功したときの処理を登録する fetch(url).then(res => res.json())
.catch() Promiseが失敗したときの処理を登録する .catch(err => console.error(err))
.finally() 成功・失敗にかかわらず最後に実行する処理を登録する .finally(() => setLoading(false))
async / await Promiseを同期的に書けるようにする構文 const data = await fetch(url)
Promise.all() 複数のPromiseを並行実行し、全て完了するのを待つ Promise.all([p1, p2])

型の判定・変換

演算子 / 関数役割使用例本編
typeof 値の型を文字列で返す typeof 42 // "number"
String() 値を文字列に変換する String(123) // "123"
Boolean() 値を真偽値に変換する Boolean("") // false
.toString() 値を文字列に変換する (255).toString(16) // "ff"

エラー処理

構文役割使用例本編
try { } catch (e) { } エラーが発生しても処理を続行する。catch でエラーを捕捉する try { JSON.parse(s) } catch (e) { ... }
throw new Error() 自分でエラーを発生させる throw new Error("入力が不正")

ブラウザ関連

プロパティ / メソッド役割使用例本編
window.location 現在のURLの情報を取得・変更する window.location.href = "/top"
window.history ブラウザの閲覧履歴を操作する history.back()
document.cookie Cookieの読み書きをする。XSSで狙われる対象 document.cookie 02-03
localStorage ブラウザにデータを永続保存する(ドメイン単位) localStorage.setItem("key", "val")
sessionStorage タブを閉じるまでデータを保存する sessionStorage.getItem("key")
encodeURIComponent() URLに含められない文字をエンコードする encodeURIComponent("a&b") // "a%26b"
decodeURIComponent() エンコードされた文字列を元に戻す decodeURIComponent("a%26b") // "a&b"

分割代入・その他の構文

構文役割使用例本編
const { a, b } = obj オブジェクトから必要なプロパティだけを取り出す const { name, age } = user
const [a, b] = arr 配列から先頭の要素を取り出す const [first, ...rest] = items
?? (Null合体演算子) 左辺が null または undefined のときだけ右辺を使う name ?? "名無し"
?. (オプショナルチェーン) プロパティが存在しない場合にエラーにせず undefined を返す user?.address?.city

使い方のヒント

この一覧を暗記する必要はありません。

「配列の中身をフィルターしたい」と思ったとき、この付録を開いて .filter() の行を見る。

「フォームの入力値を取りたい」と思ったとき、element.value の行を見る。

そうやって「引く」ための一覧です。

本編の該当章へのリンクを辿れば、その関数が実際にどう使われているかをコードの文脈で読み返すことができます。