プログラミングスクールのドットインストールで学習！JavaScriptでおみくじを作ろう！
プログラミングスクールの中でも自習向きの性格をもつサイトがドットインストールです。
基礎的な講義が多く無料で公開されているため誰でも学習することができます。
また、有料サービスを利用すれば質問ができたり、文字ベースで講義内容を確認できたりすることができる形です。
今回はドットインストールのJavaScriptの講義の1つである「JavaScriptでおみくじを作ろう」で実際に学習してみましょう。
基礎を総合したような内容
「JavaScriptでおみくじを作ろう」という講義はJavaScriptはもちろん、HTMLやCSSの基礎を修めた方向けの講義となっています。
もちろんあくまでもJavaScriptが中心の講義なのですが、事前の準備にはHTMLとCSSが使われている形です。
そのため、まずはそれらの講義の基礎について学んでから取り組むことをおすすめします。
プログラムというのは基礎をもとにして様々な応用物を制作していくものです。
基礎部分の理解がしっかりしていないと論理的に破綻しがちで、そうやって制作したものは可読性が著しく低かったりします。
きちんと自分が何を書いているのかを理解してから臨むと得られるものが多いでしょう。
また「とにかく実践したい」という意気込みで取り組むのも全然アリな話です。
プログラムを写し取るようにして進めていけば実践的に学んでいけるはず。
ただその際にも、今自分がどんな処理を書いているのかを理解しながら進めていくのが肝要です。
いずれにしても訳が分からないまま講義を進めていくのは厳禁。
分からない場合はじっくりと取り組んでみて下さい。
まずはHTML・CSSの準備から
ドットインストールはオンラインのプログラミングスクールです。
無料で利用でき、質問などのサービスは月額980円を支払えば利用できます。
ちなみに「JavaScriptでおみくじを作ろう」は全部で9回の講義に分けられています。
第1回目の講義ではまずHTML・CSS・JavaScriptファイルをそれぞれ作るところから始まります。
いわゆるサイトを作成する際の標準的な構成でおみくじを作っていくわけです。
応用の基礎として望ましい形といえるでしょう。
具体的にはおみくじサイトを作るためのディレクトリと、その中にCSSファイルを入れるフォルダとjsファイルを入れるフォルダをそれぞれ作ります。
そしてルートディレクトリにはindex.html、cssフォルダにはstyles.css、jsフォルダにはmain.jsをそれぞれ作成する形です。
初回は準備段階なので基本的なHTMLを書いたら終わります。
JavaScriptにのみ興味がある場合はHTMLやCSSについての知識が疎かになりがちです。
そのため意外とこのあたりの設定が今後鬼門になるかもしれません。
分からないことでもやもやする場合はHTMLとCSSについて軽くおさらいしておきましょう。
深く学習しようとすると長い道のりになりますが、この講義を理解するぐらいであればそれほど苦労はしないはずです。
少なくともHTMLとCSSの基本部分さえ押さえておけば大丈夫。
少し変則的なおみくじ
通常、ゲームで使われる画像は画像データを使うものです。
リアルタイムにその場で対象をプログラムにより描くというよりは、既にある画像データを貼り付けるという手法が用いられます。
ですがこの講義ではなんと、CSSでボタンを描いてしまうのでした。
CSSでどうやってボタンを描画するのか不思議に思われるかもしれませんが、かなり変則的な方法で描くことは可能です。
divタグにidを付与し、そのidについて横幅のwidthと縦幅のheightを指定、さらにborder-radiusにより全体を丸めることで綺麗な円になってしまいます。
ちょっとしたトリッキーな小技ということができるでしょう。
ただ本当に作品としておみくじを作るなら画像データを用意したいところ。
この講義はあくまでも簡易的なおみくじを作るためのものと考えておくと良いかもしれません。
別の書き方を試してみるのも面白い
講義の3回目ではボタンを押した際に反応するよう、各種イベントを実装していくことになります。
具体的にはボタンを示す変数btnにdocument.getElementById（"btn"）;でHTMLのボタン要素とひもつけするところから始まる形です。
そして「btn.addEventListener（’click’,function（）｛（処理内容）｝）;」のようにイベントを受け取る処理を書いていきます。
ただこの第3回目なのですが、自分流に書き直してみるのも面白いかもしれません。
まず、即時関数が使われていたり、記法の厳密性を増すために「’use strict’;」も記述されいたりしています。
ですがこれらは実際のところ使う必要はなかったりするのです。
JavaScriptは変数名の重複を認めてしまっている仕様なので大規模な開発になるとこの点は大きな問題となります。
どこかで「var x;」という変数を使っているのに、別の箇所で「var x;」を宣言し使ってしまったらバグの原因ともなるでしょう。
そして恐ろしいことにJavaScriptはこうした重複をそのままエラーを起こさず通してしまうのです。
そのために変数の有効範囲（スコープ）を狭めるため、即時関数というものが使われるようになりました。
これは「｛｝」内に変数のスコープを限定することができるので他の部分に影響を与えたくないときに使われる手法です。
また、「’use strict’」という指定をすることで「var」などの宣言の無い変数が使えなくなるなど、より厳密にコーディングができるようになります。
ただ現在では「let」を使って変数を宣言するという便利な方法が実装されました。
この「let」をつけて宣言した変数は重複してはならず、スコープも厳密です。
というわけで、講義で使われている即時関数と’use strict’は止めて、ただ単に「let」で変数を宣言するという書き方を試してみても良いかもしれません。
cssによる簡易アニメーション
第4回では引き続きcssを使った処理を実装していきます。
正確にはJavaScriptでマウスのイベントを取得し、マウスが押されている状態（「mousedown」状態）のときに、cssのクラスを「pushed」に切り替える形です。
この「pushed」状態にどういった挙動をするのか、をcssに記述していくのが第4回となります。
乱数を使った処理の学習
おみくじはランダム要素のあるゲームです。
そのため乱数の扱い方について第5回で学ぶことになります。
乱数はMath.random（）;という関数を呼ぶことで生成することができ、この関数は0から1以内の少数を返してくれます。
3通りの結果を得ようとする場合は0から2の数値があれば良さそうです。
これを得るには「Math.floor（Math.random（） * 3）;」という形で実現できます。
まずMath.random（）*3で上限値が3の乱数を作りだし、それをMath.floorで小数点以下を切り捨てて丸めるのです。
その結果、できる値は「0、1、2」のいずれかになります。
実際にこの処理は第6回の講義で書いていく形です。
条件分岐式を用いて結果を表示
「0、1、2」のいずれかの結果をそれぞれ「大吉、中吉、凶」に当てはめるのが第7回の講義。
まずマウスクリックのイベントが発生したときに「var n = Math.floor（Math.random（） * 3）;」で値を受け取ります。
次に条件分岐式で処理を分岐していけばOK。
条件分岐の方法はif文でも書けますが、今回は検査する値が連番なのでswitch文にした方が無難でしょう。
ソースを改造してみよう
第8回では条件分岐式を排し、配列を使ってその添え字に乱数の結果を入れるという形でおみくじを表現しています。
よりスマートな実装方法といえるでしょう。
第9回では数学的なアプローチによりおみくじの結果の確率を操作しています。
乱数を少数のまま使っているため配列の添え字としてはつかなくなったため、if文を使っているあたりに注目したいところ。
こうして見ると第7回までがおみくじの骨子を作る講義で、第8回と第9回目の講義はソースの改良や改造を目指していることが分かります。
第9回で講義は終わりですが、色々といじってみると面白いでしょう。
結果に大吉や中吉以外の「お菓子」とか「500円」といったものを混ぜることもできるはず。
またカウンターを設ければいままで何回どの結果が出たか、といったことも分かるようになります。
まとめ
ドットインストールの講義「JavaScriptでおみくじを作ろう」に沿ってみてきました。
前提となる知識はある程度必要ではありますが、基礎知識さえあれば講義に沿っておみくじを作ることは十分に可能です。
それどころか改良を加えて色んな機能を施したり見た目を変えたりすることだってできます。
ドットインストールは簡単に利用できるプログラミングスクールなのでおすすめです。
他のプログラミングスクールに通うとしても自習するのにうってつけなサイトであることは間違いありません。
どんどんドットインストールで勉強して色んなことができるようになりましょう。