QuestScript

08. はじめてのJavaScript

これまでのレッスンでは、HTMLで画面の構造を作り、CSSで見た目を整えてきました。このレッスンからは、JavaScriptを使ってプログラムを書く方法を学びます。

JavaScriptを使うと、Webページ上でプログラムを動作させて、戦闘シーンを実際に動かすことができます。

HTMLにJavaScriptを埋め込む

HTMLファイルにJavaScriptを書くには、<script>タグを使います。レッスン7で作ったHTMLファイルに、<script>タグを追加しましょう。

</body>の直前に、次のように3行を追加してください。

<!-- battle.html highlight:24-26 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
    <link rel="stylesheet" href="css/battle.css">
</head>
<body>
    <table id="status">
        <tr>
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div id="monster">
        <img class="dark-knight" src="img/dark-knight.png">
        <img class="dark-lord" src="img/dark-lord.png">
        <img class="demon-priest" src="img/demon-priest.png">
    </div>
    <div id="message">
        まおうがあらわれた。
    </div>
    <script>
        console.log(42);
    </script>
</body>
</html>

/* battle.css hidden */
body {
    background-color: rgb(34, 34, 34);
    color: white;
    font-family: sans-serif;
}
table#status {
    border: solid 2px white;
    border-collapse: collapse;
    margin: 10px auto 0 auto;
    width: 640px;
}
table#status tr:first-child {
    border-bottom: solid 1px white;
}
table#status td {
    text-align: center;
}
#monster {
    text-align: center;
    margin-top: 40px;
}
#monster .dark-lord {
    width: 400px;
}
#monster .dark-knight {
    width: 150px;
}
#monster .demon-priest {
    width: 150px;
}
#message {
    border: solid 2px white;
    border-radius: 4px;
    padding: 10px;
    width: 720px;
    margin: 30px auto;
}

ファイルを保存して、ブラウザで開いてください。画面の見た目は変わりませんが、JavaScriptが実行されています。

console.log()は、括弧の中の値を「コンソール」に表示する命令です。実行結果を確認するために、コンソールを開いてみましょう。

コンソールを開く

ブラウザには「開発者ツール」という機能があり、その中の「コンソール（Console）」でJavaScriptの出力を確認できます。

Edgeの場合

  1. ページ上で右クリック →「検査」を選択
  2. または F12 キーを押す
  3. 開発者ツールが開いたら「コンソール」タブをクリック

Chromeの場合

  1. ページ上で右クリック →「検証」を選択
  2. または F12 キーを押す
  3. 開発者ツールが開いたら「Console」タブをクリック

Safariの場合（macOS）

Safariでは、最初に開発者向け機能を有効にする必要があります（初回のみ）。

  1. メニューバーの「Safari」→「設定」を選択
  2. 「詳細」タブを開く
  3. 「Webデベロッパ用の機能を表示」にチェックを入れる

有効にしたら、以下の手順でコンソールを開きます。

  1. ページ上で右クリック →「要素の詳細を表示」を選択
  2. または Cmd + Option + I を押す
  3. 「コンソール」タブをクリック

コンソールを開くと、42と表示されているはずです。表示されれば成功です。これがconsole.log(42)の実行結果です。

console.log で出力する

console.log()は、括弧の中の値をコンソールに表示します。数値だけでなく、計算結果も表示できます。

<script>タグの中を次のように書き換えて、保存してからブラウザをリロードしてください。

<!-- battle.html selection:24-26 highlight:25 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
    <link rel="stylesheet" href="css/battle.css">
</head>
<body>
    <table id="status">
        <tr>
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div id="monster">
        <img class="dark-knight" src="img/dark-knight.png">
        <img class="dark-lord" src="img/dark-lord.png">
        <img class="demon-priest" src="img/demon-priest.png">
    </div>
    <div id="message">
        まおうがあらわれた。
    </div>
    <script>
        console.log(2 + 3);
    </script>
</body>
</html>

コンソールに5と表示されます。2 + 3が計算されて、その結果が表示されました。

数値と文字列

次のコードを試してみてください。

<!-- battle.html selection:24-26 highlight:25 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
    <link rel="stylesheet" href="css/battle.css">
</head>
<body>
    <table id="status">
        <tr>
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div id="monster">
        <img class="dark-knight" src="img/dark-knight.png">
        <img class="dark-lord" src="img/dark-lord.png">
        <img class="demon-priest" src="img/demon-priest.png">
    </div>
    <div id="message">
        まおうがあらわれた。
    </div>
    <script>
        console.log("2 + 3");
    </script>
</body>
</html>

今度は2 + 3とそのまま表示されます。計算されていません。

""（ダブルクォーテーション）で囲むと、中身は計算されずに文字列として扱われます。先ほどの2 + 3は数値として計算されましたが、"2 + 3"は文字として表示されます。

コード 結果 説明
console.log(2 + 3) 5 数値として計算される
console.log("2 + 3") 2 + 3 文字列としてそのまま表示

テンプレートリテラル

文字列と計算結果を組み合わせたいときは、テンプレートリテラルを使います。

<!-- battle.html selection:24-26 highlight:25 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
    <link rel="stylesheet" href="css/battle.css">
</head>
<body>
    <table id="status">
        <tr>
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div id="monster">
        <img class="dark-knight" src="img/dark-knight.png">
        <img class="dark-lord" src="img/dark-lord.png">
        <img class="demon-priest" src="img/demon-priest.png">
    </div>
    <div id="message">
        まおうがあらわれた。
    </div>
    <script>
        console.log(`2 + 3 = ${2 + 3}`);
    </script>
</body>
</html>

コンソールに2 + 3 = 5と表示されます。

テンプレートリテラルでは、バッククォート（`）で文字列を囲みます。${}の中に書いた式は計算されて、結果が文字列に埋め込まれます。

ダメージを計算する

それでは、RPGらしくダメージの計算をしてみましょう。

攻撃力と防御力から、ダメージはどのように計算すればいいでしょうか？攻撃力が高いとダメージが高くなります。逆に、防御力が高いとダメージは低くなります。単純に考えると次のような計算式が考えられます。

ダメージ = 攻撃力 - 防御力

しかし、これだと単純すぎておもしろみに欠けます。次のように、2で割って計算することにしましょう。

ダメージ = (攻撃力 - 防御力) ÷ 2

「ゆうしゃ」の攻撃力は162、「まおう」の防御力は58として、ダメージの計算をJavaScriptで書いてみましょう。

<!-- battle.html selection:24-26 highlight:25 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
    <link rel="stylesheet" href="css/battle.css">
</head>
<body>
    <table id="status">
        <tr>
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div id="monster">
        <img class="dark-knight" src="img/dark-knight.png">
        <img class="dark-lord" src="img/dark-lord.png">
        <img class="demon-priest" src="img/demon-priest.png">
    </div>
    <div id="message">
        まおうがあらわれた。
    </div>
    <script>
        console.log((162 - 58) / 2);
    </script>
</body>
</html>

/ は割り算を表します。「÷」は使えないので注意してください。

実行すると、コンソールに52と表示されます。

次は、テンプレートリテラルを使って、メッセージとして表示してみましょう。

<!-- battle.html selection:24-26 highlight:25 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
    <link rel="stylesheet" href="css/battle.css">
</head>
<body>
    <table id="status">
        <tr>
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div id="monster">
        <img class="dark-knight" src="img/dark-knight.png">
        <img class="dark-lord" src="img/dark-lord.png">
        <img class="demon-priest" src="img/demon-priest.png">
    </div>
    <div id="message">
        まおうがあらわれた。
    </div>
    <script>
        console.log(`まおうに${(162 - 58) / 2}のダメージ。`);
    </script>
</body>
</html>

コンソールにまおうに52のダメージ。と表示されます。

HTMLの要素を操作する

コンソールに表示するだけでなく、ページ上のメッセージボックスに表示してみましょう。

メッセージボックスの内容を書き換えるには、HTMLのどの要素を書き換えたいか指定する必要があります。CSSのときと同じように、JavaScriptから要素を指定するのにもid属性が使えます。

メッセージボックスのidはmessageでした。

<!-- battle.html selection:21-23 highlight:21 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
    <link rel="stylesheet" href="css/battle.css">
</head>
<body>
    <table id="status">
        <tr>
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div id="monster">
        <img class="dark-knight" src="img/dark-knight.png">
        <img class="dark-lord" src="img/dark-lord.png">
        <img class="demon-priest" src="img/demon-priest.png">
    </div>
    <div id="message">
        まおうがあらわれた。
    </div>
    <script>
        console.log(`まおうに${(162 - 58) / 2}のダメージ。`);
    </script>
</body>
</html>

JavaScriptからは、次のように、document.getElementByIdを使って要素を指定することができます。

document.getElementById("message")

要素を指定すると、次はその中身を書き換える必要があります。要素の中身にはtextContentでアクセスできます。たとえば、次のように書くとメッセージボックスの中身をABCに書き換えることができます。

<!-- battle.html selection:24-26 highlight:25 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
    <link rel="stylesheet" href="css/battle.css">
</head>
<body>
    <table id="status">
        <tr>
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div id="monster">
        <img class="dark-knight" src="img/dark-knight.png">
        <img class="dark-lord" src="img/dark-lord.png">
        <img class="demon-priest" src="img/demon-priest.png">
    </div>
    <div id="message">
        まおうがあらわれた。
    </div>
    <script>
        document.getElementById("message").textContent = "ABC";
    </script>
</body>
</html>

修正が終わったらリロードしてみてください。メッセージボックスにABCと表示されれば成功です。

では、次は「まおうに⚪︎⚪︎のダメージ。」と表示してみましょう。テンプレートリテラルで書いた`まおうに${(162 - 58) / 2}のダメージ。`と組みわせれば次のように書けます。

<!-- battle.html selection:24-26 highlight:25 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
    <link rel="stylesheet" href="css/battle.css">
</head>
<body>
    <table id="status">
        <tr>
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div id="monster">
        <img class="dark-knight" src="img/dark-knight.png">
        <img class="dark-lord" src="img/dark-lord.png">
        <img class="demon-priest" src="img/demon-priest.png">
    </div>
    <div id="message">
        まおうがあらわれた。
    </div>
    <script>
        document.getElementById("message").textContent = `まおうに${(162 - 58) / 2}のダメージ。`;
    </script>
</body>
</html>

ファイルを保存してリロードすると、メッセージボックスに「まおうに52のダメージ。」と表示されます。

試してみよう

これまでの成果

<!-- battle.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>バトル</title>
    <link rel="stylesheet" href="css/battle.css">
</head>
<body>
    <table id="status">
        <tr>
            <th>ゆうしゃ</th><th>せんし</th><th>そうりょ</th><th>まほうつかい</th>
        </tr>
        <tr><td>HP 153</td><td>HP 198</td><td>HP 101</td><td>HP 77</td></tr>
        <tr><td>MP 25</td><td>MP 0</td><td>MP 35</td><td>MP 58</td></tr>
    </table>
    <div id="monster">
        <img class="dark-knight" src="img/dark-knight.png">
        <img class="dark-lord" src="img/dark-lord.png">
        <img class="demon-priest" src="img/demon-priest.png">
    </div>
    <div id="message">
        まおうがあらわれた。
    </div>
    <script>
        document.getElementById("message").textContent = `まおうに${(162 - 58) / 2}のダメージ。`;
    </script>
</body>
</html>

/* battle.css folded */
body {
    background-color: rgb(34, 34, 34);
    color: white;
    font-family: sans-serif;
}
table#status {
    border: solid 2px white;
    border-collapse: collapse;
    margin: 10px auto 0 auto;
    width: 640px;
}
table#status tr:first-child {
    border-bottom: solid 1px white;
}
table#status td {
    text-align: center;
}
#monster {
    text-align: center;
    margin-top: 40px;
}
#monster .dark-lord {
    width: 400px;
}
#monster .dark-knight {
    width: 150px;
}
#monster .demon-priest {
    width: 150px;
}
#message {
    border: solid 2px white;
    border-radius: 4px;
    padding: 10px;
    width: 720px;
    margin: 30px auto;
}
arrow_back前へ次へ: 09. JavaScriptファイルarrow_forward