JavaScriptで簡単に作れるおみくじアプリの作り方

こんにちは！今日はJavaScriptを使って、簡単におみくじアプリを作ってみましょう。

イントロダクション

まずは、今回作成するおみくじアプリの概要です。このおみくじアプリは、ユーザーがボタンをクリックすると、大吉や中吉などの結果がランダムで表示される仕組みになっています。

使用する知識

このプロジェクトで使用する主なJavaScriptの知識は以下の通りです：

配列
ランダム関数
イベントリスナー

基本構成

インターフェイスの作成

まずはHTMLファイルを作成し、基本的なインターフェイスを整えましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>おみくじアプリ</title>
</head>
<body>
    <h1>おみくじ</h1>
    <button id="btn">おみくじスタート</button>
    <div id="display"></div>
</body>
</html>

スクリプトの準備

次に、JavaScriptでおみくじのロジックを実装していきます。

配列の準備

結果を保存するための配列を用意します。

const omikujiItems = ["大吉", "中吉", "小吉", "吉", "末吉", "凶"];

ランダムな要素を取り出す関数

次に、配列からランダムに要素を取り出す部分を作成します。

function getRandomInt(max) {
    return Math.floor(Math.random() * max);
}

Math.random() を使って 0 から max までのランダムな整数を生成します。これを使って、配列 omikujiItems からランダムな要素を取り出します。

ボタンのクリックイベントを設定

ボタンがクリックされたときにランダムな結果を表示するイベントを設定します。

const btn = document.getElementById("btn");
const display = document.getElementById("display");

btn.addEventListener("click", () => {
    const randomIndex = getRandomInt(omikujiItems.length);
    const result = omikujiItems[randomIndex];
    display.innerHTML = result;
});

ユーザーフィードバックの追加

おみくじの結果によって、特定のメッセージを表示させるようにしましょう。

btn.addEventListener("click", () => {
    const randomIndex = getRandomInt(omikujiItems.length);
    const result = omikujiItems[randomIndex];
    display.innerHTML = result;

    if (result === "大吉") {
        alert("おめでとうございます！");
    } else if (result === "凶") {
        alert("気にするなよ！");
    } else {
        alert("まあまあです！");
    }
});

これでおみくじアプリの基本的な機能は完成です。

コードのおさらいと改善

冗長なコードのリファクタリング

コードを少し整理して可読性を高めましょう。

btn.addEventListener("click", () => {
    const randomIndex = getRandomInt(omikujiItems.length);
    const result = omikujiItems[randomIndex];
    display.innerHTML = result;

    if (result === "大吉") {
        alert("おめでとうございます！");
    } else if (result === "凶") {
        alert("気にするなよ！");
    } else {
        alert("まあまあです！");
    }
});

ここでは、特に見直しが必要な部分はありませんが、変数名や関数名に意味のある名前を付けることがコードの可読性を上げるポイントです。

おわりに

今回のチュートリアルを通じて、JavaScriptの基本的な使い方について理解を深めることができたのではないでしょうか。これからもどんどん自分で応用して、もっと複雑なアプリケーションに挑戦してみてください！

Happy coding!

+--------------------------+
|      おみくじ結果       |
+--------------------------+
|     大吉, 中吉, 小吉     |
|     吉, 末吉, 凶         |
+--------------------------+

タイムスタンプ

1 00:00:01,310 --> 00:00:09,969 [音楽]

2 00:00:12,730 --> 00:00:27,170 ブーブー場所

3 00:00:16,010 --> 00:00:27,870 8 on パティロセ1もうちょっと今までの集大成1になります

4 00:00:27,170 --> 00:00:32,160 ん

5 00:00:27,870 --> 00:00:34,960 やってきた javascript の今までやってきたことを理解していれば好み口

6 00:00:32,159 --> 00:00:37,640 が作れるはずなんです

7 00:00:34,960 --> 00:00:42,730 というものかというと

8 00:00:37,640 --> 00:00:44,020 おみくじおみくじスタートとこれをクリックすると

9 00:00:42,729 --> 00:00:48,968 大吉

10 00:00:44,020 --> 00:00:51,990 をめぐりスタントすぐ減るんですけれども小吉ちゅー吉とかまぁ

11 00:00:48,969 --> 00:00:57,539 ランダムに出てくれるってことですね

12 00:00:51,990 --> 00:00:59,920 このみくじゲームみたいなものを今日の運勢を占うものは簡単に今日行ったのだけで

13 00:00:57,539 --> 00:01:03,518 作れてしまいます

14 00:00:59,920 --> 00:01:08,129 こういうサイトも結構ありますね占いサイト見てみてね

15 00:01:03,518 --> 00:01:08,129 それは javascript で作られている場合が多いです

16 00:01:08,269 --> 00:01:18,408 ではその前にこれおみくじってあの

17 00:01:12,828 --> 00:01:23,780 ランダムに取り出さなきゃいけないじゃないですか大吉中期小吉とかねっていうものを

18 00:01:18,409 --> 00:01:25,950 ランダムに取り出す必要があるのでこのランダムメソッドみたいな頃

19 00:01:23,780 --> 00:01:29,280 バス.フロア

20 00:01:25,950 --> 00:01:36,329 っていうのをこれをね覚えておいてください

21 00:01:29,280 --> 00:01:39,189 でます.フロアでますランダムこう書くとえっえっとゼロから号までをランダムで取っ

22 00:01:36,328 --> 00:01:46,229 てきてくれるようになります

23 00:01:39,188 --> 00:01:52,359 でえっとこんな感じでねすごい小数点が出てくるのであの

24 00:01:46,230 --> 00:01:53,460 ゼロから5までにしたいときはこの6をかければいいわけです

25 00:01:52,359 --> 00:01:58,049 ねっ

26 00:01:53,459 --> 00:02:02,939 小数点を切り捨てたい時このます.フロアーというのを使うと

27 00:01:58,049 --> 00:02:09,020 ソースって切り捨てにしてくれますのでえまあこのます.フロア

28 00:02:02,939 --> 00:02:11,629 ねますランダーをかける6まあまあこれはちょっとあの

29 00:02:09,020 --> 00:02:16,040 んそのまま

30 00:02:11,629 --> 00:02:20,009 下記2社でいいですねちょっと細かいことは抜いておいてですね

31 00:02:16,039 --> 00:02:25,539 こうするとランダムで帰ってくるのかと

32 00:02:20,009 --> 00:02:32,199 いうのをちょっと知っておいてくれてこれを丸々使ってくれれば ok です

33 00:02:25,539 --> 00:02:34,750 プログラムの課題のヒントこれはまあ本当に今までの講座だけでねレッスンだけですね

34 00:02:32,199 --> 00:02:38,399 作りたらすごいと思いますけれども

35 00:02:34,750 --> 00:02:42,360 まぁちょっとヒントを出しておきましょう

36 00:02:38,400 --> 00:02:45,520 8みくじのセット配列で作る

37 00:02:42,360 --> 00:02:47,300 攻撃時の結果が表示される場所をつくる

38 00:02:45,520 --> 00:02:51,350 みくじね場所を作っ

39 00:02:47,300 --> 00:02:54,060 ボタンをクリックしたらランダムで封じを通ってくる

40 00:02:51,349 --> 00:03:00,049 さっきのバスランダムですね

41 00:02:54,060 --> 00:03:00,050 その数字を使っておみくじセットの中から一つ選ぶ

42 00:03:00,520 --> 00:03:06,810 ておみくじ結果を表示する

43 00:03:03,120 --> 00:03:09,090 大吉中吉しょうきち

44 00:03:06,810 --> 00:03:14,909 末吉

45 00:03:09,090 --> 00:03:20,569 今日みたいな感じかなまあいくつがあのおみくじの種類があると思いますそれを作って

46 00:03:14,909 --> 00:03:22,289 もらってその中からランダムに引っ張ってきてこの部分に

47 00:03:20,568 --> 00:03:24,909 表示させる

48 00:03:22,289 --> 00:03:28,209 そんなプログラムでございます

49 00:03:24,909 --> 00:03:32,069 ではこれはおみくじ. h てみるという名前でね

50 00:03:28,210 --> 00:03:32,070 保存して作ってみて下さい

51 00:03:37,860 --> 00:03:44,030 それではですねと言ってみましょうかデモンストレーションですね

52 00:03:42,150 --> 00:03:48,590 じゃあまずはへ

53 00:03:44,030 --> 00:03:50,740 ここおみくじプログラムを作りますけれどもインターフェイスから

54 00:03:48,590 --> 00:03:53,280 作っていきます

55 00:03:50,740 --> 00:03:57,550 じゃあまずファイルを作って

56 00:03:53,280 --> 00:03:59,360 まず保存でおみくじ. html

57 00:03:57,550 --> 00:04:02,810 にしましょう

58 00:03:59,360 --> 00:04:09,470 って心も簿タイトルは抜かしてボディからね

59 00:04:02,810 --> 00:04:13,330 書きますじゃあここは h 1のおみーくるくるチって書いてありますね

60 00:04:09,469 --> 00:04:16,480 でここをその下にはへ

61 00:04:13,330 --> 00:04:20,900 これはボタンが必要ですよね

62 00:04:16,480 --> 00:04:25,479 のでおみくじスタートボタンバーったねー

63 00:04:20,899 --> 00:04:25,478 id コールで btn にしておきましょうか

64 00:04:25,509 --> 00:04:28,409 ページです

65 00:04:29,240 --> 00:04:32,870 でそしてその下に

66 00:04:31,639 --> 00:04:40,319 a 棟

67 00:04:32,870 --> 00:04:43,199 この大吉とかね表示する部分がありますのでこちらを書きますね

68 00:04:40,319 --> 00:04:48,649 ディ分の id が

69 00:04:43,199 --> 00:04:54,379 じゃあディスプにしておきましょうか方にねディスプデー

70 00:04:48,649 --> 00:04:57,219 自分落としますそうするとここでできましたじゃあまぁここまででできてるか

71 00:04:54,379 --> 00:04:59,860 じゃあ保存して見てみましょうか

72 00:04:57,220 --> 00:05:01,430 のみくじを

73 00:04:59,860 --> 00:05:04,660 見ています

74 00:05:01,430 --> 00:05:04,660 はいおみくじねー

75 00:05:05,288 --> 00:05:14,360 ここまで出来ています

76 00:05:07,230 --> 00:05:16,660 では8このみくじが出来ましたのでこのインターフェースが出来ましたら次言うよ

77 00:05:14,360 --> 00:05:23,800 変えてみましょうかねぇ

78 00:05:16,660 --> 00:05:25,210 もう一度頭みくじのプログラムを確認するとまぁここクリックするどこに唾液字中吉

79 00:05:23,800 --> 00:05:28,740 しょうきち

80 00:05:25,209 --> 00:05:32,788 でえっと今日みたいな感じですかね

81 00:05:28,740 --> 00:05:36,360 それでまあこれいつでもいいんですけれどもそれ第一時期諸経

82 00:05:32,788 --> 00:05:39,060 じゃあそれをつくってみましょうかでは

83 00:05:36,360 --> 00:05:41,750 プログラムを書いていきますねー

84 00:05:39,060 --> 00:05:41,750 スクリプト

85 00:05:43,920 --> 00:05:55,100 何からじゃあ活気始めましょうかねこの越冬みくじのアイテムから書き始めましょう

86 00:05:50,579 --> 00:05:55,099 でお神酒さっき言ったとパ

87 00:05:55,220 --> 00:06:00,659 ほんとじゃあおみくじアイテムにしておきましょうか

88 00:05:58,339 --> 00:06:05,579 itm

89 00:06:00,658 --> 00:06:09,599 ずあえて別にコールでここが大吉

90 00:06:05,579 --> 00:06:12,409 ねここは配列で持たせるんですね

91 00:06:09,600 --> 00:06:12,410 重吉

92 00:06:12,589 --> 00:06:15,519 えっと正吉

93 00:06:18,040 --> 00:06:23,710 初期値のでないんですかね小吉

94 00:06:22,269 --> 00:06:24,750 でしょ

95 00:06:23,709 --> 00:06:27,289 で

96 00:06:24,750 --> 00:06:27,290 共闘

97 00:06:27,819 --> 00:06:34,949 という風にします

98 00:06:29,728 --> 00:06:40,408 これでは配列が出来ましたこれが8

99 00:06:34,949 --> 00:06:44,930 まあ的に取り出されておみくじボタンをクリックするこれのどれかが取り出されて表示

100 00:06:40,408 --> 00:06:48,389 さでてるっていうものを作る必要があるんですよね

101 00:06:44,930 --> 00:06:52,449 なので次はこのボタン部分

102 00:06:48,389 --> 00:06:57,910 とかあと表示部分などですね

103 00:06:52,449 --> 00:07:03,129 変数化して扱えるようにしますじゃボタン部分を

104 00:06:57,910 --> 00:07:06,020 まず入れときましょうかときゅめんと同9面と.

105 00:07:03,129 --> 00:07:14,110 ゲットエレメント

106 00:07:06,019 --> 00:07:14,109 by ig ここはボタンの所 btn で撮ってますよね btn

107 00:07:14,370 --> 00:07:21,590 これでパーツ化できましたボタンベルね

108 00:07:17,759 --> 00:07:25,939 九重イベントを取ってくることができて後で

109 00:07:21,589 --> 00:07:28,349 変数だと思ってね扱えることが javascript が使いやすくなります

110 00:07:25,939 --> 00:07:31,439 で次表示部分を

111 00:07:28,350 --> 00:07:36,240 やりましょうかディスプーン=

112 00:07:31,439 --> 00:07:38,519 パドキュメルト.ゲットエレメント by id の

113 00:07:36,240 --> 00:07:39,449 ディスプ

114 00:07:38,519 --> 00:07:42,079 はい

115 00:07:39,449 --> 00:07:43,670 でこの部分は

116 00:07:42,079 --> 00:07:48,349 ここね

117 00:07:43,670 --> 00:07:49,770 変数に入りましたこのエレメントが取り出されて扱いやすくなりました

118 00:07:48,350 --> 00:07:53,760 次

119 00:07:49,769 --> 00:08:00,990 そうですねここばを最初に並べておいたほうがいいんですけれども

120 00:07:53,759 --> 00:08:05,370 おみくじでここで番号でとってくるのでまあまあドアとで番号指定しておいたはいいん

121 00:08:00,990 --> 00:08:12,800 ですよねこれなかなか今の時点で思いつかないかもしれないですけれども

122 00:08:05,370 --> 00:08:12,800 ちょっと変数南蛮を0初期値を0に設定しておきましょー

123 00:08:13,240 --> 00:08:20,019 じゃあこれで頭ですね用意が出来ました

124 00:08:17,040 --> 00:08:23,680 では次にですねあの

125 00:08:20,019 --> 00:08:29,740 ボタンをクリックしたときに取り出される

126 00:08:23,680 --> 00:08:32,460 豊田プログラムを書いてみましょうダービー tn .パットイベント

127 00:08:29,740 --> 00:08:32,460 レっすなぁ

128 00:08:32,909 --> 00:08:37,538 で

129 00:08:33,799 --> 00:08:41,288 クリックした時ですねクリックしたときに

130 00:08:37,538 --> 00:08:44,059 中ファンクションを実行します

131 00:08:41,288 --> 00:08:48,379 まずここまで出来てるからねぇ

132 00:08:44,059 --> 00:08:49,789 てみましょうかうーんと相談だぜティスプーンの

133 00:08:48,379 --> 00:08:52,009 んだー

134 00:08:49,789 --> 00:08:53,679 html に

135 00:08:52,009 --> 00:08:58,319 height

136 00:08:53,679 --> 00:09:02,328 クリックした時にこのここがちゃんとできていればいいんですよね

137 00:08:58,320 --> 00:09:04,390 ok これをブラウザーで見てみましょう

138 00:09:02,328 --> 00:09:09,229 者プラザリロードして

139 00:09:04,389 --> 00:09:11,919 えっこないですねまだ来ない

140 00:09:09,230 --> 00:09:19,149 ちょっとここを見てますね

141 00:09:11,919 --> 00:09:20,379 これ何かおかしい時には google のこの検証ツールのこのコンソールってやつ

142 00:09:19,149 --> 00:09:22,419 ね

143 00:09:20,379 --> 00:09:26,309 を見るといい

144 00:09:22,419 --> 00:09:29,849 こうするとアドイベントリスナー

145 00:09:26,309 --> 00:09:37,339 の is no たファンクションって出てるおみくじの19分

146 00:09:29,850 --> 00:09:37,340 を生んだろーってみるとアドイベントリスナこれスペルが違ってますよね

147 00:09:37,870 --> 00:09:41,580 this

148 00:09:39,019 --> 00:09:45,519 とりっスツ

149 00:09:41,580 --> 00:09:48,200 リスてんなこれでいいんだけどここで

150 00:09:45,519 --> 00:09:53,600 やると消えましたねっ

151 00:09:48,200 --> 00:09:55,070 あのちゃんとですねあの何かあったらおかしいなあと思ったらこのコンソールを見ると

152 00:09:53,600 --> 00:10:00,110 いいですね

153 00:09:55,070 --> 00:10:01,970 でおみくじした後これクリックする範囲でまして入れますね ok

154 00:10:00,110 --> 00:10:07,379 ここの部分

155 00:10:01,970 --> 00:10:09,350 8リスナーとディスプレイの部分はまあコントロールできているようです

156 00:10:07,379 --> 00:10:11,850 じゃあこれ消しまして

157 00:10:09,350 --> 00:10:13,129 じゃあ心ね

158 00:10:11,850 --> 00:10:18,329 今度は

159 00:10:13,129 --> 00:10:20,750 この配列の中から一つとってくるでプログラムを書かないといけないですね

160 00:10:18,328 --> 00:10:30,349 なのでまず

161 00:10:20,750 --> 00:10:33,769 8これ4つあるじゃないですかなので1から4まで出せるとかっていうねあの

162 00:10:30,350 --> 00:10:38,339 ますランダムさっきヒントでやりましたけど

163 00:10:33,769 --> 00:10:40,278 ます.ランダムっていうのを使う必要があるんです

164 00:10:38,339 --> 00:10:42,000 ねますランダム

165 00:10:40,278 --> 00:10:44,939 で

166 00:10:42,000 --> 00:10:46,850 括弧括弧のかける

167 00:10:44,940 --> 00:10:50,810 迷うとか

168 00:10:46,850 --> 00:10:56,149 ってやってあげてもいいんですけれどもこの数

169 00:10:50,809 --> 00:10:58,888 ちゅー吉末吉を足した場合にこの後とかになっちゃうじゃないですかこの数ってまぁ

170 00:10:56,149 --> 00:11:03,178 いつも変わっちゃいますよね

171 00:10:58,889 --> 00:11:04,399 なのでこういう時は配列の数でやってあげるっていうのは

172 00:11:03,178 --> 00:11:09,289 前にねぇ

173 00:11:04,399 --> 00:11:13,970 いいましたなのでおみくじずおみくじアイテムぞと

174 00:11:09,289 --> 00:11:15,889 レングスっていうのでここの数

175 00:11:13,970 --> 00:11:20,600 とってくれますね

176 00:11:15,889 --> 00:11:24,710 でますランダムはこれだけだとちょっとうまくいかなくてですね

177 00:11:20,600 --> 00:11:29,980 小数点を区切るバス.フロア

178 00:11:24,710 --> 00:11:34,470 っていうのを書いてあげてこのますランダムを各戸に挟んであげる

179 00:11:29,980 --> 00:11:39,480 ここまでの処理がまあ書き方と趣向を書き方が必要なんですね

180 00:11:34,470 --> 00:11:42,840 これは8ヒントのところでも覚えちゃいましょうと言ったんでまぁこんなものかという

181 00:11:39,480 --> 00:11:44,289 ふうに覚えていいかもしれないですね

182 00:11:42,840 --> 00:11:48,879 これで

183 00:11:44,289 --> 00:11:49,899 おみくじのこの中から一つ

184 00:11:48,879 --> 00:11:52,818 ねっ

185 00:11:49,899 --> 00:11:57,228 取り出すことができているはずです

186 00:11:52,818 --> 00:12:00,469 そうはずなんですこれを8みくじナンバー

187 00:11:57,229 --> 00:12:07,030 バーナムって変数に

188 00:12:00,470 --> 00:12:12,089 入れますねっナンバーちょっと変数に入れたほうがわかりやすいんだよ

189 00:12:07,029 --> 00:12:17,600 ここからだとおみくじのなかの一つお返し

190 00:12:12,089 --> 00:12:20,339 番号返してくれたじゃあちょっとアラートで3事務所からとのな具

191 00:12:17,600 --> 00:12:23,399 てみてみます

192 00:12:20,339 --> 00:12:26,760 で8誤審

193 00:12:23,399 --> 00:12:28,169 スターをゼロ最初はゼロでと

194 00:12:26,759 --> 00:12:31,860 0

195 00:12:28,169 --> 00:12:31,860 0ばっかですねー

196 00:12:31,909 --> 00:12:39,620 これおかしいですよねおみくじアイテムズ.レングス

197 00:12:36,309 --> 00:12:44,319 ますフロアのますランダムの

198 00:12:39,620 --> 00:12:45,879 かけるを9かけるレングスっていうのが

199 00:12:44,320 --> 00:12:50,769 違いますね

200 00:12:45,879 --> 00:12:54,818 この格好のココこの中に入ってないといけないですね

201 00:12:50,769 --> 00:12:57,690 ここに入れておきましょうこうするとどうなんでしょうかね

202 00:12:54,818 --> 00:13:00,039 これ外に出るとちゃんと計算されないんで

203 00:12:57,690 --> 00:13:00,910 じゃあこれで更新

204 00:13:00,039 --> 00:13:03,299 えっ

205 00:13:00,909 --> 00:13:03,299 0

206 00:13:03,600 --> 00:13:06,029 3

207 00:13:04,639 --> 00:13:07,429 を

208 00:13:06,029 --> 00:13:09,889 3

209 00:13:07,429 --> 00:13:10,879 技術者と0

210 00:13:09,889 --> 00:13:14,209 0

211 00:13:10,879 --> 00:13:17,360 これランダムで出てるはずなんですけど3

212 00:13:14,208 --> 00:13:22,818 1位愛知れましたけどね0

213 00:13:17,360 --> 00:13:25,068 イルカさんばっかでつけてないですねにが出ないですねあに入れたねまあまああの

214 00:13:22,818 --> 00:13:26,860 ランダムに取り出せるんで

215 00:13:25,068 --> 00:13:29,208 8

216 00:13:26,860 --> 00:13:31,149 ゼロからさん

217 00:13:29,208 --> 00:13:32,619 混ぜの番号が

218 00:13:31,149 --> 00:13:37,620 出てきます

219 00:13:32,620 --> 00:13:41,740 ねいいじゃないですかあの子の配列でここが0番目ですよね

220 00:13:37,620 --> 00:13:43,230 そうここが0

221 00:13:41,740 --> 00:13:44,259 ここが

222 00:13:43,230 --> 00:13:45,139 1

223 00:13:44,259 --> 00:13:49,428 2

224 00:13:45,139 --> 00:13:56,659 3ランダムでゼロから123が取り出されたじゃないですか

225 00:13:49,428 --> 00:13:59,259 なのでこのプログラムでえっとゼロから山までがこう変えてきて変数に入れられれば何

226 00:13:56,659 --> 00:14:00,278 とかできそうですよね

227 00:13:59,259 --> 00:14:04,120 よし

228 00:14:00,278 --> 00:14:10,328 近づいてきたとなのでどうするか

229 00:14:04,120 --> 00:14:13,389 今度はこの結果をまあここの配列の中から取り出すっていうことをしないといけない

230 00:14:10,328 --> 00:14:15,689 ですねここはおみくじ

231 00:14:13,389 --> 00:14:20,940 アイテム角

232 00:14:15,690 --> 00:14:21,730 南蛮ね saki nanba 0から4羽できたんでこれで取れるじゃないですか

233 00:14:20,940 --> 00:14:23,630 である

234 00:14:21,730 --> 00:14:26,629 ここでとって

235 00:14:23,629 --> 00:14:32,289 あげると coca coca coca ここ

236 00:14:26,629 --> 00:14:36,730 大吉か中期か色千佳今日が取り出されるってわけ

237 00:14:32,289 --> 00:14:39,328 これ取り出されているのでこれもじゃあちょっとアラートで見ていますか

238 00:14:36,730 --> 00:14:39,329 alert

239 00:14:40,720 --> 00:14:44,840 スグミルぬアラートがいいかもしれないで

240 00:14:43,778 --> 00:14:48,549 で

241 00:14:44,840 --> 00:14:50,629 更新して大大吉

242 00:14:48,549 --> 00:14:54,569 ちゅー吉

243 00:14:50,629 --> 00:14:59,730 を小吉いいじゃないですかでちゃんと着てそう

244 00:14:54,570 --> 00:15:00,660 ok じゃあ次はどうするかというとここのディスプレイに表示させればいいわけ

245 00:14:59,730 --> 00:15:03,100 でしょ

246 00:15:00,659 --> 00:15:05,059 なのでディスプの

247 00:15:03,100 --> 00:15:08,980 ドットインナー

248 00:15:05,059 --> 00:15:12,639 html に入れればいい

249 00:15:08,980 --> 00:15:16,690 ということになりますじゃあ保存して

250 00:15:12,639 --> 00:15:20,080 リロードしてリスタート落ちきっち

251 00:15:16,690 --> 00:15:20,990 中期地中きちっと与え基地でましたクリッククリップ

252 00:15:20,080 --> 00:15:26,649 ねっ

253 00:15:20,990 --> 00:15:26,649 はいこれでうまくいったようですいいですね

254 00:15:30,460 --> 00:15:33,639 さて

255 00:15:31,590 --> 00:15:38,050 理由としてですねー

256 00:15:33,639 --> 00:15:40,129 あのさっき御神籤アプリできたじゃないですかねこれね

257 00:15:38,049 --> 00:15:42,240 でこうやると

258 00:15:40,129 --> 00:15:45,470 まあ動きますよねー

259 00:15:42,240 --> 00:15:49,259 この時に例えば大吉が出たとき

260 00:15:45,470 --> 00:15:53,070 おめでとうございますおめでとう

261 00:15:49,259 --> 00:15:56,840 って中基地が出た滝今マーカーみたいなね

262 00:15:53,070 --> 00:16:00,530 5アラートを出すにはどうすればいいでしょ

263 00:15:56,840 --> 00:16:04,160 これはま javascript ねせっかく if 文てなかったんで

264 00:16:00,529 --> 00:16:07,740 if 文で実装してみるといいですねちょっと

265 00:16:04,159 --> 00:16:12,759 8マーケットしてですねやってみましょうかね

266 00:16:07,740 --> 00:16:14,019 例えばこれはどうするかというと f

267 00:16:12,759 --> 00:16:17,230 で

268 00:16:14,019 --> 00:16:25,480 9みくじアイテムナム

269 00:16:17,230 --> 00:16:32,230 おみくじアイテムズのナムちょっと直してますけどこれが==で大吉だった場合

270 00:16:25,480 --> 00:16:35,090 ね大吉て文字だった場合はここにちゅう格好でアラートの

271 00:16:32,230 --> 00:16:36,060 おめでとーう

272 00:16:35,090 --> 00:16:39,340 と

273 00:16:36,059 --> 00:16:43,149 書きますねちょっとこれで見てみましょうか

274 00:16:39,340 --> 00:16:44,850 これでリロードで一生吉しょうきち

275 00:16:43,149 --> 00:16:48,840 おみくじしたと

276 00:16:44,850 --> 00:16:54,330 でおめゲートを出ましたこれで ok して又吉になってて

277 00:16:48,840 --> 00:16:57,600 最初にアラートがね実行されちゃうんでアラートから出ちゃいますけれども大吉の時に

278 00:16:54,330 --> 00:16:59,310 穴とか出たようですそう

279 00:16:57,600 --> 00:17:04,568 こうすると

280 00:16:59,309 --> 00:17:06,078 まあできるわけあとはえーる水婦みたいなので l ず

281 00:17:04,568 --> 00:17:12,899 f

282 00:17:06,078 --> 00:17:14,919 ってねやったじゃないですかこれがおみくじアイテムズのナムが

283

00:17:12,900 --> 00:17:17,500

284 00:17:14,920 --> 00:17:21,130 今日だったたい

285 00:17:17,500 --> 00:17:25,039 今日だった場合は気にするなよ

286 00:17:21,130 --> 00:17:27,850 っていうのを者たしてみましょうアラートのアラート

287 00:17:25,039 --> 00:17:27,849 君するだ

288 00:17:28,839 --> 00:17:39,220 っていうのをと出してみるとじゃあこれを脱ぎスタートを機に巣がいきなり出ましたね

289 00:17:36,190 --> 00:17:41,259 家影響が出切って的に住んが出ました

290 00:17:39,220 --> 00:17:46,059 気にすんだ

291 00:17:41,259 --> 00:17:48,519 初期中期長期気にするのを出ているようですね

292 00:17:46,059 --> 00:17:53,740 おめでと大吉が出たようです

293 00:17:48,519 --> 00:17:57,910 はいそれでまあ例えばこの2つだ結構拾ってあげてその他は

294 00:17:53,740 --> 00:18:00,430 エルズでアラートって

295 00:17:57,910 --> 00:18:03,730 まあまあカート

296 00:18:00,430 --> 00:18:06,970 いうようなことがまあできるわけ

297 00:18:03,730 --> 00:18:08,730 こうするとえっとりーろーどえっ

298 00:18:06,970 --> 00:18:13,058 まあまあかねっ

299 00:18:08,730 --> 00:18:17,389 気にすんなの ok 動いているようですね

300 00:18:13,058 --> 00:18:22,960 まぁこれで if 文というのはこういう風に使えばいいかなぁと

301 00:18:17,388 --> 00:18:26,709 思いますで8この if 文のですねー

302 00:18:22,960 --> 00:18:30,610 床を見てみるとこのディおみくじな分

303 00:18:26,710 --> 00:18:34,350 おみくじなるってこれをたくさん出てくるじゃないですか

304 00:18:30,609 --> 00:18:40,869 ここもみくじ舐めてこの3回同じでは出てきますよね

305 00:18:34,349 --> 00:18:41,990 こういうのはまあ一つに一つの変数にまとめちゃってもいいかもしれないですよね

306 00:18:40,869 --> 00:18:46,149 これねー

307 00:18:41,990 --> 00:18:49,039 でまぁリザルトみたいな変数作って

308 00:18:46,150 --> 00:18:51,269 bar リザールと

309 00:18:49,039 --> 00:18:54,170 でここに

310 00:18:51,269 --> 00:18:54,170 おみくじな分

311 00:18:54,390 --> 00:19:00,250 おみくじアイテムゼナムを入れてあげるとここにまあリザルトか

312 00:18:57,960 --> 00:19:03,240 その結果があるわけですよね

313 00:19:00,250 --> 00:19:06,660 でそうするとここ

314 00:19:03,240 --> 00:19:08,069 使ってるところねココとココとココ

315 00:19:06,660 --> 00:19:11,399 この3つ目

316 00:19:08,069 --> 00:19:12,799 この3つっていうのはこういうふうに

317 00:19:11,398 --> 00:19:16,669 ここねうん

318 00:19:12,799 --> 00:19:18,240 書く必要がなくてへとリザール

319 00:19:16,670 --> 00:19:21,929 と

320 00:19:18,240 --> 00:19:24,500 て支えてあげるといいかもしれんこうするとじゃあ

321 00:19:21,929 --> 00:19:24,500 保存して

322 00:19:24,589 --> 00:19:29,898 ちゃんと動いてるか動いている

323 00:19:27,148 --> 00:19:29,898 動いてますね

324 00:19:30,339 --> 00:19:34,329 誓

325 00:19:31,289 --> 00:19:39,500 キニスン動いているようです

326 00:19:34,329 --> 00:19:44,750 さっきのよりそうですがこれでねちょっと見やすくなったかと思いますねっ

327 00:19:39,500 --> 00:19:46,519 今みたいなのリファクタリングと言いますけれどもそのリファクタリングするとコード

328 00:19:44,750 --> 00:19:51,470 を見やすく出来る

329 00:19:46,519 --> 00:19:52,400 で重複するコードっていうのはこんな風に変数にまとめてあげると

330 00:19:51,470 --> 00:19:56,150 b

331 00:19:52,400 --> 00:20:00,690 by が多いですね皆さんも何かこう

332 00:19:56,150 --> 00:20:02,680 ちょっと冗長だなと思うようなものがあれば冗長というのはその中

333 00:20:00,690 --> 00:20:06,330 ダブってるとかなんか

334 00:20:02,680 --> 00:20:12,669 ねぇ長ったらしいみたいなその意味ですけども

335 00:20:06,329 --> 00:20:16,949 というものがあれば変数でまとめて立派来たリングするといいかもしれないです

336 00:20:12,669 --> 00:20:16,950 入ってばおまけ終わりにしましょう

337 00:20:22,269 --> 00:20:30,038 さてさてまとめ機の javascript 講座ねいかがだったでしょうか

338 00:20:26,739 --> 00:20:34,479 まあコンパクトにまとめられてたとは思うんですけど

339 00:20:30,038 --> 00:20:37,950 それでもちょっとねやるのはたいへんだったかなと思いますが

340 00:20:34,479 --> 00:20:40,650 イメージを掴んでいただけたでしょうかね

341 00:20:37,950 --> 00:20:44,490 今日はたくさんのことをやりました

342 00:20:40,650 --> 00:20:45,390 でプログラミングで何ができる javascript で何が出来るという事ですよ

343 00:20:44,490 --> 00:20:49,519 ね

344 00:20:45,390 --> 00:20:55,130 て変数やって関数やってで

345 00:20:49,519 --> 00:20:57,019 イベントとか動かすとなんかイベントが発生してましたねそれを取り出して処理すると

346 00:20:55,130 --> 00:21:02,030 かってもしました

347 00:20:57,019 --> 00:21:04,839 あとは ac メイト javascript 猫の ht 名の中に作ることをやり

348 00:21:02,029 --> 00:21:04,839 ました

349 00:21:12,160 --> 00:21:28,200 ブーブーカカアコでここまでできればティナにょあたりがついたんじゃないかなと思う

350 00:21:22,919 --> 00:21:32,009 ますこれからはですねあのスキルハブでもっと上級講座をやっていこうと思います

351 00:21:28,200 --> 00:21:37,308 けれども皆さんはもういろいろな本をですね

352 00:21:32,009 --> 00:21:37,308 読めるようになっていると思いますのでちょっと

353 00:21:37,380 --> 00:21:54,390 本ってにとってちょっとどんどんほうがいいかありませんけれども akr ほど

354 00:21:50,490 --> 00:21:57,400 みたいな感じに way 台かなぁと思います

355 00:21:54,390 --> 00:22:02,560 うはい出会えエコれから

356 00:21:57,400 --> 00:22:06,090 ですねプログラミング講座あのを作っていきますそちらもよろしくお願いします

357 00:22:02,559 --> 00:22:06,089 ではではありがとうございました

レッスン一覧へ

Javascriptで おみくじアプリを作ってみよう！（実習）