このnoteは、プログラミング超初心者・独学勢の私が、（無謀にも）未経験のReact.jsでWebアプリ開発に取り組んじゃうお話でございます。
果たして本当にWebアプリが完成するのか？
どうぞ、フォローして今後の経過をご覧くださいまし。

前回

今日の課題

「ジャパンサーチのAPIから取得するデータを一覧表示」するための詳細設計と開発予定を考える。

課題のための準備

さてー、昨日設定した課題を見直し、今日何をするべきかを明確にしてみます。
「ジャパンサーチのAPIから取得するデータを一覧表示」するための詳細設計と開発予定を考えること、を課題に設定していますが、これは今日中に達成できなくてもいいかもしれません。
まずは、こういう技術が必要そうだな、とか、こうやったら作れそう、というぼんやりとした方向性を見つけていきたいと思います。

ReactでAPIにアクセスする方法

「ジャパンサーチのAPIから取得するデータを一覧表示」を言い換えると、「ReactでAPIにアクセスし、一覧表示する」という機能が必要になります。
そこでネットで検索してみますと、それらしい記事がいくつも出てきました。その中で、https://omathin.com/react-api-2/ にて、ReactでAPIにアクセするのは主に2つの方法があると書かれていました。

このどちらかを実装するのが良さそうです。実際、この内容の記事はいくつも出てきました。

しかし、”axiosを用いる”のと”JavaScriptのfetchメソッドを用いる”のではどちらがいいのでしょうか。
ちょっとここは手っ取り早くChatGPT君に聞いてみます。

うーん、いまの私にはどちらもよくわからない。が、fetchメソッドの方がモダンっぽくてかっこよさそうだなあ。とういうことで、
イケてそうなfetchメソッドを採用したいと思います！

ざーとみた感じ、APIのリンクをfetchメソッドの記述にぽっと貼って、あとはモニョモニョとあれやこれややっていくだけのようですね。
うん、行けそうな気がしてきました。

アクセスするAPIの確認

さて、fetchメソッドを使う際に必要なAPIのリンクを確認しようと思います。公式HPで簡単にリンクが見つかるのでしょうか？
とりあえず公式HPを見てみます。
ジャパンサーチでは、登録されたコンテンツの情報群をさまざまな形式で取得することができるようです。

今回はJSON-LD形式になりそうですね。（たぶん）

また、

と、2200万件のメタデータを利用できるようです。
なんて多いことでしょう。

ところで、公式HPを簡単に読んでみましたが、ジャパンサーチの全データ情報を渡すためのリンクは見つかりませんでした。
ちょっと今回のリサーチではこのAPIについてよく知ることができなかったので、明日調べてみることにします。
もしかすると、活用事例の記事などで欲しい情報が見つかるかもしれません。

明日の課題

ジャパンサーチのデータを取得するため、”APIのアクセス先”を見つける。