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

ケイス・バスクス
Kayce Basques
Twitter GitHub Glitch

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

コンソール

図 1. コンソール。

概要

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

DevTools をセットアップする

このチュートリアルは、ユーザーがデモを開いてすべてのワークフローを自分で試すことができるように設計されています。実際にやってみると、後でワークフローを覚えている可能性が高くなります。

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

    左側はこのチュートリアル、右側は DevTools です。

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

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

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

  1. 下のボタンのテキストに注目してください。

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

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

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

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

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

コードをテストしたり、馴染みのない新しい JavaScript 機能を試したりできるコード プレイグラウンドを使用したい場合があります。Google Play Console は、このようなテストを行うのに最適な場所です。

  1. コンソールで「5 + 15」と入力します。結果 20 は式の下に表示されます（式の評価に時間がかかりすぎる場合を除く）。
  2. Enter キーを押して式を評価します。コンソールでは、コードの下に式の結果が出力されます。下の図 4 は、この式を評価した後のコンソールでの表示を示しています。

  3. コンソールに次のコードを入力します。コピーして貼り付けるのではなく、1 文字ずつ入力してみてください。

    function add(a, b=20) {
  return a + b;
}

    b=20 構文に慣れていない場合は、関数引数のデフォルト値の定義をご覧ください。

  4. 今定義した関数を呼び出します。

    add(25);

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

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

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

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

次のステップ

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

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

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

これとは別に、コンソールには、ページを操作しやすくする一連の便利な関数もあります。例:

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

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