Reactで動くUI作ってくれるv0使ってみた Part2

※当記事では、shadcn/uiで動くUIを作ってくれるサービス『v0』について…。
実際にv0と交わしたやり取りの内容をまとめています。
使い方、料金形態などについてはPart1をご覧ください。

はじめに

こんにちは、筆者です。

前回の記事では、v0の使い方や料金形態などについてまとめましたが…。
当記事では、実際にv0と交わしたやり取りの内容を見ていきたいと思います。

私が思っていた以上にv0は賢く、素敵なものを生み出してくれたので…。
「こんな感じに使えばよさそうだ」というのも合わせて見ていければと。

それではいきましょう٩( ‘ω’ )و

どういう風に使ったか

今回使う上で、私は1つやってみたい事がありました。

現在私はITフリーランスとして活動しており…。
お取引先には「動く成果物」ではなく「稼働時間」(表)を納品してお仕事してる形です。
(よくある形式だと思います)

そして取引先への稼働時間表提出を楽にするため…。
以下の様な管理ツールを自作しております:

自作の稼働時間管理ツール

「稼働入力」を押すと入力欄が開きます

• カレンダー形式で、1日の稼働時間を入力可能
  • 休暇日も入力可能
• 一定時間以上稼働しているかどうかをサマリー出力
• 土日祝日、休暇日は色分けして視覚的にわかりやすく
• (スクショ外ですが)稼働表へコピペするExport機能も搭載

…と言った機能が盛り込まれたツールですが、個人的に…UIもう少しどうにかならないかと思ってまして。
(まぁUIコンポーネントツール一切使わずに最低限のCSSで装飾してるだけですからね…)

そこで、v0くんには「上記と同等のツールを今時なUIで作ってもらおう！」と考えた次第です。
…と言うわけで、本題にいきましょう。

実際に使ってみた

これ以降、実際のやり取りを記載していきます。

今回は全部で9回のやり取りを行い、それぞれ:

• 私が投げたプロンプト
• 出来上がったコンポーネント
• v0からの回答
• 個人的に感じた所感

…を記しています。相当長いので覚悟して下さい…。

やり取り1回目

プロンプト:

私は個人事業主のITフリーランスであり、現在お世話になってる企業へは「稼働時間」を成果物として納品しております。

出来上がったコンポーネント:

回答(長いので折りたたみ)

フリーランスの方が稼働時間を管理するのは非常に重要ですね。
効率的に時間を記録し、クライアントに報告するためのシンプルなタイムトラッカーのUIを作成してみましょう。
以下は、基本的な機能を持つReactコンポーネントです。

このコンポーネントは以下の機能を提供します：

1. プロジェクト名の入力
2. 稼働時間の計測（開始/停止）
3. 経過時間のリアルタイム表示
4. タイマーのリセット

このようなツールを使用することで、以下のメリットがあります：

1. 正確な稼働時間の記録: 開始と停止を簡単に行えるので、実際の作業時間を正確に記録できます。
2. プロジェクト別の管理: プロジェクト名を入力できるので、複数のクライアントや案件の稼働時間を個別に管理できます。
3. 透明性の向上: 詳細な稼働時間記録により、クライアントとの信頼関係を築きやすくなります。
4. 効率の可視化: 時間の使い方を把握することで、作業効率の改善につながる可能性があります。

実際の使用では、このような基本的なUIに加えて、以下のような機能を追加することも検討できます：

- データの保存と履歴表示
- 日報や月報の自動生成
- タスクごとの時間記録
- 請求書の自動作成

これらの機能を組み合わせることで、フリーランスとしての業務をより効率的に管理できるでしょう。
稼働時間の正確な記録と報告は、クライアントとの良好な関係を維持し、適切な報酬を得るために重要です。

所感

本当はここから「カレンダー形式で稼働時間を入力管理できる物を作って」と文を続けたかったのですが、誤って上記で送信しちゃってorz
でも、まだWhatやWhyすらでない「作りたい背景」を伝えるだけで、勝手にそれっぽく作ってくれるの凄いなと思いました。

向こう側で「こういう風なのがあったら便利だな」と推論&提示してくれるのは嬉しいですし、今回はたまたま「目指してる物」が出来上がってくれましたが…。
全然違うものが上がってくると、「うーん嬉しいけどそうじゃなくてね？」という事を伝えないといけませんね。
…なんか新人時代に色々考えて突っ走っちゃってた自分を思い出しますね…。

ともあれ、今回は方向性は合ってたので…。
こちらをベースに改良していく事で、目的のものを作ろうと考えていきます。

やり取り2回目

プロンプト:

ありがとうございます！凄いですね。
しかし、私はリアルタイムで稼働時間を入力する必要はありません。
開始時間と終了時間を、日別に入力出来れば十分です。

出来上がったコンポーネント:

回答(長いので折りたたみ)

承知しました。ご要望に合わせて、日別に開始時間と終了時間を入力できるシンプルな日報入力フォームを作成しましょう。
以下のReactコンポーネントは、そのニーズに合わせて設計されています。

このコンポーネントは以下の機能を提供します：

1. 日付、開始時間、終了時間の入力フォーム
2. 入力された情報の登録と表示
3. 各エントリーの稼働時間の自動計算

使用方法：

1. 「日付」フィールドで作業日を選択します。
2. 「開始時間」と「終了時間」フィールドで、その日の稼働時間を入力します。
3. 「登録」ボタンをクリックして、入力した情報を保存します。
4. 登録された情報は下部のリストに表示され、自動的に稼働時間が計算されます。

このアプローチの利点：

1. 簡単な日次入力: 毎日の稼働時間を簡単に記録できます。
2. 柔軟性: 実際の稼働後にまとめて入力することも可能です。
3. 稼働時間の自動計算: 開始時間と終了時間から自動的に稼働時間を計算します。
4. データの可視性: 登録された情報がリストで表示されるため、過去の稼働状況を簡単に確認できます。

改善のアイデア：

1. データの永続化: ローカルストレージやデータベースを使用してデータを保存し、ページをリロードしても情報が失われないようにする。
2. 編集・削除機能: 登録された情報を後から編集または削除できるようにする。
3. レポート生成: 週次や月次のサマリーレポートを自動生成する機能を追加する。
4. プロジェクト別の管理: プロジェクト名や顧客名を追加し、複数のプロジェクトを管理できるようにする。


このツールを使用することで、日々の稼働時間を効率的に記録し、クライアントへの報告や請求書作成の際に役立つデータを簡単に管理できます。
必要に応じて、さらにカスタマイズや機能追加を行うことで、より使いやすいツールに発展させることができます。

所感

この時点で、私が目指してる物とだいぶ近くなりました！
それに、稼働時間を登録すると「稼働した時間」も含めて下部に出してくれます。

稼働形式によっては、これだけで事足りるケースもありそうですね…Export機能は欲しい所ですが。
どうやって使えば良いかも触るだけでわかるシンプルさも素敵です。

回答では「使用方法」も記してくれてますが、元のUIが良い&シンプルな機能なので、あまり参考にはならないかな…。
「このアプローチの利点」も今回は私の中で「目指してる形」があるので、参考にすることはなかったです。
ただ、「どう作ったら良いかわからない」「何を作るべきか不明」って時には「このアプローチの利点」は参考になりそうですね。

「改善のアイデア」はかなり魅力的で、まさしく欲しいと思った機能を列挙してくれてますが…。
一旦は「休憩時間を省いて入力」が出来る様にしてもらおうと思い、次のプロンプトに進みます。

なお、1回目のv0の生成能力に感激して「お礼」や「褒める」と言った事をプロンプトに入れてますが…。
これが良い出力に繋がったかは不明です。

ただ、文章を紡ぐ側としては「お礼、感謝を伝えると嬉しくなる」感じはしましたね。
「これじゃダメだ！」みたいな方向性だとどうなってたかも気になりますが…。
今回は、自分がそう感じたタイミングで「お礼」「褒め」をプロンプトに入れてみてます。

やり取り3回目

プロンプト:

素晴らしいです！
ただ私の稼働には、日によって少し異なる休憩時間を省く必要があります。

出来上がったコンポーネント:

回答(長いので折りたたみ)

ご要望ありがとうございます。休憩時間を考慮に入れた、より正確な稼働時間計算ができるように、コンポーネントを修正しましょう。
以下は、休憩時間入力欄を追加し、実際の稼働時間から休憩時間を差し引くように改良したバージョンです。

この改良版では以下の変更を行いました：

1. 休憩時間入力欄の追加: 日ごとに異なる休憩時間を分単位で入力できるようになりました。
2. 稼働時間計算の修正: 総稼働時間から休憩時間を差し引いて、実際の稼働時間を計算するようにしました。
3. 表示の改善: 各エントリーに休憩時間と実稼働時間を明確に表示するようにしました。

この新しいバージョンの特徴：

1. 柔軟な休憩時間管理: 日によって異なる休憩時間を簡単に記録できます。
2. 正確な稼働時間計算: 休憩時間を考慮した実際の稼働時間を自動計算します。
3. 透明性の向上: 開始時間、終了時間、休憩時間、そして実稼働時間がすべて明確に表示されます。

使用方法：

1. 日付、開始時間、終了時間を入力します。
2. その日の休憩時間を分単位で入力します（休憩がない場合は0または空欄のままでOK）。
3. 「登録」ボタンをクリックして情報を保存します。
4. 登録された情報は下部のリストに表示され、休憩時間を考慮した実稼働時間が自動計算されます。

このツールを使用することで、より正確な稼働時間管理が可能になり、クライアントへの報告や請求書作成時に役立つ詳細な情報を簡単に記録・管理できます。
必要に応じて、さらなるカスタマイズ（例：複数の休憩時間の入力、週次・月次サマリーの生成など）も可能です。

所感

やりたい事を最小限の変更で叶えてくれました！
もちろん、入力時の休憩時間は別途出力してくれる丁寧な仕事っぷり。

また、回答には「改良時の変更内容」まで記されてて…これはデキる社会人ですよ。
まぁ今回は軽微修正だったので、読まずとも分かりはしますが…。

にしろも、前回からの会話内容をうまく引き継げていないと「前回と全く別物が生まれてきた！」みたいな事になりそうですが…。
v0ではそういう事もなさそうです。

個人的には2回目→3回目とで最小限の変更をしてくれ、ちょっとずつ作るスクラム感?の様なものを感じて嬉しかったですね。
レビューする側としても「どこが変わったか」を認知もし易いですし…。

ただ、今回は回答に「改善のアイデア」は盛り込まれておりません。
列挙される大項目は必ず特定の物が入る、と言うわけではなさそうですね…。
v0側の追加内部プロンプトでその様に指示してるのかと思いましたが、そうではなさそうです。

やり取り4回目

プロンプト:

良いですね！出来れば入力した値を日別で見る機能があれば嬉しいです。
カレンダーの様に一覧で見ることが出来れば、なお素晴らしいです。

出来上がったコンポーネント:

回答(長いので折りたたみ)

ご要望ありがとうございます。カレンダー形式で日別の稼働時間を表示する機能を追加しましょう。
以下のコンポーネントは、入力フォームとカレンダービューを組み合わせたものです。

このコンポーネントには以下の新機能が追加されています：

1. カレンダービュー: 月ごとの稼働時間を視覚的に表示します。
2. 月の切り替え: 前月や翌月のデータを確認できます。
3. 日別データの表示: カレンダーの各日にその日の稼働時間情報が表示されます。

主な特徴：

1. 直感的なUI: 入力フォームとカレンダービューが一つのコンポーネントに統合されています。
2. データの可視化: 月単位で稼働時間を一覧できるため、稼働パターンの把握が容易になります。
3. 柔軟な日付選択: カレンダーを見ながら特定の日の詳細を確認したり、データを入力したりできます。
4. レスポンシブデザイン: さまざまな画面サイズに対応します。

使用方法：

1. 上部のフォームで日付、開始時間、終了時間、休憩時間を入力し、「登録」をクリックします。
2. 入力されたデータは自動的にカレンダービューに反映されます。
3. カレンダー上部の矢印ボタンで月を切り替えることができます。
4. カレンダーの各日には、その日の稼働時間情報（開始・終了時間、休憩時間、総稼働時間）が表示されます。

このツールを使用することで、日々の稼働時間を簡単に記録し、月単位で視覚的に確認することができます。
これにより、稼働パターンの分析や、クライアントへの報告がより効率的に行えるようになります。

さらなる改善案：

1. データの永続化: ローカルストレージやデータベースを使用してデータを保存する。
2. エクスポート機能: 月別のレポートをCSVやPDF形式でエクスポートできるようにする。
3. 編集・削除機能: カレンダー上の既存のエントリーを編集または削除できるようにする。
4. 週別・月別の集計: 週や月の合計稼働時間を自動計算して表示する。

これらの機能を追加することで、より完全な稼働時間管理ツールとなり、フリーランスの方々の業務効率化に貢献できるでしょう。

所感

一気に目標の形に近づきました！
今思えばプロンプトに指定した「日別に見れる機能」は既にある様な物なので、「カレンダー形式で表示して欲しい」と指示するだけで済んでたかもですが…。

また、指示してもないのにカレンダーは前/次の月へ切り替えれる機能も備わってますし、
カレンダーに収まってる情報も、これまでは各項目に「ラベル」(実質稼働時間、みたいな)のがありましたが…。
必要最低限の情報に削ってくれたため、過度に長くしてカレンダーのUIを崩す様な事もありません。
これ地味にすごい気がしますね…本当に生成AIの仕事なのか？

やり取り5回目

プロンプト:

素敵です！理想の形が出来上がっています。
ただ、入力フォームと出力フォームが個別になっているのは直感的ではありません。
カレンダー部分に入力箇所も統合できれば嬉しいのですが、いかがでしょう？

出来上がったコンポーネント:

回答(長いので折りたたみ)

ご提案ありがとうございます。カレンダーに直接入力できるようにすることで、より直感的なインターフェースになりますね。
以下に、カレンダーに統合された入力機能を持つ新しいコンポーネントを作成しました。

この新しいバージョンでは、以下の改善が行われています：

1. 入力フォームの統合: 別々だった入力フォームをカレンダーに直接統合しました。
2. 直感的な操作: カレンダーの各日をクリックすると、その日の稼働時間を入力できるダイアログが開きます。
3. ビジュアルフィードバック: 稼働時間が入力された日には、その情報が直接カレンダー上に表示されます。
4. 柔軟な編集: 既に入力された日をクリックすると、その情報を編集できます。

主な特徴：

1. シンプルなUI: カレンダービューのみでデータの入力と表示を行えます。
2. 効率的なデータ入力: 各日付に直接データを入力できるため、作業効率が向上します。
3. 視覚的な情報表示: 月単位で稼働状況を一目で確認できます。
4. レスポンシブデザイン: さまざまな画面サイズに対応します。

使用方法：

1. カレンダー上の日付をクリックします。
2. 開いたダイアログで、その日の開始時間、終了時間、休憩時間を入力します。
3. 「保存」をクリックすると、入力した情報がカレンダーに反映されます。
4. カレンダー上部の矢印ボタンで月を切り替えることができます。

このツールを使用することで、日々の稼働時間をより直感的に記録し、月単位で視覚的に確認することができます。
これにより、稼働パターンの分析やクライアントへの報告がさらに効率的に行えるようになります。

さらなる改善案：

1. データの永続化: ローカルストレージやデータベースを使用してデータを保存する。
2. エクスポート機能: 月別のレポートをCSVやPDF形式でエクスポートできるようにする。
3. 週別・月別の集計: 週や月の合計稼働時間を自動計算して表示する。
4. ドラッグ&ドロップ機能: カレンダー上で稼働時間をドラッグ&ドロップで調整できるようにする。

これらの機能を追加することで、より完全で使いやすい稼働時間管理ツールとなり、フリーランスの方々の業務効率化にさらに貢献できるでしょう。

所感

ちょっとややこしい指示かな？と思いましたが、流石v0様…見事に意図通りのUIが上がってきました。

個人的には今回はプロンプトも良かったと思います。
ここで初めて「今こうなってるのはこういう理由で良くない」「だからこうして欲しい」みたいな形で改善案を出したおかげで、v0側が綺麗に汲み上げてくれたのかな…？と思ってます。

プルリクレビューにて角が立たない指摘方法みたいな構文ですね。
まぁv0さんが凄いだけな気もしますが…。

また、これまで何回かやり取りをしてますが…やり取りの最中に「機能がロストした」事がないのも素晴らしいです。
例: 休憩時間の入力欄が消えた、みたいな
プロンプトが「今のものからこう変えて」という形になってるからでしょうか…？

結局この後も機能がロストすることはありませんでした。
やり取りが増えていく中で、機能を増やしまくっても落とさない安心感はありがたいですね。

あと改めて見返すと、上がってくる「さらなる改善案」について…。
やり取りする中で、4番目の内容は差異はありますが、1番目はどのプロンプトでも「データの永続化」で固定っぽいです。
ここの出力もある程度方向性がぶれないのは凄いと思いました。一貫している…。

やり取り6回目

プロンプト:

ありがとうございます！追加で幾つか要望があります。
まず、稼働しない日を「休暇日」としてマークする機能が欲しいのですが、実装可能でしょうか？

出来上がったコンポーネント:

回答(長いので折りたたみ)

もちろん、「休暇日」をマークする機能を追加することができます。
これにより、稼働日と休暇日を視覚的に区別しやすくなります。以下に、この機能を追加した更新版のコンポーネントを示します。

この更新されたバージョンには、以下の新機能が追加されています：

1. 休暇日のマーキング: 各日付に「休暇日」としてマークするオプションが追加されました。
2. 視覚的な区別: 休暇日は青い背景色で表示され、一目で区別できます。
3. 柔軟な入力: 休暇日としてマークされた日は、稼働時間の入力が不要になります。
4. 既存データの編集: 既に入力されたデータ（休暇日を含む）を簡単に編集できます。

主な特徴：

1. 直感的なUI: カレンダー上で稼働日と休暇日を視覚的に区別できます。
2. 効率的なデータ入力: 休暇日のマーキングが簡単にできます。
3. 柔軟性: 稼働日と休暇日を自由に切り替えられます。
4. レスポンシブデザイン: さまざまな画面サイズに対応します。

使用方法：

1. カレンダー上の日付をクリックします。
2. 開いたダイアログで、「休暇日」スイッチをオンにすると、その日を休暇日としてマークできます。
3. 休暇日でない場合は、通常通り稼働時間を入力します。
4. 「保存」をクリックすると、入力した情報がカレンダーに反映されます。

この新機能により、稼働日と休暇日を明確に区別でき、より正確な稼働時間管理が可能になります。
また、休暇の可視化により、ワークライフバランスの管理にも役立つでしょう。

さらなる改善案：

1. 休暇の種類分け: 有給休暇、病気休暇など、休暇の種類を選択できるようにする。
2. 休暇日数の集計: 月ごとや年間の休暇取得日数を自動計算して表示する。
3. 稼働率の計算: 稼働可能日数に対する実際の稼働日数の割合を計算し、表示する。
4. データのエクスポート: 稼働日と休暇日を含めたレポートを生成する機能を追加する。

これらの機能を追加することで、より包括的な稼働時間管理ツールとなり、フリーランスの方々の業務管理をさらにサポートできるでしょう。

所感

必要十分に機能を足してくれました！機能の追加箇所も想定通りですね。
トグル式でONにすると稼働時間の入力欄が消えるのも、地味に嬉しい配慮です。

また休暇日をカレンダー上で色付きにしてくれるのも嬉しい…。
ちょっとした内容ですが、こういうのも指示特に出さずとも勝手にやってくれて本当にありがたいです。

プロンプトで気をつけた点として…。
ここまでで大分欲しいものが出来てきたので、ここからは細かな機能追加を何点か付け加えようと思い。
プロンプトに「追加で幾つか要望があります。まず、〜〜」の様に情報入力をしてみました。

出力時にどの程度良い効果があるのか分からなかったですが、次のプロンプトを打つ時に文的な繋がりは持たせやすかったですね。

やり取り7回目

プロンプト:

ありがとうございます！次に、その月の稼働時間の合計を出して欲しいです。
一定時間以上稼働しないと減給が発生するため、一定時間以上その月に稼働できてるかどうかを確認したいからです。

出来上がったコンポーネント:

回答(長いので折りたたみ)

承知しました。月の稼働時間の合計を計算し、目標時間と比較する機能を追加しましょう。
これにより、一定時間以上の稼働ができているかを簡単に確認できるようになります。
以下に、これらの機能を追加した更新版のコンポーネントを示します。

この更新されたバージョンには、以下の新機能が追加されています：

1. 月間稼働時間の合計計算: 各月の稼働時間の合計を自動的に計算します。
2. 目標稼働時間の設定: ユーザーが月ごとの目標稼働時間を設定できます。
3. 進捗表示: 現在の稼働時間と目標時間の比較をプログレスバーで視覚的に表示します。
4. パーセンテージ表示: 目標に対する達成率をパーセンテージで表示します。

主な特徴：

1. 直感的なUI: カレンダー上部に月間の稼働時間サマリーを表示し、一目で進捗が確認できます。
2. 柔軟な目標設定: 目標稼働時間を自由に設定でき、月ごとに異なる目標を立てることができます。
3. リアルタイム更新: 稼働時間を入力するたびに、合計時間と進捗が自動的に更新されます。
4. 視覚的フィードバック: プログレスバーにより、目標達成までの道のりが一目で分かります。

使用方法：

1. 「目標稼働時間」欄で、その月の目標時間を設定します。
2. カレンダー上の日付をクリックして、通常通り稼働時間や休暇を入力します。
3. 入力するたびに、上部の月間稼働時間サマリーが自動的に更新されます。
4. プログレスバーと達成率で、目標に対する進捗を確認できます。

この新機能により、月ごとの稼働時間管理がより効果的になります。
目標時間に対する進捗を常に把握できるため、必要に応じて稼働調整を行いやすくなります。
また、減給のリスクを事前に察知し、対策を講じることも可能になります。

さらなる改善案：

1. アラート機能: 目標時間に対して一定の割合（例：80%）を下回った場合に警告を表示する。
2. 過去の月との比較: 前月や前年同月の稼働時間と比較できる機能を追加する。
3. 稼働パターン分析: 曜日や週ごとの稼働傾向を分析し、視覚化する。
4. 自動レポート生成: 月末に稼働サマリーレポートを自動生成し、クライアントへの報告を簡素化する。

これらの機能を追加することで、より包括的で使いやすい稼働時間管理ツールとなり、フリーランスの方々の業務管理と収入の安定化をさらにサポートできるでしょう。

所感

プロンプトへ「実装したい目的」を伝えたのか定かではないですが、
指示した「合計時間の出力」を「月の稼働時間の合計を計算し、目標時間と比較する」と読み替えてくれ…。
Progressバー形式で進捗を表示 してくれる神対応を行ってくれ、感動しました…！
自作のツールに今すぐに取り込みたい内容でした、素晴らしい提案力です。

優秀な方にお仕事を頼む時と一緒で、Whatと合わせてWhyを伝えれば向こうから改善提案込みで実装してくれるというね…。
改めてv0の凄さを実感しました。

やり取り8回目

プロンプト:

素晴らしい、最高です！
次に、入力時に特定時間でプリセット入力をして欲しいです。
毎日多少のブレはありますが決められた時間に稼働しているので、プリセット機能があれば入力コストを削減できると思います。

出来上がったコンポーネント:

回答(長いので折りたたみ)

承知しました。プリセット機能を追加することで、入力の手間を大幅に削減できますね。
以下に、プリセット機能を組み込んだ更新版のコンポーネントを示します。

この更新されたバージョンには、以下の新機能が追加されています：

1. プリセット機能: よく使う勤務パターンをプリセットとして選択できるようになりました。
2. クイック入力: プリセットを選択するだけで、開始時間、終了時間、休憩時間が自動的に入力されます。
3. カスタマイズ可能: プリセットを選択した後でも、個別に時間を調整することができます。

主な特徴：

1. 効率的な入力: プリセットにより、日々の稼働時間入力が大幅に簡素化されます。
2. 柔軟性: 通常勤務、早朝勤務、遅番勤務、半日勤務など、様々な勤務パターンに対応できます。
3. カスタマイズ可能: プリセットはコード内で簡単に追加・変更できます。
4. ユーザーフレンドリー: プリセット選択と手動入力を組み合わせることで、様々な勤務形態に対応できます。

使用方法：

1. カレンダー上の日付をクリックして、稼働時間入力ダイアログを開きます。
2. プリセットドロップダウンから適切な勤務パターンを選択します。
3. 必要に応じて、自動入力された時間を調整します。
4. 「保存」をクリックして、入力を確定します。

この新機能により、日々の稼働時間入力の手間が大幅に削減されます。
特に、規則的な勤務パターンを持つユーザーにとっては、入力時間を大きく短縮できるでしょう。

さらなる改善案：

1. カスタムプリセット: ユーザーが独自のプリセットを作成・保存できる機能を追加する。
2. 曜日別プリセット: 曜日ごとに異なるデフォルトプリセットを設

所感

私の自作ツールで作ったプリセット機能は「最初から決められた時間が入力されていて」あとは調整するだけ、というスタイルですが…。
v0が提案してくれたのは「プリセットのプルダウンがあって選んで入力」という形式です。

そしてプリセットの内容も特に指示してないのに、よく使われそうな内容を提示してくれて。
またラベルに「遅番」という、社会人独特の?用語も織り交ぜてくれたのも凄いと思いました。
この辺の用語知らないと出てこないですしね…まぁ「早番」は出ず「早朝勤務」でしたが。

何より素晴らしいのが、これがReactコードで出来てる事ですね。
おまけにプリセットは追加/削除がしやすい配列形式で定義してくれてますし。

動くUIが生成されるメリットここにありですな…。

やり取り9回目

プロンプト:

最高です！！どんどん理想の形に仕上がっています。
次に、休暇日には備考を入力する欄が欲しいです。
お客様へ稼働実績内容を送付する際、時間未記入の場合には理由を記したいからです。

出来上がったコンポーネント:

回答(長いので折りたたみ)

承知しました。休暇日に備考を追加できる機能を実装しましょう。
これにより、お客様への報告時に休暇の理由を適切に説明できるようになります。
以下に、この機能を追加した更新版のコンポーネントを示します。

この更新されたバージョンには、以下の新機能が追加されています：

1. 休暇日の備考入力: 休暇日を選択した際に、備考（休暇理由など）を入力できるテキストエリアが表示されます。
2. 備考の表示: カレンダー上の休暇日に、入力された備考が表示されます。
3. 柔軟な入力切り替え: 通常の稼働日と休暇日で、入力フォームの内容が動的に切り替わります。

主な特徴：

1. 詳細な休暇情報: 休暇の理由や特記事項を記録できるため、後で確認や報告がしやすくなります。
2. 視覚的な区別: 休暇日は青い背景で表示され、備考も併せて表示されるため、一目で状況が把握できます。
3. ユーザーフレンドリーなUI: 休暇日の切り替えと備考入力が同じダイアログ内で完結するため、操作が簡単です。
4. 柔軟性: 休暇日と通常の稼働日を簡単に切り替えられるため、予定の変更にも対応しやすくなっています。

使用方法：

1. カレンダー上の日付をクリックして、稼働時間入力ダイアログを開きます。
2. 「休暇日」スイッチをオンにすると、備考入力用のテキストエリアが表示されます。
3. 休暇の理由や特記事項を入力します。
4. 「保存」をクリックして、休暇日の情報を保存します。
5. カレンダー上で、休暇日とその備考が表示されます。

この新機能により、休暇日の管理がより詳細かつ柔軟になります。
お客様への報告時に、休暇の理由を適切に説明できるようになり、コミュニケーションがよりスムーズになるでしょう。

さらなる改善案：

1. 休暇種別の選択: 有給休暇、病気休暇、特別休暇などの種別を選択できるようにする。
2. 休暇日数の集計: 月ごとや年間の休暇取得日数を自動計算して表示する。
3. 休暇申請ワークフロー: 休暇申請と承認のプロセスを組み込む（複数人で使用する場合）。
4. レポート生成: 月末に稼働日と休暇日（理由含む）のサマリーレポートを自動生成する。

これらの機能を追加することで、より包括的で使いやすい稼働時間管理ツールとなり、フリーランスの方々の業務管理とクライアントとのコミュニケーションをさらにサポートできるでしょう。

所感

プロンプトで指示した内容をしっかり汲み取ってくれましたね。
休暇日マークをつけないと備考欄が出てこなく、また備考内容もカレンダーに出してくれる丁寧仕様。

これまでと比較すれば特別感動する事はなかったですが、
出力まで受け持ってくれるのは、やはり安定のv0クオリティでしょう。

なお、ここまで打った事でUsaseを使い切ってしまったらしく…。
以降のやり取りはしていません。

…が、やりたかった事が実現&実運用にも十分耐えれる良いモノが出来たと思えます。
最後に、v0を使ってみた「全体的な所感」を示して当記事は終わりにしようと思います。

全体の所感

まず「実装意図の汲み取りレベル」が凄まじく高いと思いました。
生成AIではなく、実在する「優秀なエンジニア」へ依頼しているかと錯覚する様な…。

特にWhatだけじゃなくWhyを伝えると、指示された内容(What)だけに止まらず、Whyに沿ったさらなる改良を付け加えてくれるのが嬉しかったです。
こういうのを実際の人がやってくれると、信頼感向上に繋がりますからね…まぁ今回は対象がAIですが。

また、今回は私が「実際に形にしているツールを準えて作ってもらう」形式だったので…。
製作者が私という事もあり、プロンプトを送付する人間が「仕様を正確に理解している」前提でやり取りをしました。

この為、v0が提案してくれた「さらなる改善案」は全く生かさず突き進んでいきましたが…。
もし「構想だけで形に出来ていないツール」を作ろうとした時、この改善案は自身のアイデアを後押ししてくれるブースターにもなり得そうです。

…ただ、「さらなる改善案」を鵜呑みにし過ぎると「本当にやりたかった事」から遠ざかる危険性もありそうですがね…。
この辺は「優秀だけど突っ走りがちなエンジニアに依頼する時」と一緒と思ったほうがいいでしょうか。 (実際にはあまりいないタイプな気もしますが…)

あとは、今回のプロンプトでは「エンジニア用語は使わずに済んだ」というのも良かったなと。
先に記した実装意図の汲み取りレベルの高さから、要望だけを伝えても何となくそれっぽいものは出来そうです。 エンジニアでない人でも使える可能性を感じますね…。

ただ実現したい内容が「あまりに抽象度が高い」と、上手く仕上げてくれるかは謎ですがね…。
結局生成するのは「1コンポーネントだけ」なので。
「システム全体」を構築してくれる訳ではありませんからね…。

今回私が題材にした様な内容程度の規模なら問題ないでしょうが、経営者が考える様な壮大な構想をプロンプトに入れても上手くはいかなそうかな…と思います。
壮大な構想は実現手段が多数ある事も多いので、この場合は経営者からやりたい事をヒアリングするエンジニアが必要な気がします。
そしてそのエンジニアが、経営層に「こんな感じのはどうでしょう？」とプレゼンする時にv0を使う…とするなら丁度いいかもしれません。

おわりに

今回は「v0の実用編」として「実際に私が使ってみたプロンプト」「出力されたコンポーネント」「回答内容」を全て記載してみました。
おかげで相当長い記事になりましたけどね…ここまで読んでくださり、誠にありがとうございます。

特に「全体の所感」については長くなっちゃって…それだけ心動かされたツールだったんだなと…。
ともあれ、小規模なモノであれば簡単に形にしてくれるツールとして非常に優秀なものに思えます。

ただ、執筆当時(2024/09/01)段階のベータ版では、生成した物は学習目的で使われる上、オプトアウト機能もまだ未実装なので…。
機密情報等は扱えないのと、現状は「shadcn/ui」(つまりReact)しか対応してないので、本格的に業務に組み込むには難しいかもですね。

個人開発や趣味開発範囲、もしくは機密情報が含まれないなら新しい事業orサービスのアイデアを形にするためのツールとしては最高な物だと思うので。
もしこの記事を見て「面白そう！」と思ったらぜひ使ってみて下さい。イチオシです！ v0.dev

今後もまた面白そうな物が見つかれば、勉強目的も含めこうしてまとめたいと思います。
それでは|дﾟ＊)