はじめに
こんにちは！新卒1年目のなべしま、宮村、坂野です。
ニフティでは、毎年新人育成の一環として「エンジニア定例」や、3日間にわたる開発合宿「エンジニア定例合宿」が行われています。
今回は、この「エンジニア定例合宿」で私たちが作成したアプリケーションを紹介します。
実際の合宿の様子や食事、成果報告会についてはこちらに載っていますので、ぜひご覧ください！
メンバー紹介
メンバーはこの3人です。動物（生き物）好きが多い気がします。
なべしま
ダイアウルフかわいい
宮村
クラゲにハマっている
坂野
マヌルネコが好きすぎる
アプリ紹介
概要
私たちは、食材管理とレシピ提案を統合したWebアプリケーションを作成しました。
主な機能として、AIが冷蔵庫の食材からレシピを自動提案する機能や、料理と連動した食材の自動消費管理機能などがあります。
アプリ画面・特徴
冷蔵庫画面
冷蔵庫内の食材がパネルとして整列しており、ここから直感的に材料の個数や量、消費期限の登録ができます。
このページはログイン必須で、冷蔵庫の中身はユーザーごとに独立しています。また、ユーザーがログインしていない場合は、Keycloakのログイン画面にリダイレクトされます。
レシピ詳細画面
材料の分量一覧と作り方を表示しています。
下の「材料を消費」ボタンを押すと、冷蔵庫の中身が、賞味期限が早いものから順に材料分だけ消費されます。
AIおすすめ機能
冷蔵庫の材料から、おすすめのレシピを提案します。
生成された料理名をクリックすると、レシピ詳細ページへ移動します。
使用技術
今回採用した技術スタックは以下の通りです。
これらを選定した理由としては、フロントエンドとバックエンドに分離しないシンプルなフルスタックアプリケーションにすることで、タスクの属人化や環境構築、学習コストを最小限に抑えることなどがあります。
- アプリケーション: Next.js, Prisma, NextAuth.js
- データベース: PostgreSQL
- 認証基盤: Keycloak
- その他: Amazon Bedrock(Claude Sonnet 4.5)
そして、環境構築の時間を短縮するため、アプリケーションのベースには、社内プロジェクトである、NIFTY Programming Best Practices(PBP) のNext.jsリポジトリを使用しました。
NIFTY Programming Best Practices(PBP)とは
開発のベストプラクティスを集約するProgramming Best Practicesプロジェクトです
PBPは技術毎にベストプラクティスをドキュメントやテンプレートとして集積を行っており、標準化はどの技術を社内標準とするか決定しています。
社内ナレッジ NIFTY Programming Best Practices(PBP)
開発の流れ
1日目: 環境構築とプロジェクト設計
- 環境構築 、データベース設計 (午後)
- PBPを用いた初期のフロントエンド環境の構築
- Claude Code Action の導入
- Keycloak の導入
- Prisma を用いたデータベースのセットアップとテーブル設計
- タスクの具体化 (夕方)
- 実装すべき機能の具体化とタスクの洗い出し
2日目: 環境設定の最終調整とフロントエンド・認証機能の実装
- 環境構築の仕上げ (午前)
- Keycloak のRealm作成などの環境設定
- データ投入、UI・認証機能の実装 (午後)
- レイアウト、メニューバーといったUI周りの実装
- ログイン機能の実装
- デモに必要なサンプルデータを追加
- レシピ、冷蔵庫のビジネスロジックの実装
- 「冷蔵庫の中身からおすすめする機能」に関する調査、実装
最終日: 主要機能の仕上げと成果発表に向けた資料作成
- 機能実装の完了、AWS 整備 (午前)
- 未完了だったビジネスロジックの実装
- CDパイプラインの構築やビルドプロセスの修正
- 発表資料の作成 (午後)
- 機能実装と並行して、Marp を用いた発表資料の作成
開発工程でのGoodポイント
Keycloakの利用によるユーザ管理の責務の分離
ユーザー管理の実装負荷や、その責務をWebアプリケーションから分離することを考え、外部IdPを利用する方針で進めていました。Amazon Cognitoを使用する予定でしたが、ローカル環境でのテストを考慮した結果、採用は見送りました。結果として、IdP側はKeycloak、認証ライブラリ側はNextAuth.jsを使用しました。この二つの連携や実装に関する情報はかなり豊富で、開発を円滑に進めることができたと感じています。
Claude Code / Claude Code Actionの活用
今回の開発では、Claude Code Actionを活用して人間のコーディング量を最小限に抑えることを目指しました。設計段階でMermaidで作成したER図をもとに、モデルファイルと関連する環境構築まで終わらせることができました。一方で、CIの修正の自動化やGitHub Actionsの権限の修正・調査に時間をかけられず、終盤まで活用し切ることはできませんでした。
常に情報共有を行い、最後まで挑戦し続けた
合宿の3チームの中で、雑談からカンバンのタスク内容や構造に関する議論まで、最も活発なコミュニケーションが行われたチームだと感じています。この常に共有する姿勢が、高いチーム結束力を生み出し、最後まで一丸となって課題に挑戦し続ける原動力になりました。
まとめ
今回は、3日間のハッカソンで開発したアプリケーションを紹介させていただきました。
AWSへのインフラ構築は残念ながら時間不足で実現できませんでしたが、認証機能の実装や環境構築など、実務にも活きる要素を利用した開発はとても良い経験となりました。また、これらを活用した開発や、チーム一丸となって取り組む姿勢は、今後の業務でも継続していきたいと感じました。 一方で、初めて使う技術の知識不足や、入念な設計の必要性など、自分たちの課題も認識できました。
合宿で得た経験を、これからの業務に活かしていけたらと思います！
