『初心者向け』0からJavascriptのテスト環境を作る(サイコロのサンプルコード付き）

前回、いきなりプログラムの中のことをゴリゴリやってしまいましたが、手軽にjavascript開発環境が作れるなら、触ってみたい人もいるかな？ということで記事にします。
あと、自分がPCを変更したときに導入の備忘録用です。

テストコードとして、前回私が作ったサイコロコード、その前半部分（サイコロを振って、結果をテーブルに出力）のコードを使いますので、今回の記事通りやれば誰でも仮想サイコロツールの前半部分（自分のサイコロ結果みるところまで）はできるようになります。

その後の部分（データベースにSQLで登録して、結果を公開する）に関しても、前回の記事で詳細を解説していますが、前提としてデーターベース（レンタルサーバー等）が必要になりますし、処理も複雑なのでそちらはオススメはしません。
そもそも記事ではwordpressを前提としてますし。

Javascriptってなに？

ブラウザで動くプログラミング言語です。
C言語とか、VB(Visual Basic）とかの仲間ですね。
特徴として、コンパイル作業が（使い手目線では）必要ないということです。
実際はwebブラウザ(Google ChromeやMicrosoft Edge）が自動的に行ってくれます。

例えばhtmlファイルに全部詰め込んでしまえば、その1つのhtmlファイルと、それを開くためのwebブラウザがあれば動作します。
この「コンパイル作業が必要ない」というのが手軽に使える大きな要因です。

また、その性質上html（こちらもwebブラウザで使われる言語）との相性がよく、webページはphpを加えた3種の言語（＋データベース）で構成されるケースが多いです。

もう一つ、データを蓄積する「データベース」というのも連携内に入ってくるのですが、今回は触らないので割愛します。
こちらはPHPと同じくサーバー側に存在します。
ちなみに「データベース」で動く言語の代表はSQLですので、ご存じの方も多いかもしれません。
PHPも今回は触りませんが、javascriptとの違いを描きたかったので一応載せました。

今回扱うのは「HTML(とCSS)」「javascript」です。

VSC（Visual Studio Code）の導入

VSCはテキストツールの代わりですが、様々なコーディングサポート機能がついています。
特に大きい機能は、手軽にローカル環境で動作チェックができることです。

必須というわけではないですが、Javascriptのプログラムを作成する為には導入することをオススメします。

VSCのインストール

「Visual Studio Code」の公式に行き、「Visual Studio Codeをダウンロードする」からセットアップ用のファイルを入手します。

使用OSがwindowsであれば、この赤枠のところをクリックして、windows版をダウンロードして下さい。
クリックすると、なにやらスタートガイドみたいな英語のページが出てきますが閉じてＯＫです。

ダウンロードしたファイル「VSCodeUserSetup-x64-1.77.3.exe」をダブルクリックしてインストールしましょう。

基本的には「次へ」を押していけばいいのですが、インストールフォルダを変更したい場合は設定をしましょう。

PATHへの追加（再起動後に使用可能）とあるので、インストールが終わったら一度PCを再起動します。

VSCの初期設定

起動

再起動が終わったら、先ほどのインストールフォルダから起動します。

日本語化

①左下アイコンから、拡張機能（マーケットプレイス）に行きます

②検索窓に「日本語」と打ち込みます

③Japanese Language Pack for Visual Studio Codeの右にある「install」を押します

④右に詳細ウィンドウが出てくるので「Change Language and Restart」を押します。

自動でVSCが再起動し、日本語化されていると思います。

ワークスペースを設定

左中央辺りにある「フォルダーを開く」でワークスペースを開きます。
左上の「ファイル」⇒「フォルダーを開く」でもよいです（「ファイル」が出てこない場合はVSCの幅を広げてみて下さい）

今回はインストールフォルダの近くに「VSCworkspace」というフォルダを作成することにしました。
このフォルダ名は好きに設定してよいですが、アクセスしやすい場所にするといいと思います。

左のワークスペースエリアに「VSCworkspace」フォルダが出来ていると思うので、フォルダを右クリックし、「vsctest.html」というファイルを新規作成します。

そのままでもhtmlに出力できるのですが、今回は最終的にjavascriptの出力をしたいので、javascript形式でプログラムします。

コード

<script>alert("hello world!");</script>

今回はプログラムだとわかりやすいようalertにしました。
ウザいのでテストのときはあまり使わない出力方式です。

実行とデバッグを選択する前にその下の「launch.json」ファイルの作成を行います。
「launch.jsonファイルを作成します」をクリックすると、右に場所の選択を聞かれるので「VSCworkspace」にします。

デバッガー（ブラウザ）に関しては自分の使ってるものを選択して下さい。
私の場合はChromeを選択。

そうすると、ワークスペース(WSCworkspace)直下に「.vscodeフォルダ」と「launch.json」ファイルが作成されました。
実際に一度フォルダを確認しておきましょう。

左側画面が変化してますので、「実行とデバッグ」右側の▶ボタンを惜しみましょう。
webブラウザが開き「hello world」がポップアップ表示されれば成功です。
確認できたらブラウザを閉じてください。
ブラウザを閉じないと、次回のプログラムが動作しません。

ちなみに右の画面の “name”:”Open vstest.html”というのが、左画面の▶の右に出てる名前になります。
ここはわかりやすい名前（例：テスト実行）等にしてもらっても大丈夫です。

Live Server(拡張機能)を入れよう

このままテストに移っても良いのですが、今後のことを考えると、Live Serverの拡張機能だけは導入をオススメします。

Live Server

ローカルサーバーを立ち上げるための拡張機能。
ファイルの更新を「自動更新」にすることで、リアルタイムにhtmlの出力結果をみながらコーディングできるようになります。
今回はそこまで必要はないですが、今後CSSを触るようになると、CSSのコーディングをしながら画面の確認を行える点を踏まえ導入します。

他にも便利な拡張機能はありますが、早めに使い方に慣れた方が良いという意味でこれだけ紹介しました。
ここまで終わったら、一度VSCを閉じて次の項目に移ります。

実際にテストを行う流れ

本章では、実際にVSCの起動からの流れを見てみます。

VSCの起動

2つ方法があります。
①（インストールしたフォルダにある）Code.exeから起動する
私の場合は、ショートカットをデスクトップにおいてから起動しています。
② VSCに関連付けしたファイルを開いて起動

Live Serverを起動

VSCを閉じるたびにローカルサーバーは停止しますので、VSC立ち上げ時に右下の「Go Live」を押してください。
もしエラーワード（Open a folder or work space…)が出て、Live Serverの起動に失敗するようであれば、ワーキングスペース${workspaceFolder}の設定が消えている可能性があります。

その場合は以下を試してみて下さい。

プログラムを作成し、テスト実行

デバッグ中に使うのは左のタブのうちこの２つです。

ファイルタブでソース等の管理を行い、▶（テスト実行）タブでテストを実行します。
右側には開いているファイル内容が表示されます。

試しに以下のソースコードをvsctest.htmlに記述してみて下さい。

<!-- HTML -->
hello world(text)　<!-- ①  -->
<div id="t1"></div>

<script>
// javascript
document.getElementById("t1").innerHTML="hello world innerhtml";//②
console.log("hello world innerhtml console");//③
alert("hello world alert");//④
</script>

HTMLとjavascriptで完全にエリアが分かれているのが分かるでしょうか？
全体としてはHTMLになっていて、その中にjavascriptが間借りしている作りです。

上のコードは4種類の出力を並べているコードです。
① (HTML)そのままtext出力
② (javascript)”t1″というIDを持つエリアにテキスト出力する処理
③ (javascript)console画面に出力（VSCのデバッグ画面か、HTML画面F12で確認可能）
④ (javascript)HTML画面上にポップアップ出力

デバッグ時によく使うのが③で、実際のプログラム処理でよく使うのが②です。

②の処理方法は頻繁に使うことになります。
document.getElementById(“t1”)　⇒t1というidのところに
.innerHTML ⇒ HTML形式で出力

javascriptでサイコロゲームを作ってみよう

以下がコードになります。
ただし、サーバーとのやり取りに関するデータは削除してシンプルにしています。

diceroll_only.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Dice Roller</title>
    <style>
        .dice {
            width: 100px;
            height: 100px;
            display: inline-block;
            margin: 5px;
        }
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            text-align: center;
        }
        th {
            background-color: #ccc;
        }
		.flexbox {
  display: flex;
  flex-direction: row;
}
</style>
</head>
<body>
    <h1>Dice roller(6面ダイス)</h1>

	<label for="num-dice"><b>投擲者：</b></label>
    <input type="text" id="nagetahito"><br>
	未記入の場合は「名無し」になります。<br><br>

	<label for="num-dice"><b>サイコロの数:</b></label>
    <input type="number" id="num-dice" name="num-dice" min="1" max="10" value="2"><br>
	1～10の範囲で設定可能<br><br><br>

	<button onclick="rollDice()">サイコロを振る</button><br><br>
    <div class="flexbox" id="dice-result"></div><br><br>
    <table id="result-table">
        <thead>
            <tr>
                <th>投擲者ID</th>
                <th>ダイス結果</th>
                <th>投擲日時</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id="name"></td>
                <td id="total"></td>
                <td id="yyyymmddhhmmss"></td>
            </tr>
        </tbody>
    </table><br><br>
<script>

/****** global area *****/
var g_dicethrow;
var g_dicevalue;

/***************/


function rollDice() {
    const numDice = document.getElementById("num-dice").value;
    g_dicethrow = numDice;
    if (numDice > 10) {
        alert("サイコロが多すぎます");
        return;
    }
  
    const diceImages = [];
    for (let i = 1; i <= 6; i++) {
        diceImages[i] = new Image();
  diceImages[i].src = `./dice${i}.jpg`;
  
    }
  
    let total = 0;
    const resultDiv = document.getElementById("dice-result");
    resultDiv.innerHTML = "";
  
    const rollDiceHelper = function(diceNum, currentRoll, rollCount) {
        const rollInterval = 200;
        const rollMax = 10;
        
        setTimeout(function() {
            const roll = Math.floor(Math.random() * 6) + 1;
currentRoll.innerHTML  = `<img class="dice" src="${diceImages[roll].src}" alt="${roll}">`;
if (rollCount < rollMax) {
                rollDiceHelper(diceNum, currentRoll, rollCount + 1);
            } else {
                total += roll;
                if (diceNum == numDice) {
                    g_dicevalue = total;
                    addTotalToTable();


                }
            }
        }, rollInterval);
    };
  
    for (let i = 1; i <= numDice; i++) {
        const currentRoll = document.createElement("div");
        currentRoll.classList.add("dice");
        resultDiv.appendChild(currentRoll);
        rollDiceHelper(i, currentRoll, 0);
    }

}
  
  
  function addTotalToTable() {
    var nameid = document.getElementById("nagetahito").value;

    if (nameid == ""){
        nameid = "名無しさん";
    }
    document.getElementById("name").textContent = nameid;

    var str = g_dicethrow + "D6 -> " +  g_dicevalue;
    document.getElementById("total").textContent = str;

    const now = new Date();
    const formattedDate = formatDate(now);
    document.getElementById("yyyymmddhhmmss").textContent = formattedDate;
  }

  function formatDate(date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
    return year + "年" + month + "月" + day + "日" + hours + "時" + minutes + "分" + seconds + "秒";
  }



</script>

</body>
</html>

自分の作成したファイルの一部を切り取っただけなので、無駄な処理があると思います。
使っていない変数などがあるせいか、VSCから問題点を提示されますが気にしないで下さい。
※追記：この「問題」は私がCode Spell Chackerという拡張機能を入れていたのが原因でした
サイコロの画像が表示されないと思うので、以下のファイルを解凍して(出てきた6つの画像ファイルをそれぞれ）diceroll_only.htmlと同じフォルダに配置して下さい。

プログラムに問題がある場合は、console.logコマンドで問題がありそうな変数を出力することでデバッグしていきます。
コンソールエリアは右上のアイコンからON/OFFができます。

最後に

上手くVSCの設定ができたでしょうか？

javascriptはコンパイルも必要なく扱いやすい言語だと思いますし、使い道も多いです。
もし今後サイト運営をするのであれば、覚えておいて損はない知識だと思うので、VSCを使いこなせるようになりましょう（自分もまだまだですが）。