はじめに

JavaScript＋Microsoft Edgeを使用したスクリプト開発をはじめようと思います。
WSHでJavaScriptを動作させるというよりは、WebブラウザでJavaScriptを動作させようと思います。
Excel VBAで面倒なことを色々と効率化するためにScriptを書いてきましたが、仕事の環境がかわりつつあり、Webサービスを利用して管理されるものも増えてきており、Webサービス利用には、Excel VBAよりもJavaScriptのほうが都合が多くなってきました。
仕事ではExcelはほぼすべての方がインストールされており、新たなものを追加インストールしなくてもよいという点でとても優れています。
Webサービスに対して、Office ScriptやPythonなども候補にあげましたが、Office Scriptは仕事なら問題ないのですがインストールするOffice製品に依存して利用できず、私個人では使いづらく除外し、仕事でもPythonはインストールしている人やしていない人が様々おり、そういった点で、JavaScript＋Microsoft Edgeなら、誰でも利用できるため都合がよいと思いました。
Microsoft Edgeの部分は、Google Chromeでもベースが同じなのでどちらでもよいのですが、新たにインストールが不要という点で、Microsoft Edgeをベースで動作を確認しようと思います。

今回実施する内容

Visual Studio Code (VSC)を使用した開発環境の準備。
基本となるhtmlファイルの作成。
JavaScriptでコンソールに「Hello world!」を表示。

ソースコード(Git Hub)

helloWorld.html
helloWorld.js

環境

OS: Windows 11 JP (64bit)
Microsoft Edge: バージョン 119.0.2151.44 (公式ビルド) (64 ビット)

参考

scriptタグについて

用語

VSC: Visual Studio Code

Visual Studio Code (VSC)を使用した環境の構築

Windowsでは、Microsoft Edgeはプリインストールされていますので、特に必要な作業はありません。
Visual Studio Codeはhttps://azure.microsoft.com/ja-jp/products/visual-studio-codeでダウンロードし、インストールします。
設定は割愛しますが、インストールから特に設定はしなくても問題ありません。

今回の開発用にフォルダ「01_helloWorld」を作成しておきます。

helloWorld.htmlの作成

helloWorld.htmlは、「Hello World!」を表示するJavaScript「helloWorld.js」を読み込む元となるHTMLファイルです。
スクリプトは汎用的に使っていくことを想定しているため、HTMLファイルとスクリプトは別ファイルとし、スクリプトを読み込むようにします。

VSCの使い方で本質ではありませんが、すぐ忘れてしまうため、備忘として、ショートカットを使ってHTMLファイルのひな型の作り方を載せておきます。
VSCで新しいファイルを作成して、HTMLファイルとします。
ファイルの1行目で「!」を入力して、Tabキーを押します。
すると、ひな型が自動でできます。

HTMLのひな型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

今回JavaScriptメインのため、HTMLのフォーマットはこだわりませんので、これでOKですが、少し修正を加えます。

言語は日本語のため、htmlタグの<html lang="en">を<html lang="ja">に修正。
titleタグは、<title>Document</title>を<title>Hello World!</title>に修正。
scriptタグとして、<script src="helloWorld.js" defer></script>を追加。

scriptタグのdefer

参考に載せたscriptタグについて
に、deferの説明があります。

defer
この論理属性は、スクリプトを文書の解析完了後かつ DOMContentLoaded が発生する前に実行することをブラウザーに示します。

defer 属性の付いたスクリプトは、スクリプトが読み込まれて評価が完了するまで、DOMContentLoaded イベントの発生が抑制されます。

ということで、これを記載することで、HTMLファイルの実行順は、ファイルの上から下方向に読み込んで実施していきますが、スクリプトの部分は読み込みながら、その下のHTMLのBody部を読み込んでいけます。したがって、

スクリプトのサイズが大きくなっても、HTMLファイルの読み込み、および、画面表示の遅延に影響しない。
Bodyのタグを使用して操作するスクリプトの場合、deferを付与しないとBodyタグの後にスクリプトを記載する必要があるが、deferを付与することで、記載箇所を気にする必要がない。

となると思います。

helloWorld.jsの作成

ファイルを作成したら、以下の一行を記載します。
コンソールに「Hello World!」を表示するだけです。

helloWorld.js

console.log("Hello World!");

launch.jsonの作成

ここまできたらソースは完成していますので、helloWorld.htmlをEdgeで開いて、開発ツールでみればよいのですが、せっかくなので、VSCの「実行とデバッグ」で行えるようにします。

「helloWorld.html」画面がアクティブな状態で、VSCの左側の「実行とデバッグ」の三角ボタンを押下すると、メニューが表示され、「実行とデバッグをカスタマイズするには、launch.jsonファイルを作成します。」を押下します。
これで、「launch.json」が同一フォルダにできます。

launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "msedge",
            "request": "launch",
            "name": "Open HelloWorld.html",
            "file": "c:\\01_helloWorld\\helloWorld.html"
        }
    ]
}

fileのところにhelloWorld.htmlがリンクされていれば大丈夫です。

「Hello World!」の表示確認

「launch.json」ができたことで、VSCの左側の「実行とデバッグ」ボタンを押すことで、helloWorld.htmlをEdgeで開くことができます。
しかし、Edge上では「Hello World!」と表示されません。
Edgeの画面右上の「・・・」を押下して、「その他のツール」→「管理者ツール」で、管理ツールが表示されます。
コンソールタブを選択してみると、「Hello World!」が表示されるのを確認します。

おわりに

今回は、JavaScriptとMicrosoft Edgeを使用して、「Hello World！」をコンソールで表示するスクリプトの作成と、そのための環境構築について記載しました。
JavaScriptを使用するのは、久しぶりなため色々と調べながら、備忘としてまとめていきたいと思います。