開発日記_day5

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

前回

今日の課題

エラーを解消する

課題のための準備

さてー、本日はエラーの解消から。
まずはエラー文を読みます。

エラー①Module not found

エラーは、「Module not found: Error:」以下ディレクトリ名が記述されていました。ChatGPTによると、「Webpackがモジュールを解決できないという問題が発生しています」ということのようです。
色々とソースコードや関連ファイルを見直していたところ、あることを思い出しました。
それは、環境構築時に「React-app」でルートファイルを作成したのですが、その後ルートファイルの名前を「Tohaku-app」に変更したことです。
Visual Stidio CodeでRenameしたのみで、関連するファイルのソースコードなどを修正していませんでした。

そこで、環境構築からやり直すと、Module not foundエラーは解消されました。しかし、ここで新たなエラーが発生します。

エラー②useState' is not defined no-undef

こちらのエラー原因は簡単に見つかりました。
useStateをインポートする際に「useStae」となっていたので、綴りを訂正します。

よし！と思ったのも束の間、

また、次のエラーが表示されました。。。

エラー③cards.map is not a function

このエラーには苦戦しました。
結論から言うと、JSONで返ってくるデータに対し、map関数を使っているためエラーとなっていました。map関数は配列にしか使えない処理です。

ChatGPTも下記のように答えていました。

提供いただいたエラーメッセージを見る限り、「cards.map is not a function」というエラーが発生しています。このエラーは、cardsという変数（またはオブジェクト）が配列ではなく、map関数を呼び出すことができない場合に発生します。

解決策として以下の点を確認してみてください。
cardsが本当に配列か確認: エラーメッセージから推測するに、cardsは配列ではないかもしれません。cardsが配列であることを確認してください。JavaScriptで配列を処理するためには、map関数を使用できます。
データの取得と設定: もしcardsがAPIなどから取得したデータである場合、データの取得と設定が正しく行われていることを確認してください。データの取得が遅延している場合、cardsがまだ配列ではない可能性があります。
cardsがオブジェクトの場合: もしcardsがオブジェクトであり、map関数を使いたい要素がそのオブジェクトのプロパティである場合、まず必要なデータを抽出して配列に変換する必要があります。

ChatGPT

参考元のブログを再度確認すると、確かにブログでアクセスしていたAPIでは、JSONの配列の形でデータが返されていました。

JSONのデータが返ってきた場合の処理に修正

理由がわかったところで、改善方法について全くわかりません。
ということで、ChatGPTに聞いてみたら全く違うコードが出てきました。
とりあえず、何も考えず写経してみます。

すると… できた！
できました！

APIで取得したデータを表示成功

「東京国立博物館」で検索した結果がJSONで返され、Webページに表示されています。

「東京国立博物館」で検索した結果のJSONデータ

まずは、「ジャパンサーチのデータベースに対して「東京国立博物館」で検索した結果をReactのfecthメソッドを用いて取得・表示する。」クリアです！

書いたコードのロジックがよくわかっていないまま写経したので、明日はこのコードを読み返してみたいと思います。

明日の課題
写経したコードを読み直す