このページは Cloud Translation API によって翻訳されました。

コンソールで JavaScript を実行する

Kayce Basques

このインタラクティブなチュートリアルでは、Chrome DevTools コンソールで JavaScript を実行する方法について説明します。コンソールにメッセージを記録する方法については、メッセージロギングを使ってみるをご覧ください。JavaScript コードを一時停止して 1 行ずつステップ実行する方法については、JavaScript のデバッグを始めるをご覧ください。

コンソール。

図 1. コンソール。

概要

コンソールは REPL です。これは、読み取り、評価、出力、ループの略です。入力した JavaScript を読み取り、コードを評価し、式の結果を出力してから、最初のステップに戻ります。

DevTools の設定

このチュートリアルでは、デモを開いてすべてのワークフローを自分で試すことができます。実際に操作しながら学習すると、後でワークフローを思い出しやすくなります。

Command+Option+J（Mac の場合）または Ctrl+Shift+J（Windows、Linux、ChromeOS の場合）を押すと、このページに コンソールが開きます。

図 2. 左側がこのチュートリアル、右側が DevTools です。

ページの JavaScript または DOM を表示、変更する

ページを作成またはデバッグする際、ページの外観や実行方法を変更するために、コンソールでステートメントを実行すると便利な場合があります。

下のボタンのテキストを確認してください。
コンソールに「document.getElementById('hello').textContent = 'Hello, Console!'」と入力し、Enter キーを押して式を評価します。ボタン内のテキストがどのように変化するかを確認します。

図 3. 上記の式を評価した後のコンソール。

評価したコードの下に "Hello, Console!" が表示されています。REPL の 4 つのステップつまり読み取り、評価、出力、ループを思い出してくださいコードを評価すると、REPL が式の結果を出力します。したがって、"Hello, Console!" は document.getElementById('hello').textContent = 'Hello, Console!' の評価結果である必要があります。

ページに関連のない任意の JavaScript を実行する

コードをテストしたり、慣れていない新しい JavaScript 機能を試したりするだけのコードプレイグラウンドが必要なこともあります。コンソールは、このようなテストを行うのに最適な場所です。

コンソールに「5 + 15」と入力します。式の下に結果 20 が表示されます（式の評価に時間がかかりすぎる場合を除く）。
Enter キーを押して式を評価します。コンソールにより、コードの下に式の結果が出力されます。下の 図 4 は、この式を評価した後のコンソールの様子を示しています。
コンソールに次のコードを入力します。コピーして貼り付けるのではなく、1 文字ずつ入力してみてください。
```
function add(a, b=20) {
  return a + b;
}
```
b=20 構文に慣れていない場合は、関数引数のデフォルト値を定義するをご覧ください。
次に、先ほど定義した関数を呼び出します。
```
add(25);
```
図 4. 上記の式を評価した後のコンソール。

add(25) は 45 に評価されます。これは、add 関数が 2 つ目の引数なしで呼び出されると、b がデフォルトで 20 になるためです。

関数が返されるまで、このコンソールセッションでコードを実行することはできません。計算に時間がかかりすぎる場合は、タスクマネージャーを使用して計算をキャンセルできますが、その場合、現在のページが失敗し、入力したデータがすべて失われます。

次のステップ

コンソールでの JavaScript の実行に関連するその他の機能については、JavaScript を実行するをご覧ください。

DevTools を使用すると、スクリプトの実行中にスクリプトを一時停止できます。一時停止中は、Console を使用して、その時点でのページの window または DOM を表示および変更できます。これにより、強力なデバッグワークフローを実現できます。インタラクティブなチュートリアルについては、JavaScript のデバッグを開始するをご覧ください。

コンソールでは、一連の形式指定子もサポートされています。コンソールメッセージの書式設定とスタイル設定を行うすべての方法については、コンソールでのメッセージの書式とスタイル設定をご覧ください。

それ以外にも、コンソールには、ページの操作を簡単にする一連の便利な関数も用意されています。例:

document.querySelector() を入力して要素を選択する代わりに、「$()」と入力します。この構文は jQuery にインスパイアされていますが、実際には jQuery ではありません。これは単に document.querySelector() のエイリアスです。
debug(function) は、その関数の最初の行にブレークポイントを設定します。
keys(object) は、指定されたオブジェクトのキーを含む配列を返します。

すべての便利な関数については、Console Utilities API リファレンスをご覧ください。