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

  • [アーティクル]

コンソールには任意の JavaScript 式、ステートメント、またはコード スニペットを入力でき、入力するとすぐに対話形式で実行されます。 これは、DevTools の コンソール ツールが REPL 環境であるために可能です。 REPL は、読み取り、評価、印刷、ループを表します。

コンソール:

  1. 入力した JavaScript を読み取ります。
  2. コードを評価します。
  3. 式の結果を出力します。
  4. 最初の手順に戻ります。

コンソールで JavaScript ステートメントと式を対話形式で入力するには:

  1. Web ページを右クリックし、[ 検査] を選択します。 DevTools が開きます。 または、 Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押して、DevTools コンソールを直接開きます。

  2. 必要に応じて、DevTools をクリックしてフォーカスを設定し、 Esc キーを押してコンソールを開 きます。

  3. コンソールで をクリックし、Enter キーを押さずに「 」と入力2+2します。

    入力すると、 コンソール によって次の行に結果 4 がすぐに表示されます。 この機能は Eager evaluation 、有効な JavaScript を記述するのに役立ちます。 JavaScript が正しいかどうか、有効な結果が存在するかどうかに関係なく、入力中に結果がコンソールに表示されます。

    コンソールでは、式 '2+2' の結果が、入力時に対話形式で表示されます

  4. Enter キーを押すと、コンソールで JavaScript コマンド (式またはステートメント) が実行され、結果が表示され、カーソルが下に移動して、次の JavaScript コマンドを入力できるようになります。

    複数の JavaScript 式を連続して実行する

複雑な式を記述するためのオートコンプリート

コンソールは、オートコンプリートを使用して複雑な JavaScript を記述するのに役立ちます。 この機能は、以前は知らなかった JavaScript メソッドについて学ぶのに最適な方法です。

マルチパート式の記述中にオートコンプリートを試すには:

  1. 種類 doc。

  2. 矢印キーを押して、ドロップダウン メニューで強調表示 document します。

  3. Tab キーを押して を選択しますdocument。

  4. 種類 .bo。

  5. Tab キーを押して を選択しますdocument.body。

  6. 別 . のを入力して、現在の Web ページの本文で使用可能なプロパティとメソッドの大きな一覧を取得します。

    JavaScript 式のコンソールオートコンプリート

コンソールの履歴

他の多くのコマンド ライン環境と同様に、入力したコマンドの履歴を再利用できます。 上方向キーを押して、前に入力したコマンドを表示します。

同様に、オートコンプリートでは、以前に入力したコマンドの履歴が保持されます。 前のコマンドの最初の数文字を入力すると、以前の選択肢がテキスト ボックスに表示されます。

また、 コンソール には、生活を容易にするかなりの ユーティリティメソッド も用意されています。 たとえば、 $_コンソールで最後に実行した式の結果は常に含まれます。

コンソールの $_ 式には、常に最後の結果が含まれます

複数行の編集

既定では、 コンソール では JavaScript 式を記述するための行が 1 行だけ提供されます。 Enter キーを押すと、コードが実行されます。 1 行の制限によって、イライラする可能性があります。 1 行の制限を回避するには、Enter キーではなく Shift キーを押しながら Enter キーを押 します。 次の例では、表示される値は、すべての行 (ステートメント) が順番に実行された結果です。

Shift キーを押しながら Enter キーを押して、複数行の JavaScript を書き込みます。結果の値が出力されます

コンソールで複数行のステートメントを開始すると、コード ブロックが自動的に認識され、インデントされます。 たとえば、ブロック ステートメントを開始すると、中かっこを入力すると、次の行が自動的にインデントされます。

コンソールは、中かっことインデントを使用して複数行式を認識します

最上位の await() を使用したネットワーク要求

コンソールでは、独自のスクリプト以外に、任意の非同期 JavaScript を実行するための最上位の await がサポートされています。 たとえば、ステートメントを非同期関数で fetch ラップ await せずに API を使用します。

Microsoft Edge Developer Tools for Visual Studio Code GitHub リポジトリに提出された最後の 50 件の問題を取得するには、次の手順を実行します。

  1. DevTools でコンソールを開 きます。

  2. 次のコード スニペットをコピーして貼り付けて、10 個のエントリを含むオブジェクトを取得します。

    await ( await fetch(
'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
)).json();

    コンソールには、最上位の非同期フェッチ要求の結果が表示されます

    10 個のエントリは、多くの情報が表示されるため、認識が困難です。

  3. 必要に応じて、log メソッドを console.table() 使用して、関心のある情報のみを受け取ります。

    'console.table' を使用して人間が判読できる形式で最後の結果を表示する

    式から返されたデータを再利用するには、Console の copy() ユーティリティ メソッドを使用 します。

  4. 次のコードを貼り付けます。 要求を送信し、応答からクリップボードにデータをコピーします。

    copy(await (await fetch(
'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
)).json())

コンソールは、JavaScript を練習し、いくつかの簡単な計算を行うための優れた方法です。 実際のパワーは、 ウィンドウ オブジェクトにアクセスできるという事実です。 「コンソールを使用して DOM を操作する」を参照してください。