JavaScript実行ツールとは？

JavaScriptはすべてのWebブラウザで動作する言語であり、多くの開発者はコードの小さな部分をブラウザのコンソールに貼り付けてテストします。JavaScript実行ツールは、専用のページ上で同じことを行います。数行のコードを書いて実行し、コードがconsole.logで出力した内容を確認できます。プロジェクトを準備しなくても、関数の動作を確認したり、アイデアを試したり、メソッドが返す値を調べたりできる便利な方法です。

ツールの説明

このツールはブラウザ内でJavaScriptを実行し、コードがコンソールに出力するすべての内容を表示します。左側にコードを入力または貼り付けて「実行」を押すか、Ctrl+Enter（MacではCmd+Enter）を押してください。出力は右側に表示され、各console呼び出しにつき1行が表示されます。警告とエラーは色分けされます。実行を指示するまでコードは実行されないため、自由に編集できます。

コードはブラウザのバックグラウンドスレッドであるWeb Worker内で実行されます。そのため、終了しないスクリプトによってページがフリーズすることはありません。「停止」を押せば、スクリプトは終了します。コードがサーバーに送信されることはありません。

例

計算結果とオブジェクトを出力します。

const prices = [4.5, 12, 7.25];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log("合計:", total);
console.log({ count: prices.length, average: total / prices.length });
JavaScript

出力：

合計: 23.75
{ count: 3, average: 7.916666666666667 }

トップレベルのawaitを使用して非同期処理を待機します。

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
console.log("開始");
await sleep(1000);
console.log("1秒後");
JavaScript

機能

  • console.log、info、debug、warn、errorの出力を表示し、警告とエラーを色分け
  • オブジェクト、配列、map、set、クラス、日付、エラーを整形し、循環参照にも対応
  • 第1引数で%s、%d、%i、%f、%j、%oなどのプレースホルダーに対応
  • console.group、count、time、assert、dir、clearに対応
  • トップレベルのawait、タイマー、promiseを含む非同期コードを実行
  • 構文エラー、捕捉されなかったエラー、処理されなかったpromiseの拒否を出力に表示
  • 無限ループで停止しないスクリプトも、すぐに終了できる「停止」ボタン
  • デフォルトで有効な「ログを保持」オプションにより、以前の実行結果を保持して比較可能
  • 出力内の行にマウスカーソルを合わせると、その行が記録された日時を表示
  • 出力全体をコピー、「クリア」ボタンで消去、またはコードをファイルとしてダウンロード

仕組み

「実行」を押すと、ツールは新しいWeb Workerを起動し、コードを送信します。Worker内ではconsoleメソッドが置き換えられているため、呼び出しのたびにテキストへ変換され、ページへ送り返されます。コードは非同期関数でラップされます。これにより、トップレベルでawaitを使用できます。

出力の下にあるステータスバーには、コードの実行中、または開始したタイマーが待機中の場合に「実行中」と表示されます。setIntervalを解除するか「停止」を押すまで、実行は継続します。実行するたびに新しいWorkerが開始されるため、以前の実行で使用した変数が残ることはありません。「ログを保持」にチェックが入っている間は、実行と実行の間で出力が保持されます。チェックを外すと、毎回空の出力で実行を開始できます。または、いつでも「クリア」を押して出力を空にできます。

ヒント

  • 最後の式ではなくconsole.logを使用してください。最後の行の値は出力されないため、1 + 2だけを記述しても何も表示されません
  • Workerにはページがないため、document、window、その他のDOMオブジェクトは使用できません。グローバルスコープにはselfを使用してください
  • この種類のコードでは、静的なimport文は動作しません
  • 出力は新しい順に最大1000行まで保持され、1行あたり10000文字を超える部分は切り詰められます
  • fetchで行うリクエストは他のリクエストと同様にブラウザから送信され、通常のクロスオリジンルールが適用されます
  • ブラウザのコンソールを使用する場合と同様に、信頼できるコードだけを実行してください