Chrome で JavaScript ファイルを作成して実行する

Chrome で JavaScript を実行するには、開いているページで手早く試す場合は DevTools の Snippet を使い、コードを保存して使う場合は .js ファイルをローカルの Web ページから読み込みます。Node.js はブラウザーの外で JavaScript を実行します。Express でそのファイルを読み込むページを配信すれば、Chrome がブラウザー側のコードとして実行できます。

Chrome DevTools で JavaScript ファイルを作成して実行する

Chrome でページを開き、F12 を押して DevTools を開くか、ページを右クリックして Inspect を選択します。Sources パネルを開き、続いて Snippets を選択します。Chrome のバージョンや表示言語によって、パネル名や場所が異なる場合があります。Snippets が見当たらないときは、パネルのオーバーフローメニューを確認してください。New snippet を選び、名前を付けて JavaScript を入力します。

この Snippet は現在のページの document を対象にします。見出しを追加し、DevTools の Console にメッセージを出力します。

if (typeof document !== 'undefined') {
  const heading = document.createElement('h1');
  heading.textContent = "This is the current webpage";
  document.body.prepend(heading);
}
console.log('Snippet finished');

記録された実行結果は次のとおりです。例に表示される Snippet finished というラベルは英語のままです。

Snippet finished

Windows または Linux では Ctrl+Enter、macOS では Command+Enter を押して Snippet を実行します。開いているページの上部に見出しが表示され、Console にメッセージが出力されます。Snippet はそのページを対象にコードを試すのに便利ですが、整理して単独で実行できるプロジェクトファイルではありません。Chrome は Snippet をセッション間で保持することがあるため、ブラウザーを閉じても削除されるとは限りません。プロジェクトで長く使うコードは、別のソースファイルにも保存しておきましょう。

Node.js と Express を使って Chrome で JavaScript ファイルを実行する

Node.js がコードを実行するのは Node.js の環境であり、Chrome の中でブラウザー用コードを実行するわけではありません。保存したブラウザースクリプトを Chrome で表示するには、そのスクリプトを読み込むページを配信します。Node.js の公式サイトから Node.js をインストールし、プロジェクト用のディレクトリを作成して、その中でターミナルを開きます。npm init -y を実行し、続けて npm install express を実行してください。

public サブディレクトリを作成します。次の内容を public/index.html として保存します。このファイルは同じディレクトリにあるブラウザースクリプトを読み込みます。

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Local JavaScript example</title></head>
<body>
  <script src="/app.js"></script>
</body>
</html>

上の JavaScript の例を public/app.js として保存します。プロジェクトディレクトリに server.js を作成し、次の Express の設定を記述します。const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'public'))); app.listen(4000);。この Express 固有の設定は説明用であり、提供された実行記録では実行されていません。プロジェクトディレクトリで node server.js を実行してサーバーを起動し、Chrome で http://localhost:4000/ を開きます。ブラウザーは app.js を読み込み、見出しを追加してメッセージを出力します。メッセージを確認するには DevTools を開き、そのページの Console を選択してください。ターミナルで実行するのは server.js であり、ブラウザー用コードとしての app.js ではありません。ポート 4000 は例です。使用中の場合は、app.listen(...) と URL の両方で空いているポートに変更してください。