JavaScript 第1回 Hello World!と環境構築

# はじめに
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)
https://github.com/Build-Mount/JS_01_helloWorld.git
- helloWorld.html
- helloWorld.js

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

# 参考
- [scriptタグについて](https://developer.mozilla.org/ja/docs/Web/HTML/Element/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](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: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タグについて](https://developer.mozilla.org/ja/docs/Web/HTML/Element/script)
に、deferの説明があります。
>defer
>この論理属性は、スクリプトを文書の解析完了後かつ DOMContentLoaded が発生する前に実行することをブラウザーに示します。
>
>defer 属性の付いたスクリプトは、スクリプトが読み込まれて評価が完了するまで、DOMContentLoaded イベントの発生が抑制されます。

ということで、これを記載することで、HTMLファイルの実行順は、ファイルの上から下方向に読み込んで実施していきますが、スクリプトの部分は読み込みながら、その下のHTMLのBody部を読み込んでいけます。したがって、
- スクリプトのサイズが大きくなっても、HTMLファイルの読み込み、および、画面表示の遅延に影響しない。
- Bodyのタグを使用して操作するスクリプトの場合、deferを付与しないとBodyタグの後にスクリプトを記載する必要があるが、deferを付与することで、記載箇所を気にする必要がない。

となると思います。

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

```JavaScript:helloWorld.js
console.log("Hello World!");
```

# launch.jsonの作成
ここまできたらソースは完成していますので、`helloWorld.html`をEdgeで開いて、開発ツールでみればよいのですが、せっかくなので、VSCの「実行とデバッグ」で行えるようにします。
1. 「helloWorld.html」画面がアクティブな状態で、VSCの左側の「実行とデバッグ」の三角ボタンを押下すると、メニューが表示され、「実行とデバッグをカスタマイズするには、launch.jsonファイルを作成します。」を押下します。
2. これで、「launch.json」が同一フォルダにできます。
```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を使用するのは、久しぶりなため色々と調べながら、備忘としてまとめていきたいと思います。