【微経験】独学で動画特化の料理レシピ保存サービスを開発するまで【Rails / TypeScript / Next.js / AWS / Docker / GitHub Actions】

はじめに

こんにちは！

この度、Web系開発企業への転職を目指して独学でWebサービスを開発しました。ポートフォリオが主目的ですが、実サービスを意識して微経験者なりに本気で取り組んだのでインプットから開発、リリースまでの経緯や苦労ポイント、感じたことなど書いてみます。

何か役立つことがあれば幸いです。

自己紹介

新卒でハウスメーカーに営業職として入社。3年間従事したのち、海外へのプログラミング留学を経て都内の受託開発企業へ入社するも諸事情で2ヶ月で退職しました（当時はPHPでバックエンド開発）。それからは広義のIT業界にはいたものの、エンジニアリングからは完全に離れてました。

改めてエンジニアへ戻るべく、個人開発に至りました。

目次

• 1. ポートフォリオ紹介
• 2. 機能一覧
• 3. 使用技術一覧
• 4. 開発での苦労ポイント
• 5. インプットに用いた教材
• 6. 振り返りと感じたこと
• 7. 最後に

1. ポートフォリオ紹介

サービス名：Yum Keeper
サービスURL：https://www.yumkeeper.net

※ゲストログインあります。期限重視のためレスポンシブ非対応。

デモ動画

サービス概要

動画特化の料理レシピ保存サービスです。YouTube動画と共に具材や調味料、分量などをシンプルに保存・管理できます。サービス名の由来は英語のYummy（美味しい）の短縮系であるYum + Keeper（貯蔵庫）の組み合わせ。

GitHub

• バックエンドリポジトリ
• フロントエンドリポジトリ
• ドキュメントリポジトリ

開発動機

私は普段から動画（特にYouTube）で料理レシピを探します。ただ、作り方を覚えても料理のたびに材料や分量をYouTube再生して確認するのが面倒でした。そこで、YouTube動画と共にシンプルにレシピ管理できるサービスがほしく、開発しました。

開発スケジュール

• インプット：4ヶ月半
• ポートフォリオ開発：5ヶ月

  • 企画：10日

    • アイデア着想、競合調査、要件定義
    • 成果物：サービス概要書 / 機能一覧表

  • 設計：2週間

    • DB設計、インフラ設計、必要ページ洗い出し
    • 成果物：ER図 / テーブル定義書 / インフラ構成図　※画面遷移図は手書き

  • 実装：4ヶ月

    • 環境構築：2週間
    • バックエンド：1ヶ月半
    • フロントエンド：2ヶ月

  • デプロイ：10日

    • インフラ構築、CD導入、リリース

2. 機能一覧

1. ユーザーアカウント関連

• サインアップ
• サインイン
• サインアウト
• アカウント有効化
• パスワードリセット
• パスワード変更
• アカウント認証メール再送
• 退会
• ゲストログイン

2. レシピ関連

• レシピ追加
• レシピ詳細
• レシピ編集
• レシピ更新
• レシピ削除
• レシピ一覧
• レシピ並び替え
  • 最新の更新順、追加日（新しい順）、追加日（古い順）
• YouTube動画取得（YouTube Data API）
• YouTube動画埋め込み

3. その他

• ページネーション（Pagy）
• 認可
  • 未認証ユーザーのアクセス制御
  • 他ユーザー保有レシピへのアクセス制御
• バリデーション & エラーメッセージ表示
  • 空文字、長さ、フォーマットなど
  • YouTube Data APIから動画取得時、レスポンスに応じたバリデーション
• フラッシュ
  • ユーザー操作に応じて成功 / 失敗のメッセージ
• モーダル
• 404エラー
• 500エラー

3. 使用技術一覧

• バックエンド
  • 言語: Ruby 3.3.7 / Ruby on Rails 7.2.2.1
  • テスト・開発支援: RSpec / RuboCop
• フロントエンド
  • 言語: TypeScript 5.8.2 / React 19.0.0 / Next.js 15.1.6
  • テスト・開発支援: Vitest / React Testing Library / MSW / Cypress / ESLint / Prettier
  • デザイン: Tailwind CSS / Shadcn UI
• インフラ: AWS(Route53 / ALB / ECS Fargate / ECR / RDS PostgreSQL / ACM / CloudWatch etc.) / Nginx / Vercel
• CI/CD: GitHub Actions
• 環境構築: Docker / Docker Compose / Dev Containers
• 外部API: YouTube Data API

4. 開発での苦労ポイント

1. レシピの編集・更新ページ
   編集ページは「DBの既存レシピを初期表示してから新たに登録する材料・調味料を追加 & 不要なデータは削除した上でそれらを全てPATCHでRailsに送る」という構成です。PATCHリクエストといっても「既存データの更新 or 削除」「新データの登録」が混在しており、各データのID管理とDBとの整合性を取るために非常に苦労しました。

2. フロントエンドのE2Eテスト
   CypressでシナリオベースのE2Eテストを導入。認証系のテストは書けましたが、レシピ機能のE2Eが「ユーザーのトークン認証 ＋ 非同期処理 ＋ useEffectでの副作用管理」という色々な挙動が混合し、Next.js特有のタイミングのズレが頻発しました。加えて、それをCypressという独自環境で再現するため難しく、どうがんばっても書けませんでした。

3. 本番環境でのNginxとRailsの疎通
   環境構築時にNginxとRailsをコンテナ化。環境差異を吸収するのがDockerのメリットのため、デプロイはスムーズに進むだろうと思いましたがそんなことはなく。本番ではPumaサーバーをNginxより先に起動する必要があり、その対応が大変でした。ALBからのヘルスチェック失敗や、本番で成功したと思いきや今度は開発環境でエラーが出たり。最終的にComposeファイルもDevとProdで分離しました。

※工夫ポイントはGitHubリポジトリのREADMEに書いてます

5. インプットに用いた教材

サービス開発前に使った教材を以下にまとめます。
これから学習する方の参考にもなれば幸いです。

書籍（敬称略）

• Railsチュートリアル
• Everyday Rails - RSpecによるRailsテスト入門 - Aaron Sumner 著
• プロを目指す人のためのRuby入門［改訂2版⁠］⁠- 伊藤淳一 著
• 改訂3版 JavaScript本格入門 - 山田祥寛 著
• これからはじめるReact実践入門 - 山田祥寛 著
• 仕組みと使い方がわかる Docker＆Kubernetesのきほんのきほん - 小笠原種高 著
• ネットワークはなぜつながるのか　第２版 - 戸根　勤 著
• おうちで学べるデータベースのきほん 第2版 - ミック 著 木村 明治 著
• 達人に学ぶDB設計徹底指南書 第2版 - ミック 著
• Webを支える技術 - 山本陽平 著
• プリンシプル オブ プログラミング 3年目までに身につけたい 一生役立つ101の原理原則 - 上田勲 著
• 21世紀最強の職業　Web系エンジニアになろう - 勝又健太 著

Udemy

• 3分動画でしっかり学ぶGit/GitHub入門〜プロへの道！業務で使えるバージョン管理ブートキャンプ
• React(v18)完全入門ガイド｜Hooks、Next14、Redux、TypeScript
• 理解して使う！Docker入門＋応用：初心者から実務で使えるスキルが身に付ける
• AWS：ゼロから実践するAmazon Web Services。手を動かしながらインフラの基礎を習得
• 【完全版】AWS ECSコンテナアプリケーション開発（入門から実践まで）
• プログラミング中級者になりたい人のためのクリーンコード入門

Techpit

• 【Rails×React】UberEats風アプリを作りながら、SPA開発を学ぼう
• Railsアプリケーションのパフォーマンス改善をしながらN+1問題を解決するスキルを身に付けよう！

その他

• Progate
• Next.js 公式チュートリアル
• IT用語辞典 e-Words
• TECH WORLD（YouTube）
• 各技術の公式ドキュメント

6. 振り返りと感じたこと

とにかく理解する

最初はわからないことだらけですが、理解の「点」が増えると次第に「〇〇ということは△△の可能性があるから□□をやってみよう」と自分で仮説を立てられるようになります。後から楽になるので、序盤に理解から逃げないことが非常に重要と思いました。

期限を決める

期限 ＝ 総工数 ＋ バッファ。開発中、節目ごとに期限を設けてきましたが「これならいけるだろう」と余裕を持って〆切を決めても予期せぬバグや色々なイレギュラーは付きもの。何事もなくスムーズに完遂したことは一度もなかったです。ただ、期限を守る前提があると、本来不要だったタスクを消したり優先順位や時間配分を組み替える知恵が生まれます。リスケは最終手段。

ChatGPTの使い方を工夫する

今のChatGPTは非常に高精度のため、公式ドキュメントを読んだ上で適切に質問すれば高確率で解決しました。回答精度が落ちてきたならメモリ全消去 & 新チャットで質問し直せば正しい答えが返ってくることもしばしば。これで問題の8割は解決。残り2割はググる（日本語も英語も）＋ 自分で処理を追う。それでもダメならStack Overflow または teratailで質問してました。余談ですが、Stack Overflowは日本語で質問書いてDeepLで全英訳して投稿すれば海外エンジニアもがんがんコメントくれるのでおすすめです（たまにスパム扱いされるのでカジュアルに英文直すと投稿できます）。

7. 最後に

2024年8月にProgateを始めて、サービス開発からリリースまで完遂できたことにホッとしてます。私は年齢的に後発のため、微経験からエンジニアに戻ることに非常に葛藤しました。営業なら元の人柄やコミュ力で短期間で成果を出すプレイヤーがちらほらいますが、技術の世界では難しいと思いました。「通用するか」「きちんと価値を出せるか」を本当に悩みましたが、エンジニアとして再チャレンジすることを選びました。

「顧客視点でプロダクトを生み出せる」「ビジネス・技術の両面からアプローチできる」... そんな人材になりたいと思います。

以上、長文ですが読んでいただきありがとうございました。