【6日でできるJavaScript入門】コンソールの使い方
Webブラウザのデベロッパーツールに含まれるコンソールは、JavaScriptの動作確認やデバッグに欠かせない機能です。本記事では、コンソールの基本操作から、エラーメッセージの読み取り、そしてコンソール上でのJavaScript実行方法までをステップごとに詳しく解説します。
１．Google Chromeのコンソール
Chromeのコンソールを開く手順と基本的な表示項目を理解しましょう。
| 操作方法 | 説明 |
|---|---|
F12 または Ctrl+Shift+I | デベロッパーツールを起動 |
| 「Console」タブ | コンソール画面に切り替え |
1.1. コンソールの表示
ファイル名： lesson03-1.html
ブラウザで、このページを表示後、F12キーを押して「Console」タブを選択してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>🛠️ コンソール表示サンプル</title>
</head>
<body>
<h1>🔍 デベロッパーツールを開こう</h1>
<p>ブラウザでこのページを表示後、<code>F12</code>キーを押して「Console」タブを選択してください。</p>
</body>
</html>操作結果
- デベロッパーツールの「Console」タブが表示される。
タグ解説
<code>: プログラミング用語やキー操作を示すインラインタグ。<title>: タブに表示されるページタイトル。
1.2. コンソールに文字を表示
console.log() を使って、コンソールに出力してみましょう。
ファイル名： lesson03-2.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>📋 console.logサンプル</title>
</head>
<body>
<h1>✏️ console.logで出力</h1>
<button onclick="console.log('ボタンがクリックされました！');">
クリックして出力
</button>
</body>
</html>操作結果：
- ボタンをクリックするとコンソールに「ボタンがクリックされました！」と表示される。
タグ解説
- <button onclick="...">： クリック時の処理を直接指定。
- console.log()： コンソールにメッセージを出力するJavaScriptメソッド。
２．エラーメッセージの確認
コードの記述ミスや実行時エラーをコンソールで検出し、原因を特定する方法を学びます。
| エラー種類 | 表示例 |
|---|---|
| SyntaxError | 文法の間違い（例：括弧不足） |
| ReferenceError | 存在しない変数・関数の呼び出し |
| TypeError | 型が不正（例：未定義に対するメソッド呼び） |
2.1. 記述ミスによるエラー表示
ファイル名： lesson03-3.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>❗ エラー例サンプル</title>
</head>
<body>
<h1>⚠️ alertのスペルミス</h1>
<button onclick="alart('こんにちは');">
クリックしてエラー
</button>
</body>
</html>操作結果：
- ボタンをクリックするとコンソールに
Uncaught ReferenceError: alart is not definedが表示される。
タグ解説
- Uncaught ReferenceError： 未定義の識別子を使用した際のエラー種別。
- コンソールの行番号を確認し、該当箇所を修正。
2.2. エラー情報の読み解き
コンソールには、以下の情報が表示されます。
| 項目 | 説明 |
|---|---|
| エラー種別 | ReferenceError など |
| メッセージ | 詳細（alart is not defined など） |
| 行番号 | sample03-2.html:9 のようにファイルと行番号 |
３．コンソールにJavaScriptを記述して実行
コンソール欄に直接コードを入力し、その場で実行できます。スニペット的なテストや変数の確認に便利です。
| 機能 | 説明 |
|---|---|
| コード実行 | 入力行にJavaScriptを記述しEnterで実行 |
| 履歴の呼び出し | ↑キーで過去のコマンド履歴を辿る |
| 多行入力 | Shift+Enterで改行を追加 |
3.1. コンソールからの実行例
// コンソール上で入力
let name = '山田太郎';
console.log(`こんにちは、${name}さん！`);操作結果：
3.2. 注意点
- Webページをリロードするとコンソール上の状態（変数や履歴）はリセットされる。
- 他のフレームワークやミニアプリで同名の変数がある場合、意図しない衝突に注意。
まとめ
ここでは、Chromeコンソールの起動、メッセージ出力、エラーメッセージの読み取り、直接コード実行の方法を解説しました。実際に手を動かしてデバッグや動作確認を行い、JavaScript開発時の効率を高めましょう。