質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

ASP.NET Web API

ASP.NET Web APIはブラウザやモバイル機器のようなクライアント向けのHTTPサービスを構築するフレームワークです。Microsoft .NET Frameworkがベースになっており、RESTfulサービスを構築するには理想的です。

Q&A

解決済

4回答

2381閲覧

WebAPIから大量のデータを取得する方法

jupeeze

総合スコア5

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

ASP.NET Web API

ASP.NET Web APIはブラウザやモバイル機器のようなクライアント向けのHTTPサービスを構築するフレームワークです。Microsoft .NET Frameworkがベースになっており、RESTfulサービスを構築するには理想的です。

0グッド

0クリップ

投稿2023/01/10 12:17

前提

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/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2023/01/12 03:18

質問者さん、無言ですが、回答が出ているのでそれらに対するフィードバックを返してください。役に立った/立たなかったぐらいはすぐに返せるのでは? 役に立たなかったならどこがダメかを書くとより期待に近い回答が出てくるかも。解決したなら解決に役立った回答にベストアンサーをつけてクローズしてください。とにかく無言は NG です。
jupeeze

2023/01/12 07:23

コメントが遅くなり、申し訳ございません。 一昨日から、yumaさんとotnさんの回答の通りに、全データを取得しようと試行していました。 回答してくださった皆様へのフィードバックよりも自分のプログラミングを優先してしまいました。 次回からはコメントを最優先にして、回答者の皆様に待たせることがないよう努めます。 誠に申し訳ございませんでした。
jupeeze

2023/01/12 07:43

回答してくださった皆様、本当にありがとうございました
guest

回答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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jupeeze

2023/01/12 07:28

改めて返信が遅くなり申し訳ございませんでした。 ASP.NET Web APIは通常のWebAPIとは異なるというのは存じ上げていなかったです。参考になりました。 今回は、ASP.NETは使わず、TS-Reactのみでフロントエンド・バックエンドを実行する計画でした。 説明不足で申し訳なかったです。 また、ASP.NETをバックエンドに使う時に参考にさせてください。
guest

0

事前にデータを読み込んでおくなどの方法があれば、教えていただけると幸いです。
ポケモンのデータは不変的なので、事前にデータを読み込むのが得策だと考えました。

不変なのであれば、それで良いかと思います。

https://teratail.com/questions/184320
↑の質問の回答でtanatさんがおっしゃった

前の質問を見てみましたが、tanatさんの

データの取得をキューで管理してバックグラウンドで非同期で行わせたり
データの保存を毎回DBに保存するのではなくて一旦ファイルで保存しておいて、一回のループの時間を短くする

は、あなたのサイトへのリクエスト毎に100回APIを発行する場合の話なので、
事前に取得してDBに保存しておくのであれば、どちらも関係ないです。

投稿2023/01/11 04:26

otn

総合スコア84864

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jupeeze

2023/01/12 07:38

返信が遅くなり申し訳ございません。 前の質問の提案はAPIを多数に発行する場合に必要なんですね。スッキリしました。
guest

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

kawax

総合スコア10377

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2023/01/11 04:05

> ブラウザで表示してブラウザで保存すればいい。 「ブラウザで保存」って具体的にどのようにするのですか? ブラウザでキャッシュする手段があったとしても、例えばユーザーが 101 人いて短期間(1 時間以内)にアクセスが集中したら、質問者さんの言う「リクエストが1時間に100回までに制限」を超えてしまうのですが、そこはどうするのですか?
jupeeze

2023/01/12 07:35

返信が遅くなり申し訳ございません。 URLにlimitを付け加えると、制限の大きさを変更できるんですね。 大量のデータを保存するようなプログラムはバックエンド等に任せるのが最適解なんですね。 フロントエンドとバックエンドを作る際に、参考にさせてもらいます。
guest

0

ベストアンサー

いちど何か簡単なスクリプトを書くなりして全データをDBに保存したら、あとはAPIリクエスト0回に出来るんじゃないでしょうか
DBじゃなくてファイル内に定数で持ってしまっても良いかと思います

投稿2023/01/10 12:24

yuma.inaura

総合スコア1453

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2023/01/10 12:57

それは PokeAPI とかでどうやるのですか?
jupeeze

2023/01/12 07:42

返信が遅くなり申し訳ございません。 ご提案に沿って、Pythonを使って全データをjsonファイルに保存することができました。 期待に近い回答であり、回答が早かったという理由でベストアンサーにさせてもらいました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問