目次
- はじめに
- 用意するもの
- 1. 作成するアプリの最も重要な目的を書き出そう
- 2. アプリの外観を具体的に練ろう
- 3. 主要なユースケースを言語化しよう
- 4. AIに実装してもらおう
- 5. 手元でバグ探しを行う
- 最後に
はじめに
昨今AIの進歩は凄まじく，個人が欲しいと思ったツールを，個人がそれなりのクオリティかつ短い期間で簡単に作れてしまいます．しかし，コツを掴めていないと意外と思っていた機能にならなかったり，途中でカオスが混沌になりプロジェクトを成長させにくい状態に陥ってしまったり，壊滅的な後戻りが発生してソースを手放したくなります．
今回は，私が仕事で欲しいなと思っていた本格的なタスク管理（ガントチャート？）ツールをVSCodeの拡張として実際に作成しました．ので，それを例に爆速開発手順を説明します．このツールの開発時間は約6時間と短く，コツさえ掴めばこの程度のツールならささっとできます．この開発でエディタを開く必要はなく，VSCodeさえあれば開発環境も不要です．
用意するもの
- VSCode
- Claude Code Pro (他のAIはあまり知らないので再現性があるのはこれです)
なぜVSCodeか
- Claude Codeがサーバ側で開発環境を作ってビルドまでしてくれるのでこちらで開発環境を作成する必要がない．
- VSCodeに公開しているアプリはマルウェアスキャンを通って公開されているため，安心して使える（過信は良くない）．
- 共有するときに簡単に導入してもらえ，心理的ハードルも低い．
- 私自身がVSCodeをよく使うので機能を統合したい．
1. 作成するアプリの最も重要な目的を書き出そう
AIでアプリを作るときによく陥ってしまうのは優先度の崩壊です．
AIはいろいろな機能を一度に提案して，一度に実装する傾向があります．
その機能も欲しい，この機能も欲しいと追加を重ねていくと当初自分が思い描いていたアプリとは全く違うものができてしまいます．
それによって素晴らしいアプリができるのなら良いのですが，十中八九アプリがごちゃっとして人間のコントロールを失い，あらゆるところでバグが多すぎてうんざりします．
そこで大事なのが，まず当初のツールを作る目的を書き出すことです．
これを達成するために，こういったことができたらいい．だからこんな機能を持つこんなアプリが欲しい！
極力シンプルにアプリを作っていくことが大事です．
-
私のタスク管理アプリの場合ですと，モチベとなった2つの目的があります．
-
1つ目は
多数のタスクとそれに付随する締め切りを漏れなく管理するために，
締切の数とその期限感が一目で見られたら嬉しい．
だから，カレンダー上に締切をわかりやすく表示する機能を持つアプリが欲しい -
2つ目は
インタラクティブかつ見やすくタスクを整理するために，
エクセルを駆使したガントチャートタスクの管理を抜け出したい
だから，操作性／視認性が優れたタスク管理専用のアプリが欲しい．
※エクセルはとんでもない自由度があるためガントチャート作成に使われます．しかし，専用アプリではないのでやはり視認性や操作性は最悪になりがち． -
この2つの目的に適さない機能は導入しないように進めます．
-
上2つのうち，1つだけを満たすアプリなら巷に溢れかえっていますが，2つとも満たすとなると多分私の満足いくものはこの世にないです．
2. アプリの外観を具体的に練ろう
目的が決まったら次にすべきことはどのような外観のアプリが欲しいかです．
これを具体的に書かないと，アプリが出来上がったときに思ってたデザインではなくテンションが下がります．
また，外観には言語化が難しいユースケースが多く潜みます．
ユースケースを文字に書き出すと，ほぼ確で検討漏れが発生するものですが，イラストで書くと案外発生しないものです．
具体的にどのように操作するのか，それを最適化するデザインは何かを考える工程がこれに必要だからです．
AIがない以前はFigmaとかを使うと良いのでしょうが，AIがいますので，これもAIにやってもらいましょう．
Claude CodeだとSVG形式でデザインを出力してもらうのがうまくいきます．何度も対話しながらこういう画面も欲しいんだよねとほぼ完成形のデザインまで持っていってください．
ここがしっかりできていると，アプリ完成後とのギャップも少なく，後戻りも少なくなります．
AIに考えてもらったタスク管理アプリの初期構想．この画面を見ればこういうことをしたいんだなとわかるのが理想です．
3. 主要なユースケースを言語化しよう
さて，次は作成した外観情報をもとにユースケースを具体的に定義していきましょう．
外観情報をAIに渡してユースケースをまとめてもらうのが手っ取り早いです．
意図していないユースケースや，不足しているユースケースがないかをチェックしましょう．
過不足があれば2に戻っても良いです．プログラムを書き始める前に土台をしっかりさせましょう．
エラーや例外処理なんかもこのタイミングで言語化できるといいですね．
※ユースケース定義が終わった後に非機能要件の定義もするといいです．今回はめんどくさいので飛ばしました．
ユースケース定義（クリックして展開）
このステップの時点でのユースケース定義を記載します．
この後の4，5のステップでユースケースは多く追加されていますが，この段階では主要なものだけで構いません．
1.1 タスク追加
| 項目 | 内容 |
|---|---|
| ユーザーゴール | 素早く新しいタスクを作成する／最小限の操作でタスク管理を開始 |
| トリガー | 画面右上の「+ タスク追加」ボタンをクリック |
| プライマリフロー | 1. 「+ タスク追加」ボタンをクリック 2. 自動的に新しいタスクが作成される 3. 右側の詳細パネルが新規タスク用に更新される（デフォルトタイトル：「新しいタスク」，ステータス：「未定」，左側の「未定」セクションにタスクが表示される） 4. ユーザーは即座に詳細パネルで以下を編集可能（タイトル，メモ，リンク，締切） |
| 特記事項 | タスク作成モーダルは使用しない／最小限の手順でタスク作成を実現／右側の詳細パネルで即時編集 |
1.2 タスク編集
| 項目 | 内容 |
|---|---|
| ユーザーゴール | 既存のタスクの詳細を素早く，簡単に変更する／タスクの属性を柔軟に更新できる |
| トリガー | タスクリスト内の任意のタスクをクリック／タスクがタイムライン上で選択される |
| プライマリフロー | 1. タスクをクリックする 2. 右側の詳細パネルが選択したタスクの情報で更新される 3. 以下の項目を直接編集可能（タイトル，ステータス，日付範囲，リンク，メモ，締切（追加／編集／削除）） |
1.3 タスク削除
| 項目 | 内容 |
|---|---|
| ユーザーゴール | 不要になったタスクを迅速に削除する／タスク管理の柔軟性を確保する |
| トリガー | 詳細パネルの「タスクを削除」ボタンをクリック |
| プライマリフロー | 1. タスクの詳細パネルを開いている状態 2. 画面右下の「タスクを削除」ボタンをクリック 3. 削除確認ダイアログを表示 4. 確認後にタスクが削除される（タスクリストから削除，タイムラインから削除，「未定」セクションから削除） |
1.4 締切の追加／編集／削除
| 項目 | 内容 |
|---|---|
| ユーザーゴール | タスクに細かい締切を管理する／段階的な進捗を追跡できるようにする |
| トリガー | 詳細パネルの締切セクションにある「+」ボタン／既存の締切の編集／締切の削除ボタン |
| プライマリフロー（追加） | 1. 「+」ボタンをクリック 2. 新しい空の締切が追加される（デフォルトタイトル：「新しい締切」，日付は未設定，チェックボックスは未チェック状態） |
| プライマリフロー（編集） | 1. 締切の日付をクリック／選択 2. 日付を入力 3. タイトルを編集可能 |
| プライマリフロー（削除） | 1. 各締切の右側にある「🗑」ボタンをクリック 2. 締切が即座に削除される |
2. マウス操作によるタスク管理
2.1 タスク移動
| 項目 | 内容 |
|---|---|
| ユーザーゴール | タスクの状態や位置を柔軟に変更する／最小限の操作でタスクの進捗を反映させる |
| トリガー | 「未定」セクションのタスクをカレンダーにドラッグ／既存のタスクを別のステータスセクションにドラッグ／カレンダー上の別の日付にタスクをドラッグ |
| プライマリフロー（未定→カレンダー） | 1. 「未定」セクションのタスクをマウスでつかむ 2. カレンダーの任意の日付にドラッグ 3. タスクのステータスが「実行中」に変更 4. タスクの開始日／終了日が選択した日付に設定される |
| プライマリフロー（ステータス移動） | 1. タスクをあるステータスセクションから別のステータスセクションにドラッグ 2. タスクのステータスが移動先のステータスセクションに更新される |
| プライマリフロー（カレンダー上移動） | 1. タイムライン上のタスクを別の日付にドラッグ 2. タスクの開始日／終了日が移動先の日付に更新される |
2.2 タスク期間変更
| 項目 | 内容 |
|---|---|
| ユーザーゴール | タスクの開始日／終了日を簡単に調整する／柔軟な期間設定を可能にする |
| トリガー | タイムライン上のタスクの開始点／終了点をマウスでドラッグ |
| プライマリフロー | 1. タイムライン上のタスクの左右のエッジにマウスカーソルを移動 2. カーソルが期間変更モードになることを示すアイコンに変化 3. マウスでドラッグして期間を変更（左エッジをドラッグ：開始日を変更，右エッジをドラッグ：終了日を変更） 4. マウスボタンを離した瞬間，タスクの開始日／終了日が即座に更新される |
2.3 カレンダースクロール
| 項目 | 内容 |
|---|---|
| ユーザーゴール | タイムライン上の遠い日付を素早く表示する／マウス操作で直感的に日付範囲を移動する |
| トリガー | カレンダー領域を水平方向にマウスでドラッグ |
| プライマリフロー | 1. カレンダー領域内でマウスボタンを押下 2. マウスをドラッグ（左にドラッグ：未来の日付を表示，右にドラッグ：過去の日付を表示） 3. マウスボタンを離す（スクロール位置で停止） |
2.4 タスク詳細表示
| 項目 | 内容 |
|---|---|
| ユーザーゴール | タスクの詳細情報を素早く確認する／追加情報にアクセスする |
| トリガー | タスクリスト内のタスクをクリック／タイムライン上のタスクをクリック |
| プライマリフロー | 1. タスクをクリック 2. 右側の詳細パネルが即座に更新される（クリックしたタスクの全詳細情報を表示：ステータス，タイトル，日付範囲，リンク，メモ，締切リスト） |
2.5 タスク全体の期間移動
| 項目 | 内容 |
|---|---|
| ユーザーゴール | タスクの期間の長さを維持したまま，全体を別の日付に移動させる |
| トリガー | タイムライン上のタスクの中央部分をドラッグ |
| プライマリフロー | 1. タスクの中央部分（開始日と終了日の間の領域）をマウスでつかむ 2. ドラッグして任意の日付に移動 3. マウスボタンを離した瞬間（タスクの開始日と終了日が，移動した分だけ平行移動，タスクの期間の長さは変わらない） |
2.6 タスク順番変更
| 項目 | 内容 |
|---|---|
| ユーザーゴール | 同じステータスセクション内でタスクの優先順位や並び順を柔軟に変更する／タスクの重要度や緊急度を視覚的に管理する |
| トリガー | タスクリストまたはタイムライン上のタスクをドラッグ |
| プライマリフロー | 1. タスクをマウスでつかむ 2. 同じステータスセクション内の別の位置にドラッグ 3. マウスボタンを離した瞬間（タスクの順番が即座に更新される，他のタスクが自動的に位置調整される） |
| 特記事項 | 「待機中」「実行中」「完了」の各ステータスセクション内で順番変更可能／ドラッグ中は他のタスクの位置が動的に調整される／順番変更はユーザーの優先度設定を反映 |
2.7 タスクのリンクを開く
| 項目 | 内容 |
|---|---|
| ユーザーゴール | タスクに関連するリンク（URL）に素早くアクセスする／詳細パネルを開かずにリンクを開ける |
| トリガー | タスクリストまたはタイムライン上のタスクをダブルクリック |
| プライマリフロー | 1. タスクをダブルクリック 2. タスクにリンクが設定されている場合（リンクを外部ブラウザで開く，タスクの選択状態は変更しない） 3. タスクにリンクが設定されていない場合（何も起きない（シングルクリックと同じ動作）） |
| 代替フロー | リンクが無効なURL形式の場合：エラーを表示せず，何も起きない |
| 特記事項 | ダブルクリックはシングルクリック（タスク選択）とは別の動作／リンクの有無を視覚的に示すインジケータがあると便利（例：🔗アイコン） |
3. 表示モード切り替え
3.1 日／週表示の切り替え
| 項目 | 内容 |
|---|---|
| ユーザーゴール | タスクを異なる粒度で表示する／柔軟な視点でタスクを管理する |
| トリガー | ツールバーの「日表示」「週表示」ボタンをクリック |
| プライマリフロー | 1. 「日表示」または「週表示」ボタンをクリック 2. カレンダーの表示モードが即座に切り替わる（タスクの表示粒度が変更される，現在選択中のタスクと表示位置を維持） |
| 表示モードの特徴 | 日表示：個々の日単位で詳細に表示／週表示：週単位でタスクを概観 |
4. フィルタリングとソート
4.1 タスクのフィルタリング
| 項目 | 内容 |
|---|---|
| ユーザーゴール | 大量のタスクから目的のタスクを素早く見つける／キーワードやパターンでタスクを絞り込む |
| トリガー | ツールバーのフィルター入力欄にテキストを入力 |
| プライマリフロー | 1. フィルター入力欄にキーワードを入力 2. 入力と同時（リアルタイム）にタスクがフィルタリングされる（タスクリストに表示されるタスクが絞り込まれる，タイムラインに表示されるタスクが絞り込まれる） 3. フィルター対象フィールド（タイトル，メモ，締切タイトル） 4. フィルター入力欄をクリアすると全タスクが表示される |
| 検索パターン | 通常検索：部分一致（例：「資料」→「資料作成」「会議資料」にマッチ） ワイルドカード *：任意の0文字以上にマッチ・ プレゼン* → 「プレゼン」「プレゼン資料」「プレゼン準備」にマッチ・ *レビュー → 「コードレビュー」「デザインレビュー」にマッチ・ 設計*書 → 「設計書」「設計仕様書」「設計指示書」にマッチ・ * のみ → 全タスクにマッチ（フィルターなしと同じ） |
| 代替フロー | 一致するタスクがない場合：「該当するタスクがありません」メッセージを表示，タスクリストとタイムラインは空の状態 |
| 特記事項 | 大文字小文字を区別しない（ケースインセンシティブ）／入力ごとに即座にフィルタリング（デバウンスなし，または短いデバウンス）／フィルター状態はUIに明示的に表示（例：「3件／10件」）／クリアボタン（✕）でフィルターを解除可能／ワイルドカードを使わない場合は部分一致として動作 |
4.2 締切順ソート
| 項目 | 内容 |
|---|---|
| ユーザーゴール | 締切が近いタスクを優先的に確認する／緊急度の高いタスクを見逃さない |
| トリガー | ツールバーのソートボタン／ドロップダウンで「締切順」を選択 |
| プライマリフロー | 1. ソートオプションから「締切順」を選択 2. タスクリストの表示順が締切日の昇順（近い順）に変更される（各ステータスセクション内でソートが適用される，次の未完了締切の日付を基準にソート） 3. タイムラインの表示順も同様に変更される |
| ソート優先順位 | 1. 未完了の締切がある → その中で最も近い締切日 2. 締切がないまたは全て完了 → タスクの終了日 3. 終了日もない → タスクの作成日 4. 同じ日付 → 元の並び順を維持 |
| 代替フロー | 「手動順」を選択した場合：ユーザーが設定した並び順に戻る，ドラッグ＆ドロップで並び替え可能 |
| 特記事項 | ソート状態はUIに明示的に表示（例：「締切順 ↑」）／ソートとフィルターは併用可能／ソート中もドラッグ＆ドロップでの順番変更は無効化される |
4. AIに実装してもらおう
外観情報とユースケース定義，他非機能要件等あればそれも添付してAIにVSCodeの拡張として実装してもらいましょう．
ここで魔法の言葉を添えましょう．
- クリーンアーキテクチャの考えに基づいて実装して
- ユニットテストを正常系／異常系ともにしっかりと書いて
多くは語りませんが，大体これでうまくいきます．
実装の完了を待ちましょう．
5. 手元でバグ探しを行う
AIに実装してもらったら.vsixを送ってもらいましょう．
それをVSCodeにインストールするとデバッグができます．
実際に自分でアプリを操作してバグを洗い出しましょう．
1回目のデバッグの場合は，ボタンや表示が機能しておらず壊滅的になっています．
しかし，これはUIコンポーネントにのみ問題がある場合が多く，その後ろの実装は完璧な場合が多いです．
そのため，指摘すればすんなり直ります．めげずにバグ報告をしましょう．
以上で4に戻りバグ修正をしてもらい，5，4，5，4，5，...と繰り返していきます．
初期の頃はバグ修正がメインになります．
バグが減ってきたら，デザインや使用感の改善，追加であったらいいなと思うユースケースを増やしていきましょう．
今回のアプリだと4，5サイクル数とアプリの完成度は大体下のような感じです．
- 5サイクル：初期に潜んでいたバグの修正完了
- 20サイクル：あると嬉しいユースケースが充実
- 35サイクル：不要な手数の徹底排除，細かいデザインや使用感が完璧
最終版アプリがこんな感じ
・タスク登録デモ
・ビュー切り替えデモ
最後に
この手順で欲しいVSCode拡張，特にローカルのツールならパパッと自分の理想的なアプリが作れてしまいます．
仕事で使う要求定義から始まる開発プロセスと違って，本件はステークホルダーが自分だけの開発です．そのためこのような爆速開発が可能です．仕事で開発する際はあまり参考にしてはダメなものですので．．．
何か面白いツール作れたらそっと下記アカウントに教えてくれると嬉しいです．
↓今回紹介したツール
↓他こういうのも作れます．