APIってなに？

APIとは

・APIは「Application Programming Interface」の略
・アプリ同士がデータをやり取りするためのルールや仕組みの総称

APIはデータを出し入れする窓口

アプリで使用されるデータは基本firebaseなどのデータベースに格納されています。データベースはいわゆる倉庫です。
APIはその倉庫(データベース)から欲しい情報だけを持ってきてくれます。あるいは保存したい情報を正しい場所に倉庫に格納してくれます。

例：Reactでフロントエンドを開発している場合
①倉庫（データベース）にはたくさんの箱（データ）が入っています。
②あなた（Reactアプリ）は欲しい箱がどこにあるかわかりません。
③倉庫の窓口(API)に「〇〇の箱を持ってきて！」とお願いをします
④リクエスを受けた窓口（API）は必要な箱を倉庫から見つけて渡してくれます。

なぜAPIで仲介するのか

データベースから直接データを持ってこれば良くないかと思うかもしれません。
ですがAPIを通すことで以下の点を実現できます。

1. セキュリティの向上
・データベースへの直接アクセスは危険です。APIによって改竄や漏洩を防止します。
・APIがアクセス制限や認証を管理するので安全性が高まります。

2. データのフォーマットが整う
・データベースの生データはそのままだと使いにくいことがあります
・APIが必要な部分だけを整えて渡してくれるので、フロントエンドで扱いやすいです

3. 再利用性が高い
・APIは一度作成すれば、他のアプリやサービスでも使えます

4. バックエンドの変更がフロントエンドに影響しにくい
・APIがデータベースとのやり取りを抽象化するため、データベースの構造が変わってもフロントエンドへの影響が少なくなります。

フロント開発をする際にAPIをどう意識するか

バックエンドのことはわからないのに、フロントエンド開発をしなければいけないこともあります。特にチーム開発の場合、PMから「必要なAPIがあったら教えてください」とか「APIを意識して作業をしてください」などと言われたら、頭が真っ白になるかもしれません。

ではフロント開発をする人は、コーディングを行う際にAPIをどのように意識すれば良いのでしょうか？
以下に考え方を順に6つまとめるので、参考にしてみてください。

1.必要なデータを特定する

まずは自分が担当している部分で必要なデータにはどのようなものがあるのかを明確にしましょう。
例：ログインしているユーザー名・記事情報・作業進捗(生徒管理アプリ等の場合)

2.APIを使って取得する必要があるデータを確認

必要なデータがどのAPIエンドポイントで提供されているかを確認します。
これはプロジェクトでバックエンドを担当している人に相談が必要になる場合があります。

*APIエンドポイントとは…
APIが提供する「データ取得や送信の窓口」のことです。通常URL形式で表現されるもので、APIリクエストを送るときにURLを使用します。
データによってURLの記述が異なるので、そのデータのAPIエンドポイントを正しく把握していないと、欲しいデータを得ることができません。

3.ダミーデータで仮のUIを作る

最初はAPIを使わずに、仮のデータ（ダミーデータ）を使って画面を作成します。
UIが完成したらAPIを使って実際のデータを取得する処理に置き換えていきます。

ダミーデータでUI制作する例

const dummyData = [
  { id: 1, message: "ようこそ！" },
  { id: 2, message: "お知らせがあります！" },
];

return (
  <div>
    {dummyData.map((item) => (
      <p key={item.id}>{item.message}</p>
    ))}
  </div>
);

4.APIを使ってデータを取得

仮のデータを本物のデータに置き換える段階でAPIを使います。
ここではAPIを呼び出すための構文が必要なので、調べたりプロジェクトメンバーに相談しながら行っていきましょう。

APIに置き換える例

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch("http://localhost:8000/api/notifications"); //APIエンドポイント
    const data = await response.json();
    console.log(data);
  };

  fetchData();
}, []);

5.APIのエラーハンドリングを実装

APIリクエストが失敗する可能性を考慮し、エラーハンドリングも実装します。

エラーハンドリングの例

const fetchData = async () => {
  try {
    const response = await fetch("http://localhost:8000/api/notifications");
    if (!response.ok) {
      throw new Error("データの取得に失敗しました");
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
};

大切なのは、APIを使用するデータの洗い出しとダミーデータでUIを作るという部分です。それ以降のAPIが直接絡む部分はその時調べたり聞いたりして進めていけば問題ないと思います。

まとめ

APIとは

・データをやり取りする窓口のような仕組みで、アプリとデータベースの橋渡しをします

APIを使うメリット

・動的なデータを画面に表示できます
・データを安全に管理できます

APIを意識したフロント開発の仕方

・必要なデータを把握する
・UIをダミーデータで作成
・APIを使用して動的なデータに置き換える
・APIリクエストのエラーハンドリングを忘れない

以上のようにAPIを正しく理解し、活用することで、フロントエンド開発の効率化とバックエンドとのスムーズな連携が可能になります。