JavaScriptの実行や動作確認方法
実際にコードを書いていく場合はメモ帳よりも専用のコードエディタを使用した方が作業効率が上がります。そのため当サイトでは Visual Studio Code（VSCode）を推奨し、以降の解説もVSCodeを使って進めていきます。ただし、エディタはご自身が使いやすいものを選んでいただいて問題ありません。
JavaScriptを実行してみましょう
まずはテスト用のフォルダを作成します。このページはURLにもあるように「JavaScript - 基礎 -」の3ページ目にあたりますので、例として「03」というフォルダを作成しています。皆さんは「test」など分かりやすいフォルダ名で問題ありません。
フォルダが作成できたら、下記画像のようにそのフォルダをVSCodeへドラッグ＆ドロップします。
初回は下記のような警告が表示されますが、今回は自分で作成したフォルダのため信頼できます。「はい、作成者を信頼します」にチェックを入れて進めてください。
VSCodeでフォルダが読み込まれたら、サイドメニューの赤枠部分をクリックしてフォルダ内を表示します。中身は空なので「Ctrl + N」で新しいファイルを作成します。
下記のように「Untitled-1」という名前で空のファイルが作成されます。これは拡張子が付いていませんので、「Ctrl + S」で保存し、ファイル名を
index.html としてください。「.html」の入力ミスにお気をつけください。
VSCodeでHTMLコードを生成する
準備が整ったら、実際にコードを書いていきます。VSCodeにはHTMLの基本構造を自動生成する便利なショートカットがあります。半角で「!」と入力するとメニューが表示されるので「!」を選択します。
下記のようになればOKです。
次に、「metaタグ（Viewport）」と書かれた行の下に改行を入れ「script」と入力すると「script:src」が表示されますので選択してください。
自動でscriptタグが入力されますのでsrc の部分に下記のように入力します。
<script src="./script.js"></script>
下記のようになれば問題ありません。
このコードは「script.js」というJavaScriptファイルを読み込むという意味です。 ファイル名は任意ですが、ここではscript.jsとします。まだscript.jsは存在しませんが、VSCodeにはファイルを自動生成するショートカットがあります。
「script.js」と書かれた部分をCtrlキーを押しながらクリックします。
「ファイルが存在しません」と表示されるので、「ファイルを作成」ボタンを押します。
JavaScriptのコードを書いてみましょう
script.jsが作成されたら下記のコードを入力します。
alert("Hello JavaScript!");
これが最初のJavaScriptコードです。 意味としては「Hello JavaScript!」というメッセージを警告ウィンドウで表示するというものです。 index.htmlとscript.jsの両方を「Ctrl + S」で保存してください。
実際に実行してみましょう。サイドメニューの index.html を右クリックし、「エクスプローラーで表示」を選択します（Macの場合は表現が少し異なります）。
表示されたフォルダ内のindex.htmlをダブルクリックで開きます。
index.htmlがscript.jsを読み込み、alertの表示が実行されます。
alertは手軽に動作確認ができる反面、例えばループ処理の中に誤って入れてしまうと「無限に警告が出て操作不能になる」ことがあります。そのため、近年では本番環境ではあまり使用せず、主にテスト用途として使われます。JavaScriptを扱う際は実際に公開する前に動作確認を丁寧に行うことをおすすめします。
まとめ
JavaScriptはHTMLファイル内に直接記述して実行する方法と今回のように外部ファイルとして読み込む方法があります。特別な準備がなくてもブラウザとテキストエディタがあれば実行可能です。
HTMLファイル内でJavaScriptを実行するコード
<html>
<head>
</head>
<body>
<script>
alert("JavaScriptをHTMLファイル内で実行！");
</script>
</body>
</html>
上記コードをindex.htmlとして保存すると「JavaScriptをHTMLファイル内で実行！」というメッセージ(alert)が表示されます。
補足
テキストファイル（.txt）を作成し、拡張子を.jsや.htmlに変更することで、JavaScriptファイルやHTMLファイルとして利用できます。この記事は少しVSCode寄りの内容になりましたが、開発環境に慣れておくと後々とても楽になります。