JavaScriptを扱うフロントエンド開発では、バグの特定や動作検証のためにコードを試しながら調査する必要があります。
Consoleパネルは、ログの出力・変数の確認・関数の試行実行などがリアルタイムでできる万能ツールです。

本章では、開発の現場で頻繁に使われる console 系のメソッドや、インタラクティブな操作方法を学びましょう。

5.1 ログ出力の活用（console.log, console.table）

JavaScriptの動作確認では、console.log() を使って変数の値や処理の流れを出力するのが基本です。

例：

const user = { id: 1, name: "Taro", email: "taro@example.com" };
console.log(user);

➡ Consoleパネルに user オブジェクトが表示され、展開して中身を確認可能。

console.table() の便利な使い方：

配列やオブジェクトの配列を 表形式で視覚的に表示できます。

const users = [
  { id: 1, name: "Taro" },
  { id: 2, name: "Hanako" }
];
console.table(users);

➡ 整然としたテーブル表示で、データの比較や確認がしやすくなります。

💡 活用シーン：

• APIから取得した配列の中身を目視で比較
• デバッグ時に変数の増減や値の変化を追跡

5.2 オブジェクト構造の確認

Consoleパネル上では、オブジェクトや配列を展開して中身を逐次確認できます。
複雑な入れ子構造のデータも、一つひとつクリックで展開可能です。

特徴：

• プロパティ名、値、型、構造を直感的に確認
• 関数・クラスなどのインスタンス構造も視覚的に表示

例：

console.log(document.querySelector("form"));

➡ <form> 要素のプロパティや子ノード、イベントリスナなどが展開できる。

🔍 実用例：

• event オブジェクトの中身を確認して、event.target や event.key を特定
• fetch のレスポンスから res.json() の構造を調べて、UI反映のロジックを設計

5.3 実行中の関数の一部を試す

Consoleパネルでは、現在表示されているページに読み込まれているJavaScriptの関数や変数を直接呼び出して試すことができます。

例：

calculatePrice(3, "JPY");

➡ ページ内に定義済みの calculatePrice() 関数を実行し、その戻り値を確認

ページ内の状態を変えて試す：

document.querySelector("#login-button").click();

➡ 実際のクリックイベントを手動で発火させ、挙動を確認

💡 ユースケース：

• バグ報告：「ボタンを押しても何も起きない」→ Consoleから直接ボタンをクリックさせて、イベントが反応しているか確認
• フォームのバリデーション関数を引数を変えて実行し、想定どおりに動くか検証

🧑‍💻 実践課題

課題：フォーム送信後に取得されるレスポンスオブジェクトの内容を確認し、特定のフィールドの値を抽出してみよう。

1. console.log(response); でレスポンスを出力
2. .json() の内容を console.table() で視覚化
3. 必要なプロパティにアクセスできるか試す（例：response.user.id）

📝 まとめ

Consoleパネルは、JavaScriptの動作確認・デバッグ・関数の実行など、フロントエンド開発の即席実験室です。
ポイントは次の通り：

• console.log()：変数の中身や処理結果の確認
• console.table()：配列データの視覚的な確認に最適
• オブジェクトの展開：複雑な構造の確認がしやすい
• 関数の試行実行：UI操作や状態確認が可能

日々の開発に Console を組み込むことで、効率的に原因を突き止め、即座に検証・修正できる力が養われます。