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