みなさん、「Pokémon Trading Card Game Pocket」（通称：ポケポケ）遊んでいますか？
なんといってもカードを引くのが楽しいですよね。
pokeAPIというものがあったので、そちらでランダムに5匹のポケモンを選定し、
カード風に表示するページを作成してみました。
pokeAPI:https://pokeapi.co/
完成イメージはこちら：
仕様
「カードを引く」ボタンを押すと、151匹※のうち、ランダムに5匹のポケモンを抽出して表示。
（※ポケモンは151匹だってイマクニ？が言ってました）
そこから、
・名前
・倒したらもらえるポイント（HP）
・タイプ（複数ですが、表示上１つに・・）
・画像
・わざをランダムに２つ（わざのポイント？も取りたかったのですが、力尽きました・・）
pokeAPIからは英語で帰ってくるので、
「名前」と「わざ名」は日本語に変換します。
HTMLはこのような感じです。
「カードを引く」ボタンと、
cardlistという空のulタグだけ用意しています。
<!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しております。
// カードリストの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);
}
完成！
なんだかかわいい～
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