【React入門】レシピ検索アプリの作り方を完全解説|ルーティング対応&API連携も習得

プログラミング

「Reactを使って実践的なアプリを作ってみたいけど、何を作ればいいか分からない…」
そんな方におすすめなのが、レシピ検索アプリの作成です。
API連携やルーティング、useEffectの使い方など、Reactの基礎をまるっと学べる構成となっており、初心者でも確実にスキルアップできます。

React レシピ検索アプリの作り方

結論:実用的で学びが多いアプリです

レシピ検索アプリは、APIとのやりとり・ルーティング・状態管理などReactの基本要素が詰まった学習題材です。

必要な準備と構成

使用技術とツール

  • Node.js(https://nodejs.org/ja)
  • create-react-app
  • React Router(ルーティング用)
  • Edamam API(https://developer.edamam.com/)

プロジェクト作成と依存関係

1
2
3
npx create-react-app recipe-app
cd recipe-app
npm install react-router-dom

Edamam APIの登録と使用方法

APIキーの取得と設定

EdamamのDeveloperページで無料登録し、アプリIDとAPIキーを取得します。
.envファイルに以下を記述します:

1
2
REACT_APP_RECIPE_APP_ID=xxxxxx
REACT_APP_RECIPE_APP_KEY=yyyyyy

アプリ構成とルーティング

ページの構成

  • トップページ(検索フォーム)
  • 検索結果ページ
  • 詳細ページ(レシピの説明)

ルーティング設定(App.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Results from "./pages/Results";
import Detail from "./pages/Detail";
 
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/results" element={<Results />} />
        <Route path="/detail/:id" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

API検索のロジック実装

検索ボタン押下でレシピ取得

1
2
3
4
5
6
7
const fetchRecipes = async () => {
  const res = await fetch(
    `https://api.edamam.com/search?q=chicken&app_id=${process.env.REACT_APP_RECIPE_APP_ID}&app_key=${process.env.REACT_APP_RECIPE_APP_KEY}`
  );
  const data = await res.json();
  setRecipes(data.hits);
};

公的機関の参考リンク

  • 農林水産省の「食育サイト」:https://www.maff.go.jp/j/syokuiku/
  • 消費者庁「食品表示・栄養成分」:https://www.caa.go.jp/policies/policy/food_labeling/

よくあるトラブルと対応方法

検索結果が出ない場合

  • APIキーの設定が間違っている可能性
  • 無料プランのリクエスト上限に達している

ルートにアクセスできない場合

  • react-router-domのバージョンと構文の不一致

完成コードのまとめ

すべてのページファイル(Home.js / Results.js / Detail.js)を作成し、API呼び出しとルーティングを連携させることで完成します。

まとめ:React学習の良い一歩

レシピ検索アプリは、API連携・ルーティング・状態管理を同時に体験できる貴重な題材です。
一度作ってみれば、他のアプリへの応用力も高まります。
次のステップではお気に入り機能やユーザー認証も追加してみましょう。

タイトルとURLをコピーしました