こんにちは朱夏です。
前回に引き続き、JavaScriptの学習をしていきたいと思います。
今回はおみくじを作っていきます。
今回もドットインストールさんにお世話になります。
やっていることは前回の方が難しいように感じますが、実際はどうなんでしょうか？
それではやっていきたいと思います。
先ずはコードです。
今回はHTMLとCSSとJavaScriptの3ファイルに分けて書いています。
まずはHTMLからです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!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ファイルのコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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のコードです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
'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は数行で書けるということでした。
最小構成のコードはこんな感じになります。
|
1 2 3 4 5 6 7 8 9 10 |
'use strict' { const btn = document.getElementById('btn') btn.addEventListener('click', () => { const results = ['大吉', '中吉', '凶', '末吉']; btn.textContent = results[Math.floor(Math.random() * results.length)]; }) } |
簡単に説明すると、以下のようになります。
配列の数を増減させると自動的にランダムで出力される整数の数も変化するようになっています。
かっこだけの行を除けば5行で書けてしまいました。
私のイメージだと、ランダムの数が増える度にコードは数行増えるものだと思っていました。
実際には、おみくじの結果を増やしても、配列に書いた’吉’, ‘末吉’, ‘大凶’などの10文字程度だったのです。
今回はJavaScriptでおみくじを作ってみました。
今回学んだ内容としては以下のようなことです。
-
- switch文
- 配列
- 確率の指定の仕方
前回よりも動作としてはシンプルなものになっていますが、同じ実行結果だとしても、if文を使う方法、switch文を使う方法、配列を使う方法などいくつもの書き方があるなど、学べるところは大きかったと思います。
今回は以上です。
次回もよろしくお願いします。