インタラクティブで動的なウェブサイトを作成するには、JavaScriptが不可欠です。このガイドでは、Chromeブラウザの開発者ツールを使用して直接JavaScriptコードを実行する方法と、サーバーサイドまたはスタンドアロンのアプローチでNode.jsを使用する方法の2つの方法について説明します。
目次
Chrome DevToolsでのJavaScriptの実行
この方法は、ウェブページのコンテキスト内でJavaScriptのスニペットを迅速にテストおよびデバッグするのに最適です。追加のインストールは必要ありません。
1. JavaScriptファイルの作成：
テキストエディタ（メモ帳、TextEdit、VS Codeなど）を使用して、JavaScriptコードを含むファイル（例：myScript.js）を作成します。
console.log("Hello from myScript.js!");
let message = "This is a variable.";
console.log(message);
2. Chrome DevToolsを開く：
Chromeを開き、任意のウェブページに移動して右クリックし、「検証」または「要素の検証」を選択します（またはF12を押します）。「Console」タブをクリックします。
3. コードの実行（方法1：直接入力）：
コンソールにJavaScriptを直接入力してEnterキーを押すと実行されます。これは小さなスニペットに最適です。
4. コードの実行（方法2：HTMLファイルを使用）：
これはより大きなスクリプトに適しています。HTMLファイル（例：index.html）を作成します。
<!DOCTYPE html>
<html>
<head>
<title>My JavaScript Test</title>
</head>
<body>
<script src="myScript.js"></script>
</body>
</html>
Chromeでindex.htmlを開きます。コンソールにmyScript.jsからの出力が表示されます。
Node.jsによるJavaScriptの実行
Node.jsを使用すると、ウェブブラウザの外でJavaScriptを実行できます。これは、サーバーサイドスクリプト、コマンドラインツールなどに最適です。Chrome内では直接実行されませんが、Chrome拡張機能やウェブアプリで使用される可能性のあるJavaScriptの開発には不可欠です。
1. Node.jsのインストール：
nodejs.orgからNode.jsをダウンロードしてインストールします。これにより、npm（Node Package Manager）もインストールされます。
2. JavaScriptファイルの作成：
上記のようにmyScript.jsファイルを作成します。
3. コマンドラインから実行：
ターミナルを開き、myScript.jsを含むディレクトリに移動して、以下を実行します。
node myScript.js
出力がターミナルに表示されます。Node.jsは、Chromeブラウザ内ではなく、コンピュータ上で直接JavaScriptを実行します。