Next.js[App Router]とPokeAPIでポケモンを番号で検索する。
2024/04/09 (火) - 00:00 JavaScript
前回テストでNext.jsでパスの取得方法を試してみたので、今回はそれとPokeAPIのテストを応用して、ポケモン番号でポケモンを探せるやつを作りました。
検索画面ではポケモンの番号を入れる検索のテキストボックスと検索実行ボタンのみ配置。
ポケモン検索ボックスのあるpage.jsのコード。
"use client"
import { useState } from 'react';
import { useRouter } from 'next/navigation'
function PokeAPIHome() {
const [number,setNumber] = useState(null);
const router = useRouter();
const buttonGO = (number) =>{
router.push(number);
}
const onChange = (e) =>{
setNumber(e.target.value);
}
return (
<div>
<form>
<p>ポケモンの番号を入れてね</p>
<p><input type="number" min="1" value={number} onChange={ onChange } placeholder="151" />
<button type="button" onClick={ () => buttonGO( number ) }>ゲットだぜ!!</button></p>
</form>
</div>
);
}
export default PokeAPIHome;表示結果の[number]/page.jsのコード。
検索ボタンを押下すると、/ポケモン番号/というパスで遷移させる想定です。例えば入力画面で151と記入したら/151/というパスに遷移して、ミュウが表示れる…というもの。
import { notFound } from 'next/navigation'
async function PokeAPIDetail({ params }) {
const number = params.number;
const pokeAPI = `https://pokeapi.co/api/v2/pokemon/${number}`;
const getAPI = async(url) => {
const res = await fetch(url);
if (res.ok) {
return res.json();
}else{
notFound();
}
}
const getPokemonName = async(data) => {
const PokemonName = data.names.find((val) => val.language.name === "ja");
return PokemonName.name;
}
const getPokemonType = async(data) => {
let typeText = '';
typeText = data.map( async(t,i) => {
const getTypes = await getAPI(t.type.url);
const getType = getTypes.names.find((val) => val.language.name === "ja");
if(i>0){
return '/'+getType.name;
}else{
return getType.name;
}
});
return typeText;
}
const dataAPI = await getAPI(pokeAPI);
const IMG = dataAPI.sprites.other['official-artwork'].front_default;
const Name = await getAPI(dataAPI.species.url);
const Type = getPokemonType(dataAPI.types).then(res => {
return res;
});
const NameJA = getPokemonName(Name).then(res => {
return res;
});
return (
<div>
<p>No.{number}</p>
<p><img src={IMG} alt={NameJA} width="250" height="250" /></p>
<h2>{NameJA}</h2>
<p>{Type}</p>
</div>
);
}
export default PokeAPIDetail;実行結果。281と検索するとキルリアが表示されました。
なお、前のコードを流用して突貫で作成したのでエラー処理はそこまで作り込まず。もしAPIでエラーが発生したら404エラーとして遷移するだけです。
node.jsが動くサーバにデプロイして正常に動くことは確認しましたが、検索周りの処理の作り込みがまだ甘いので改良の余地あり。
