![見出し画像](https://assets.st-note.com/production/uploads/images/96692810/rectangle_large_type_2_cd053fa0f6fbb50f77196254a742cc57.jpeg?width=1200)
【WEBアプリ】スロットアプリ
第2回は、スロットアプリを作っていきます。
![](https://assets.st-note.com/img/1674897952745-K9k85sBrvz.png?width=1200)
今回作成するのは、
ボタンを押すと、3つのランダムな数字が出て、
3つの数字が揃うと「おめでとうございます」とアラートが出る
簡単なスロットアプリです。
1. 初期データのダウンロード
① 以下のURLにアクセス
https://drive.google.com/drive/folders/1He4U19zQh0p9USSdXaSFPZe-IkcsF1vS?usp=sharing
② スロットアプリ 教材.zip をダウンロード
③ ダウンロードにあるZipファイルを解凍。
【Zipファイルの解凍方法】
Macの場合、Zipファイルをダブルクリック
Windows の場合、わからない場合は、以下のサイトを見る
④
の「基本的なはじめ方」を参考に準備する。
2. ボタンを押したらランダムな数を表示する
① 必要なテキスト・ボタンの配置
![](https://assets.st-note.com/img/1674882413433-F4EFLdVjFL.png?width=1200)
【pタグとは】
<p>テキストの内容</p>
と表す。
pタグは、一般的な文字を表示するときに使うもの。
paragraphのpから取っている。
【buttonタグとは】
<button>ボタンの文字</button>
と表す。
ボタンタグは、文字の書かれたボタンを作成するもの。
クリックした際に、〇〇をするなどの記載もできる。
【h1タグとは】
<h1>テキストの中身</h1>
と表す。
h1タグは、タイトル用のテキストを入力するもの。
pタグなどに比べ、大きく、太い文字で表示される。
![](https://assets.st-note.com/img/1674909206592-sRFZmSl6Ov.png?width=1200)
![](https://assets.st-note.com/img/1674882528060-vMOurvgOPu.png)
②ボタンを押したらコンソールを表示
![](https://assets.st-note.com/img/1674893015815-jUewLw0eeS.png?width=1200)
![](https://assets.st-note.com/img/1674893070193-n1QJk41OLd.png?width=1200)
![](https://assets.st-note.com/img/1674909213832-ZhkhIERQvo.png?width=1200)
STARTボタンを押しても、何も起きない。
![](https://assets.st-note.com/img/1674909694615-ifua8BhwPr.png?width=1200)
やり方がわからない人は、
の「Consoleの確認の仕方」を確認。
![](https://assets.st-note.com/img/1674893207837-0m3hFZQpSL.png?width=1200)
onclick や function がわからない人は、
の「 ② ボタンを押したらアラート」を見よう。
③ ランダムな数を生成
![](https://assets.st-note.com/img/1674893835072-aym9e0MMja.png?width=1200)
![](https://assets.st-note.com/img/1674909222832-QOsnyIf8FK.png?width=1200)
【変数って何?】
変数とは、数字や文字を保管しておくもの。
let number = 0;
のように書く。
numberという人が、0という数字を持ってるイメージ。
【0から10までの乱数の作り方】
1. 0から1までのランダムな数を作成。
Math.random() → 0.4543543.
2. 0から10までのランダムな数を作成。(①を10倍にする)
Math.random() * 10 → 4.543543
3. 小数点以下を切り捨て。
Math.floor(Math.random() * 10) → 4
数学での「×」(掛け算)はプログラミングで「*」で表す。
![](https://assets.st-note.com/img/1674893872996-bmlmkh9ct5.png?width=1200)
④テキストにidをつけよう。
【idとは】
要素(タグ <p>など)につける名前のようなもの。
※
idのなかに、大文字や記号(「-」と「_ 」のみ)、数字は使えるが、
スペースを使うことはできない。
![](https://assets.st-note.com/img/1674894856585-F1h5iMpBQe.png?width=1200)
![](https://assets.st-note.com/img/1674909272197-UkoijQwz2z.png?width=1200)
【TRY】 ランダムな数を文字として表示しよう。
STARTボタンを押したら、
0と表示されている3つの数字がランダムな数字になって表示されるようにしよう。
わからない人は、前回の
の「 ④ 増えていく、numberをテキストに反映させる。 」を参考にしよう。
※できるだけ、解答を見ずにやってみよう。
【解答】 ランダムな数を文字として表示する
![](https://assets.st-note.com/img/1674894937794-khwPpaIx7d.png?width=1200)
![](https://assets.st-note.com/img/1674909279612-pjAi44opst.png?width=1200)
![](https://assets.st-note.com/img/1674894960420-8tYUeDBZOz.png)
3. 数字が揃った時にアラートを表示しよう
【TRY】 アラートを表示しよう。
下の、?の部分にコードを書き、
おめでとうございます。
と表示するアラートを出そう。
![](https://assets.st-note.com/img/1674895287988-LMupvH1QGX.png?width=1200)
※できるだけ、解答を見ずにやってみよう。
【解答】 アラートを表示する
![](https://assets.st-note.com/img/1674895631550-i8WEYEH8eW.png?width=1200)
![](https://assets.st-note.com/img/1674909284872-jkvPUyoEYM.png?width=1200)
![](https://assets.st-note.com/img/1674895406932-Nf2MZr5xbm.png?width=1200)
① 数字が揃った時だけ、アラートを表示しよう。
ここで使うプログラムが、if文と呼ばれるもの。
【条件分岐って何?】
もし、〇〇なら、××するコード。
if (条件の内容){
そうだった場合に動くコード
}
と書く。
よくわからない人は、前回のカウントアプリの
「① マイナスにならないように調整しよう」を振り返ってみよう。
![](https://assets.st-note.com/img/1674895679598-BNLRj0hSL3.png?width=1200)
![](https://assets.st-note.com/img/1674909292865-a3SssC43X4.png?width=1200)
chromeで、startボタンを連打してみよう。
![](https://assets.st-note.com/img/1674895806036-dEnk2mNjYL.png?width=1200)
あれ、数字が揃っていない!と思った人、
アラートのokボタンを押すと、
![](https://assets.st-note.com/img/1674895858635-EXBHmSi0Xa.png?width=1200)
と揃っていることがわかる。
これは、ランダムな数字を表示し終わる前に、アラートが出てしまってるから起こる現象。
直し方は、次回以降学習を進めるとわかっていくよ。
今回はこのままでいこう。
【if文の中での条件】
プログラミングで、
aとbが等しい
a === b または、 a == b
(2つの違いはあまり気にしなくていい。)
aの方がbより大きい
a > b
aの方がbより小さい
a < b
aはb以上
a >= b
aはb以下
a <= b
と表すよ。
4. リセットボタンを作ろう
【TRY】 リセットボタンを動くようにしよう。
①リセットボタンのidを「 resetButton 」と設定しよう。
②リセットボタンが押されたら、関数「 resetNumbers() 」が動くようにしよう。
③ resetNumbers()の中で、rand0・rand1・rand2の値を0にしよう。
④ rand0・rand1・rand2の値の表示をしよう
わからない部分があるときは、今まで使ってきたことを振り返りながら考えてみよう。
【代入と値一致の違い】
数学では、a = b は、aとbの値が等しいことを表すが、
プログラミングでは、aにbを代入(入れ込む)することを表す。
a ← b のイメージ
値の代入を参考にしてやってみよう。
※できるだけ、解答を見ずにやってみよう。
【解答】 リセットボタンを動くようにする
![](https://assets.st-note.com/img/1674896562412-MRnS82LnxF.png?width=1200)
![](https://assets.st-note.com/img/1674896600176-wqV3x1JviU.png?width=1200)
![](https://assets.st-note.com/img/1674909307402-oBi6Ybl2UG.png?width=1200)
![](https://assets.st-note.com/img/1674896643170-BUcFtCsI57.png)
これで、機能は完成!
ここから、デザインを直していこう。
5. デザインを調整しよう
①中央よせ
![](https://assets.st-note.com/img/1674896753976-LYNXwxXQAR.png)
![](https://assets.st-note.com/img/1674896801110-xPDeJ1Pmtu.png?width=1200)
② 文字の大きさを変える
ここで使うのが、classというもの。
number 0 と number 1 とnumber2 のテキストは全て同じスタイルなので、まとめてプログラムしたい。
そこで、idとは別にclassというものを指定する。
【classとは】
classとは、idと同じように要素(タグ<p>など)につける名前のようなものだが、複数の要素に付けられる。
idを出席番号だとすると、classは、クラスのようなもの。
cssで、
idは、「 # 」を使って表すが、classは「 .(ドット)」を使って表す。
![](https://assets.st-note.com/img/1674897367521-FwtZOS6Kg7.png?width=1200)
![](https://assets.st-note.com/img/1674896987139-T1HboIq3VH.png)
![](https://assets.st-note.com/img/1674909316682-ImN3VORLkc.png?width=1200)
![](https://assets.st-note.com/img/1674897396906-BwEDcg37sH.png?width=1200)
③ ボタンに色を載せよう。
![](https://assets.st-note.com/img/1674897472545-mGvTo1J0OI.png)
![](https://assets.st-note.com/img/1674909320437-qoU18l6VjF.png?width=1200)
![](https://assets.st-note.com/img/1674897495904-Vsheos54GS.png?width=1200)
④数字を横に並べよう。
![](https://assets.st-note.com/img/1674897572815-Npgq0ffv0l.png?width=1200)
【divタグとは】
divタグは、要素(タグ<p>など)を囲むもの。
グループ化するものや、箱のイメージ。
グループ化する以外にも、複数の要素にまたがって背景色を入れたい時などにも使われる。
![](https://assets.st-note.com/img/1674897705036-Ij5tnJnrPK.png)
【CSSの数々の指定できること】
・width : 横幅
・height : 縦幅
・background-color : 背景色
・color : 文字色
・font-size : 文字の大きさ
・display: flex;
自分よりも中にある要素(タグ)を横に並べる。
・justify-content: center;
display:flex;と一緒に使う。
横に並べた要素を中央揃えにする。
![](https://assets.st-note.com/img/1674909327012-QTZK3MqIrs.png?width=1200)
![](https://assets.st-note.com/img/1674897853601-NBB11cFDAB.png?width=1200)
⑤余白を調整しよう。
![](https://assets.st-note.com/img/1674897896183-ex1hhQVVf6.png)
![](https://assets.st-note.com/img/1674897922823-YO6rChASNs.png)
![](https://assets.st-note.com/img/1674909331673-VwUFKqpwmJ.png?width=1200)
![](https://assets.st-note.com/img/1674897952745-K9k85sBrvz.png?width=1200)
marginについてわからない人は、前回のテキストを参考にしよう。
「②画像の大きさを指定する」
6. 完成
![](https://assets.st-note.com/img/1674898067083-ZMhijqeiGS.png?width=1200)
これで完成です。
お疲れ様でした。
7. 解答データ
① 以下のURLにアクセス
https://drive.google.com/drive/folders/1He4U19zQh0p9USSdXaSFPZe-IkcsF1vS?usp=sharing
② スロットアプリ 解答.zip をダウンロード
8. 次回予告
次回は、ストップウォッチアプリを作成します。
お楽しみに。
ストップウォッチアプリ