朝活129日目　やっとAPIが叩ける

2024年4月12日 08:15

さてさてさーて、今日もやっていくー

まずはなんでホットリロードが効くようになったのかを検証

最初に書いたのはdocker-compose使ってるので、docker-compose.ymlに下記内容を追記した。

      - CHOKIDAR_USEPOLLING=true
      - CHOKIDAR_INTERVAL=1000

これではダメで、package.jsonに下記を追記したら動くようになったぽい

"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",

めでたしめでたし！
これで開発がストレスフリーでできるー

んじゃま、まずは単純にAPI叩くところからやっていきますかねー

と、意気込んでやっていたのですが、MUIで導入したテンプレートにjsファイルとtsxファイルが混在していました。
内容は一緒っぽいのに、内容を削除するとエラーが出てきて、なんやねん！
jsファイルの変更は反映されるけどtsxの内容は反映されない。。。

あれやこれや調べたりしても分からず。。。
ChatGPTはファイル消せって言ってるけど、内容消したらエラー出るのに。。。
っと思いながらも削除してみたら、普通にtsxで動き出しましたw

ChatGPT、、、疑ってごめんよ！

今度こそ開発開始だ！！

src/components/dashboard/Orders.tsx がレンダリングされた時に特定のAPIを叩いてjson形式の値を取得したいです。できればAPIを叩く処理を分けたいので、処理を新しいファイルに書く、ファイルの名前を考える、ファイルを置くディレクトリを教えてください。

ChatGPT

APIを叩く処理を分けて管理することは、コードの再利用性とメンテナンス性を向上させます。このための一般的なアプローチは、サービス層またはAPIユーティリティ層を作成することです。

ファイルの名前:
APIに関する関数を集めたファイルの名前は、その関数が何をするかに基づいて命名します。例えば、注文に関連するAPIを叩く関数がある場合、ファイル名を `ordersService.js` や `ordersApi.js` などとすることができます。
ファイルを置くディレクトリ:
API関連のコードを格納するために、プロジェクトの `src` ディレクトリ内に `services` または `api` という名前のディレクトリを作成するのが一般的です。これにより、API呼び出しを行う関数やサービスを一元管理できます。
処理を書く新しいファイルの作成:
注文情報を取得するためのAPI呼び出しを行う新しいTypeScriptファイルを `src/services` に作成します。以下はそのファイルの基本的な構造です：

// src/services/ordersApi.ts

const API_URL = 'https://example.com/api';

export const fetchOrders = async () => {
  try {
    const response = await fetch(`${API_URL}/orders`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return await response.json();
  } catch (error) {
    // Error handling
    console.error('There was a problem with the fetch operation:', error);
    throw error;
  }
};

コンポーネント内での使用:
次に、`Orders.tsx` コンポーネント内でこの新しいAPI関数を使用します。Reactの `useEffect` フックを使って、コンポーネントがマウントされたときにデータを取得することができます：

// src/components/dashboard/Orders.tsx

import React, { useEffect, useState } from 'react';
import { fetchOrders } from '../../services/ordersApi';

const Orders = () => {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    const getOrders = async () => {
      try {
        const ordersData = await fetchOrders();
        setOrders(ordersData);
      } catch (error) {
        // Error handling
        console.error(error);
      }
    };

    getOrders();
  }, []);

  return (
    // JSX to display orders...
  );
};

export default Orders;

このように、API呼び出しを行うコードを分離して、コンポーネントからはそれを単純に利用するだけにしておくと、将来的な変更や他のコンポーネントでの再利用が容易になります。また、APIのエンドポイントや呼び出し方式が変更された場合にも、コンポーネントのコードを変更することなく、`ordersApi.ts` ファイルだけを更新することで対応できるようになります。

やっとAPI叩くところまで辿り着いて今日は終了しますー

見た目だけ少しいじる。

準備して出社ー

この記事が気に入ったらサポートをしてみませんか？

朝活129日目 やっとAPIが叩ける

朝活129日目　やっとAPIが叩ける