皆さん、どうも麗乃ちゃん推しのNaaaOです！

突然ですが、質問です。

麗乃ちゃんの握手券何枚とろうかなぁって迷ったことありませんか？？

１部。。8枚

２部。。4枚

…

５部。。10枚！！

あ、気づいたら１００枚とっちゃった！！！

てへぺろ！

…

ありますよねぇ

人類共通の悩みですもんねぇこれ

ってことで今回、僕が1～10枚でランダムに出力するおみくじを作りましたのでぜひ活用してみてください。。（笑）

【目次】

デモ
JavaScriptコード解析
まとめ

デモ

運命の選択

麗乃ちゃんと何枚分話せるかな？

START!

JavaScriptコード解析

今回、ツクレバさんを参考にしています！

tsukulog.net

ので初心者の僕が参考になったとこだけあげときます

btn.addEventListener('click', function() {

    result();

    overlay.classList.add('fadein');

    output.classList.add('fadein');

  });

START!の部分のid=btnのaddEventListnerを呼んでいますね。

クリックしたときに、引数なしの以下のfunctionを呼ぶという内容です。

functionの中身は

result関数を呼ぶ。（switch部分）

overlay(ポップアップみたいなやつ)にclassListを使ってfadeinクラスを加える

同様にoutput部分も

みたいな感じです。

ここで、classListってなんぞや？となりました。

簡単に説明すると "classを配列のように扱えるメソッド" です（DOMTokenオブジェクト）

addやremoveのメソッドを使ってelementのclassを加えたり削除したりできるっぽいです。

ここでは、cssで下記のように設定されてるため、classが変更されることによってフェードイン・アウトを実装しています。

#output,

#overlay {

  opacity: 0;

  transition: all 0.5s;

  visibility: hidden;

}



#output.fadein,

#overlay.fadein {

  opacity: 1;

  visibility: visible;

}

opacityが切り替わることで、見えるようになるんですねぇ～

まとめ

そのうち、自分で入力した値に応じて枚数を変えられたらなと思います！

１００枚が当たったあなた！！

一緒に握手券とろうね（笑）

ではでは

まよいのちはれ

迷えるあなたに癒しと解決案を…。

JavaScriptを使って握手会用おみくじを作ってみた

デモ

運命の選択

JavaScriptコード解析

まとめ