【JavaScript】本格的な開運おみくじ作成【初心者のアウトプットにオススメ】

この記事では、「JavaScript」でおみくじを作成する方法について解説します。

「くじを引く」ボタンを押すと、おみくじ結果が表示される以下の様なサイトが出来上がります。

単純なサイトですが、「ランダムな数字の作成」や、「DOM操作」等 JavaScriptの基礎中の基礎が理解出来ているかアウトプットするのに最適なチャレンジです。

これを応用する事で、ドラクエのバトルシーンを作ったり、ガチャを作ったりする事も出来る事に気づくと思います。

正月休みを利用して、チャレンジしてみませんか？

この記事の対象

HTML/CSS/JavaScriptの基礎について理解している人
神社に行くと、ついおみくじを買ってしまう人

HTML/CSS /JavaScripの基礎について理解している人を対象とします。

ただ、Progateの初級編が分かっていれば十分読みこなせると思います。

もし読んでいて詰まってしまった人は、一旦基礎を学んでからこちらにもう一度戻ってきましょう。

プログラミング勉強法【2019完全版】

おみくじサイト作成の流れ

上記デモを見て、あなたはどんなステップで作れば良いかイメージ出来ましたか？

もし、イメージ出来そうならば、一旦読むのをストップして、紙に書き出してみましょう。

OKですか？

おみくじを作成するステップは、以下の通りです。

HTML/CSSのコーディング
おみくじ画像を作成
JavaScriptファイルのリンクを確認
ランダムな整数を作成する
ランダムな数字からDOM操作
ボタンクリックを実装

１.HTML/CSSコーディング

「omikuji .html」と「style.css」ファイルを準備して、Webサイトの枠組みを作りましょう。

HTMLファイルのコーディング

<!DOCTYPE html>
<html lang="jp" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>おみくじ</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <h1>おみくじ</h1>
    <img class="kuji" src="images/start.jpg">
    <p><button onclick="drawKuji()">くじを引く</button></p>
  </div>

<script src="index.js"></script>
</body>

</html>

まずは、HTMLの内容について、簡単に解説しますね。

Googleフォントのリンク

<link href="https://fonts.googleapis.com/earlyaccess/hannari.css" rel="stylesheet">

Googleから日本語のWebフォントの「はんなり明朝」をダウンロードしています。

やり方は簡単で、１行追加して、スタイルシートを読み込むだけです。

Googleフォント（日本語）

JavaScriptファイルの読み込み

<body>
　//中略


  <script src="index.js"></script>
</body>

JavaScriptファイルは、bodyタグの一番下で読み込むスクリプトを書いています。

それでは、一つ質問です。

「なぜ、JavaScriptはbodyタグが閉じる直前で読み込むんでしょうか？」

「CSSはheadの中なのに、何で違う場所なんでしょう？」

あなたは、答えられますか？

「え、簡単だって？」

素晴らしいです！

もし、これが分からなかったら、後で何でか調べてみて下さいね。

CSSファイルのコーディング

body {
  background: linear-gradient(-45deg, rgba(246, 255, 0, .5), rgba(255, 0, 161, .5)),
  url(images/shrine.jpg);
  background-size: cover;
  font-family: "Hannari";
  height: 100vh;
}

.container {
  width: 70%;
  margin: auto;
  text-align: center;
}

h1 {
  font-size: 4rem;
  color: #eee;
  text-shadow: 3px 0 #252525;
}

button {
  font-size: 2rem;
  color: #ffc0cb;
  background-color: #f00;
  margin: 20px;
  padding: 5px;
  border-radius: 10px;
  transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s; /* Safari */
}

button:hover {
  color: #fff;
}

.kuji {
  width: 80%;
  opacity: 90%;
}

CSSでグラデーションを作る

 background: linear-gradient(-45deg, rgba(246, 255, 0, .5), rgba(255, 0, 161, .5)),

CSSでグラデーションを作るのに、「linear-gradient」を使います。「linear」とは線形の事で、「gradient」とは勾配の事を表します。

直線的に配色が変わるグラデーションを指定する事が出来、

例えば「45度に傾いたグラデーションで、青から始まり赤で終わる」場合は

/* 45度に傾いたグラデーションで、青から始まり赤で終わる */
linear-gradient(45deg, blue, red);

の様に指定します。

画像のフォルダ構成

画像は、「images」フォルダを作成し、その下に保存します。

2.おみくじ画像をPhotoshopで作成

次に、おみくじ画像を作成します。

Photoshopを持っている人は、自分の家にある「おみくじ」等を参考に、Photoshopでデザインしてみましょう。

和歌は、「万葉集」や「百人一首」などから引用される事が多いので、「百人一首」を採用する事にします。

なぜ、おみくじに「和歌」がついているんだろう？

あなたは、こんな事思った事ありませんか？

『古今和歌集』序文によると、古来から日本の神は和歌を詠むとされており、神からの「託宣（お告げ）」も巫女を通じて和歌で示されることが多かったというのが由来だそうです。

まあ、それもそうだよね。

「将軍の今年の運勢は大吉じゃ！」

ってダイレクトに言われても、何か有り難みがないというか、、、

作るのが面倒な方は

作るの面倒って方は、「いらすと屋」さん等からおみくじ画像をダウンロード出来るので、ダウンロードして下さい。（6パターンの画像を揃えた前提で以降解説します）

「おみくじ画像を自分でもっと作りたい」、「今回作ったおみくじ画像が欲しい」って人は、有料（200円）になってしまいますが、「Note」でPSDデータとpngデータへのリンクを貼ってます。

購入頂いた方へのちょっとお得な情報も書いてますので、興味がある人は買って下さい。（頂戴した200円で美味しいコーヒー飲みます）

Noteでおみくじ画像ファイルを購入する

＜期間限定＞こちらの特別メルマガ登録フォームから申し込んで頂き、メルマガから「Noteプレゼントを希望します」のメッセージを頂けた方はNoteのプレゼントリンクを差し上げます。（１月１０日まで）

3.JavaScriptの疎通確認

JavaScriptファイルが正しく接続されたかを確認します。

「index.js」に

alert("Connected!")

と記述し、「omikuji.html」をブラウザで開いた際に、以下の様なメッセージが出ればOKです。

メッセージが表示されない場合は、JavaScriptファイルの読み込みがうまくいってないので、読み込みを見直しましょう。

4.ランダムな整数を作成する

次に、「おみくじの数」だけランダムな整数を作成します。

「Math.random()」関数と、「Math.floor()」関数を利用して作ってみましょう。

// ランダムな整数を作成（1-6の例）
let randomNumber = Math.floor(Math.random() * 6 + 1);

Math.random()関数は、0–1（0以上、1未満）の範囲で浮動小数点の擬似乱数を返します。

Math.floor() メソッドは、引数として与えた数以下の最大の整数を返します。

なので、Math.random()を「×6」すると「0から6」までの数字が生成されます。これに、１を足してMath.floor()で切り捨てる事で、１から６が同様の分布で生成されます。

このテクニックは良く使うので、console.logやalert等で出力して是非とも納得しておいて下さい。

5.ランダムな数字からDOM操作をする

ここまで来たら、後一息です。

「start.jpg」をおみくじ結果の「kuji番号.png」の画像に置き換えたい訳ですよね。

<img class="kuji" src="images/start.jpg">

これには、「getElementsByClassName」で選択し、「setAttribute」で画像を変更します。

// くじの結果画像を表示させる
document.getElementsByClassName("kuji")[0].setAttribute('src', 'images/kuji' + randomNumber + '.png')

今回のHTMLでは、「kuji」クラスは1つしかありませんが、最初の「kuji」クラスという事で、[0]を指定しています。

document.getElementsByClassName("kuji")[0]

「setAttribute」は、指定の要素に新しい属性を追加するか、指定の要素に存在する属性の値を変更する関数です。

// くじの結果画像を表示させる
setAttribute('src', 'images/kuji' + randomNumber + '.png')

従って、「img」の「src」を「’images/kuji’ + randomNumber + ‘.png’」に置き換えてくじの画像を変更しています。

新しい書き方があるんじゃない？

とっても良い指摘です！

実は、新しいJavaScriptでは、テンプレート文字列という書き方が出来るので、先ほどの操作は、以下の様に書く事も出来ます。

document.getElementsByClassName("kuji")[0].setAttribute('src', `images/kuji${randomNumber}.png`);　// バックティック文字で囲む事に注意(` `)

6.ボタンクリック時にクジを引く

HTMLファイルで、ボタンクリック時に関数「drawKuji()」が走る様にしていたのに気づきましたか？

 <p><button onclick="drawKuji()">くじを引く</button></p>

という事で、ボタンクリック時にクジを引く様に追記します。

// ボタンクリック時にくじを引く
function drawKuji() {
    // ランダムな整数を作成（1-6の例）
    let randomNumber = Math.floor(Math.random() * 6 + 1);

    // くじの結果画像を表示させる
    document.getElementsByClassName("kuji")[0].setAttribute('src', `images/kuji${randomNumber}.png`);　// バックティック文字で囲む事に注意(` `)

    // ボタンの文字を変更する
    document.querySelectorAll("button")[0].innerHTML = "もう一度引く";
}

また、最初の文字は、「くじを引く」でしたが、ボタンを１回押した後は「もう一度引く」という風に文言を変更している事にも注目して下さい。

 // ボタンの文字を変更する
document.querySelectorAll("button")[0].innerHTML = "もう一度引く";

これで、おみくじサイトは出来上がりです。

7.さらにステップアップするために

「おみくじサイト」は簡単でしたか？

余裕がある人は、更に加工して、遊んでみましょう。

例えば、こんなのはいかがでしょうか？

おみくじの数を増やしてみる（乱数生成を変更）
おみくじ画像をフェードインで表示（jQueryは使わずに）
おみくじを振るアニメーションを追加する
Vue.jsやReact.jsで実装してみる

Javascriptの学習で悩ましい所は、古い書き方で書かれている技術書が多く、初学者ではそれを見分ける事が困難な点です。

ES6(ECMAScript 6)以降の書き方になっているか、例えば、以下の様な点が解説されているか着目してみましょう。

変数（letとconst）の違いと使い分けについて説明されていますか？
クラス定義（class）について書かれていますか？
アロー関数（=>）について解説されていますか？
アロー関数とfunctionの違い（thisの束縛の違い）について触れられてますか？

UdemyのThe Complete JavaScript Course 2020: Build Real Projects! は、ここら辺がとても詳しく解説されているので、本格的にJavaScriptを学習したい人にはオススメです。