こんにちは、かつコーチです。
前回はJavaScriptがどんな言語なのか、全体像を解説しました。
今回は、実際にJavaScriptを試しながら学ぶために欠かせない「開発者ツール」の使い方を紹介します。
特別なソフトをインストールしなくても、ブラウザさえあればJavaScriptを動かして試せるので、環境構築で挫折することがないのがJavaScript学習の大きなメリットです。
開発者ツールとは？
ブラウザに標準で入っている検証機能
開発者ツールとは、ChromeやFirefoxなどのブラウザに標準で搭載されている、Webページの中身を確認・検証するための機能です。
英語では「DevTools（デブツールズ）」と呼ばれることが多く、この記事でも以降はDevToolsと表記します。
DevToolsを使うと、次のようなことができます。
- ページのHTML・CSSの構造を確認する
- JavaScriptのコードを直接実行して試す
- 通信エラーやプログラムのエラーを確認する
- スマホ表示のシミュレーションをする
これから何度も使うことになる、いわば「開発者の作業台」のようなツールです。
なぜ最初にDevToolsを学ぶのか
私が初心者の頃、最初につまずいたのは「JavaScriptを書く場所がわからない」ということでした。
エディタでコードは書けても、それをどうやって動かして確認すればいいのか、最初はイメージが湧かなかったのです。
DevToolsの「コンソール」という機能を使えば、ファイルを作らずにその場でJavaScriptのコードを試せます。
環境構築に時間をかける前に、まずこのコンソールに慣れておくことで、学習のスタートダッシュがぐっと楽になります。
DevToolsを開く方法
ショートカットキーで開く
DevToolsは、以下のショートカットキーで開けます。
| OS | ショートカット |
|---|---|
| Windows | F12 または Ctrl + Shift + I |
| Mac | Cmd + Option + I |
どのブラウザでもほぼ共通で使えるショートカットなので、まずはこれを覚えておくと便利です。
右クリックメニューから開く
ショートカットキーを忘れてしまった場合は、ページ上で右クリックして「検証」（Chromeの場合）を選ぶことでも開けます。
Firefoxの場合は「要素を検査」という表記になっています。
見たい箇所の上で右クリックすると、その部分のHTMLが選択された状態でDevToolsが開くので、特定の要素を調べたいときはこちらの方法が便利です。
コンソールタブを使ってみる
コンソールとは
DevToolsを開くと、上部に「Elements」「Console」「Sources」といった複数のタブが並んでいます。
この中のConsole（コンソール）タブが、JavaScriptのコードをその場で実行できる場所です。
コンソールに直接コードを打ち込んでEnterキーを押すと、すぐに結果が表示されます。
簡単な計算をしてみる
まずは、電卓代わりに計算式を打ち込んでみましょう。
1 + 1
コンソールにこのように入力してEnterを押すと、次の行に2という結果が表示されます。
文字列同士をつなげることもできます。
"こんにちは、" + "かつコーチさん"
これを実行すると、"こんにちは、かつコーチさん"という結果が返ってきます。
+ は数字同士なら足し算、文字列同士ならつなぎ合わせる、という2つの役割を持っていることが、この時点で何となく感じられれば十分です。
console.logで結果を表示する
コンソールに何かを表示したいときは、console.log() という命令をよく使います。
console.log("初めてのJavaScript！");
これを実行すると、コンソール上に「初めてのJavaScript！」という文字が表示されます。
console.log() は今後のJavaScript学習で最も頻繁に使うことになる命令なので、ここでしっかり手を動かして慣れておきましょう。
HTMLファイルにscriptタグを書いて確認する方法
コンソールだけでは限界がある
コンソールへの直接入力は手軽ですが、ページを再読み込みすると入力した内容は消えてしまいます。
ある程度まとまったコードを試したいときは、HTMLファイルに<script>タグを書いて、そのファイルをブラウザで開くのが基本の流れになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>コンソール確認用</title>
</head>
<body>
<script>
console.log("HTMLファイル経由での表示です");
</script>
</body>
</html>
このファイルをブラウザで開いてDevToolsのコンソールを見ると、「HTMLファイル経由での表示です」という文字が表示されます。
<script>タグの詳しい書き方は、次回の記事でさらに詳しく解説します。
つまずきやすいポイント：コンソールに何も表示されない
かつコーチが実際にハマった原因
私が初心者だった頃、コンソールにconsole.logの内容が表示されず、しばらく悩んだことがあります。
原因は単純で、コンソールタブを開く前にページを読み込んでいたことでした。
❌ Before：ページを開いた後にコンソールを開く
<script>
console.log("ページ読み込み時に1回だけ実行される");
</script>
このコードは、ページが読み込まれたタイミングで1回だけ実行されます。
先にページを開いてから後でコンソールタブを開くと、実行済みのログを見逃してしまい、「何も表示されていない」と勘違いしてしまうのです。
✅ After：コンソールを先に開いてからページを再読み込みする
コンソールタブを開いた状態で、ブラウザの更新ボタン（もしくはCmd/Ctrl + R）を押してページを再読み込みします。
こうすることで、ページ読み込み時に実行されるconsole.logの内容もきちんとキャッチできます。
「ログが出ない」と感じたときは、まずコンソールを開いた状態でページを再読み込みしているかを確認する癖をつけると、無駄なつまずきを減らせます。
覚えておくと便利なコンソールの小技
複数の値を一度に表示する
console.log()には、カンマ区切りで複数の値を渡すこともできます。
const name = "かつコーチ";
const age = 35;
console.log("名前:", name, "年齢:", age);
変数の中身を確認したいとき、この書き方を知っておくと1行でまとめて確認できて便利です。
エラーメッセージも一緒に確認する癖をつける
コンソールには、console.logで意図的に表示した内容だけでなく、プログラムのエラーも赤字で表示されます。
エラーが出たときにコンソールを開く癖がついていれば、「何行目で」「どんな理由で」エラーが起きたのかをすぐに確認できます。
エラー対処の詳しいやり方は、この後の記事で改めて取り上げます。
まとめ
この記事のポイント
- 開発者ツール（DevTools）は、ブラウザに標準搭載された検証・実行機能
F12またはCmd + Option + Iで開ける- Consoleタブに直接コードを入力すると、その場で実行結果を確認できる
console.log()は今後のJavaScript学習で最も使う命令のひとつ- ログが表示されないときは、コンソールを開いた状態でページを再読み込みしているか確認する
次に読むべき記事
DevToolsに慣れたら、次はHTMLファイルにJavaScriptを読み込ませる「scriptタグ」の正しい書き方を学んでいきます。
書く場所を間違えると意図した通りに動かないこともあるので、しっかり押さえておきましょう。
→ 次の記事：scriptタグの書き方：headとbodyどちらに書く？defer/asyncの違い