0から始めるJavaScriptの学習記録　その２　【おみくじを作ってみた】

こんにちは朱夏です。

前回に引き続き、JavaScriptの学習をしていきたいと思います。
今回はおみくじを作っていきます。

今回もドットインストールさんにお世話になります。

ドットインストール

JavaScriptでおみくじを作ろう (全9回)

https://dotinstall.com/lessons/omikuji_js_v5

JavaScriptで簡単なおみくじを実装する方法について学んでいきます。

やっていることは前回の方が難しいように感じますが、実際はどうなんでしょうか？
それではやっていきたいと思います。

コード

先ずはコードです。
今回はHTMLとCSSとJavaScriptの3ファイルに分けて書いています。

まずはHTMLからです。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>おみくじ</title>
      <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
      <!----- ヘッダー ----->
      <header>おみくじ</header>
      <!----- ヘッダー END ----->
      <!----- メインコンテンツ ----->
      <div id="btn">クリックしてね！</div>
      <!----- メインコンテンツ END ----->
      <!----- フッター ----->
      <footer>
         <p class="">(c)test.com</p>
      </footer>
      <!----- フッター END ----->
      <script src="js/sample.js"></script>
   </body>
</html>

基本的なテンプレートとstyle.css、sample.jsを読み込んでいるだけですね。
HTMLとして表示させてるのは「タイトル」、「ヘッダー」、「クリックしてね！」、「フッター」の４つだけです。

次にCSSファイルのコードです。

body {
    background: grey;
}

#btn {
    width: 200px;
    height: 200px;
    background: red;
    border-radius: 50%;
    margin: 30px;
    text-align: center;
    line-height: 200px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 10px 0 #b34139;
    user-select: none;
}

#btn:hover {
    opacity: 0.9;
}

#btn:active {
    box-shadow: 0 5px 0 #b34139;
    margin-top: 35px;
    margin-bottom: 25px;
}

こちらはボタンのスタイルを指定しています。
ボタンを押したときの動きもスタイルで動かしていますね。

次はsample.jsのコードです。

'use strict'

{
    const btn = document.getElementById('btn')

    btn.addEventListener('click', () => {
        // const results = ['大吉', '中吉', '凶', '末吉'];
        // const n = Math.floor(Math.random() * results.length);
        // btn.textContent = results[n];
        // 上2行と下の1行は同じ処理
        // btn.textContent = results[Math.floor(Math.random() * results.length)];
        
        const n = Math.random();
        if (n < 0.05) {
            btn.textContent = '大吉';
        } else if (n < 0.2){
            btn.textContent = '中吉';
        } else {
            btn.textContent = '凶';
        }
        
        // 大吉、中吉、小吉がランダムで表示される
        // const n = Math.floor(Math.random() * results.length);
        // switch (n) {
        //     case 0:
        //         btn.textContent = '大吉';
        //         break;
        //     case 1:
        //         btn.textContent = '中吉';
        //         break;
        //     case 2:
        //         btn.textContent = '凶';
        //         break;
        // }
    })
}

勉強中に書いたコードはコメントアウトしてそのまま残しました。
ブラウザで見た感じは同じに見えますが、書き方はいくつもあるのだということが解りました。

解説

今回驚いたのが、見た目にこだわらなければ、おみくじを作るのにJavaScriptは数行で書けるということでした。

最小構成のコードはこんな感じになります。

'use strict'

{
    const btn = document.getElementById('btn')

    btn.addEventListener('click', () => {
        const results = ['大吉', '中吉', '凶', '末吉'];
        btn.textContent = results[Math.floor(Math.random() * results.length)];
    })
}

簡単に説明すると、以下のようになります。