console.log で表示する

解説

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

• console.log(値) はコンソールに表示するだけで、テストは見ていません
• 関数の値は return で呼び出し元に返します

動いたのかどうかが分からない

JavaScript のファイルをつないでも、画面は何も変わりません。書いたコードが動いたのかさえ分かりません。そこで使うのが console.log です。プログラマーが世界でいちばん多く書く 1 行と言ってもいい命令です。

この行を書いて index.html を開き、F12 (Mac は Command + Option + I) で開発者ツールを出して Console タブを見ると、書いた文字がそのまま出ます。画面には何も出ませんが、それでいいのです。console.log は開発者だけが見るメモだからです。カンマで区切れば、いくつでも並べて出せます。

表示は出ているのにテストが赤い

ここからが大事な話です。このコースの課題は、すべて「関数を書いて、その戻り値をテストする」形式です。console.log で表示しても、テストは 1 件も通りません。テストが見ているのは return で返した値だけです。

function が関数を作るキーワード、workLabel が名前、(work) が受け取る値の入れ物、{ } の中が本体です。そして return が、呼んだ側に値を渡す命令です。カッコが入れ子になった式は内側から読みます。まず workLabel("プロフィールサイト") が値を返し、そのあと外側の console.log が受け取った値を表示しています。

return を書いていない関数は undefined を返します。テストに undefined と出たら、まず return の書き忘れを疑ってください。入門者のつまずきの半分はこれです。

詰まったら、受け取った値を出す

両方を書いても構いません。むしろ、途中経過を console.log で出しながら最後に return で返すのが、実務のふつうの書き方です。

こうしておけば、テストが落ちたときに「そもそも何を受け取っていたのか」がコンソールに残ります。テストが赤いまま 20 分悩むより、console.log を 1 行足すほうがずっと速く原因にたどり着けます。

よくある間違い

• console.log で満足してしまう — 表示は出るのにテストは赤いままになります。値は必ず return で返します
• 関数を呼ばずに名前だけ書く — workLabel は関数そのもの、workLabel("プロフィールサイト") が呼び出しです。カッコを忘れると中身が実行されません

1. 関数名は helloConsole、引数は name の 1 つ (文字列)
2. 戻り値は Hello, + name + ! をつないだ文字列
3. Hello, のあとには半角スペースを 1 つ入れること
4. 値は console.log ではなく return で返すこと