Alterbo Inc.
お問い合わせ

BLOG

ドットインストールを見ながらJSでおみくじゲーム制作メモ

目次

事前準備

・ドットインストールで「ウェブサイトを作れるようになろう」の講座を修了している。
・VS Codeがインストールされている。
・HTMLファイルの作成とCSSの適応が出来るレベルの人向けの記事です。

少し長くなるのでJavaScriptの部分は別の記事で解説。

コーディングしよう

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おみくじ</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
	<div id="btn">?</div>

	<script src="js/main.js"></script>
</body>
</html>

main.js

"use strict";
{
  const btn = document.getElementById(`btn`);

  btn.addEventListener(`click`,() => {
    btn.textContent=`hit`;
  });
}

style.css

body{
  background: #efefef;
}
#btn{
  width: 200px;
  height: 200px;
  background-color:red;
  border-radius: 50%;
  margin: 30px auto;
  text-align: center;
  line-height: 200px;
  color: white;
  font-weight: bold;
  font-size: 42px;
  cursor: pointer;
  box-shadow: 0 10px 0 #d1483e;
  user-select: none;
}
#btn:hover{
  opacity: 0.9;
}

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

HTMLの解説

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おみくじ</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
	<div id="btn">?</div>

	<script src="js/main.js"></script>
</body>
</html>

<!DOCTYPE html>

この宣言はこの文章がHTML5のドキュメントであることを宣言する。
今はほぼ新規で使われないがHTML4.01だとこんな宣言。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

詳しくはDTD（Document Type Definition）から解説が必要になるので割愛

<html>

このドキュメントがHTMLで書かれたであることを指定するタグ。
俗にHTMLというとこのタグに囲まれた範囲を指す。
逆にこのタグの範囲外だとhtmlタグと認識されない。

<head>

HTML文書のヘッダ部分を指定するタグ。
後述するtitleタグやmetaタグなど、HTMLの属性などメタデータ（このデータについてのデータ）を記述していく。

<meta>

HTML文書の文字コードや概要、検索エンジンに認識させるメタ情報を宣言するタグ。
<meta 【属性=”属性値” >で宣言され今回のソースだとcharset=”UTF-8″なので
「charset属性（文字コードを指す）はUTF-8です」
という宣言になる。
headタグの中にしか記述できない。

<title>

HTML文書のタイトルを指定するタグ。ブラウザのタイトルバーやブックマーク時に読み込まれるのは、基本的にtitleタグに書かれた内容が適用される。
headタグの中にしか記述できない。

<link>

このHTML文章と関連するファイルを指定して定義するタグ。
headタグの中にしか記述できない。
<link rel=”stylesheet” href=”css/styles.css”>の記述ではrel（関連ファイル）でstylesheet属性であること、hrefで場所を指定している。

<body>

実際にブラウザへ表示される内容を指定するタグで、webサイトを見ているときブラウザに表示されるのはこの部分。大きさ、色、画像や動画などのメディアを埋め込んだり見た目に関わる。

CSSの解説

body{
  background: #efefef;
}
#btn{
  width: 200px;
  height: 200px;
  background-color:red;
  border-radius: 50%;
  margin: 30px auto;
  text-align: center;
  line-height: 200px;
  color: white;
  font-weight: bold;
  font-size: 42px;
  cursor: pointer;
  box-shadow: 0 10px 0 #d1483e;
  user-select: none;
}
#btn:hover{
  opacity: 0.9;
}

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

CSSとはなんぞや？という部分はそれとなく理解ると思うので割愛。

セレクタ｛
　プロパティ　：　値；
｝

CSSの基本文法
セレクタ：HTML上のどの要素に対応するか
プロパティ：何を変更するか（大きさ、色、形etc…）
値：プロパティに対応する値

body{
background: #efefef;
}
であればbody要素のbackground（背景）をefefef;（白色っぽく）変更するとい命令になる。
#btn要素もプロパティは多いがbtn要素の見た目を変更する内容が並んでいる。
#btn:hoverは:hoverという擬似クラスを付加してマウスポインタが当たっている時のbtn要素に対してopacity（不透明度）を0.9倍にするという処理になっている。

JavaScriptの解説

"use strict";
{
  const btn = document.getElementById(`btn`);

  btn.addEventListener(`click`,() => {
    btn.textContent=`hit`;
  });
}

use strict

JavaScriptの先頭に記載することによってstrictモード（厳格なエラーチェックをする）で処理が実行される。

引用＝＝＝＝＝

strict モードでは、通常の JavaScript の意味にいくつかの変更を加えます。第一に strict モードでは、JavaScript でエラーではないが落とし穴になる一部の事柄を、エラーが発生するように変更することで除去します。第二に strict モードでは、JavaScript エンジンによる最適化処理を困難にする誤りを修正します: strict モードのコードは、非 strict モードの同一コードより高速に実行できることがあります (Firefox 4 ではまだ strict モードにあまり最適化していませんが、将来のバージョンで実現するでしょう)。第三に strict モードでは、将来の ECMAScript で定義される予定の構文を禁止します。

Mozilla Developer Network
＝＝＝＝＝＝

特殊なケースを除いて、最初に記述するお約束として覚えておくといい。

const btn = document.getElementById(btn);

const 〇〇は定数の宣言。
document.getElementById()は一致するidプロパティ
（今回はHTMLファイルにdiv要素のプロパティで付加されている）の要素を表すElementオブジェクトを返す。
HTMLタグの中から指定したidを取得して処理をする時に使う。
このコードでは「btn」という変数を宣言しHTMLファイルのbtn要素を値に持つ。

btn.addEventListener(click,() => {btn.textContent= hit ;});

まずaddEventListenerから説明していく。
要素.addEventListener(イベント,関数,オプション)の形で記載される。
イベントが発生した時に関数を呼び出して、処理を行いオプションでこの処理の特性を指定する。
指定できるイベント一覧とオプションの組み合わせで、どのような処理をするか決めていく。
textContentは保持している文字列を返すプロパティ。

このコードはbtn要素からclickイベント（マウスでクリック）が送られてくるとtextContentで保持している”hit”という文字列をbtn要素へ返す処理になる。

const は変数の宣言になる。
const 〇〇 = [ ]で配列の宣言になるのでresultsは4つの要素をもった配列として宣言される。
続いて変数nの宣言だが、ここは動画で説明されている。
Math.floorで引数の小数点以下を切り捨てる。中身のMath.randam()*results.lengthはlengthでresultsの要素数（今回は4）を受け取り、Math.random*4となる。
よってｎには0から3までの整数が引数として渡される。
btn.textContent = results[n] でresultsのn番目の要素を文字列としてbtnへ返す処理となる。

あとがき

ドットインストールでおみくじゲーム制作をメモ書きとして残しました。
HTML/CSSとJavaScriptの基本的な構成を作ることができ、どうやってJavaScriptを書いていくか学習できる良い講座だと思います。
注意点として動くものを手軽に作れる点で、ドットインストールは優れているが動画形式をとっているため、どうしても説明できる情報量に限りが出てきます。

動画内で説明されていないことの情報も隠れているので少しでも疑問があったら講座を進めるのを止めて調べる癖をつけよう。
あまり触れないフロントエンドの基礎のおさらいにもなって私自身プラスになりました。
他人へ説明できる程度に理解をしなければならないので、何かを勉強するときに「理解した」ラインを「他人に説明が出来る」所に設定するのは今後も心がけたいです。

（記事執筆　T・Y）

BLOGトップへ戻る