えんぺ工房in Maizuru-shi,Kyoto

今回はJS(JavaScript)でおみくじを作っていきたいと思います。

私のJavaScript勉強法

教材：ドットインストール https://dotinstall.com/lessons
「JavaScriptでミニアプリを作ってみよう」

手順：
１．教材のミニアプリの完成品を確認する。
（完成品は「おみくじ」とか「三択クイズ」とかになります。）
２．HTMLは教材をコピーする。
３．CSSは完成品を参考に自分で考えて作成していく。
４．JavaScriptも完成品を参考に自分で考えて作成していく。
５．ひととおり完成したら教材を見て答え合わせをする。

ドットインストール 3分動画でマスターするプログラミング学習サービス

「AI先生」について

このブログで出てくる「AI先生」とは、「サムライテラコヤ」というオンラインプログラミングの学習サイトのQ＆Aコーナーで使うことのできるものです。質問をしたらAIの先生が回答してくれます。
３０秒程度という短時間で驚くほど的確な回答を出してくれます（有料）。

SAMURAI TERAKOYA

おみくじを確認する

今回はドットインストール「JavaScriptでおみくじを作ろう」の教材を使用します。
（この章は無料で学習できます。）

「おみくじ」の完成品の確認

「おみくじを引く」ボタンを押すと「？」の箇所にランダムに大吉、中吉などのおみくじを表示します。

CSSを作成

まずは、教材のHTMLをコピーして、CSSを作成してみます。

少しchromeの開発者ツールと教材のコードも見ましたが、できました！

このアプリのCSSで勉強になった点は以下の２点

buttonのデフォルトのCSS設定を解除したいとき
button {
all: unset;
}

buttonをクリックしたときの動きの付け方
button:active{
…
}

JavaScriptを作成

CSSを作成して見た目は近づけたので、JavaScriptを考えていきます。
JavaScriptのゴールを考えてみます。
ゴールは、
『ボタンをクリックで、「？」の部分に「大吉・中吉・小吉・凶」をランダムに表示する。』
でしょうか

ゴールにたどりつくまでを表にします。

表の空欄にゴールにたどり着くために思いつく必要な内容を入れていきます。

1-1 ボタンクリックで「？」の部分に何か文字を表示させてみる。

ゴールにいきつくために、まずはボタンクリックで「？」の部分に何か文字を表示させてみます。
何かは「TEST」とします。

//#（id）resultの要素をpという定数で取得
const p = document.getElementById(result);
//#（id）btnの要素をbtnという定数で取得
const btn = document.getElementById(btn);
//btnをクリックした時、定数pのテキストを「TEST」にする
btn.addEventListener('click',function(){
  p.textContent = 'TEST';
});
  

「おみくじを引く」のボタンをクリックして
「TEST」が表示されました。

2-11〜100までのランダム数をコンソールに表示

→1〜100までのランダム数
const random = Math.floor(Math.random()*(100+1-1))+1
//上記をコンソールに表示
console.log(random);
  

1〜100までのランダム数をコンソールに表示できました。

3-1くじの配列を作り「？」に「大吉」を出す

//おみくじの配列を作成
const kuji = ['大吉','中吉','小吉','凶'];
//ボタンクリックでおみくじクリックで「？」の初期状態を「大吉」に変える
btn.addEventListener('click',function(){
p.textContent = kuji[0];
});
  

「？」の部分に「大吉」を出せました。

ゴールボタンをクリックで、「？」の部分に「大吉・中吉・小吉・凶」をランダムに表示する。

1〜3の内容とif分岐でゴールが作成できそうだったので試してみます。

btn.addEventListener('click',function(){
const random = Math.floor(Math.random()*(100+1-1))+1;
console.log(random);
  
if(0<= random < 31){
  p.textContent = kuji[0];
  }else if(31<= random < 60){
    p.textContent = kuji[1];
  }else if(61<= random < 90){
    p.textContent = kuji[2];
  }else{
    p.textContent = kuji[3];
  }
});
//大吉、中吉、小吉を30%、凶を10%の確率で出るように試みました。
  

？？大吉しか出ない？？
やっぱりそんな単純にはいかないな

何が悪いのか分からない、とりあえず「AI先生」にきいてみます。
(「AI先生」については、このブログの冒頭で書いていますので、気になる方は見てみてくださいね。)

あ！なるほど。数式のようにはいかず、かつ＝「&&」を使うんだ

以下のように書き換えると、たしかに「大吉」「中吉」「小吉」「凶」がランダムに出ました。

btn.addEventListener('click',function(){
    const random = Math.floor(Math.random()*(100+1-1))+1;
    console.log(random);
  
    if(0<= random && random< 31){
      p.textContent = kuji[0];
    }else if(31<= random && random < 60){
      p.textContent = kuji[1];
    }else if(61<= random && random < 90){
      p.textContent = kuji[2];
    }else{
      p.textContent = kuji[3];
    }
  });

AI先生めっちゃすごい！！

自作のJavaScriptコードを最初から全部書くと以下の通り

const p = document.getElementById('result');
  const btn = document.getElementById('btn');
  const kuji = ['大吉','中吉','小吉','凶'];
  
  btn.addEventListener('click',function(){
    const random = Math.floor(Math.random()*(100+1-1))+1;
    console.log(random);
  
    if(0<= random && random< 31){
      p.textContent = kuji[0];
    }else if(31<= random && random < 60){
      p.textContent = kuji[1];
    }else if(61<= random && random < 90){
      p.textContent = kuji[2];
    }else{
      p.textContent = kuji[3];
    }
  });

教材の動画で確認

自作のコードが作成できたので、ドットインストールの動画の教材を見て確認します。
ドットインストール「JavaScriptでおみくじを作ろう」https://dotinstall.com/lessons/omikuji_js_v6

ドットインストールの教材は全12章で、
1〜7章 HTML、CSSの解説
8〜12章 JSの解説
となっていました。

1〜7章のCSSについては、自作のコードと差異はありましたが、
動画を見ていて「あ、こっちの作り方のほうがいいな」と頷ける内容となっていました。

8〜12章はJavaScriptの解説です。

教材では、
くじ引きは大吉、中吉、凶の３通り、同確率で引くといったものとなっていました。

確率を均等に分けるため、ランダム整数は０〜２までとしていました。
（「０」が出たら「大吉」、「1」が出たら「中吉」、「２」が出たら「凶」という振り分け方）

ランダム整数は０〜２までの作成方法
const n = Math.floor(Math.random() * 3);

作成の方法はif文ではなく、
①switch文
と、
②配列のみ
の２通りの方法で作成していました。

ここでは教材の動画のJavaScriptコードのポイントのみ書きますが、

①switch文を使用したもの

#btnのclickイベント
  {
    const n = Math.floor(Math.random() * 3);

    switch (n) {
      case 0:
        result.textContent = '大吉';
        break;
      case 1:
        result.textContent = '中吉';
        break;
      case 2:
        result.textContent = '凶';
        break;
    }
  }
  

「JavaScriptでおみくじを作ろう」#11
https://dotinstall.com/lessons/omikuji_js_v6/60911
（この教材は無料で視聴できます。）

②配列のみ

#btnのclickイベント 
  {
  const results = ['大吉', '中吉', '凶', '小吉'];
  const n = Math.floor(Math.random() * results.length);

  result.textContent = results[n];
  };
  

「JavaScriptでおみくじを作ろう」#12
https://dotinstall.com/lessons/omikuji_js_v6/60912（この教材は無料で視聴できます。）

動画で解説している内容は分かりますが、分かった気にならず、教材を参照せずに自分でコードを書いてみます。

できました！

1箇所間違えて、教材見直したけど

満足したので、この「おみくじ」作成は終了します。

おみくじ完成品の紹介

最後に、ドットインストールのHTMLのコピー（一部変更）と、自作のCSS及びJavaScriptで作成した「おみくじ」はこちら！

最後まで読んでいただいた方、ありがとうございました！