0から始めるJavaScriptの学習記録

こんにちは朱夏です。

今回からJavaScriptを学習していこうと思います。

今まではHTMLやCSSの機能で何とかなっていましたが、そろそろしっかり学習しておきたいなと思ったので頑張っていきたいと思います。

今日は初回なので基本の部分から学んでいきます。

お世話になるサイトはこちらです。
プログラミング学習をしている人なら一度はお世話になるであろうドットインストールさん。

ドットインストール

はじめてのJavaScript (全11回)

https://dotinstall.com/lessons/basic_javascript_v4

ブラウザを操作することができるJavaScriptについて、簡単なゲームを作りながら基礎を学んでいきます。

こちらの「初めてのJavaScript(全11回)」を見ながらコードを書いてみました。

コード

出来上がったコードがこちらです。

<!DOCTYPE html>
<html lang="ja">
   <head>
      <meta charset="UTF-8"> 
      <title>JavaScript練習</title>
      <style>
         #inbox {
            display: flex;
            flex-wrap: wrap;
         }

         .box {
            margin: 15px;
            width: 100px;
            height: 100px;
            background: skyblue;
            cursor: pointer;
            transition: 0.8s;
            text-align: center;
            line-height: 100px;
         }

         .win {
            background-color: red;
            border-radius: 50%;
            transform: rotate(360deg);
         }

         .lose {
            transform: scale(0.9);
         }
      </style>
   </head>
   <body>
      <!----- ヘッダー ----->
      <header>JavaScript練習</header>
      <!----- ヘッダー END ----->
      <!----- メインコンテンツ ----->
      <div id="inbox"></div>
      <!----- メインコンテンツ END ----->
      <!----- フッター ----->
      <footer>
         <p class="">(c)test.com</p>
      </footer>
      <!----- フッター END ----->
      <script>
         'use strict' ;

         const num = 5;
         const winner = Math.floor(Math.random() * num); 

         for (let i = 0; i < num; i++) {
            const div = document.createElement('div')
            div.classList.add('box')


            div.addEventListener('click', () => {
               if (i === winner) {
                  div.textContent = "Win!";
                  div.classList.add('win');
               } else {
                  div.textContent = "Lose!";
                  div.classList.add('lose');
               }
            });

            document.getElementById('inbox').appendChild(div);
         }
      </script>
   </body>
</html>

<!DOCTYPE html>

<head>

<title>JavaScript練習</title>

<style>

#inbox {

display: flex;

flex-wrap: wrap;

}

.box {

margin: 15px;

width: 100px;

height: 100px;

background: skyblue;

cursor: pointer;

transition: 0.8s;

text-align: center;

line-height: 100px;

}

.win {

background-color: red;

border-radius: 50%;

transform: rotate(360deg);

}

.lose {

transform: scale(0.9);

}

</style>

</head>

<body>

<header>JavaScript練習</header>

</footer>

'use strict' ;

const num = 5;

const winner = Math.floor(Math.random() * num);

for (let i = 0; i < num; i++) {

const div = document.createElement('div')

div.classList.add('box')

div.addEventListener('click', () => {

if (i === winner) {

div.textContent = "Win!";

div.classList.add('win');

} else {

div.textContent = "Lose!";

div.classList.add('lose');

}

});

document.getElementById('inbox').appendChild(div);

}

</script>

</body>

</html>

多少いじってはいますが、ほぼドットインストールで学んだことそのままのコードになります。

解説

JavaScriptの記述は、</body>の直前に書かれている<script>～</script>までの25行くらいです。

全部初見なので順番に意味を見ていきます。

‘use strict’ ;

ググると（厳格モード）というキーワードが出てきました。
どうやらエラーチェックができるモードの様です。
それにより、通常では代入すれば勝手に宣言されるグローバル変数が、正規の手法で宣言しないといけなかったりするらしいです。
初心者や、これから他のプログラミング言語を学ぶ予定の人にとっては厳格モードを有効にしておいた方が良さそうですね。

const num = 5;

constは、変数の宣言方法の1つです。
constで宣言された変数は「書き換え禁止」になるそうです。
この場合、変数numを宣言し、５を代入しますよという意味になります。
そして、numの中身は5から書き換え禁止になっています。

const winner = Math.floor(Math.random() * num);

変数winnerにランダムで0～4の整数を代入しています。
まず先に、Math.random()は、0以上～1未満の小数点以下のランダムな乱数を返します。
それにnum(代入されている5)を掛けています。
例：ランダムの乱数が0.123だった場合
0.831*５＝4.155

Math.floorは、上記の計算結果から、最大の整数を返します。
今回の場合、整数は4になります。
単純に小数点以下を切り捨てた数値になる様です。
これにより、ランダムで0～4の整数をゲット出来ました。

for (let i = 0; i < num; i++) {～}

繰り返し構文です。
変数iを0からカウントして、変数num未満なら｛～｝内の処理を繰り返すという命令文ですね。
繰り返し条件は色々指定方法がありますが、長くなるので今回は割愛します。

const div = document.createElement(‘div’)

これはちょっとわかりにくいかもですが、変数divに「<div></div>を作成する処理」を代入していると言えばいいのでしょうか。
これにより、divと書けば、「<div></div>」が作成されます。

div.classList.add(‘box’)

作成したdivタグにboxというclassを付与する命令文です。

div.addEventListener(‘click’, () => {～}