LoginSignup
1
0

More than 3 years have passed since last update.

ミルクボーイをjavascriptのclass記述にしてみた。

Last updated at Posted at 2020-05-18

お題を決めたら、すぐネタが作りやすいミルクボーイの漫才。
自分の知識定着のために、javascriptのclass記述で書いてみました。

コーンフレークと最中の振りの部分だけを記述。
正しいことならtrueと記述しました。

milkboy.html
 <body>
    <div id="container">
      <p class="cornflakes true">
        あのー甘くてカリカリしてて で 牛乳とかかけて食べるやつやって言うねんな
      </p>
      <p class="cornflakes">
        オカンが言うには 死ぬ前の最後のご飯もそれで良いって言うねんな
      </p>
      <p class="cornflakes true">
        なんであんなに栄養バランスの五角形デカイんか分からんらしいねん
      </p>
      <p class="cornflakes">
        オカンが言うには 晩ご飯で出てきても全然良いって言うねんな
      </p>

      <p class="monaka">スーパーで子どもがそれ欲しくて泣いてた言うねんな</p>
      <p class="monaka true">食べたら、皮がぜんぶ上あごにひっつくらしいねん</p>
      <p class="monaka">
        オカンが言うにはな、1個食べ出したら止まらへんって言うねん
      </p>
      <p class="monaka true">皮の模様がなんか怖いらしい</p>
    </div>
    <script src="milkboy.js"></script>
  </body>

cssの取ってくるクラスと日本語名を引数として
forEachでひとつずつに分けて、そのテキスト部分を出力。
そのテキストがtrueのクラスが含むか含まないかで処理を変えます。

milkboy.js
class mother_forget {
  constructor(keyword, kana) {
    this.kana = kana;
    this.furis = document.querySelectorAll(keyword);
  }
//掛け合い処理
  kakeai() {
    this.furis.forEach((furi) => {
      console.log(furi.innerText);
      if (furi.classList.contains("true")) {
        console.log(this.kana + "やないかい");
      } else {
        console.log("ほな" + this.kana + "ちゃうやないかい");
      }
    });
  }
}

const milkboy1 = new mother_forget('.cornflakes', 'コーンフレーク')
milkboy1.kakeai();

const milkboy2 = new mother_forget('.monaka', '最中')
milkboy2.kakeai();

出力結果
確かにできてる。

kakeai.jpg

FUJIWARAのフジモンの
「顔でかいからや」関数ならもっと簡潔にできる。全く意味がない。。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0