JavaScript: JavaScript クイックリファレンス

Q: 公式の JavaScript リファレンスはどこですか？

公式リファレンスは MDN Web Docs にあります — すべてのメソッド、プロパティ、エッジケースをカバーしています。

Q: このリファレンスを最新に保つには？

MDN をブックマークしてください。JavaScript は毎年進化しており、このページは ES2020+ の機能をカバーしています。 Array.toSorted() (ES2023) のような新しいメソッドはまだここに掲載されていない可能性があります。

Q: なぜ == は推奨されないのですか？

== は暗黙の型変換を行います (例: 0 == "0" は true)。予期しない動作を避けるため、厳密等価演算子 === を使用してください。

このページは、一般的な JavaScript の構文と API をカテゴリ別に整理したクイックリファレンスチートシートです。

1. ステートメントリファレンス

ステートメント	構文	説明
`var`	`var name = value;`	関数スコープの変数宣言（非推奨。`let` を使いましょう）
`let`	`let name = value;`	ブロックスコープの変数宣言。再代入可能
`const`	`const name = value;`	ブロックスコープの定数宣言。再代入不可
`if/else`	`if (cond) {} else if (cond) {} else {}`	条件分岐
`for`	`for (let i = 0; i < n; i++) {}`	クラシックループ
`while`	`while (cond) {}`	条件が先のループ
`do...while`	`do {} while (cond);`	本体が先のループ（少なくとも1回実行）
`switch`	`switch (expr) { case val: break; default: }`	多分岐マッチング
`try/catch`	`try {} catch (err) {} finally {}`	例外処理
`function`	`function name(params) {}`	関数宣言
`return`	`return value;`	関数から値を返す
`class`	`class Name { constructor() {} }`	クラス宣言
`import`	`import { name } from 'module';`	モジュールのインポート
`export`	`export const name = value;`	モジュールからのエクスポート

▶ サンプル

JAVASCRIPT

// セクションのコード例
const message = "Hello, World!";
console.log(message);

▶ 試してみよう

これは最もシンプルな例で、後のセクションで詳しく説明します。## 2. 演算子リファレンス

カテゴリ	演算子	説明
算術	`+ - * / % **`	加算、減算、乗算、除算、剰余、べき乗
算術	`++ --`	インクリメント、デクリメント
比較	`== != === !==`	等しい、等しくない、厳密に等しい、厳密に等しくない
比較	`> < >= <=`	大なり、小なり、以上、以下
論理	`&& \|\| !`	AND、OR、NOT
代入	`= += -= *= /= %=`	代入と複合代入
三項	`cond ? a : b`	条件式
スプレッド	`...arr`	配列またはオブジェクトを展開

2. 文字列メソッドチートシート

メソッド	構文	説明
`length`	`str.length`	文字列の長さ（プロパティ。メソッドではない）
`charAt`	`str.charAt(index)`	指定位置の文字
`indexOf`	`str.indexOf(search, from?)`	部分文字列の位置を検索。見つからない場合は -1
`includes`	`str.includes(search, from?)`	部分文字列の存在をチェック。真偽値を返す
`slice`	`str.slice(start, end?)`	部分文字列を抽出（負のインデックス対応）
`substring`	`str.substring(start, end?)`	部分文字列を抽出（負のインデックス非対応）
`replace`	`str.replace(pattern, replacement)`	最初のマッチを置換
`toUpperCase`	`str.toUpperCase()`	大文字に変換
`toLowerCase`	`str.toLowerCase()`	小文字に変換
`trim`	`str.trim()`	先頭と末尾の空白を除去
`split`	`str.split(separator, limit?)`	セパレータで文字列を配列に分割
`padStart`	`str.padStart(length, fill)`	指定長さまで先頭をパディング
`padEnd`	`str.padEnd(length, fill)`	指定長さまで末尾をパディング
`repeat`	`str.repeat(count)`	文字列を繰り返す
`match`	`str.match(regexp)`	正規表現マッチ。配列または null を返す

3. 配列メソッドチートシート

メソッド	構文	説明
`push`	`arr.push(item)`	末尾に追加。新しい長さを返す
`pop`	`arr.pop()`	末尾から削除。削除されたアイテムを返す
`shift`	`arr.shift()`	先頭から削除。削除されたアイテムを返す
`unshift`	`arr.unshift(item)`	先頭に追加。新しい長さを返す
`splice`	`arr.splice(start, deleteCount, ...items)`	追加/削除/置換（配列を変更）
`slice`	`arr.slice(start, end?)`	サブ配列を抽出（変更しない）
`map`	`arr.map(fn)`	各要素を変換。新しい配列を返す
`filter`	`arr.filter(fn)`	テストに合格した要素を保持。新しい配列を返す
`reduce`	`arr.reduce(fn, init)`	配列から単一の結果を蓄積
`find`	`arr.find(fn)`	テストに合格した最初の要素を返す
`findIndex`	`arr.findIndex(fn)`	最初にマッチする要素のインデックスを返す
`sort`	`arr.sort(compareFn?)`	配列をソート（変更する）
`reverse`	`arr.reverse()`	配列を逆順（変更する）
`forEach`	`arr.forEach(fn)`	各要素を反復。戻り値なし
`every`	`arr.every(fn)`	すべての要素がテストに合格するかチェック
`some`	`arr.some(fn)`	少なくとも1つの要素がテストに合格するかチェック
`includes`	`arr.includes(item, from?)`	配列に要素が含まれるかチェック
`indexOf`	`arr.indexOf(item, from?)`	要素のインデックスを検索
`join`	`arr.join(separator?)`	配列を文字列に結合
`concat`	`arr.concat(arr2)`	配列をマージ（変更しない）
`flat`	`arr.flat(depth?)`	ネストされた配列をフラット化

4. Math メソッドチートシート

メソッド	構文	説明
`round`	`Math.round(x)`	最近の整数に丸める
`floor`	`Math.floor(x)`	切り捨て
`ceil`	`Math.ceil(x)`	切り上げ
`random`	`Math.random()`	[0, 1) の乱数
`max`	`Math.max(a, b, ...)`	最大値を返す
`min`	`Math.min(a, b, ...)`	最小値を返す
`abs`	`Math.abs(x)`	絶対値
`pow`	`Math.pow(base, exp)`	べき乗
`sqrt`	`Math.sqrt(x)`	平方根
`PI`	`Math.PI`	円周率 ≈ 3.14159
`E`	`Math.E`	ネイピア数 ≈ 2.71828
`trunc`	`Math.trunc(x)`	小数部分を除去
`sign`	`Math.sign(x)`	1 / 0 / -1 を返す

5. DOM メソッドチートシート

メソッド/プロパティ	構文	説明
`getElementById`	`document.getElementById('id')`	ID で単一要素を取得
`querySelector`	`document.querySelector('selector')`	CSS セレクタにマッチする最初の要素を取得
`querySelectorAll`	`document.querySelectorAll('selector')`	CSS セレクタにマッチするすべての要素を取得
`getElementsByClassName`	`document.getElementsByClassName('cls')`	クラス名で要素を取得（ライブコレクション）
`getElementsByTagName`	`document.getElementsByTagName('tag')`	タグ名で要素を取得（ライブコレクション）
`textContent`	`el.textContent`	プレーンテキストコンテンツの読み書き
`innerHTML`	`el.innerHTML`	HTML コンテンツの読み書き（XSS に注意）
`setAttribute`	`el.setAttribute('name', 'value')`	属性を設定
`getAttribute`	`el.getAttribute('name')`	属性値を取得
`classList`	`el.classList.add/remove/toggle/contains`	CSS クラスを操作
`createElement`	`document.createElement('tag')`	新しい要素ノードを作成
`appendChild`	`parent.appendChild(child)`	子ノードを末尾に追加
`removeChild`	`parent.removeChild(child)`	子ノードを削除
`cloneNode`	`el.cloneNode(deep?)`	ノードを複製（true = ディープクローン）

6. イベントリファレンス | イベント | 発火タイミング | 対象要素 | |--------|---------------|----------| | `click` | シングルクリック | 任意の要素 | | `dblclick` | ダブルクリック | 任意の要素 | | `mouseover` | マウスが入る | 任意の要素 | | `mouseout` | マウスが出る | 任意の要素 | | `keydown` | キーが押される | document、フォーム要素 | | `keyup` | キーが離される | document、フォーム要素 | | `submit` | フォームが送信される | form | | `change` | 値が変更されフォーカスを失う | input、select、textarea | | `input` | 値がリアルタイムで変更される | input、textarea | | `load` | ページとリソースが完全に読み込まれる | window | | `DOMContentLoaded` | HTML の解析が完了 | document | | `focus` | 要素がフォーカスを取得 | フォーム要素 | | `blur` | 要素がフォーカスを失う | フォーム要素 | | `scroll` | スクロール | window、スクロール可能な要素 | | `resize` | ウィンドウサイズが変更 | window |

❓ よくある質問

Q 公式の JavaScript リファレンスはどこですか？

A 公式リファレンスは MDN Web Docs にあります — すべてのメソッド、プロパティ、エッジケースをカバーしています。

Q このリファレンスを最新に保つには？

A MDN をブックマークしてください。JavaScript は毎年進化しており、このページは ES2020+ の機能をカバーしています。Array.toSorted() (ES2023) のような新しいメソッドはまだここに掲載されていない可能性があります。

Q なぜ == は推奨されないのですか？

A == は暗黙の型変換を行います (例: 0 == "0" は true)。予期しない動作を避けるため、厳密等価演算子 === を使用してください。

📖 まとめ

このリファレンスはコアな JavaScript 文、演算子、メソッドをカバーしています
MDN はエッジケースや新機能のための権威ある情報源です
型強制のバグを避けるため == ではなく === を使用してください
配列と文字列のメソッドは安定していますが、毎年新しいものが登場します

📝 練習問題

認識していないメソッドを 3 つ選んでください。MDN ドキュメントを読んで、それぞれ 1 行の要約を書いてください。
あなたのコードで == を使用している場所を 1 つ見つけ、=== にリファクタリングしてください。テストを実行してください。
コールバック関数を引数に取る配列メソッドを 5 つリストアップしてください。コールバックのシグネチャを説明してください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて