PokeAPIでカード風表示

みなさん、「Pokémon Trading Card Game Pocket」（通称：ポケポケ）遊んでいますか？
なんといってもカードを引くのが楽しいですよね。
pokeAPIというものがあったので、そちらでランダムに5匹のポケモンを選定し、
カード風に表示するページを作成してみました。

pokeAPI:https://pokeapi.co/

完成イメージはこちら：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61550/e3c40584-7464-21ac-5966-a546c75fc4ab.png)

## 仕様
「カードを引く」ボタンを押すと、151匹※のうち、ランダムに5匹のポケモンを抽出して表示。
（※ポケモンは151匹だってイマクニ？が言ってました）
そこから、
・名前
・倒したらもらえるポイント（HP）
・タイプ（複数ですが、表示上１つに・・）
・画像
・わざをランダムに２つ（わざのポイント？も取りたかったのですが、力尽きました・・）
pokeAPIからは英語で帰ってくるので、
「名前」と「わざ名」は日本語に変換します。

HTMLはこのような感じです。
「カードを引く」ボタンと、
cardlistという空のulタグだけ用意しています。
```html:index.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="common.css">
</head>

<body>
    <h1>ポケモンカード</h1>
    <a class="button" href="#">カードを引く</a>
    <ul class="cardlist">
        
    </ul>
    <script src="main.js"></script>
</body>

</html>
```

CSSはSassで記述しました。
タイプをクラスに表示し、カードの背景色とタイプのアイコンと背景色（丸いやつ）をCSSで出し分けしています。
カラーコードは8桁で表記すると透過されるんですね。知らなかった。
タイプ別のカード背景の色分けはなんとなくの色です。
指定カラーコードあるのかな？
タイプアイコンは、fontAwesomeにて、似たようなアイコンを表示させました。
ポケモンの背景は一律に森（byいらすとや）にしました。
こちらもタイプによって出し分けできるといいですね！

さて、Javascriptです。
日本語の取得する際。別のAPIから取得する必要があるのですが、
表示の関数（displayPokemon）が先に走ってしまい苦労しました。
こちらは、asyncを使用することで無事に日本語名を取得することができました。
・ポケモン５匹の情報取得
・ポケモン名の日本語表記
・わざの日本語表記×２
と、４回もAPIをfetchしております。

```javascript:main.js
// カードリストのDOM
const cardlist = document.querySelector(".cardlist");

// ボタンのDOM
const button = document.querySelector(".button");

// 「カードを引く」ボタンを押したら表示
button.addEventListener("click",function(){
    getPokemon();
});

// ポケモンのAPI取得
async function getPokemon(){
   const promises = [];

//    1から151までの5つのランダムな数値を配列に代入
   const randomNumbers = Array.from({ length: 5 }, () => Math.floor(Math.random() * 151) + 1);
   
    // ポケモンのAPIランダムに５つ取得
   for(const num of randomNumbers) {
    const url = `https:pokeapi.co/api/v2/pokemon/${num}`;
    // Promiseの配列に結果を代入
    promises.push(await fetch(url)
    .then(response => {
        if (!response.ok) {
            throw new Error('ネットワークエラーが発生しました');
        }
        return response.json();
    }))
};

   Promise.all(promises).then( results => {
       const pokemon = results.map((data) => ({
           name: data.name,
           id: data.id,
           image: data.sprites.other['official-artwork'].front_default,
           ex: data.base_experience,
           type: data.types.map((type) => type.type.name).join(' '),
           moves: data.moves.map((move) => move.move)
       }));
    
    //    日本語名取得
       japaneseName(pokemon);
   });
};

// ポケモンの表示
async function displayPokemon(pokemon){
    console.log(pokemon);
    let pokemonHTNLString = "";
    for( poke of pokemon ){
        pokemonHTNLString +=
        `<li class="card  ${poke.type}">
        <h2 class="card-name">${poke.name}</h2>
        <p class="card-hp ${poke.type}"><span>HP</span> ${poke.ex}</p>
        <div class="card-image"><img src="${poke.image}"/></div>
        <p class="card-move">${poke.moves} </p>
        </li>  `
    }
   cardlist.innerHTML = pokemonHTNLString;
};

// 日本語名の取得
async function japaneseName(pokemon){
    for( poke of pokemon ){
        // 日本語名
        const nameurl = `https://pokeapi.co/api/v2/pokemon-species/${poke.name}`;
        await fetch(nameurl)
        .then(response => {
            if (!response.ok) {
                throw new Error('ネットワークエラーが発生しました');
            }
            return response.json();
        }).then(results => {
            for(info of results["names"]){
                if(info["language"]["name"] == 'ja-Hrkt'){
                    poke.name = info['name']; 
                    break;
                }
            }
        });

        // 技の日本語名
        // 2つのランダムな数値を配列に代入
        const randMoves = Array.from({ length: 2 }, () => Math.floor(Math.random() * poke.moves.length) + 1);
        poke.moves = "";
        for(i in randMoves){
                const moveurl = `https://pokeapi.co/api/v2/move/${randMoves[i]}`;
                await fetch(moveurl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('ネットワークエラーが発生しました');
                    }
                    return response.json();
                }).then(results => {
                    for(info of results["names"]){
                        if(info["language"]["name"] == 'ja-Hrkt'){
                            poke.moves += info['name'] + "<br>"; 
                            break;
                        }
                    }
                });
        }
    }
    // カードを表示
    await displayPokemon(pokemon);
}

```

完成！
なんだかかわいい～

![Document-Google-Chrome-2024-12-06-14-16-23.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/61550/a4c789e0-71fa-b9df-1925-efc1378edd2d.gif)

APIを合計4回も呼び出しているので、表示に時間がかかっています。。
つぎは「わざ」の情報を充実させたいです。



参考サイト：
JavaScript -ポケモン一覧デモサイトを作ってみた-
https://note.com/branch_it_sol205/n/na6fc2449a4bb
PokeAPI×Reactで作成したポケモン図鑑を日本語表記にする方法
https://zenn.dev/h_aso/articles/2220c857f5b74c
pokeAPIからポケモンのデータを取得する
https://zenn.dev/wanderer_eel/articles/ebcbdd0b034e94