console.log で表示｜コードで実践

このレッスンで分かること

console.log(値) でコンソール (開発者ツールやターミナル) に値を出力できます

関数は return で値を呼び出し元に返し、表示とは別物です

最小例は function hello() { return "Hello, JavaScript!"; }

console.log で表示とは

JavaScript の世界へ第一歩。文字列を返す関数を書いて console.log の使い方も覚えよう。

JavaScript の世界へようこそ

JavaScript は 1995 年に Netscape で生まれたプログラミング言語で、現在では世界で最も使われている言語のひとつです。もともとはブラウザの中で動かすために作られましたが、いまでは Node.js のおかげでサーバー側でも、React Native でスマホアプリでも、Electron でデスクトップアプリでも動きます。Google Meta Netflix LINE など、私たちが毎日使うサービスのほとんどに JavaScript が使われています。

名前が似ているせいで誤解されますが、JavaScript と Java はまったく別物です。「カレー」と「カレーパン」くらい違うとよく例えられます。文法も、動く場所も、設計思想もぜんぶ別です。混ぜないように気を付けてください。

このコースでは、ブラウザのコンソールや chotdekiru のエディタで実行できる小さなプログラムを少しずつ書いていきます。最初の章では「画面に文字を出す」「変数を扱う」「コメントを残す」といった、JavaScript の基本動作を体に染み込ませます。完璧に理解しようと焦らず、まずは手を動かしてみましょう。

console.log とは何か

プログラマーが最初に覚える関数の代表が console.log です。これは「コンソール (開発者ツールやターミナル) に値を出力する」関数で、デバッグの相棒として一生付き合っていく道具になります。

JavaScript

console.log("Hello, JavaScript!");

この 1 行を実行すると、コンソールに Hello, JavaScript! と表示されます。console はブラウザや Node.js が用意してくれているグローバルなオブジェクトで、log はそのメソッドのひとつです。info warn error といった仲間もありますが、まずは console.log だけ覚えておけば十分です。

メソッド	用途
`console.log(...)`	通常の出力
`console.info(...)`	情報メッセージ
`console.warn(...)`	警告メッセージ
`console.error(...)`	エラーメッセージ
`console.table(arr)`	配列やオブジェクトを表形式で表示

慣れたエンジニアでも、コードが思ったとおりに動かないときは console.log を 10 個くらい仕込んで動きを追います。「console.log デバッグ」と呼ばれる王道の手法です。

関数の基本形

このコースでは、毎回「関数」を書いて答えを返す形式で課題を解いていきます。関数とは「呼ばれたら何かして値を返してくれる小さなプログラム」のことです。

JavaScript

function hello() {
  return "Hello, JavaScript!";
}

上のコードは hello という名前の関数を宣言しています。要素を分解すると次の通りです。

function — 関数を作るキーワード
hello — 関数の名前。あとで hello() のように呼び出す
() — 引数の入れ物。今回は引数なしで空っぽ
{ ... } — 関数の本体 (中身)
return — 呼び出した側に値を返す

テストでは hello() を呼んだときの戻り値を Hello, JavaScript! と比べます。console.log で表示するのではなく、return で値を返す、という点をしっかり押さえてください。

コードが動く流れを図で見る

書いた JavaScript のコードがブラウザの中で動くまでの流れを、図にしておきましょう。

diagram (will load when visible)

図の流れを順序リストで書き直すと、次の通りです。

書いたソースコードを JS エンジン (V8 / SpiderMonkey 等) が読む
関数の呼び出しに従って本体を実行する
return で値が呼び出し元に戻る
テストが戻り値を期待値と比較する
一致すれば合格、しなければ失敗

ブラウザは内部に V8 (Chrome) や SpiderMonkey (Firefox) と呼ばれる JavaScript エンジンを抱えていて、書いたコードをその場で解釈して実行してくれます。chotdekiru の Playground でも、サーバー側で同じようなエンジンが動いて、関数を呼び出した結果を受け取って表示しています。

コード例で動きを追う

もうひとつ別の例も見てみましょう。引数を 1 つ受け取って、別の文字列を返す関数です。

JavaScript

function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("Alice"));
// => Hello, Alice!

greet("Alice") のように呼ぶと、関数の中で name が "Alice" に置き換わり、"Hello, Alice!" という文字列が組み立てられて返されます。返ってきた値を console.log でコンソールに表示する、という流れです。

関数の戻り値とコンソール出力は別物です。return は呼び出し元に値を渡すこと、console.log は人間が見るための表示です。テストは戻り値を見るので、console.log をいくら呼んでもテストは通りません。

よくある間違い

最初に JavaScript を触ると、ほぼ全員が同じところで詰まります。3 つだけ予習しておきましょう。

return を忘れる — 関数の中で console.log だけ呼んで満足してしまうパターン。テストは戻り値しか見ないので、必ず return で返します
文字列のクォートを間違える — 'Hello' "Hello" `Hello` の 3 種類が使えますが、開始と終了は同じ記号にそろえる必要があります。'Hello" のようにバラバラだと構文エラーです
セミコロンを完全に忘れる — JavaScript は ASI (自動セミコロン挿入) がありますが、頼りすぎるとトラブルの元です。文末に ; を付ける習慣を付けましょう

エラーメッセージは敵ではなく味方です。SyntaxError: Unexpected token のような英語が並んだら、まずエラーが指している行番号を見て、その近くの記号を疑ってみましょう。

この章のポイント

ここまでの要点 console.log は表示、return は戻り値。テストは戻り値しか見ないので、関数の最後で必ず return する。文字列クォートは揃える。

やってみよう

それでは課題に挑戦しましょう。

右側のエディタを開く
helloConsole という関数の中で、文字列 "Hello, JavaScript!" を return する
「実行」ボタンを押して、テストが緑になることを確認する

最初は写経でかまいません。Hello, JavaScript! の , のあとの半角スペース、末尾の ! まで、文字を一つひとつ確かめながら入力してみてください。コンパイラはとても厳密で、スペースが 1 つ違うだけでテストは fail します。

慣れてきたら、別の文字列を返してみたり、自分の名前を入れてみたりして、エラー画面の読み方の練習をしてみましょう。これがあなたが書く最初の JavaScript です。ここから先のレッスンで、変数、計算、条件分岐、ループと、世界が少しずつ広がっていきます。一緒に学んでいきましょう。

よくある質問

Q. console.log と alert はどう違いますか？

A. console.log は開発者ツールに出力するだけで画面に影響しません。alert はモーダルを出して処理を止めるため UX を阻害します。デバッグでは必ず console.log を使い、ユーザー向けの通知は専用 UI（トースト等）に切り替えましょう。

Q. console.log で配列やオブジェクトの中身を全部見るには？

A. console.dir(obj, { depth: null }) や JSON.stringify(obj, null, 2) を使うと深い構造まで展開されます。Chrome DevTools では配列・オブジェクトをクリックで展開できますが、保存して比較したいときは JSON 化が便利です。

Q. 本番ビルドから console.log を消したいです

A. Webpack/Vite の minifier 設定（terser の drop_console）や ESLint の no-console ルールで防げます。本番でデバッグログが残るとパフォーマンスと情報漏えいの両面で問題になるため、ビルド時に自動削除する仕組みを入れておきましょう。

次のレッスン

次は 文字列を連結する で、JavaScript の世界へ第一歩を学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

Hello console の要点を自分の言葉で説明できる
このレッスンの最小コード (または操作手順) を見ずに書ける
練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. Hello console とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

console.log で表示

JavaScript の世界へようこそ

console.log とは何か

関数の基本形

コードが動く流れを図で見る

コード例で動きを追う

よくある間違い

やってみよう

よくある質問

Q. console.log と alert はどう違いますか？

Q. console.log で配列やオブジェクトの中身を全部見るには？

Q. 本番ビルドから console.log を消したいです

次のレッスン

要件

入出力例

ヒント

メモ