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

1. Chrome で開発ツールを使用して JavaScript ファイルを作成して実行する
2. Chrome で node.js を使用して JavaScript ファイルを作成して実行する

Web 開発者は、フロントエンドであろうとバックエンドであろうと、何をするにしても、常に何らかの方法で JavaScript を使用する必要があります。

Chrome ブラウザ内での JavaScript コードの記述、調整、および実行は、開発中に常に実行されます。通常、JavaScript ファイルを HTML ドキュメントに接続することにより、ブラウザ内で JavaScript ファイルを実行します。

しかし、これは常に当てはまるわけではありません。場合によっては、HTML ドキュメントを使用せずにブラウザ内で JS ファイルを実行する必要があります。

したがって、Chrome ブラウザ内で JavaScript ファイルを実行するには、2つの方法があります。1つの方法は、Chrome 開発ツール内またはローカルシステム上で JavaScript ファイルを作成し、Chrome ブラウザー内でファイルを実行することです。

以下では、これらの両方の方法を実際に見ていきます。

Chrome で開発ツールを使用して JavaScript ファイルを作成して実行する

JavaScript ファイルを作成して実行する最も簡単な方法は、Chrome 開発者ツールを使用することです。

開発ツールで JavaScript ファイルを作成して実行する手順：

• Chrome ブラウザを開き、キーボードのF12を押して Chrome デベロッパーツールを開きます。または、以下に示すように、ブラウザ内の任意の場所を右クリックし、リストから Inspect を選択して開発ツールを開くこともできます。

• Chrome 開発ツールを開いたら、ソースタブをクリックし、スニペットタブを選択します。[スニペット]タブが表示されない場合は、上部の矢印をクリックしてアクセスしてください。

• JavaScript ファイルを作成するには、New Snippet をクリックして作成し、そのファイルに任意の名前を付けます。ここでは、ファイル名として myFile を付けています。

• ここでは、Ctrl + Vキーの組み合わせを使用して JavaScript コードを記述または貼り付けることができます。

以下は、開発ツール内で作成したコードです。

ここでは、h1 要素を作成し、その中に文を追加しました。次に、prepend メソッドを使用して、このテキストを body タグ内の上部に表示します。

var text = document.createElement('h1');
text.innerHTML = 'This is Google\'s webpage';

document.body.prepend(text);

ファイル内で変更を加えている間、ページを更新することもできます。

これは、ファイル内のコードをフラッシュしません。作成した JavaScript コードを実行するには、キーワードでCtrl + Enterを押します。

コードにコンソールステートメントが含まれている場合、上の画像に示すように、それらは画面下部のコンソールウィンドウ内に表示されます。このファイル内に記述したコードは、ブラウザが開くまでしか使用できないことに注意してください。

Chrome ブラウザを閉じるとすぐに、すべての変更が失われます。そのため、別のファイルを作成して、Chrome ブラウザ内で実行することをお勧めします。

これは、次のセクションで説明します。

Chrome で node.js を使用して JavaScript ファイルを作成して実行する

JavaScript コードを別のファイルに保存する方が常に優れています。これは、本番環境に対応した Web サイトを作成するときの通常の方法です。

JavaScript ファイルの作成は簡単で、誰もがその方法を知っています。ファイル名の最後に .js 拡張子を追加するだけで、ファイルは JavaScript ファイルになります。

ただし、ほとんどの人にとって最も難しいのは、この JavaScript ファイルをブラウザー内で実行する方法です。通常、JavaScript を HTML ドキュメントに接続し、Chrome ブラウザ内で実行します。

しかし、ここではそれには興味がありません。ここでは、ブラウザ内で JavaScript ファイルを直接実行することに焦点を当てます。

これは、JavaScript フレームワークである node.js の助けを借りて可能になります。node.js フレームワークは公式ウェブサイトからダウンロードできます。

システムに node.js をインストールした後、ターミナルウィンドウを開き、JavaScript ファイルが保存されている場所に移動する必要があります。ここでは、express.js というライブラリも必要になります。

以下のコマンドを使用して express をインストールします。

npm i express

次に、JavaScript ファイル内で、エクスプレスライブラリをインポートし、以下に示すようにエクスプレスアプリを初期化します。

const express = require('express');
const app = express();

app.get('/', (req, res) => {res.send('<h1>This is Google\'s webpage</h1>')})

app.listen(4000, () => {
  console.log(`Server is running on port 4000`);
});

ここでは、サーバーが実行されるポートも指定する必要があります。この場合、ポート番号として 4000 を使用しました。

ポート番号として任意の番号を指定し、/ルートで get リクエストを使用して、JavaScript コードを送信できます。このコードは Chrome ブラウザに表示されます。

ここでは、index.js というファイル内に上記のコードを記述してブラウザのコンソールウィンドウ内にテキストを出力し、次に node.js を使用してこのファイルを実行します。

JavaScript ファイルを実行するには、node filename.js コマンドを実行します。以下に示すように、filename を実行する JavaScript ファイル名に置き換えてください。

node index.js

次に、ブラウザに出力として表示される URL localhost:4000 に移動します。

send() メソッドを使用して送信したコンテンツが画面に表示されます。これは、node.js と express.js を使用して Chrome ブラウザ内で JavaScript ファイルを作成して実行する方法です。