積み上げログ技術ブログ記事一覧へ

リポジトリ技術解説

Jitan Recipeの設計・技術選定・コミット履歴を解説

10分前後で作れる時短レシピを、調理時間・調理器具・洗い物の少なさから探せるレシピ集(Next.js App Router / 全ページSSR・SSG)

主要言語: TypeScript更新: 2026/08/15根拠コミット: 8

このページは、公開している GitHub リポジトリの README とコミット履歴から 自動でまとめた制作物の記録です。読み物として書いた記事は記事一覧の「読み物」にあります。

30秒で分かる要点

jitan-recipeとは?

10分前後で作れる時短レシピを、調理時間・調理器具・洗い物の少なさから探せるレシピ集(Next.js App Router / 全ページSSR・SSG) 主にTypeScriptを使用し、公開コミットから機能追加と改善を積み重ねた過程を確認できます。

01 / 概要

プロジェクトの概要と目的

時短レシピ手帳(jitan recipe) 10分前後で作れる時短レシピを、 調理時間・調理器具・洗い物の少なさ から探せるレシピ集。 本番: https://jitan recipe.vercel.app Vercel: https://vercel.com/chitamaru/jitan recipe 技術構成 フレームワーク Next.js 16(App Router) スタイル Tailwind CSS データ lib/recipes.ts の静的データ(DB なし) ホスティング Vercel( main への push で自動デプロイ) 開発 ルート構成 パス 生成方式 内容 / Static 時間・器具・カテゴリ・タグの各導線 /recipe/ id SSG レシピ詳細(全件を generateStaticParams で事前生成) /search Dynamic 絞り込み検索 /api/recipes Dynamic レシピ一覧の JSON /sitemap.xml , /robots.txt Static — 設計上の判断 全ページをサーバーレンダリングする。 クライアントサイドルーティングは使わない。検索の絞り込みも リンクと だけで組んであり、JS 無効でも動作する。SEO/LLM クローラに対して HTML がそのまま届くことを優先した結果。 /search は noindex, follow 。 絞り込みの組み合わせが無限に増えるため。ただし robots.txt では 塞いでいない — 塞ぐと noindex 自体がクロールされず読まれないため。sitemap からも除外している。 構造化データ。 レシピ詳細に Recipe ( recipeIngredient / HowToStep / NutritionInformation )と BreadcrumbList 、全ページに WebSite + SearchAction を出力。 放置時間( handsOff )を持たせている。 時短を「工程を雑にすること」ではなく「火加減の監視から解放

本記事は公開されている構成と main ブランチのコミットを一次情報として整理しています。

02 / 使用技術

使用技術と役割

01TypeScript

主要な実装言語として、プロダクトの中心機能を構成します。

03 / 設計

構成から読み解く設計

主な項目は です。

  • 単一アプリケーション構成
  • 機能単位の責務分割

04 / 変更履歴

コミットから見る実装の変遷

以下は既定ブランチの直近の変更です。リンク先で原文と一次情報を確認できます。

  1. 支援・購入への導線を追加するcce7778をGitHubで確認 ↗
  2. feat: レシピに完成写真を載せられるようにする343fd6cをGitHubで確認 ↗
  3. feat: レシピを12品追加し、カテゴリ・調理器具の偏りを解消261c513をGitHubで確認 ↗
  4. 修正:Recipe 構造化データの必須項目 image を追加48586d6をGitHubで確認 ↗
  5. docs: README を追加880152cをGitHubで確認 ↗
  6. feat: Google Search Console のサイト所有権確認タグを追加1aefd23をGitHubで確認 ↗
  7. chore: .gitignore に Vercel CLI 生成ファイルを追記c1f1170をGitHubで確認 ↗
  8. feat: 時短レシピサイトの初期実装af9b716をGitHubで確認 ↗

05 / 学び

このプロジェクトから得られる学び

  • 変更を小さく記録する

    コミット単位で目的を分けると、実装の意図を追跡しやすくなります。

  • 構成と技術選定を結び付ける

    TypeScriptの採用理由と各ディレクトリの責務を説明できることが保守性につながります。

  • READMEと実装を同時に育てる

    説明とコードを近い状態に保つことが、再利用と振り返りを助けます。

06 / よくある質問

よくある質問

jitan-recipeは何を作るプロジェクトですか?

10分前後で作れる時短レシピを、調理時間・調理器具・洗い物の少なさから探せるレシピ集(Next.js App Router / 全ページSSR・SSG)

jitan-recipeの主要技術は何ですか?

TypeScriptを中心に構成されています。

この記事の情報源は何ですか?

公開README、リポジトリ構成、既定ブランチのGitHubコミット履歴です。

コメント

この記事へのコメント

お名前だけで投稿できます。アカウント登録やログインは不要です。 いただいたコメントは確認のうえ公開します。