ポケモン図鑑を作ってみる[LWC]

概要

LWCでポケモン図鑑を作成します。
PokéAPIを使用しています。
APIを使用するために「CSP 信頼済みサイト」の設定が必要です。

ソースコード

PokemonPicLwc.html

<template>
    <lightning-card>
        <div class="slds-grid slds-einstein-header slds-card__header">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-grid slds-grid_vertical-align-center slds-size_3-of-4 slds-medium-size_2-of-3">
                    <h1 class="slds-truncate" title="ポケモン図鑑(初代)">
                        <span class="slds-text-heading_large">ポケモン図鑑(初代)</span>
                    </h1>
                </div>
                <div class="slds-einstein-header__figure slds-size_1-of-4 slds-medium-size_1-of-3"></div>
            </header>
        </div>
        <div class="slds-align_absolute-center">
            <div class="slds-m-top_large">
            <header class="slds-align_absolute-center">
                <span class="slds-text-heading_medium">図鑑番号：
                <input type="number" class="slds-input input-number slds-p-right_none" min="1" max="151" value="1" onchange={inputChage}/></span>
                <lightning-button variant="brand" label="検索する" onclick={startApp} class="slds-m-left_medium slds-text-heading_medium slds-p-around_xx-small"></lightning-button>
            </header>
            <main class="slds-m-top_large">
                <section class="pokemon-container" lwc:dom="manual">
                </section>
            </main>
            </div>
        </div>
    </lightning-card>
</template>

PokemonPicLwc.js

import { LightningElement } from 'lwc';

export default class PokemonPicLwc extends LightningElement {
    baseUrl = 'https://pokeapi.co/api/v2/pokemon/';
    speciesUrl = 'https://pokeapi.co/api/v2/pokemon-species/';
    
    pokemon;
    pokeNumber = 1;
    pokeSpecies;
    
    // 図鑑番号の取得
    inputChage(event){
        this.pokeNumber = event.target.value;
    }

    // PokéAPIからポケモンの情報を取得する
    requestPokeInfo() {
        fetch(this.baseUrl + this.pokeNumber).then(response => response.json())
        .then(data => {
            this.pokemon = data;
            console.log(data);
            return fetch(this.speciesUrl + this.pokeNumber);
        })
        .then(response => response.json())
        .then(data => {
            this.pokeSpecies = data;
        })
        .catch(err => console.log(err));
    }

    // 取得したポケモンの情報を整理してHTML要素を設定する
    createCard () {
        const pokeName = this.pokeSpecies.names.find((v) => v.language.name == "ja").name;
        const pokeType = this.pokeSpecies.genera.find((v) => v.language.name == "ja");
        let num = ( '000' + this.pokeSpecies.id).slice( -3 );
        const flavorText = this.pokeSpecies.flavor_text_entries.filter(function(v) {
            return (v.language.name == "ja") && (v.version.name == "x");
        })
        
        let card = `
            <div class="slds-grid">
                <div class="slds-col slds-size_2-of-5">
                    <img src="${this.pokemon.sprites.versions['generation-i']['red-blue'].front_default}" class="pokemon-img"/>
                    <p class="slds-text-heading_medium slds-align_absolute-center">No.${num}</p>
                </div>
                <div class="slds-col slds-size_3-of-5">
                    <p class="slds-text-heading_medium slds-m-around_medium">${pokeName}</p>
                    <p class="slds-text-heading_medium slds-m-around_medium">${pokeType.genus}</p>
                    <p class="slds-text-heading_medium slds-m-around_medium">たかさ<span class="slds-m-left_large">${this.pokemon.height  / 10}m</span></p>
                    <p class="slds-text-heading_medium slds-m-around_medium">おもさ<span class="slds-m-left_large">${this.pokemon.weight  / 10}kg</span></p>
                </div>
            </div>
            <hr class="slds-m-vertical_x-small">
            <p class="slds-text-heading_medium slds-text-align_left">${flavorText[0]['flavor_text']}</p>`;
        return card;
    }

    startApp() {
        // PokéAPIからポケモン情報を取得する
        this.requestPokeInfo();
            
        // 取得したポケモンの情報を整理して要素を追加する
        setTimeout(function () {
            const container = this.template.querySelector('.pokemon-container');
            container.innerHTML = this.createCard();
            container.classList.add('slds-box');
            container.classList.add('slds-m-bottom_medium');
            container.classList.add('box-size');
        }.bind(this), 1000);
    }
}

PokemonPicLwc.css

p {
    font-family: 'DotGothic16', sans-serif;
}
.col_center {
    max-width: 600px;
}
.pokemon-img {
    width: 200px;
}
.box-size {
    width: 400px;
    height: 300px;
}
.slds-input.input-number {
    width: 70px;
}
.slds-button.slds-button_brand {
    vertical-align: initial;
}

PokemonPicLwc.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <description>ポケモン図鑑LWC</description>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>