開発日記_day6

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

前回

https://note.com/sloth_run_sloth/n/ncbb74497e1ce

今日の課題

写経したコードを読み直す

課題のための準備

さてー、本日は、前回とりあえず写経したfetch関数でJASONデータを取得するコードを読み直していきます。

前回写経したコードはこちらです。

import React, { useState, useEffect } from 'react';

const ApiFetch = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jpsearch.go.jp/api/item/search/jps-cross?keyword=東京国立博物館');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      <h1>API Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default ApiFetch;

状態を管理するためにuseStateフックを使用

まず、Reactコンポーネント内で状態を管理するため、Reactフックの一部であるuseStateを使用しています。公式ドキュメントで使い方を確認します。

useState is a React Hook that lets you add a state variable to your component.
const [state, setState] = useState(initialState);

https://react.dev/reference/react/useState

下記が該当行です。dataが現在の状態を表す変数、setDataはこの状態を更新するための関数です。APIから取得したデータをdata状態変数に格納し、UIでそのデータを表示するために使用します。

const [data, setData] = useState(null);

ChatGPTの解説でも同様のことが述べられています。

data: これは現在の状態を表す変数です。useStateフックを使用して宣言され、初期値としてnullが設定されています。この状態変数は、後でAPIから取得したデータを格納するために使用されます。
setData: これは状態変数dataを更新するための関数です。通常はこの関数を呼び出してdataの値を変更します。新しい値を渡すことによって状態を更新できます。たとえば、setData(newValue)と呼び出すことで、dataの値をnewValueに設定できます。

ChatGPT

useEffectの中で非同期の関数fetchDataを定義、呼び出し

公式ドキュメントのuseEffectのUsage欄に「Fetching data with Effects」とあります。Reactでfetch関数を用いる時、useEffectを使用してレンダー後にfetch関数を処理するようにしています。

fetchData関数内の処理

const fetchData = async () => {
      try {
        const response = await fetch('https://jpsearch.go.jp/api/item/search/jps-cross?keyword=東京国立博物館');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();

JavaScriptの構文として、await式のエラーはtry …catchできるようです。非同期処理でのエラー処理ということで、今後勉強が必要そうです。

エラー処理に必要な基本的な知識

まずは、エラー処理に必要な基本的な知識をおさらい。
ここでは必要な基本的知識として、以下の 3 つを取り上げています。try...catch
throw 文
エラーオブジェクト

https://zenn.dev/arei/articles/6f3d0e9a617272

さて、fetch関数内の処理についての説明はChatGPTの力を借りました。

1. fetch関数を使用して指定されたURL（https://jpsearch.go.jp/api/item/search/jps-cross?keyword=東京国立博物館）にHTTPリクエストを送信します。このURLは、東京国立博物館に関する情報を取得するためのものです。

2. HTTPリクエストが成功した場合、レスポンスデータをJSON形式に変換し、jsonData変数に格納します。

3. setData(jsonData)を呼び出して、data状態変数を取得したJSONデータで更新します。これにより、APIから取得したデータがReactコンポーネントの状態に格納され、UIが更新されます。

4. エラーハンドリングが行われており、HTTPリクエストが失敗した場合にはエラーメッセージがコンソールに表示されます。

ChatGPT

取得したJSONデータを文字列として表示

  return (
    <div>
      <h1>API Data</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );

最後に、取得したJSONデータを<pre>要素を用いて文字列として表示します。
具体的な処理は次の通り；

{} 内の中括弧内にはJavaScriptコードが埋め込まれており、その中でJSONデータを文字列に変換しています。
JSON.stringify(data, null, 2) は、data変数に格納されているJavaScriptオブジェクト（JSONデータ）を整形された文字列に変換します。
data は、前の部分でAPIから取得したJSONデータが格納されている状態変数です。
null は、オプションのリプレイサー関数を指定するもので、ここではリプレイサーを使用しないためにnullが指定されています。
2 は、インデント（スペースの数）を指定しています。この場合、JSONデータが2スペースごとにインデントされた形式で表示されます。
最終的に、<pre>要素内に変換されたJSONデータの文字列が表示されます。<pre>要素はプリフォーマットされたテキストを表示するためのHTML要素で、テキスト内の改行やスペースなどがそのまま保持されるため、JSONデータを見やすく表示するのに適しています。

ChatGPT

以上が前回写経したコードの内容です。
第一段階クリアしたので、次はUIをもう少し整えたいと思います。例えば、一覧を表にするなど。

明日の課題
UIを整える