今日お話すること

About me

• 名前：山元 彰也 (33歳)
• 職業：フリーランスエンジニア
  • ​Node、Shopifyとか(ちょっとGo)
  • 6月からはPHPやる
• ​最近勉強しだしたこと
  • デザインパターンとか
  • AWSとかインフラ系
• ​コーヒー、お笑い、バンド、ラジオが好き

5/28 21時に

こんなやり取りを...

というわけでアプリ

作りました

※AIが

Firebase Studioについて

Firebase Studioって何？？

• Googleが提供する生成AIベースのWebアプリ開発ツール
  ※​daily.devでちょっと前にたまたま見かけた
• プロンプトをもとにUI・データ構造・コードまで自動生成
• デプロイもできる(App Hosting)
• プレビュー機能もついているのでその場でエラーも修正
  • ボタンぽちぽちでエラーの内容をプロンプトに投げてくれる
• コード編集も可

Title Text

実際やったこと

• アプリの仕様を整理し、Firebase Studioにプロンプトを投げた
  • プロンプトは事前にChatGPTと作った
• 出来上がったアプリに対して微妙なところを追加で指示
• どうしてもうまくいかないところだけコード編集
  • とはいえほとんどしていない
• 多分3時間ぐらいでできた（28日の夜ぐらいから着手）

つまったところ

• FirestoreのAPI有効化を忘れてエラー
• 環境変数(env)の設定が必要
  • firebaseのconsoleから取得
• デプロイ時にビルドがコケた
  • エラーの内容的になんかNodeのバージョンが原因ぽい
  • まあLT用なのでv20→18へ下げた

作ったアプリについて

何つくったん？

• アプリ名：Brew & Log
• 何ができるん？
  • コーヒー抽出のレシピ作成
  • 作成したレシピを元に抽出をサポートするタイマー
  • 抽出したコーヒーを評価するレポート機能
• なんで作ったん？
  • コーヒーって、抽出の違いで味が変わる！
  • 感覚でなくデータで相対的に評価したい！
  • ドリップもっと上手になりたい！

【おまけ】コーヒーの味を決めるもの

• 豆の原産国、品種、精製方法(豆そのものの違い)
• 焙煎具合（浅煎り、深煎りとか） ※実際もっと細かい
• 挽き具合（細挽き、粗挽きとか）
• コーヒー粉とお湯の割合
• お湯の温度
• ドリップの仕方（ペーパー、エアロプレス、水出し...etc）
• 抽出時間や注ぎ方

ちょっとデモ