Copilot Agentと10日間で使い捨て予定表「DayCommit」を作ってみた

はじめに

Github Copilot Agentに教えてもらいながら、10日間でwebアプリ「DayCommit」を開発してみました。

本記事では、DayCommitの概要、MVP開発の手順、感想などをまとめます。

DayCommitとは

世の中にはGoogleカレンダーやoutlookなど、スケジュールアプリはたくさんあります。共有機能もふんだんに実装されていて、とても便利に使うことができます。

ただ、一般的なスケジュールアプリにはできないことがあります。それは「分刻みの予定を共有する」ことです。例えば、イベントや日帰り旅行、部活動の合宿などで、"Aさんは何時に集合？" "Bさんは何時に帰る？" "Cさんには何時に〇〇してもらう" といった細かい予定を共有したいとき、Googleカレンダーでは難しいことがあります。

DayCommitはそういった「ある日」の予定をスケジュール共有することに特化したアプリです。

主な機能は以下の通りです。

• アカウント登録不要
• ある日の予定を分単位で作成・共有できる
• URLを共有するだけで、誰でも予定を確認できる
• 使い終わったら自動で削除される

きっかけ・背景

もともと別の個人開発を進めていたのですが、思いのほか規模が大きくなってしまい、なかなか開発が終わらず疲れてしまっていました。そんな中、GPT君と話をしていると「開発はフロントエンドだけでも完結できるし、多くの爆速開発はこれ」と教えてもらい、そんな開発ができたら面白いなと興味を持ちました。

一方で、日常生活で子どもの予定や旅行のスケジュールを作る際、テキストやエクセルで手作業していた経験から、「もっと手軽に分刻みの予定を共有できるアプリがあればいいのに」と感じていました。そこで、「1日の予定を簡単に共有できるアプリを作ろう」と思い立ちました。

主な技術

大体以下のような構成・キーワードで開発しました。
バックエンドは完全にFirebaseに依存しており、フロントエンドの開発に集中しました。

フロントエンド

• Vite
• React (TypeScript)
• React Router
• Redux
• Zod
• React Query
• Atomic Design

バックエンド・インフラ

• Firebase（Firestore / Hosting）

開発プロセス・設計

• GitHub Actions（CI/CD）
• MVVM

多言語対応

• n18i

Github Copilot Agentを使ったMVP開発

要件定義と設計

まずはGPTに相談しながら、以下のような要件を整理しました。

• 最小で5分刻みで予定が作成できる
• 予定はタイトルと色だけでOK
• 編集・閲覧の切り替えができる
• 列を増やして複数人の予定を作成できる

この段階で「MVP（最小限の実用的なプロダクト）」に徹し、機能を絞り込むことを意識しました。
最終的に、Agentに投げる前に作成した要件は以下の通りです。

DayCommitの要件

アプリ名

DayCommit

概要

DayCommitは、1日分の分刻みスケジュールを複数人で簡単に作成・共有できるWebアプリです。
イベントごとにURLを発行し、PC・スマホのどちらからもタイムテーブル、コメント、外部リンクをリアルタイムに編集できます。
Googleカレンダーのような重厚な機能は排除し、「一時的なイベント・当番表・現場作業・旅行計画」など、使い捨て感覚で直感的な操作を重視しています。
本アプリは個人開発プロジェクトとして進行中です。

構成

• フロントエンド: Vite + React + TypeScript + MVVM + Zod + ReactQuery + Redux + Atomic Design(Material UI)
• データ保存: Firebase Firestore (Realtime DB)
• バリデーション: Zod（フォーム/データ構造）
• 多言語対応: i18n (初期は日本語、将来英語等)
• ホスティング: Firebase Hosting

Router

• /: トップページ・サービス説明
• /create: イベント作成ページ
• /event/:eventId: イベントタイムテーブル・編集ページ
• /terms: 利用規約・プライバシーポリシー

デザイン

Material UIに準拠したシンプルかつ視認性重視のデザイン
（Atomic Designでコンポーネント設計）

環境

環境名	フロントエンド	データ保存
staging	Firebase Hosting (stg)	Firestore/ローカル
production	Firebase Hosting	Firestore

コーディング規約（フロントエンド）

• MVVM＋Atomic Designに従い、ロジックとUIを分離
• Zodによる型・バリデーションを徹底
• atoms: 汎用スタイル・小コンポーネント
• molecules: atoms組み合わせ＋用途別機能
• organisms: ViewModelやhooks連携、画面パーツ統合
• templates: レイアウト・レスポンシブ管理
• pages: ルーティング単位
• コメントを充実させ、初学者でも理解しやすく記述
• Material UIテーマ、styled API利用

開発指針・備考

• 個人開発、Python歴5年/TypeScript歴0年、アプリ開発は初
• 質問には淡々とした日本語で回答、例えや補足を適宜交える
• MVP完成を目標とし、拡張課題はissues管理

ロードマップ

MVP

• イベント作成（タイトル・日付・参加者・時間範囲）
• タイムテーブル作成・編集（グリッドUI・複数セル選択・一括編集）
• コメント・外部リンク機能
• URL共有（イベントごとランダムID）
• データの自動削除（作成7日後 or イベント日翌日）

Copilot Agentの活用と工夫

私は普段Pythonをよく使っていて、ReactやTypeScriptは不慣れでこれまでもGPTに頼りがちでした。ただ、コード量が増えるとAIの提案精度が下がることも多く、これまではAgent機能を積極的に使っていませんでした。
今回はゼロからの開発で、規模も大きくなりすぎないと判断し、最初からGithub Copilot Agentを活用。
コード生成や修正を都度依頼しながら、理解を深めつつ開発を進めました。

LLMの選定と使い分け

主にGPT-4.1を利用しました。Claude Sonnetも試しましたが、こちらは「お願いしていないことまで勝手に進めてしまう」傾向がありました。
一方、GPT-4.1は「反映しますか？」や「次に〇〇する場合はお知らせください」と都度確認してくれるため、自分のペースで落ち着いて開発できました。

感じたこと、これからについて

開発を進める中で、要件定義やDB設計は何度も見直しが必要になりました。最初に考えた通りにはなかなか進まず、実際に手を動かしてみて初めて気づくことも多かったです。UIについても、思った以上に細かい使い勝手や見た目が気になり、何度も作り直すことになりました。やはり経験豊富なエンジニアであれば、こうした試行錯誤の回数も少なく、もっと効率よくリリースできるのだろうなと感じました。

また、.github/copilot-instructions.md などに開発方針や指示を書いておけば、Copilot Agentをより効果的に活用できたはずですが、今回はほとんど準備せずに進めてしまいました。先ほどの要件だけでも、instructionsとして置いておけば良かったのかもしれません。今後はAIに任せる部分と自分で考える部分を整理し、指示やルールを明文化しておくことで、よりスムーズな開発ができると感じています。

よく「〇〇日で爆速開発！」という記事を見かけますが、実際に自分で短期間開発をやってみると、達成感や嬉しさが大きいと実感しました。完全にAgent任せではなく、自分で理解しながら作り上げたアプリなので、今後もAgentをうまく活用しつつ、継続的に改善していきたいと思います。