はじめに
前回の記事ではChrome DevToolsのElementsパネルとStylesタブを使ってHTMLの構造や適用されているCSSを確認する方法を解説しました。今回はConsoleタブでJavaScriptのエラーを読み解く方法・console.logを使ったデバッグ・コンソール上でJavaScriptを直接実行する方法を初心者向けに丁寧に解説します。Consoleタブは毎日使う最重要ツールのひとつです。
1. Consoleタブとは
1.1 Consoleタブでできること
Consoleタブの主な使い方：
① エラーを確認する
→ JavaScriptのエラーが赤い文字で表示される
→ 「なぜ動かないのか」の原因がここに書いてある
② console.logで値を確認する
→ コード中に console.log() を書いておくと
ここに出力される
③ JavaScriptを直接実行する
→ 入力欄にコードを書いてEnterキーを押すと
その場で実行できる
④ console.warn・console.error を確認する
→ 警告（黄色）やエラー（赤）が表示される
1.2 Consoleタブを開く方法
Consoleタブを開く方法：
① DevToolsを開いた状態で「Console」タブをクリックする
② ショートカットキー（どこからでも開ける）：
Windows / Linux：Ctrl + Shift + J
Mac：Command + Option + J
③ Elementsタブを開いている状態で
EscapeキーでコンソールのドロワーをToggleできる
2. JavaScriptのエラーを読む
2.1 エラーメッセージの構成
エラーはConsoleタブに赤い文字で表示されます。最初は英語で難しく感じますが、構成を知れば読めるようになります。
エラーの構成：
❌ Uncaught TypeError: Cannot read properties of undefined (reading 'name')
at getUserName (script.js:15:22)
at script.js:28:5
① エラーの種類（TypeError）
→ 型に関するエラー
② エラーの内容（Cannot read properties of undefined (reading 'name')）
→ undefinedの'name'プロパティを読もうとした
③ どこで起きたか（script.js:15:22）
→ script.js の15行目・22文字目
→ クリックするとその行が開く
④ 呼び出しの流れ（スタックトレース）
→ at getUserName → at script.js
→ どの関数からどの順番で呼ばれたか
2.2 よく見るエラーの種類と原因
ReferenceError（参照エラー）
// エラー例
console.log( userName ); // userNameが定義されていない
// ❌ Consoleに表示されるメッセージ
// ReferenceError: userName is not defined
// 原因と対処：
// → 変数を定義する前にアクセスしようとしている
// → スペルミスで変数名が違う
// → 別のスコープで定義した変数にアクセスしようとしている
// ✅ 修正
const userName = '山田太郎';
console.log( userName );
TypeError（型エラー）
// エラー例①：undefinedのプロパティを読もうとした
const user = undefined;
console.log( user.name ); // userがundefinedなのにnameを読もうとしている
// ❌ TypeError: Cannot read properties of undefined (reading 'name')
// ✅ 修正：存在確認してからアクセスする
console.log( user?.name ); // オプショナルチェイニングでundefinedを防ぐ
// ---
// エラー例②：関数ではないものを呼ぼうとした
const count = 42;
count(); // countは数値なのに関数として呼んでいる
// ❌ TypeError: count is not a function
SyntaxError（構文エラー）
// エラー例：括弧が閉じていない
function greet( name { // ← ) が抜けている
return `こんにちは、${name}`;
}
// ❌ SyntaxError: Unexpected token '{'
// 原因と対処：
// → 括弧・波括弧・引用符の閉じ忘れ
// → コンマが余分についている
// → 予約語を変数名に使っている（let・const・class など）
404エラー（ネットワーク）
// fetchが404を返したとき
fetch( 'https://api.example.com/user/999' );
// ❌ GET https://api.example.com/user/999 404 (Not Found)
// 原因と対処：
// → URLが間違っている
// → 存在しないIDを指定している
// → APIのエンドポイントが変わった
💡 エラーメッセージのファイル名と行番号をクリックしてみましょう： クリックするとSourcesパネルが開いてその行にジャンプします。エラーの原因の行を直接確認できます。
3. console.logの使い方
3.1 基本的な使い方
// ① 値を確認する（最もよく使う）
const userName = '山田太郎';
console.log( userName ); // 山田太郎
// ② 複数の値を同時に出力する
const name = '山田';
const age = 30;
console.log( name, age ); // 山田 30
// ③ ラベルを付けて出力する（どの値かわかりやすくなる）
console.log( 'userName:', userName ); // userName: 山田太郎
console.log( 'age:', age ); // age: 30
// ④ オブジェクトを出力する
const user = { name: '山田太郎', age: 30, role: 'admin' };
console.log( user );
// ▶ { name: '山田太郎', age: 30, role: 'admin' }
// → ▶ をクリックすると展開できる
// ⑤ 配列を出力する
const tags = ['CSS', 'JavaScript', 'React'];
console.log( tags );
// ▶ (3) ['CSS', 'JavaScript', 'React']
3.2 デバッグに役立つconsoleの書き方
// ① console.log でラベル付きオブジェクト出力（おすすめ）
const response = await fetch( '/api/users' );
const data = await response.json();
console.log( { data } );
// → { data: [...] } と表示される（変数名が自動でラベルになる）
// ② console.table で配列をテーブル表示する
const users = [
{ id: 1, name: '山田太郎', role: 'admin' },
{ id: 2, name: '鈴木花子', role: 'editor' },
];
console.table( users );
// → ┌──────┬───────────┬──────────┐
// │ (idx)│ name │ role │
// ├──────┼───────────┼──────────┤
// │ 0 │ 山田太郎 │ admin │
// │ 1 │ 鈴木花子 │ editor │
// └──────┴───────────┴──────────┘
// ③ console.group でグループ化する
console.group( 'ユーザー情報' );
console.log( 'name:', user.name );
console.log( 'age:', user.age );
console.groupEnd();
// → ▶ ユーザー情報（クリックで展開できる）
// ④ console.time で処理時間を計測する
console.time( 'fetch' );
const res = await fetch( '/api/posts' );
console.timeEnd( 'fetch' );
// → fetch: 123.45ms
3.3 console.log以外のコンソールメソッド
// 情報（青いアイコン）
console.info( 'データの読み込みが完了しました' );
// 警告（黄色いアイコン）
console.warn( 'このAPIは非推奨です。新しいAPIを使ってください。' );
// エラー（赤いアイコン）
console.error( 'データの取得に失敗しました', error );
// アサーション（条件がfalseのときだけエラーを出す）
console.assert( user.age >= 0, 'ageは0以上である必要があります', user );
// → user.age が -1 などのとき: Assertion failed: ageは0以上...
⚠️ 本番環境に console.log を残さないようにしましょう： 開発中にデバッグ用に書いた console.log をそのままデプロイすると、ユーザーのブラウザのConsoleに情報が表示されます。デプロイ前に削除するか、ビルド時に自動削除する設定を入れましょう。
4. コンソールでJavaScriptを直接実行する
4.1 コンソールに直接コードを書く
Consoleタブの一番下にある入力欄（>のあるところ）にJavaScriptを入力してEnterキーを押すと、そのページのコンテキストでコードが実行されます。
// ① 計算する
1 + 1
// ← 2
// ② 変数を作って使う
const greeting = 'こんにちは';
greeting + '、世界！'
// ← 'こんにちは、世界！'
// ③ ページのDOM要素を操作する
document.querySelector( 'h1' ).textContent = '書き換えたタイトル';
// → ページのh1が書き変わる（リロードで元に戻る）
// ④ ページの要素の色を変える
document.body.style.background = '#1A5FC0';
// → ページの背景色が変わる
// ⑤ 現在のURLを取得する
location.href
// ← 'https://example.com/blog'
// ⑥ localStorageの中身を確認する
localStorage.getItem( 'pref_theme' )
// ← 'dark'（保存されていれば）
// ⑦ すべてのconsoleを一度に消す
console.clear();
4.2 複数行のコードを実行する
// Shift+Enterで改行して複数行書ける
function add( a, b ) {
return a + b;
}
add( 3, 4 )
// ← 7
// 配列のメソッドを試す
const numbers = [1, 2, 3, 4, 5];
numbers.filter( n => n % 2 === 0 )
// ← [2, 4]
numbers.map( n => n * 2 )
// ← [2, 4, 6, 8, 10]
numbers.reduce( ( sum, n ) => sum + n, 0 )
// ← 15
💡 コンソールは「試し書き」の最高の場所です： 「この書き方で動くかな？」と思ったら、ファイルを編集する前にコンソールで試してみましょう。すぐに結果がわかります。
4.3 現在のページの変数にアクセスする
// ページで定義されたグローバル変数にアクセスできる
// 例：グローバルに const APP_VERSION = '1.0.0' が定義されていれば
APP_VERSION
// ← '1.0.0'
// Reactアプリのルート要素を確認する（開発環境）
document.getElementById( 'root' )
// ← <div id="root">...</div>
5. コンソールの便利な機能
5.1 過去のコマンドを再利用する
↑キー：前に入力したコマンドを呼び出す
↓キー：次のコマンドに進む
→ 同じコードを何度も入力する必要がなくなる
5.2 コンソールをフィルタリングする
たくさんのログが流れていると目的のものが見つけにくくなります。
フィルタリングの方法：
① Consoleタブの「フィルター」入力欄にキーワードを入力する
例：「user」と入力 → userを含むログだけ表示される
② ログレベルでフィルタリングする
「Default levels」ドロップダウンから選ぶ
・Verbose（すべて表示）
・Info（infoのみ）
・Warnings（警告のみ）
・Errors（エラーのみ）
③ コンソールをクリアする
🚫ボタンをクリック または console.clear()
または Ctrl+L（Mac：Command+K）
5.3 コンソールのオブジェクトを展開する
オブジェクトの確認方法：
console.log( { name: '山田', address: { city: '東京', zip: '100-0001' } } );
→ ▶ {name: '山田', address: {…}} と表示される
▶ をクリック → 展開される
name: "山田"
▶ address:
city: "東京"
zip: "100-0001"
→ どこまでも入れ子を展開して確認できる
6. 実践：よくあるデバッグのシナリオ
6.1 「ボタンを押しても何も起きない」を調べる
// ① まずConsoleにエラーが出ていないか確認する
// エラーがあればその内容を読む
// ② イベントリスナーが正しく設定されているか確認する
// コンソールで試す：
document.querySelector( '#submit-btn' )
// → nullが返る場合はセレクターが間違っている
// ③ 関数の中にconsole.logを追加して呼ばれているか確認する
function handleSubmit( e ) {
console.log( 'handleSubmitが呼ばれた' ); // ← 追加
e.preventDefault();
// ...
}
// ④ 値が正しく取れているか確認する
function handleSubmit( e ) {
e.preventDefault();
const formData = new FormData( e.target );
console.log( Object.fromEntries( formData ) ); // ← フォームの値を確認
}
6.2 「fetchが上手くいかない」を調べる
// fetchの各ステップにconsole.logを追加する
async function fetchUser( id ) {
console.log( 'fetchUser開始 id:', id ); // ①IDを確認
const res = await fetch( `/api/users/${id}` );
console.log( 'ステータス:', res.status ); // ②ステータスを確認
if ( !res.ok ) {
console.error( 'HTTPエラー:', res.status );
return;
}
const data = await res.json();
console.log( '取得したデータ:', data ); // ③データを確認
return data;
}
6.3 「値がいつ変わっているかわからない」を調べる
// コンソールで変数の値の変化を追う
// デバッグしたい変数をconsole.logで囲む
// 変更前
console.log( '変更前のcount:', count );
setCount( count + 1 );
console.log( '変更後のcount:', count );
// → Reactのstateはすぐには変わらないので
// 変更前も変更後も同じ値になる（これ自体が発見）
7. よくある初心者の疑問
7.1 エラーが英語でわからない
英語のエラーメッセージの対処法：
① エラーメッセージをそのままコピーする
② GoogleやAIに貼り付けて検索・質問する
「TypeError: Cannot read properties of undefined とは」
よく出るエラーの日本語まとめ：
・is not defined → 定義されていない
・is not a function → 関数ではない
・Cannot read properties → プロパティが読めない
of undefined/null
・is not iterable → 繰り返し処理ができない（配列でない）
・Unexpected token → 予期しない文字（構文エラー）
・404 Not Found → URLが見つからない
・CORS error → 別オリジンへのアクセスが拒否された
7.2 エラーが消えない
エラーが消えないときの対処手順：
① エラーメッセージを読んで種類と場所を確認する
② ファイル名と行番号をクリックして問題の行に移動する
③ その行とその周辺を確認する
④ console.log で値を出力して状態を確認する
⑤ それでもわからなければエラーメッセージで検索する
7.3 console.logを書いたのに何も出ない
console.logが出ないときの確認ポイント：
① そのコードが実行されているか確認する
→ console.log('ここを通過した') と書いてみる
② フィルタリングされていないか確認する
→ フィルター欄を空にする
→ ログレベルを「Default levels」に戻す
③ ブラウザのキャッシュが古くないか確認する
→ Ctrl+Shift+R（Mac：Command+Shift+R）で
キャッシュを無視してリロードする
8. 実践チェックリスト
✓ Ctrl+Shift+J（Mac：Command+Option+J）でConsoleタブが開けるか確認したか
✓ 赤いエラーメッセージのファイル名・行番号をクリックして該当行に移動できるか確認したか
✓ ReferenceError・TypeError・SyntaxErrorの違いを説明できるか
✓ console.log にラベルを付けて出力できるか（console.log('name:', name)）
✓ console.table で配列をテーブル表示できるか試したか
✓ コンソールの入力欄に 1 + 1 を入力してEnterキーで実行できるか確認したか
✓ Shift+Enterで複数行コードを入力して実行できるか試したか
✓ ↑キーで過去のコマンドを呼び出せることを確認したか
✓ フィルター欄でログを絞り込む方法を確認したか
✓ 本番デプロイ前にconsole.logを削除するルールを意識できているか
まとめ
今回はChrome DevToolsのConsoleタブの使い方を解説しました。ポイントをまとめると：
- ConsoleタブはCtrl+Shift+Jで開けて JavaScriptのエラー確認・デバッグ・コード実行に使う
- エラーメッセージは「種類」「内容」「ファイル名と行番号」「スタックトレース」で構成されていて行番号をクリックすると該当行に飛べる
- よく出るエラーはReferenceError（未定義）・TypeError（型の問題）・SyntaxError（構文ミス）の3種類
console.log( 'ラベル:', 値 )のようにラベルを付けると値がわかりやすくなるconsole.table()で配列をテーブル表示・console.group()でグループ化・console.time()で処理時間を計測できる- コンソールの入力欄にJavaScriptを書いてEnterキーで即座に実行できる
- Shift+Enterで複数行のコードを書ける
- ↑キーで過去のコマンドを再利用できる
- 本番環境にconsole.logを残さないことを意識する
次の記事では、プログラミング学習の疑問「コードを書いていると、どこが間違っているのかわからなくなる」という悩みに応える、エラー解決のアプローチと調べ方のコツを初心者向けに解説します。お楽しみに！
コメント