JavaScript でつくったおみくじアプリで得た3つの収穫

先日ドットインストールの『JavaScript でおみくじを作ろう』というコースを修了した。

このコースでは、HTML, CSS, JavaScript の基本的なテクニックを使っておみくじアプリをつくることができます。

アプリは『大吉・小吉・凶』の3パターンの結果を出すことができるんだけど、最終的にはどんな場合分けもできるようになります。

コーディングの初心者でも実装できるようなアプリでしたが、このコースでは新しい収穫がありました。

1. 乱数からランダムな値を生成するテクニックは、汎用性があってよく使いそう！

2. 条件分岐を配列で処理するテクニックは、条件分岐を使わない目からウロコのテクニックだった！

3. ボタン押下のインタラクションを active 疑似クラスで実装する方法は疑似クラスを深堀りするきっかけになりそう！

1. 乱数からランダムな値を生成するテクニックは、汎用性があってよく使いそう！

乱数を生成する`Math.random()`メソッドの存在は知っていたものの、生成された 0.0 ～ 0.99... の乱数はそのままでは扱いづらく、どうやって「欲しい値」にするのかよく分かっていませんでした。

だけど、このコースで `Math.random()` から欲しい乱数の値を生成するテクニックを教えてくれたので、単純にそれが知れただけで収穫でした。

2. 条件分岐を配列で処理するテクニックは、条件分岐を使わない目からウロコのテクニックだった！

条件分岐といえば`if`文。定型な場合分けで処理できるときは`switch`文と思っていたのですが、配列で処理をする方法はコード量も短くて何度でも使い回したいテクニックでした。

これも収穫として大きかったですねえ。

3. ボタン押下のインタラクションを active 疑似クラスで実装する方法は疑似クラスを深堀りするきっかけになりそう！

疑似クラスといえば`:hover`だったのですが、今回はボタンクリック時に`:active`クラスを使ってスタイルを実装していました。

ふだん使ったことがない疑似クラスだったこともあり、「他にも良さげな疑似クラスがあるのでは？」と思って調べたら思いのほか疑似クラスたくさんあり過ぎて溺れそうになってます。助けてー。

新しく何かをつくるのも、新しく何かを学ぶのも楽しいものですね。