test.js

window.onload = function () {
    addEvent();
};

// イベント登録
function addEvent() {
    const button = document.getElementById("gatya-button");
    button.addEventListener('click', playGatya, false);
}

// ガチャを回す
function playGatya() {
    axios.get(fetchApiUrl()).then(res => successHandler(res));
}

// 通信に成功した時の処理
function successHandler(res) {
    buildResult(res);
    showResult();
}

// 表示内容を組み立てる
function buildResult(response) {
    const charImage = document.getElementById("char-image");
    const charRarity = document.getElementById("char-rarity");
    const charName = document.getElementById("char-name");
    const charAttack = document.getElementById("char-attack");
    const charDefense = document.getElementById("char-defense");

    const data = response.data["result"];
    charImage.src = fetchImagePath(data["image_url"]);
    charRarity.innerText = fetchRarityString(data["rarity"]);
    charName.innerText = data["name"];
    charAttack.innerText = "攻撃力:" + data["attack"];
    charDefense.innerText = "守備力:" + data["defense"];

    showRarity(data["rarity"]);
}

// レアリティのデザインを表示
function showRarity(rarity) {
    const charRarity = document.getElementById("char-rarity");
    charRarity.classList.remove('rarity-n');
    charRarity.classList.remove('rarity-r');
    charRarity.classList.remove('rarity-sr');
    charRarity.classList.remove('rarity-ssr');

    switch(rarity) {
        case 0: return charRarity.classList.add("rarity-n");
        case 1: return charRarity.classList.add("rarity-r");
        case 2: return charRarity.classList.add("rarity-sr");
        case 3: return charRarity.classList.add("rarity-ssr");
    }
}

// レアリティを文字列に変換
function fetchRarityString(rarityNo) {
    switch(rarityNo) {
        case 0:  return "N";
        case 1:  return "R";
        case 2:  return "SR";
        case 3:  return "SSR";
        default: return "";
    }
}

// 画像パスを生成
function fetchImagePath(fileName) {
    return fetchApiUrl() + "/images/" + fileName;
}

// 結果のHTMLを表示する
function showResult() {
    const result = document.getElementById("result");
    result.classList.remove('hidden');
}

function fetchApiUrl() {
    return "http://192.168.1.16:3000/";
}

// デバッグ用データ
class DebugResponse {
    constructor(){
        this.data = JSON.parse('{"result":{"id":1,"name":"【制服】羽田小百合","image_url":"n_sayuri.png","rarity":3,"attack":1500,"defense":1000,"created_at":"2019-11-02T10:03:04.000Z"}}');
    }
}