8章 コンソール：インタラクティブなJavaScriptコマンドライン

8.1 JavaScriptコードを試す

JavaScriptコードを素早く実行するためのオプションは多数あります。以下のサブセクションでは、そのうちのいくつかについて説明します。

8.1.1 ブラウザコンソール

Webブラウザには、いわゆる*コンソール*があります。これは、`console.log()` を介してテキストを出力したり、コードを実行したりできるインタラクティブなコマンドラインです。コンソールの開き方はブラウザによって異なります。図3は、Google Chromeのコンソールを示しています。

使用しているWebブラウザでコンソールを開く方法を調べるには、「コンソール あなたのブラウザの名前」でWeb検索を行うことができます。以下は、一般的に使用されるWebブラウザのページです。

• Apple Safari
• Google Chrome
• Microsoft Edge
• Mozilla Firefox

8.1.2 Node.js REPL

*REPL* は *read-eval-print loop* の略で、基本的には *コマンドライン* を意味します。REPLを使用するには、まずオペレーティングシステムのコマンドラインから `node` コマンドを使用してNode.jsを起動する必要があります。REPLとのインタラクションは、図4に示すようになります。`>` の後のテキストはユーザーからの入力です。それ以外はNode.jsからの出力です。

> 3 + 5
8

8.1.3 その他のオプション

その他のオプションには、以下が含まれます。

• WebブラウザでJavaScriptを試すことができるWebアプリは多数あります。例えば、BabelのREPLなどです。

• JavaScriptを実行するためのネイティブアプリやIDEプラグインもあります。

8.2 console.* API：データの出力など

ブラウザでは、コンソールは通常は非表示になっているものを表示することができます。Node.jsの場合、コンソールはNode.jsが現在実行されている端末です。

console.* APIの詳細は、MDN web docs および Node.jsのWebサイト に記載されています。これはJavaScript言語標準の一部ではありませんが、多くの機能はブラウザとNode.jsの両方でサポートされています。

この章では、データを出力するための以下の2つのメソッドのみを取り上げます（「出力」とは、コンソールに表示することを意味します）。

• console.log()
• console.error()

8.2.1 値の出力：console.log() (stdout)

この操作には2つのバリアントがあります。

console.log(...values: any[]): void
console.log(pattern: string, ...values: any[]): void

8.2.1.1 複数の値を出力する

最初のバリアントは、コンソールに値の（テキスト表現）を出力します。

console.log('abc', 123, true);
// Output:
// abc 123 true

最後に、`console.log()` は常に改行を出力します。そのため、引数を指定せずに呼び出すと、改行のみが出力されます。

8.2.1.2 置換を含む文字列を出力する

2番目のバリアントは、文字列の置換を実行します。

console.log('Test: %s %j', 123, 'abc');
// Output:
// Test: 123 "abc"

置換に使用できるディレクティブを以下に示します。

• `%s` は、対応する値を文字列に変換して挿入します。

  console.log('%s %s', 'abc', 123);
  // Output:
  // abc 123

• `%o` は、オブジェクトの文字列表現を挿入します。

  console.log('%o', {foo: 123, bar: 'abc'});
  // Output:
  // { foo: 123, bar: 'abc' }

• `%j` は、値をJSON文字列に変換して挿入します。

  console.log('%j', {foo: 123, bar: 'abc'});
  // Output:
  // {"foo":123,"bar":"abc"}

• `%%` は、単一の `%` を挿入します。

  console.log('%s%%', 99);
  // Output:
  // 99%

8.2.2 エラー情報の出力：console.error() (stderr)

`console.error()` は `console.log()` と同じように動作しますが、ログに記録される内容はエラー情報と consideredされます。Node.jsの場合、これは出力がUnixのstdoutではなくstderrに送られることを意味します。

8.2.3 ネストされたオブジェクトの出力：JSON.stringify()を使用する

JSON.stringify() は、ネストされたオブジェクトを出力する際に役立ちます。

console.log(JSON.stringify({first: 'Jane', last: 'Doe'}, null, 2));

出力

{
  "first": "Jane",
  "last": "Doe"
}