0から始めるJavaScriptの学習記録 その2 【おみくじを作ってみた】

HTML
スポンサーリンク

こんにちは朱夏です。

前回に引き続き、JavaScriptの学習をしていきたいと思います。
今回はおみくじを作っていきます。

今回もドットインストールさんにお世話になります。

 

やっていることは前回の方が難しいように感じますが、実際はどうなんでしょうか?
それではやっていきたいと思います。

コード

先ずはコードです。
今回はHTMLとCSSとJavaScriptの3ファイルに分けて書いています。

まずはHTMLからです。

 

基本的なテンプレートとstyle.css、sample.jsを読み込んでいるだけですね。
HTMLとして表示させてるのは「タイトル」、「ヘッダー」、「クリックしてね!」、「フッター」の4つだけです。

次にCSSファイルのコードです。

 

こちらはボタンのスタイルを指定しています。
ボタンを押したときの動きもスタイルで動かしていますね。

次はsample.jsのコードです。

 

勉強中に書いたコードはコメントアウトしてそのまま残しました。
ブラウザで見た感じは同じに見えますが、書き方はいくつもあるのだということが解りました。

解説

今回驚いたのが、見た目にこだわらなければ、おみくじを作るのにJavaScriptは数行で書けるということでした。

最小構成のコードはこんな感じになります。

 

簡単に説明すると、以下のようになります。

  • 厳格モード
  • 変数btnにidのbtnを取得する処理を代入
  • クリックイベントを宣言
  • イベント処理内容として配列を宣言
  • イベント処理内容としてランダム整数で配列から1つを指定してテキスト表示

 

配列の数を増減させると自動的にランダムで出力される整数の数も変化するようになっています。
かっこだけの行を除けば5行で書けてしまいました。

私のイメージだと、ランダムの数が増える度にコードは数行増えるものだと思っていました。
実際には、おみくじの結果を増やしても、配列に書いた’吉’, ‘末吉’, ‘大凶’などの10文字程度だったのです。

 

あとがき

今回はJavaScriptでおみくじを作ってみました。
今回学んだ内容としては以下のようなことです。

    • switch文
    • 配列
    • 確率の指定の仕方

前回よりも動作としてはシンプルなものになっていますが、同じ実行結果だとしても、if文を使う方法、switch文を使う方法、配列を使う方法などいくつもの書き方があるなど、学べるところは大きかったと思います。

今回は以上です。
次回もよろしくお願いします。

タイトルとURLをコピーしました