はじめに
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 ビット)
参考
用語
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キーを押します。
すると、ひな型が自動でできます。
<!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!」を表示するだけです。
console.log("Hello World!");
launch.jsonの作成
ここまできたらソースは完成していますので、helloWorld.htmlをEdgeで開いて、開発ツールでみればよいのですが、せっかくなので、VSCの「実行とデバッグ」で行えるようにします。
- 「helloWorld.html」画面がアクティブな状態で、VSCの左側の「実行とデバッグ」の三角ボタンを押下すると、メニューが表示され、「実行とデバッグをカスタマイズするには、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を使用するのは、久しぶりなため色々と調べながら、備忘としてまとめていきたいと思います。