はじめに

私は外食は滅多にせず、普段は自炊した料理を食べています。平日は仕事をしているので、休みの日に1週間分の料理を作り置きします。自炊した料理の写真を撮るようになってからでも、これまで150種類くらいの料理を作ってきました。なるべくいろいろな料理を作るように心がけているのですが、作ったことのある料理を作ることもよくあります。

ある料理を作るために必要な食材を用意すると、少しだけ食材が余ってしまうということがよくあります。例えば、長ネギはよく1/4ほどをみじん切りにして使うのですが、長ネギが1/4だけで売っていることはまずありません。なので丸々1本買うことになるのですが、残りの3/4は必要ないので余ることになります。生の野菜なので、早めに使わなければ腐ってしまいます。

私の場合、食材を余らせないために、あぶれた食材で作れる料理を探します。食材を余らせて腐らせるということは絶対にしません。あぶれた食材で作れる料理を探すときは、まだ作ったことのない新しい料理を探すのではなく、過去に作ったことのある料理の中から探します。過去に作って食べたことのある料理なら知見があるのでアレンジがしやすいからです。省いてもあまり影響のない食材や、代用の効く調味料なんかもわかります。写真を撮って記録するわけではないので、それなりに美味しく食べられる料理が作れればOKです。

過去に作ったことのある料理を探すとき、今まではブックマークに登録してあるレシピの中から選ぶというやり方をしていましたが、この方法は非常に効率の悪いものでした。ブックマークに表示されているタイトルと過去に作ったときの記憶からどんな料理かを想像し、それからレシピのページにアクセスして使われている食材や作り方を確認し、条件に合致した料理なのかを判断していました。

ブックマークのタイトルと記憶だけではどんな料理かを想像できない場合もあるので、結局レシピのページにアクセスして確認するのですが、実は使いたい食材を使わない料理だったり、代用の効かない食材や調味料が必要だったり、様々な条件で目的に沿う料理でないことがよくありました。

まず、どんな料理かを確実に思い出すために、過去に作った料理を写真で確認したいと思いました。さらに、過去に作った料理を食材で検索できたら便利だと思いました。巷のレシピ掲載サイトでも食材で検索することはできますが、それは掲載されているレシピの検索であって、自分が作ったことのある料理の中からではありません。明確に用途が異なります。

そんなわけで、完全に個人的な用途のためだけに、専用のWebアプリを作ろうと思い立ちました。

技術選定

せっかく新しいWebアプリを作ることになるので、今まで触ったことのあるフレームワークなどは極力使わない方針で技術選定を進めました。具体的には、Ruby on Rails、Laravel、Nuxt.jsあたりは過去に触ったことがあるので除外しました。

Ruby on Railsに関しては、これまでフルスタックフレームワークとしての開発経験は何度もありますが、バックエンドのみのAPIサーバーの開発経験はありませんでした。RailsにはAPIモードというものがあり、昔から使ってみたいと思っていたこともあり、バックエンドはRuby on RailsのAPIモードを使うことにしました。今思えば、GoのAPIフレームワークであるEchoを使ってみても良かったかなと思っています。

フロントエンドは、Nuxt.jsを使ったWebアプリの開発経験はありますが、Next.jsの開発経験がありませんでした。加えて、TypeScriptに興味はあるものの使う機会がなかなかないという状況だったので、Next.js + TypeScriptを使うことにしました。Next.jsは基本的にSSGで、検索機能のみSSRにしました。

CSSフレームワークはTailwind CSSを使うことにしました。Tailwind CSSも興味はあるものの使う機会がないフレームワークのひとつでした。

• Ruby on Rails (APIモード)
• Next.js
• TypeScript
• Tailwind CSS

機能紹介

料理情報

登録した料理の一覧画面。画像をクリックすると料理毎の個別ページに遷移します。

料理毎の個別ページ。料理の写真と料理名、カテゴリ、食材、レシピ掲載サイトへの外部リンクを表示。カテゴリ名（「主菜」）をクリックするとカテゴリに属する料理の一覧を表示し、食材名（「挽き肉」など）をクリックすると食材を使う料理の一覧を表示します。後述する「食材検索」と同じ機能。

食材検索

ヘッダーの検索ボックスに食材を入力して検索すると、食材を使う料理の一覧を表示します。

料理登録/編集

ヘッダーの「Create」ボタンを押下すると料理登録ページに遷移します。登録ページでは料理の写真、料理名、カテゴリ、外部リンク、食材を登録します。食材は任意の数だけ増減することができます。

料理毎の個別ページから編集ページに遷移できます。写真を変更したり食材を増減することができます。

テーマカラー

PCの外観モードを変更すると、連動してWebアプリのカラーテーマも変化します。

ライトモード

ダークモード

紹介ページ

リポジトリー

まとめ

『KITCHEN NOTE』は個人で使用するためのWebアプリなので一般公開はしていません。現在は認証機能がないので料理の登録/編集/削除が誰でもできてしまいます。時間と余裕があれば認証機能を追加して一般公開するかもしれません。ひとまず、使いたい技術を使って目的とするWebアプリを作ることができたので満足しています。

自作Webアプリ『KITCHEN NOTE』の紹介でした。