なぜJavaScriptのエラーがわかりにくいのか？：付録

JavaScriptのエラーの考え方。PHPとの設計の違い

JavaScriptは「エラーをなるべく表に出さず、何かしらの値（例：undefined）を返して処理を続ける」設計になっています。これは、ユーザーが操作中に画面が止まったりフリーズしたりしないようにするための「寛容な仕様」です。PHP のようにエラーに厳しめの姿勢をもつサーバーサイドのプログラムと異なり、JavaScriptは「とりあえず undefined などにして返しておくよ〜」という設計です。

言語の成り立ちの違いもある

言語	成り立ち	意図された用途
PHP	Webページを安全に生成するための言語（HTML生成中心）	サーバー側の正確な処理とエラーハンドリング重視
JavaScript	ユーザーの操作に応じて動的にUIを動かすための言語	即座の反応と柔軟な挙動重視（失敗しても止まらない）

PHP はサーバーサイドなので、「とにかく結果を出して処理を進める」「文字列でも計算できるように」という姿勢に対して、JavaScript はクライアント側で、「エラーで止まるより、見た目上の動作を重視しよう」「文字列なら文字列として扱う」という設計になっています。そのためエラーが発見しにくい場面があります。

比較項目	PHP（サーバー）	JavaScript（ブラウザ）
実行環境	サーバー	ブラウザ
エラー表示	画面に即エラー（Fatalなど）またはログに記録	画面には表示されず、開発者ツールで確認
実行継続	致命的なエラーで即停止	軽微なエラーは無視して続行
エラー確認法	`ini_set('display_errors', 1)` や `error_log()`	`console.log()` や `console.error()`、`try…catch`
開発支援ツール	エラーメッセージが比較的親切	内容がわかりにくいこともある

JavaScriptのエラーに強くなるための基本

DevToolsを毎回開く習慣

Consoleタブで赤文字のエラーを確認
行番号をクリックするとコード行に移動

代表的なエラー種別を把握

ReferenceError: 未定義変数にアクセス
TypeError: 型が合わない操作
SyntaxError: 文法ミス
Uncaught …: 例外処理されていないエラー

デバッグ力を高める方法

console.log()／typeof／Array.isArray() で変数確認
Chrome DevToolsでブレークポイントやステップ実行

書き方で防ぐコーディング習慣

let／const を使い、varは非推奨
初期化されていない変数は使わない
戻り値の型を常に意識（undefined、配列など）
=== を使って厳密比較

なぜ戻り値を意識するべきか？

関数の戻り値がわからないと、次のようなミスを起こしやすくなります：

length を使ったら undefined.length エラーになった
forEach() を呼んだら not a function エラーになった
戻り値が true と思ってたら undefined だった

JavaScript関数・メソッド100選（型分類）

この一覧は、JavaScriptの代表的な関数・メソッドを型カテゴリごとに整理したものです。型や戻り値、主な用途を意識しながら使い分ける習慣をつけましょう。

スクロールできます

関数・メソッド名	型カテゴリ	戻り値	主な用途
querySelector	DOM	Element or null	要素をCSSセレクタで取得
querySelectorAll	DOM	NodeList	複数要素を取得
getElementById	DOM	Element or null	IDで要素を取得
getElementsByClassName	DOM	HTMLCollection	クラス名で要素取得
getElementsByTagName	DOM	HTMLCollection	タグ名で要素取得
createElement	DOM	Element	新しい要素を作成
appendChild	DOM	Element	子要素を追加
removeChild	DOM	Element	子要素を削除
textContent	DOM	string	要素のテキストを取得／変更
innerHTML	DOM	string	要素のHTMLを取得／変更
map	Array	Array	配列の要素を変換して新しい配列を返す
filter	Array	Array	条件を満たす要素のみ抽出
find	Array	Element or undefined	条件に一致する最初の要素を返す
forEach	Array	undefined	各要素に対して関数を実行
some	Array	boolean	一部の要素が条件を満たすか確認
every	Array	boolean	すべての要素が条件を満たすか確認
reduce	Array	any	配列を1つの値に集約
includes	Array	boolean	特定の値が含まれるか判定
indexOf	Array	number	値の最初の位置を返す
push	Array	number	末尾に要素を追加
pop	Array	Element	末尾の要素を削除
shift	Array	Element	先頭の要素を削除
unshift	Array	number	先頭に要素を追加
slice	Array	Array	一部の要素を切り出す
splice	Array	Array	配列から要素を削除または追加
join	Array	string	要素を連結して文字列に
reverse	Array	Array	要素を逆順に並べ替える
sort	Array	Array	要素を並べ替える
toUpperCase	String	string	大文字に変換
toLowerCase	String	string	小文字に変換
trim	String	string	前後の空白を削除
replace	String	string	一部の文字列を置換
substring	String	string	部分文字列を取得
split	String	Array	文字列を配列に分割
charAt	String	string	指定位置の文字を取得
includes	String	boolean	文字列が含まれているか確認
indexOf	String	number	文字の位置を取得
startsWith	String	boolean	先頭が一致するか判定
Object.keys	Object	Array	プロパティ名一覧を取得
Object.values	Object	Array	プロパティ値一覧を取得
Object.entries	Object	Array	キーと値のペアを取得
Object.assign	Object	Object	オブジェクトをマージ
Object.hasOwn	Object	boolean	プロパティの存在確認
hasOwnProperty	Object	boolean	プロパティの有無を確認
parseInt	Number	number	文字列を整数に変換
parseFloat	Number	number	文字列を小数に変換
isNaN	Number	boolean	NaNかどうか判定
isFinite	Number	boolean	有限値か判定
toFixed	Number	string	小数点以下の桁数を整形
Boolean	Boolean	boolean	真偽値に変換
!!	Boolean	boolean	強制的に真偽値へ変換
typeof	any	string	変数の型を判定
Array.isArray	any	boolean	配列かどうか判定
console.log	any	undefined	ログを出力
console.error	any	undefined	エラーを出力
alert	any	undefined	ポップアップ表示
confirm	any	boolean	確認ダイアログを表示
prompt	any	string or null	入力ダイアログを表示
fetch	Promise	Promise	HTTPリクエストを送る
then	Promise	Promise	非同期処理の後続処理
catch	Promise	Promise	エラーハンドリング
finally	Promise	Promise	常に最後に実行
setTimeout	Global	number	遅延実行
clearTimeout	Global	undefined	タイマー停止
setInterval	Global	number	繰り返し実行
clearInterval	Global	undefined	繰り返し停止

補足：型カテゴリの解説

上記で紹介した関数・メソッドは、「どの型に属するのか？」によって役割や使い方が大きく変わります。以下に各カテゴリの概要をまとめました。

DOM（Document Object Model）

対象： HTMLドキュメント内の要素
特徴： 画面上の見た目・構造に直接作用。HTML要素を取得・追加・削除・変更できる。
主なメソッド： getElementById(), querySelector(), createElement(), appendChild()

Array（配列）

対象： 値の集まり（リスト）
特徴： 複数データを順番に管理。要素の抽出・変換・並び替えが中心。
主なメソッド： map(), filter(), push(), splice()

String（文字列）

対象： 文章や単語などの文字列
特徴： 一文字ずつ操作したり、検索・置換・分割が可能。
主なメソッド： toUpperCase(), trim(), split(), replace()

Object（オブジェクト）

対象： 名前と値（キーとバリュー）のセット
特徴： データ構造の基本単位。プロパティの一覧取得やコピーが可能。
主なメソッド： Object.keys(), Object.entries(), Object.assign()

Number（数値）

対象： 整数や小数などの数値
特徴： 計算や丸め処理などに使用。
主なメソッド： parseInt(), toFixed(), isNaN()

Boolean（真偽値）

対象： true または false
特徴： 条件分岐（ifやwhile）で使用される。
主な例： Boolean(), !!変数

Global / any（どの型にも使える）

対象： 型を問わず使用可能な汎用関数
特徴： 型の判定やデバッグ、ダイアログ表示など
主なメソッド： typeof, Array.isArray(), console.log(), alert()

Promise / Async（非同期処理）

対象： 時間のかかる処理（例：データ取得、タイマー）
特徴： 処理完了を待ってから次の処理へ。then, catch などで連結。
主なメソッド： fetch(), then(), catch(), setTimeout()

JavaScriptの「エラーが出にくい」仕様は便利ですが、初心者が気づきにくい落とし穴でもあります。
だからこそ、型と戻り値を意識したコード設計が、ミスを防ぐ最良の防御策です。