Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デブねこ管理委員会発表資料
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Yuto Ota
December 08, 2025
17
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
デブねこ管理委員会発表資料
Yuto Ota
December 08, 2025
More Decks by Yuto Ota
See All by Yuto Ota
社長直下でシステムを作るということ
yuto299
0
48
Meetolio発表資料
yuto299
0
170
Featured
See All Featured
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
1.1k
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
250
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
akashhashmi
0
370
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
470
WENDY [Excerpt]
tessaabrams
11
38k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3.2k
Building the Perfect Custom Keyboard
takai
2
790
The Pragmatic Product Professional
lauravandoore
37
7.3k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
uxyall
0
320
The agentic SEO stack - context over prompts
schlessera
0
820
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
340
For a Future-Friendly Web
brad_frost
183
10k
Transcript
デブねこ管理委員会 猫と一緒に家計簿を管理するアプリ dev_neko
レシートを読み取って 家計簿を管理 目標金額をオーバーすると 猫が太っていく
アプリにアクセス https://test.dev-neko.arctic-street.net/
デザイン&フロント Pinterestでデザインの方向性を確定 FigmaでWF+デザインを作成 VScode+Cline+V0でデザインからコードを作成 カメラ機能周りもVibe Codingで大元を作成 VScode+Cline+V0でフロントを作成。 V0はNext.jsの開発元のVervelのAIであり、 React+Next.js環境と相性が良く、 ReactやNext.jsのバージョン周りの問題を解決してくれた。
他のAIだと情報が追いつかずに、 エラーが出てしまったりしていた。
AI設計&インフラ Google AI Studioでプロンプト&出力JSON形式を設計 し、そのままコードまでポン出し。その後調整して TypeScriptとして関数化。 プロンプトはシンプルに「レシートの内容を読み取ってくださ い」だけにした。(後から追記したけど) インフラはAWS CDKでEC2インスタンス作成からサーバー
内設定(Node、MySQL、Apacheの導入も含む)、HTTPS 化、Next.js起動まで全自動化。 Vercelでも良かったけど、自分の勉強のために採用した。 作っては消しを繰り返したので微課金で済んでいるがLet’s Encryptに「証明書取り過ぎ!」って怒られた。
バックエンド MySQL(TablePlus)を用いたデータベース設計・構築を担当し、 ユーザー・レシート・品目・カテゴリの正規化されたテーブル構造を 設計。Next.jsのAPIルートと接続して非同期でデータの登録・取 得ができるように実装した。 レシートデータは、Google Gemini APIを活用し、店名・支店名・ 品目名・価格・カテゴリなどの情報を自動で抽出し、それぞれの テーブルに適切に保存されるようにした。また、カテゴリ別に支出
総額をグルーピングして取得する処理も実装し、フロントのグラフ 表示させた。
学んだこと バックエンド ハッカソンでバックエンドを担当したのは 初めてだった。AIを駆使し、何とか形にす ることはできたが、出力されたコードを読 み解く力が不足しているのを痛感した。 今後も、基礎的な学習からじっくり取り組 んでいきたい。 インフラ AI界隈の進化をキャッチアップできたの
と、IaCをガッツリ触れたのが大きかっ た。ただし、AWS CDKのコーディングは 粗が残っているのと、冪等性が意識でき ていないこと、AWSコンポーネントの知識 範囲の狭さなどが課題として残った。 デザイン&フロント 本格的な複数人のアプリ開発兼 AIコー ディングは初めてでした。 機能実装に関する説明責任や、 詳細な調整は人力で行わないといけない ため、 基礎的な知識が不足しているのを痛感し た。
Thank You! デブねこ管理委員会