はじめに

こんにちは！
未経験からエンジニアを目指して学習中のhayateです。

今回は useState と useEffect を使って外部APIからデータを取得し、
画面に表示するミニアプリを作ります。
初心者の方がつまずきやすいポイント（非同期処理・APIの扱い）を押さえながら、
2時間以内で完成できるシンプルな実装例を紹介します。

完成形はこんな感じです👇

今回作るアプリの概要

ユーザーIDを入力 → ボタン押下でデータ取得
取得結果をカード形式で一覧表示
ローディング中の表示あり
無料のサンプルAPI JSONPlaceholder を利用

⚙️ 開発環境と事前準備

Node.js v◯◯
npm v◯◯
Vite（またはCreate React Appでも可）
JSONPlaceholder（https://jsonplaceholder.typicode.com/）

2.実装の流れ

プロジェクト作成（Vite）
必要な状態（useState）を定義
ボタン押下でfetch APIを呼び出す
ローディング表示とエラー処理を追加
カード形式でデータを表示

コードの全体図を提示しつつ、プロジェクト作成のフェーズから行っていきます。

コード全体（完成版）

// App.jsx
import { useState } from "react";

function App() {
  const [query, setQuery] = useState("");
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    if (!query) {
      alert("User IDを入力してください");
      return;
    }
    setLoading(true);
    setError(null);
    try {
      const res = await fetch(
        `https://jsonplaceholder.typicode.com/posts?userId=${query}`
      );
      if (!res.ok) throw new Error("API取得エラー");
      const json = await res.json();
      setData(json);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ padding: "20px", fontFamily: "sans-serif" }}>
      <h1>React × useState × fetch API</h1>
      <div style={{ marginBottom: "10px" }}>
        <input
          type="number"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          placeholder="User IDを入力"
          style={{ padding: "6px", marginRight: "8px" }}
        />
        <button onClick={fetchData} style={{ padding: "6px 12px" }}>
          データ取得
        </button>
      </div>

      {loading && <p>読み込み中...</p>}
      {error && <p style={{ color: "red" }}>エラー: {error}</p>}

      <div>
        {data.map((item) => (
          <div
            key={item.id}
            style={{
              border: "1px solid #ccc",
              borderRadius: "8px",
              padding: "10px",
              marginBottom: "10px",
            }}
          >
            <h3>{item.title}</h3>
            <p>{item.body}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

3.プロジェクト作成（Vite）

VSCode内で進めていくので、まずはフォルダー作成から。
今回のテーマに沿ってフォルダー名は「react-api-sample」と設定。

VSCodeを開いてターミナルを出し、bashモードに切り替え。

そして、ターミナル上に以下の順番でコードを記述します。

💻 記述する順番

① npm create vite@latest react-api-sample --template react  
   → 最新版のViteを使って新規プロジェクトを作成するためのコード

② cd react-api-sample  
   → プロジェクトフォルダに移動

③ npm install  
   → 必要なパッケージをインストール

④ npm run dev  
   → 開発サーバーを起動

前述した通りにターミナルを記述すると、ターミナルに http://localhost:5173 という
URLが表示されるので、クリックしてブラウザで開きます。

ブラウザで http://localhost:5173 を開き、
初期画面が表示されれば準備完了です。

4.必要な状態（useState）を定義

useStateの定義を設定する前に、「react-api-sample」の構成に必要な
フォルダーやファイルは以下の通りになるように設定します。

react-api-sample/
├─ node_modules/        # 依存パッケージ
├─ public/              # 静的ファイル（画像など）
├─ src/                 # ソースコード
│  ├─ assets/           # 画像やCSS
│  ├─ App.css           # Appコンポーネント用のCSS
│  ├─ App.jsx           # メインコンポーネント（ここを編集）
│  ├─ index.css         # 全体のCSS
│  └─ main.jsx          # Reactアプリのエントリーポイント
├─ .gitignore
├─ index.html           # HTMLのひな形
├─ package.json         # 依存関係やスクリプト
├─ vite.config.js       # Viteの設定
└─ README.md

ここまで下準備ができた上で、useStateの定義のフェーズへ。
App.jsx の中に useState の定義を追加します。

App.jsxへ保存ができました。

5.ボタン押下でfetch APIを呼び出す（エラー対応）

ボタンをクリックしたらAPIを呼び出し、
データを取得する処理を追加します。

ここから、ターミナルを出し、bashモードに切り替え。
「npm run dev」を記述→ URLをクリックしてブラウザで開きます。

ここで、エラー表示がなされてURLが出ませんでした。
chatGPTに問いかけてみたところ、プロジェクト作成がなされていなかったようです。

中身を全部消して新規作成する形で進めてみます。
ということでまずは、ターミナルに「rm -rf react-api-sample」と入力。

react-api-sampleの初期化が確認できたら、改めてViteプロジェクトを作成したいので
bash上に「npm create vite@latest react-api-sample」と入力。

◆  Select a framework:
│  ● Vanilla
│  ○ Vue
│  ○ React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others

ターミナルにこのような表示がみられたので、
矢印キー ↓ を使って「React」、「JavaScript」の順で
エンターキーを押していきます。

Scaffolding project in ./react-api-sample...
Done. Now run:
cd react-api-sample
npm install
npm run dev

という表示が見られたのでプロジェクトの作成は完了しました。

5.ボタン押下でfetch APIを呼び出す

エラー対応もできたので、ここからこのフェーズの本題へ入ります。

この状態ではまだデータ取得ボタン＋結果表示は実装されていないので、
「loading / error / data:」も画面に表示できるように、次のように設定します。

VSCodeにて、App.tsxファイルに上記のコードを記述することで、
ブラウザ上では次のように表示されます。

この表示がされたのを確認した上で、

・「Countボタン」をクリックしてcount:0の数値が変わるか
・「データ取得」をクリックして結果表示がされるか

これらが確認できればこのフェーズは完了です。
スクショ画像を添付するとこんな感じになります。

6.ローディング表示とエラー処理を追加

このフェーズは「ボタン押下でfetch APIを呼び出す」までのフェーズで
コードのベースができているので、やることはシンプルです。

まず、ローディング表示については「データ取得」をクリックした瞬間に
「loading: データ読み込み中...」と表示されればOKです。
ちなみに「loading: データ読み込み中...」と表示されたものがこちらです。

次にエラー処理を追加についてです。
「ボタン押下でfetch APIを呼び出す」の時のApp.tsxファイル内の13、14行目の

try {
      const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');

の中のURLをダミーのURLに変えることで、意図的にエラーを起こす工程です。
今回はダミーのURLを　https://jsonplaceholder.typicode.com/posts/INVALID
として、コードを保存→リロードすると以下のようになりました。

「error: HTTPエラー: 404」の表示が見られたので、このフェーズは完了です。

7.カード形式でデータを表示

このフェーズでは「データ取得」をクリックすると、見た目がカードっぽい囲みを
表示させるための最後の仕上げの工程になります。

VSCodeでやることは、App.tsxの41行目の

{data && <pre>{JSON.stringify(data, null, 2)}</pre>}

このコードを

{data && (
  <div style={{
      border: '1px solid #ccc',
      borderRadius: '8px',
      padding: '16px',
      marginTop: '16px',
      boxShadow: '0 2px 5px rgba(0,0,0,0.1)'
  }}>
      <h3>{data.title}</h3>
      <p>{data.body}</p>
      <small>User ID: {data.userId}</small>
  </div>
)}

に置換するという至ってシンプルな内容です。
置換してリロード、データ取得をクリックします。

また、ローディング表示については、前フェーズの「ローディング表示」とやることは一緒で
「データ取得」をクリックした瞬間に「loading: データ読み込み中...」
と表示されるかどうかを確認します。以下のスクショ画像のように確認ができました。

そして、最後にエラー処理の工程です。

こちらも前フェーズとやることは一緒で
App.tsxファイル内のURLをダミーURLへ置換して、
保存→リロードすると以下のようになりました。

「error: HTTPエラー: 404」の表示が見られたので、このフェーズは完了です。

8. 学んだこと・つまずいた点

学んだこと：
　・useState と useEffect を使って API からデータを取得する方法
　・非同期処理を try...catch で囲むことでエラーを検知させる方法
　・JSON を必要な項目を抜き出してカード形式にすることで、見やすいUIにできた

つまずいたこと：
　・画面が表示されない（「Next.js 形式とVite形式の違い」で混乱）
　・データの表示方法（title や body を個別に表示する方法が分からなかった）
　・スタイルの適用方法（「JSONをカード形式にする」の記述場所で迷った）

9. まとめ

今回は画面が表示されないエラーにずっと苦戦しましたが、
「状態管理（useState）」＋「副作用（useEffect）」＋「非同期処理（fetch）」
を通して、シンプルなデータ表示が体験できて、とても勉強になりました。

もし同じように「Reactを始めてみたいけど、
まず何を作ればいいのかわからない…」という方の参考になれば幸いです！

次回は「v0で作ったUIをNext.jsに組み込んでみた」
で記事を作成していきたいと思います。

最後まで読んでいただき、ありがとうございました。