はじめに
昔、ゲームの攻略本とかで武器や防具、アイテムが一覧で載っているページってワクワクしませんでしたか？
今回、下記記事で「Poke API」という存在を知りまして、触ってみようと思いReact、TypeScriptでポケモン図鑑を制作しました。
この記事からコードの一部を参考及びファイルを拝借（ポケモン名の和訳jsonファイル）させていただきました。
2023/11/24 追加更新
和訳ファイルを使用せず、APIデータからポケモンの和名を直接取得・反映させるようにしました。
ピカチュウって今、こんなに色々なバリエーションあるんですね……。
作ったもの
※画質悪し。 @hato_code さんにご教授いただいた動画キャプチャーサービスGyazoを利用して再アップしました。
各ポケモンを選択すると以下のように詳細情報が確認できます。
カラカラの紹介文……切なすぎますね泣。幸せになってくれ泣。
こだわり
- 1：ポケモンが動く
筆者が幼き頃、ポケモンで遊んでいて衝撃を受けたのがポケモンが動いていることでした。確かクリスタル？とかから動くようになった記憶が……あまり話過ぎると年齢がバレそうですね（まぁバレても何の問題もないのですが）。
今回「童心をくすぐる」ということなので、ポケモンたちには動いてもらうことにしました。結構ノスタルジックな思いになりましたが、これはまさしく自己満仕様です。
※画質悪し。@hato_code さんにご教授いただいた動画キャプチャーサービスGyazoを利用して再アップしました。
ついでの説明になりますが、図鑑なので検索機能も設けました。上記はルギアを検索したところですね。タイトルも「爆誕」ですし……
- 2：背景画像のランダム表示
これも昔、ポケモンをポケモンセンターに預けてボックス（でしたかね？）で確認する時「確かポケモンが並んでいた背景画像が随時切り替わっていたような……」という記憶から実装することを決意。
スマートフォン閲覧時は全く分かりませんが（笑）、ページ遷移するたびに背景画像がランダム表示される仕組みになっています。もちろんこれも自己満仕様です。
ちなみに、これらの背景画像は Bing のImage Creatorに生成してもらいました。
ピカチュウとかむっちゃピカチュウなんですけど良いんでしょうかね？
話が逸れるので深入りしませんが、「Image Creator」には DALL・E 3 が使用されていています。OpenAI の ChatGPT と違って商用利用不可になっているのでご注意ください。
-
3：モンスターボールを使ったインタラクション
ページ送り時にモンスターボールが「うにょっ」と動くのが個人的にお気に入りです！
-
4：自作のページネーション（ページ送り）機能
以前自分が作ったサイト（不動産取引情報取得サイト）から応用できるのでは？と思い、その機能を持ってきました。
Reactはコンポーネントベースなので融通が効いていいですね！
さいごに
今回制作したポケモン図鑑のGitHubを載せておきます。
気になる方は自由にダウンロードしてご使用ください。
ここまで読んでいただいて、ありがとうございました！