模擬試験作成アプリ
今日もClaudeをぶん回してりぃ
😃「ユーザーが認定試験の名前入力したらAIで最新の情報を参照して模擬試験作ってくれるアプリ作って」
🐶「ほい！できたよ。カード形式で一問ごと表示されるスタイルにしたよ。問題の進捗が見れるプログレスバーとかいい感じの機能もよしなにつけたよ。READMEも勝手に更新しといたよ」
🤭「デザインをパステルカラーのグラデーションでエアリーな感じにして」
🐶「（エアリー？なんかカードがふわふわするエフェクト入れておくか）ほい！大改装したよ」
😃「おおすごい...ちゃんとおしゃれ...画面幅いっぱいでアプリっぽい見た目にして」
🐶「ほい！サイドバーなんかも作ってアプリっぽい見た目にしたよ」
🤔「サイドバーいらないや、ボタン類はヘッダーに移動して」
🐶「ほい！移動したよ」
😭「さっきから複数個クイズ作成したらCORSエラー出るんだけど直して」
🐶「ブラウザからリクエスト送ってるからやで。APIルートからリクエスト送るように修正するよ」
😢「APIキーサーバーサイドに送っちゃうことになるけどしょうがないか、人には使ってもらえないけど自分用にしよう。たくさん質問作るとタイムアウトしちゃうからタイムアウト時間調整して」
🐶「調整したよ。質問作成のバッチがどこまで進んでるか見れるプログレスバーも付けたよ」
🤔「やっぱり最初にバッチで問題作るんじゃなくて一問答えるごとに次の問題が生成される方式でいこう」
🐶「しょうがないな💦大改修だけどやったよ」
😞「2問目以降ローディングアニメーションが表示されないけど本当に1問ごとに作ってる？」
🐶「作ってるよ。ローディングアニメーション足りてなかったから追加したよ」
😫「全5問の予定で3問目で抜けたらデータが全く保存されないのやめて」
🐶「直したよ」
🫠「よく見たらブラウザリロードで今までやったクイズのデータ消えるじゃん、永続化して」
🐶「しょうがない、localStorageに保存してあげよう」
🤔「ん？よく考えたら最初の1問だけリアルタイムで作って、あとはユーザーが考えてる間にバックグラウンドで生成でもいいか」
🐶「はいはい修正修正」
😫「別コンポーネント同士でレイアウト被ってる部分あるから共通コンポーネントに切り出してほしい」
🐶「はいはい修正修正」
😞「SPAぽい挙動だけど役割の違うページは別ルートにしてほしい」
🐶「はいはいわかったわかった」
🤔「このボタン消してこの表示増やしてほにゃららほにゃらら」
🐶「はいはいはいはい」
まる二晩かかったけど、実用的なものができそう...
と思ったら「 Claude usage limit reached. Your limit will reset at 2am (Asia/Tokyo).」だってぃ
今までデザインが心配でV0使ってたけど、Claudeに全振りでもそれっぽいものができるってわかったんだぃ（盲目なのに完璧な絵が描ける人みたいですごい）
V0使わなくていいならNext.js以外のフレームワークもいいかもな