console.logシミュレーター
JavaScriptコードを入力して ▶ 実行を押すと、console.log() の出力がその場で確認できます。開発者ツール不要。
出力
▶ 実行ボタンを押すと、ここに出力が表示されます
使い方
- テキストエリアに JavaScriptコード を入力しよう（サンプルボタンでも始められるよ）
- ▶ 実行 ボタンを押すと、右の出力パネルに
console.log()の結果が表示されるよ - 出力の色を見てみよう — 黄色は 警告（warn）、赤は エラー を表しているよ
開発者ツールなしで動作確認できる
JavaScriptの学習で最初にやるのが console.log() で値を表示すること。
でも「開発者ツールってどこ？」「F12押しても何も出ない」という段階でつまずく人は多い。
このシミュレーターなら、コードを書いて実行ボタンを押すだけ。 ブラウザの設定を触る必要がないから、「まずコードを動かしてみる」体験にすぐ入れる。
授業・自習でこう使う
- 変数の中身を確認したいとき —
let x = 3 + 5; console.log(x);と書いて実行すれば、計算結果がすぐ見える。教科書の例題を試すのに最適。 - if文の分岐を確かめたいとき — 条件を変えて何度も実行すれば、どの分岐に入るか目で確認できる。紙の上で追うより速い。
- for文の繰り返し回数を確認したいとき —
ループ内に
console.log(i)を入れれば、何回繰り返されたか・各回の値が一覧で見える。 - 学校のChromebookで使いたいとき — 管理者設定で開発者ツールがブロックされている環境でも、このページさえ開ければJSを実行できる。
よくある質問
- Q. 無限ループを書いてしまったらどうなる？
- 実行時間に制限を設けているので、一定時間で自動停止する。ブラウザがフリーズすることはない。
- Q. DOM操作（document.getElementByIdなど）は使える？
- このシミュレーターはconsole出力の確認に特化しているため、DOM操作は対象外。DOM操作を試したい場合はHTMLタグ可視化ツールと組み合わせて使おう。
- Q. console.log以外のメソッドも使える？
console.warn()（黄色）、console.error()（赤）、console.table()にも対応している。
console.logについてもっと学ぼう
関連ツール
console の基本メソッド
// 基本の出力
console.log("Hello!"); // 一般的な出力
console.warn("注意！"); // 警告（黄色）
console.error("エラー発生！"); // エラー（赤色）
// 変数の中身を確認
const user = { name: "太郎", age: 16 };
console.log(user); // オブジェクトの中身が見える
console.table([user]); // テーブル形式で表示
// 処理時間を計測
console.time("処理");
// ... 何か重い処理 ...
console.timeEnd("処理"); // "処理: 123ms"
// 条件付きログ
console.assert(1 === 2, "1は2ではない"); // 条件がfalseのとき出力上のシミュレーターでこれらのメソッドを試してみましょう。ブラウザのDevToolsを開かなくても、ここで結果を確認できます。