クラスとインスタンス　

2022年8月11日 goohayami JavaScript コメントを残す

今回はコンストラクター関数とnew演算子を使う練習です。UdemyやYouTubeなどあちこち見て勉強したのですが、なかなか理解できず。ようやく形が見えたような気がしたので、とりあえず使ってみようと思いました。

とは言っても、クラスとインスタンスを使って具体的に何を作れば良いのかピンとこないまま数週間が過ぎ。

やっと思い立ったのがポケモンGOでした。（またポケモンかよ・・・）

ロケット団のボス戦でボロクソにはまることがあり、そんな時にさくっと効果抜群属性が分かるといいなと思ったのです。

①　属性のクラスを作る

②　new演算子を使って、インスタンスを作る（18種類）

③　属性ボタンをクリックで、効果抜群属性を表示

以上のような流れで組み立てました。

ブログランキング

jsファイルは3つに分けました。

①class.js

"use strict";
///クラス///
class Pokemon {
  constructor(type, batugun1, batugun2, imahitotu1, imahitotu2, imahitotu3) {
    this.type = type;
    this.batugun1 = batugun1;
    this.batugun2 = batugun2;
    this.imahitotu1 = imahitotu1;
    this.imahitotu2 = imahitotu2;
    this.imahitotu3 = imahitotu3;
  }
  koukabatugun() {
    document.getElementById(
      "type"
    ).textContent = `相手が\n【${this.type}】の場合`;
    document.getElementById(
      "batugun-1"
    ).textContent = `○(\n2.56倍\n )\n:\n ${this.batugun1}`;
    document.getElementById(
      "batugun-2"
    ).textContent = `○(\n1.60倍\n)\n:\n ${this.batugun2}`;
    document.getElementById(
      "imahitotu-1"
    ).textContent = `▲(0.625倍)\n :\n${this.imahitotu1}`;
    document.getElementById(
      "imahitotu-2"
    ).textContent = `▲(0.390倍) \n:\n${this.imahitotu2}`;
    document.getElementById(
      "imahitotu-3"
    ).textContent = `▲(0.244倍) \n:\n${this.imahitotu3}`;
  }
}

koukabatugun関数として、テンプレートリテラルで属性についてそれぞれ表示されるように設定しました。

②instance.js

"use strict";
///インスタンス///
const normal = new Pokemon(
  "ノーマル",
  "なし",
  "[格闘]",
  "なし",
  "[ゴースト]",
  "なし"
);

const fire = new Pokemon(
  "炎",
  "なし",
  "[水][地面][岩]",
  "[炎][草][氷][鋼][フェアリー]",
  "なし",
  "なし"
);
const water = new Pokemon(
  "水",
  "なし",
  "[電気][草][岩]",
  "[炎][水][氷][鋼]",
  "なし",
  "なし"
);
const electric = new Pokemon(
  "電気",
  "なし",
  "[地面]",
  "[電気][飛行][鋼]",
  "なし",
  "なし"
);
const grass = new Pokemon(
  "草",
  "なし",
  "[炎][氷][毒][虫]",
  "[水][電気][草][地面]",
  "なし",
  "なし"
);
const ice = new Pokemon(
  "氷",
  "なし",
  "[炎][格闘][岩][鋼]",
  "[氷]",
  "なし",
  "なし"
);
const fighting = new Pokemon(
  "格闘",
  "なし",
  "[飛行][エスパー][フェアリー]",
  "[虫][岩][悪]",
  "なし",
  "なし"
);
const poison = new Pokemon(
  "毒",
  "なし",
  "[地面][エスパー]",
  "[草][格闘][毒][虫][フェアリー]",
  "なし",
  "なし"
);
const ground = new Pokemon(
  "地面",
  "なし",
  "[水][草][氷]",
  "[毒][岩]",
  "[電気]",
  "なし"
);
const flying = new Pokemon(
  "飛行",
  "なし",
  "[電気][氷][岩]",
  "[草][格闘][虫]",
  "[地面]",
  "なし"
);
const psychic = new Pokemon(
  "エスパー",
  "なし",
  "[虫][ゴースト][悪]",
  "[格闘][エスパー]",
  "なし",
  "なし"
);
const bug = new Pokemon(
  "虫",
  "なし",
  "[炎][飛行][岩]",
  "[草][格闘][地面]",
  "なし",
  "なし"
);
const rock = new Pokemon(
  "岩",
  "なし",
  "[水][草][格闘][地面][鋼]",
  "[ノーマル][炎][毒][飛行]",
  "なし",
  "なし"
);
const ghost = new Pokemon(
  "ゴースト",
  "なし",
  "[ゴースト][悪]",
  "[毒][虫]",
  "[ノーマル][格闘]",
  "なし"
);
const dragon = new Pokemon(
  "ドラゴン",
  "なし",
  "[氷][ドラゴン][フェアリー]",
  "[炎][水][電気][草]",
  "なし",
  "なし"
);
const dark = new Pokemon(
  "悪",
  "なし",
  "[格闘][虫][フェアリー]",
  "[ゴースト][悪]",
  "[エスパー]",
  "なし"
);
const steel = new Pokemon(
  "鋼",
  "なし",
  "[炎][格闘][地面]",
  "[ノーマル][草][氷][飛行][エスパー][虫][岩][ドラゴン][鋼][フェアリー]",
  "[毒]",
  "なし"
);
const fairy = new Pokemon(
  "フェアリー",
  "なし",
  "[毒][鋼]",
  "[格闘][虫][悪]",
  "[ドラゴン]",
  "なし"
);

new演算子を使って、属性それぞれのインスタンスを生成。

③　index.js

"use strict";
///ボタン実行///
document.getElementById("normal").addEventListener("click", () => {
  normal.koukabatugun();
});
document.getElementById("fire").addEventListener("click", () => {
  fire.koukabatugun();
});
document.getElementById("water").addEventListener("click", () => {
  water.koukabatugun();
});
document.getElementById("electric").addEventListener("click", () => {
  electric.koukabatugun();
});
document.getElementById("grass").addEventListener("click", () => {
  grass.koukabatugun();
});
document.getElementById("ice").addEventListener("click", () => {
  ice.koukabatugun();
});
document.getElementById("fighting").addEventListener("click", () => {
  fighting.koukabatugun();
});
document.getElementById("poison").addEventListener("click", () => {
  poison.koukabatugun();
});
document.getElementById("ground").addEventListener("click", () => {
  ground.koukabatugun();
});
document.getElementById("flying").addEventListener("click", () => {
  flying.koukabatugun();
});
document.getElementById("psychic").addEventListener("click", () => {
  psychic.koukabatugun();
});
document.getElementById("bug").addEventListener("click", () => {
  bug.koukabatugun();
});
document.getElementById("rock").addEventListener("click", () => {
  rock.koukabatugun();
});
document.getElementById("ghost").addEventListener("click", () => {
  ghost.koukabatugun();
});
document.getElementById("dragon").addEventListener("click", () => {
  dragon.koukabatugun();
});
document.getElementById("dark").addEventListener("click", () => {
  dark.koukabatugun();
});
document.getElementById("steel").addEventListener("click", () => {
  steel.koukabatugun();
});
document.getElementById("fairy").addEventListener("click", () => {
  fairy.koukabatugun();
});

ここはもうちょっとスッキリさせたいと粘ったのですが、うまくいきませんでした。

そのうちリファクタリングが出来るようになりたいです。

長くなったのですが、記録用にindex.htmlとcssも貼っておきます。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&family=Open+Sans&display=swap"
      rel="stylesheet"
    />
    <title>Pokemon GO</title>
    <link rel="stylesheet" href="./src/styles.css" />
  </head>

  <body>
    <header><h2>相手ポケモンの属性を選択</h2></header>
    <div class="group-1">
      <p id="normal">ノーマル</p>
      <p id="fire">炎</p>
      <p id="water">水</p>
      <p id="electric">電気</p>
      <p id="grass">草</p>
      <p id="ice">氷</p>
    </div>
    <div class="group-2">
      <p id="fighting">格闘</p>
      <p id="poison">毒</p>
      <p id="ground">地面</p>
      <p id="flying">飛行</p>
      <p id="psychic">エスパー</p>
      <p id="bug">虫</p>
    </div>
    <div class="group-3">
      <p id="rock">岩</p>
      <p id="ghost">ゴースト</p>
      <p id="dragon">ドラゴン</p>
      <p id="dark">悪</p>
      <p id="steel">鋼</p>
      <p id="fairy">フェアリー</p>
    </div>

    <div class="main-container">
      <hr />
      <div id="type">属性</div>
      <hr />
      <div id="batugun-1">効果抜群！</div>
      <hr />
      <div id="batugun-2">効果抜群！</div>
      <hr />
      <div id="imahitotu-1">効果いまいち...</div>
      <hr />
      <div id="imahitotu-2">効果いまいち...</div>
      <hr />
      <div id="imahitotu-3">効果いまいち...</div>
      <hr />
    </div>
    <script src="./src/class.js"></script>
    <script src="./src/instance.js"></script>
    <script src="./src/index.js"></script>
  </body>
</html>

styles.css

body {
  margin: 0;
  padding: 0px;
  background-color: rgb(141, 222, 70);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-family: "Open Sans", sans-serif;
}
header {
  height: 80px;
  margin: 0;
  padding: 0;
  background-color: rgb(14, 50, 50);
  margin-bottom: 20px;
  color: white;
}
header h2 {
  margin: 0;
  text-align: center;
  line-height: 80px;
}
p {
  font-size: 20px;
  margin: 0;

  border-radius: 0;
  padding: 2px;
  border-radius: 4px;
  background-color: black;
  color: white;
}
.group-1 {
  display: flex;
  gap: 4px;
  margin-left: 2px;
  justify-content: center;
  margin-bottom: 10px;
}
.group-2 {
  display: flex;
  gap: 4px;
  margin-left: 4px;
  justify-content: center;
  margin-bottom: 10px;
}
.group-3 {
  display: flex;
  gap: 4px;
  margin-left: 4px;
  justify-content: center;
  margin-bottom: 10px;
}
.main-container {
  font-size: 17px;
  margin-left: 4px;
  /* background-color: tomato; */
}

今回は単独属性のみしか作れませんでしたが、そのうち複数属性にも手をつけてみたいです。

HAPPY Pokemon GO LIFE!!

返信を残す コメントをキャンセル

返信を残すコメントをキャンセル