※この記事はJavaScript初心者向けのものとなります。
console.log()の基本と役割：なぜ最初はコンソールを使うのか
JavaScript学習で最初に覚えるべき超重要な命令が console.log() です。
これは、あなたが書いたコードの途中で「今、何が起きているか」を確認するために、ブラウザの DevTools（開発者ツール） の Console（コンソール） に文字や値を表示する機能です。
なぜ、最初の段階で console.log() を使うのかというと、JavaScriptは便利な反面、初心者にとって**「間違いに気づきにくい」動き方をすることがあるからです。
だからこそ、コードの途中にログを出して、「本当に思った通りの値になっているか？」**を自分で確認する習慣が大切になります。
JavaScriptの「ゆるさ」と、値を確認する必要性
JavaScriptは「動的型付け」という特徴を持っています。簡単に言うと、変数に入る値の種類（数値・文字列など）を、毎回厳密に書かなくても動く“柔軟な言語”です。この柔軟さは便利ですが、初心者にとっては落とし穴になります。
たとえば、次のコードを見てください。
let x = '5'; // 文字列
let y = 3; // 数値
console.log(x + y); // 結果: '53'
開発者は「5 + 3 = 8」を期待するかもしれません。
でもJavaScriptはエラーを出さずに、数値を文字列に変換して結合してしまいます。その結果が '53' です。
つまり、JavaScriptは「止まらない」けれど「間違った結果」になることがある、ということです。
これが初心者がつまずきやすいポイントです。
だからこそ console.log() を使って、
- この変数はいま何の値？
- 型（数値？文字列？）は合ってる？
- 処理の順番は想定通り？
をこまめに確認します。
デバッグ＝“動作確認”の基本がここにある
console.log() を使うことは、プログラミングの基本である デバッグ（原因を見つけて直す）への第一歩です。
初心者の段階では、難しいバグ修正というよりも「自分の考えた通りに動いているかを確かめる」ために使います。
この先、次のような内容を学ぶと、頭の中だけで処理の流れを追うのが難しくなります。
- 条件分岐（if）
- 繰り返し（for）
- 非同期処理（Promise / async/await など）
特に非同期処理は「時間がかかる処理（通信など）」が入るので、実行順が目に見えにくいです。
そこで console.log() をいくつか挟むと、「どの処理が先に動いたか」を時系列で見られるようになります。
つまり console.log() は、ただの表示ではなく、**コードと結果を結びつけて理解するための“最初の道具”**です。
DevToolsのConsoleタブ：初心者が最初に使いこなすべき場所
Consoleタブは console.log() を表示するだけの場所ではありません。
JavaScript開発の「心臓部」と言っていいくらい重要な場所です。
DevToolsの起動（Chromeの場合）
- Windows：
F12 - Mac：
Command + Option + I - 右クリック →「検証」
Consoleタブでできること（大事な3つ）
- ログを見る（console.logの結果を確認）
- エラーを見る（どこで何が起きたかが出る）
- その場でJavaScriptを試す（コンソールに直接コードを書ける）
特に3番目は強力です。
たとえば %（余り）の動きを試したいとき、わざわざファイルを保存してブラウザ更新をしなくても、その場で書いて確認できます。
学習スピードが上がります。
エラーメッセージは“ヒント集”
初心者はエラーが怖くなりがちですが、エラーは「ここが間違ってるよ」と教えてくれるヒントです。
エラーにはだいたい次の情報が入っています。
- エラーの種類（例：ReferenceError, TypeError, SyntaxError）
- 内容（何が問題か）
- 場所（ファイル名と行番号）
まず見るべきは 行番号です。そこがスタート地点です。
慣れてきたら「エラー文をそのまま検索する」が最強の解決法になります。
オブジェクトや配列も見える
Consoleは数値や文字列だけでなく、配列やオブジェクトも“展開して”見られます。
DOM操作を学ぶとき、要素が取れているか（null ではないか）を確認するのに、これが非常に役立ちます。
JavaScriptを書く場所：インライン vs 外部ファイル
JavaScriptをブラウザで動かすには、HTMLに組み込む必要があります。方法は2つあります。
インライン（HTMLに直接書く）
短いコードならすぐ書けますが、長くなるとHTMLが読みにくくなります。
外部ファイル（script.jsを読み込む）
基本はこれが推奨です。
<script src="script.js"></script>
メリット：
- HTMLとJSが分かれて読みやすい
- JSを使い回せる
- ブラウザがキャッシュして速くなることもある
また、Node.jsで動かすJSはHTMLから読み込むのではなく、ターミナルで node コマンドで実行する点も覚えておくと混乱が減ります。
スクリプトの実行タイミング：DOM操作を失敗しない配置の基本
ブラウザはHTMLを上から読みます。
途中で <script> に出会うと、いったんHTML読み込みを止めてJavaScriptを実行します。
もしHTML要素がまだ読み込まれていない段階でDOM操作をすると、要素が見つからず null になることがあります。
だから初心者はまず、</body> の直前で読み込むのが安全です。
JavaScriptの基本ルール：ステートメント（文）とブロック
JavaScriptは「文（ステートメント）」の集まりです。
例：
- 変数を作る：
let age = 25; - 出力する：
console.log("Hello"); - 条件分岐：
if (...) { ... } - 関数：
function add(...) { ... }
複数行の処理をまとめるのが {}（ブロック）です。
ifやfor、関数では必ず出てくるので、ここは早めに慣れると後が楽です。
セミコロン（;）：省略できるけど注意点がある
JavaScriptには **自動でセミコロンを補う仕組み（ASI）**があります。
なので省略しても動くことが多いです。
ただし return の直後に改行があると、意図しない動きになることがあります。
初心者は次のどちらかで統一すると安全です。
- 全部書く（迷わない）
- 省略するなら、危ない場所だけ書く（慣れてから）
コメント：説明する・一時的に無効にする
コメントは実行されません。主に役割は2つです。
- 説明（未来の自分・他人のため）
- 切り分け（怪しい部分を一時的に止めて原因を探す）
書き方：
- 1行：
// ... - 複数行：
/* ... */
実行環境で命令が変わる：ブラウザとNode.js
同じJavaScriptでも、動く場所で使える命令が違います。
- ブラウザ：DOM操作、fetch、localStorage など
- Node.js：ファイル操作（fs）、サーバー（http）など
たとえば document.getElementById() はNode.jsでは使えません。
逆に fs.readFileSync() はブラウザでは普通は使えません。
「今どこで動かしているJSか」を意識すると混乱が減ります。
変数とconsole.log：値の変化を追う
初心者が最初に覚えるべきは let と const です。
let：後で値を変えられるconst：基本は変えない（再代入できない）
そして console.log() を使うと、値がどう変わったか追えます。
let counter = 1;
console.log("ステップ1:", counter);
counter = counter + 5;
console.log("ステップ2:", counter);
さらに typeof で型も確認できます。
デバッグの心得：エラーが出ない＝正しい、ではない
JavaScriptは「動くけど間違う」が起きやすい言語です。
だから、エラーが出ないことより結果が正しいかを重視します。
安全な習慣としては、次が効果的です。
- 比較は
===を使う（型変換で事故らない） let/constを使う（変数トラブルが減る）- エラー文をそのまま検索する（最短で解決できる）
そして、console.log() で中身を見ながら進めること。
これが、初心者が挫折しないための最強の武器になります。