Q&A
質問者さん、無言ですが、回答が出ているのでそれらに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは？ 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。解決したなら解決に役立った回答にベストアンサーをつけてクローズしてください。とにかく無言は NG です。
前提
TypeScriptとReact.jsでポケモンのダメージを計算するシステムを作っています。
PokeAPIというデータベース型のWebAPIを使ってポケモンのデータを取得したいです。
（ポケモンの名前・画像・種族値・技・タイプなど）
649種のポケモンの名前を一度にまとめて取得するような実装をしたいのですが、
サイトを読み込むごとにAPIにアクセスしてデータを取得する以外に
事前にデータを読み込んでおくなどの方法があれば、教えていただけると幸いです。
ポケモンのデータは不変的なので、事前にデータを読み込むのが得策だと考えました。
https://teratail.com/questions/184320
↑の質問の回答でtanatさんがおっしゃった
- データの取得をキューで管理してバックグラウンドで非同期で行わせたり
- データの保存を毎回DBに保存するのではなくて一旦ファイルで保存しておいて、一回のループの時間を短くする
という方法に興味があるのですが、具体的な方法がまったく分かりません。
拙い文章ですみません。
情報が足りない等の不足な点があれば、指摘いただけると幸いです。
発生している問題
PokeAPIは、リクエストが1時間に100回までに制限されています。
補足情報
PokeAPIのドキュメント
https://pokeapi.co/docs/v2
PokeAPIのTypeScript対応のリクエスト送信用のライブラリ
https://pokenode-ts-docs-gabb-c.vercel.app/
回答4件
0
ASP.NET Web API というタグが付いているということは、Visual Studio のテンプレートで作る React アプリ（以下の画像参照）のようにフロントエンドは React、バックエンドは ASP.NET アプリになるのであろうと勝手に想像してレスします。違ったら以下はスルーしてください。
紹介された「PokeAPIのドキュメント」によると、 "PokéAPI is primarily an educational tool, and we will not tolerate denial of service attacks preventing people from learning." なのでルールとして "Locally cache resources whenever you request them." ということです。
どこでキャッシュするのが良さそうかというと、ASP.NET Web API をバックエンドに使うのであれば、以下のような構成にして、
React ⇔ ASP.NET Web API ⇔ PokeAPI
ASP.NET のキャッシュを使ってはいかがですか？
フロントエンドでキャッシュすると（そのための現実的な手段があるのかの話はちょっと置いといて）、例えばユーザーが 101 人いて短期間（1 時間以内）にアクセスが集中したら、質問者さんの言う「リクエストが1時間に100回までに制限」を超えてしまうのでは。
投稿2023/01/11 04:32
退会済みユーザー
総合スコア0
改めて返信が遅くなり申し訳ございませんでした。
ASP.NET Web APIは通常のWebAPIとは異なるというのは存じ上げていなかったです。参考になりました。
今回は、ASP.NETは使わず、TS-Reactのみでフロントエンド・バックエンドを実行する計画でした。
説明不足で申し訳なかったです。
また、ASP.NETをバックエンドに使う時に参考にさせてください。
0
事前にデータを読み込んでおくなどの方法があれば、教えていただけると幸いです。
ポケモンのデータは不変的なので、事前にデータを読み込むのが得策だと考えました。
不変なのであれば、それで良いかと思います。
https://teratail.com/questions/184320
↑の質問の回答でtanatさんがおっしゃった
前の質問を見てみましたが、tanatさんの
データの取得をキューで管理してバックグラウンドで非同期で行わせたり
データの保存を毎回DBに保存するのではなくて一旦ファイルで保存しておいて、一回のループの時間を短くする
は、あなたのサイトへのリクエスト毎に100回APIを発行する場合の話なので、
事前に取得してDBに保存しておくのであれば、どちらも関係ないです。
投稿2023/01/11 04:26
総合スコア84555
0
まずAPIの仕様を調べる。
認証不要でGETリクエストのみならブラウザで表示すればいい。
(1) ポケモンの一覧らしきAPIはこれか…
"count":905で全905件
https://pokeapi.co/api/v2/pokemon-species/
(2) limit付けてみたら制限がないので1回で全部取得できる。
https://pokeapi.co/api/v2/pokemon-species/?limit=1000
(3) id=1を表示したらデータ量が多い。
https://pokeapi.co/api/v2/pokemon-species/1
ドキュメントに書いてあるデータなら1と2を合わせて大きめのlimitを指定すれば1回で全部取得できる。
ブラウザで表示してブラウザで保存すればいい。こんなのはプログラミング以前の話。
3が必要なら1から905まで増やしながら全部保存するプログラムを作ればいい。フロントのJSでやることじゃない。
簡単すぎてこれができない人はいない。
jsonで保存すればどうとでも使える。
投稿2023/01/10 14:32
総合スコア10377
> ブラウザで表示してブラウザで保存すればいい。
「ブラウザで保存」って具体的にどのようにするのですか？
ブラウザでキャッシュする手段があったとしても、例えばユーザーが 101 人いて短期間（1 時間以内）にアクセスが集中したら、質問者さんの言う「リクエストが1時間に100回までに制限」を超えてしまうのですが、そこはどうするのですか？
返信が遅くなり申し訳ございません。
URLにlimitを付け加えると、制限の大きさを変更できるんですね。
大量のデータを保存するようなプログラムはバックエンド等に任せるのが最適解なんですね。
フロントエンドとバックエンドを作る際に、参考にさせてもらいます。
0
ベストアンサー
いちど何か簡単なスクリプトを書くなりして全データをDBに保存したら、あとはAPIリクエスト0回に出来るんじゃないでしょうか
DBじゃなくてファイル内に定数で持ってしまっても良いかと思います
投稿2023/01/10 12:24
総合スコア1453
それは PokeAPI とかでどうやるのですか？
返信が遅くなり申し訳ございません。
ご提案に沿って、Pythonを使って全データをjsonファイルに保存することができました。
期待に近い回答であり、回答が早かったという理由でベストアンサーにさせてもらいました。
あなたの回答
tips
プレビュー
