スポンサーリンク

ガントチャートをGeminiに作ってもらったらすごかった話

AIリサーチ

タスク管理のガントチャートをGeminiで作ったらすごかった・・・!

AI、特にGeminiのような大規模言語モデルが、文章生成だけでなくコード生成においても高い能力を持つという話はよく耳にします。しかし、その実力は具体的にどの程度のものなのでしょうか。

本記事では、プログラミング知識を持たない筆者が、Geminiのコード生成能力を実際に検証することを目的とし、その一環として「ガントチャートツール」の構築に挑戦した過程を報告します。

「特定の業務に適したツールがあれば効率が上がるのに、プログラミングの知識がないため開発は難しい」という状況は、多くの方が経験するかもしれません。私も同様に、以前からカスタマイズ可能なガントチャートの必要性を感じていましたが、スキル面での制約から実現は困難だと考えていました。

Geminiの登場は、この状況を打開し、そのコード生成能力を試す絶好の機会となりました。この記事を通じて、AIが個々のニーズに応じたツール開発をどの程度支援できるのか、Geminiがそれをどのように実現するのか、具体的な手順と潜在的な活用法について、検証結果を共有できれば幸いです。

すべてはここから始まった!Geminiへの最初の「お願い」

コード生成能力を試す:ガントチャート開発への挑戦

「Geminiのコード生成能力はどの程度のものなのか、実際にツール開発を通じて試してみよう」という動機から、以前より作成したいと考えていたガントチャートを題材として選定し、その実力を検証することにしました。

プログラミング知識のない私が、具体的な仕様を詳細に伝えることなく実用的なツールが本当に構築できるのか。期待と少しの不安が入り混じる心境でしたが、この検証が後の具体的なツール開発へと繋がる第一歩となりました。す。

Geminiへの初コンタクト:「ガントチャートでタスク管理がしたいんです!」

試行のつもりで、Geminiのチャット画面を開き、非常にシンプルな言葉で要望を伝えました。

ガントチャートでタスク管理がしたいです。

ガントチャートでタスク管理を行いたいとのこと、承知いたしました。 インタラクティブなガントチャートをHTML、CSS、JavaScriptで作成します。このツールを使うことで、タスク名、開始日、終了日を入力し、視覚的なタイムラインでタスクを管理できます。

以下のドキュメントで、ガントチャートのコードを提供します。タスクの追加や、チャートの動的な更新が可能です。

このガントチャートは以下の機能を備えています
タスクの追加: タスク名、開始日、終了日を入力してチャートにタスクを追加できます。
動的なチャート生成: 追加されたタスクに基づいてタイムラインが自動的に生成・更新されます。
視覚的なタスクバー: 各タスクは色分けされたバーとして表示され、期間が一目でわかります。
日付ヘッダー: チャートの上部には日付と曜日が表示されます。
レスポンシブデザイン:基本的なレスポンシブ対応を施しており、様々な画面サイズで閲覧可能です。
タスク詳細と削除: タスクバーをクリックすると詳細が表示され、削除も可能です。
ローカルストレージ: タスクデータはブラウザのローカルストレージに保存されるため、ページを再読み込みしてもデータが保持されます。

今後の改善点としては、以下のようなものが考えられます:
・タスクのドラッグ&ドロップによる日付変更機能
・タスク間の依存関係の表示
・進捗率の表示
・より高度なフィルタリングやソート機能
・データのエクスポート・インポート機能

専門用語や詳細な仕様は含めず、ただ漠然とした「欲しいもの」を伝えただけです。内心では、「これほど簡単な言葉で意図が伝わるだろうか」「より具体的な指示を求められるのではないか」という懸念がありました。

しかしGeminiが生成したのは基本的な機能(タスク名、開始日、終了日の入力、タイムライン表示)を備えたガントチャートでした。実際にそのコードを実行すると、タスクが追加され、タイムラインに表示されることを確認できました。簡単なタスク管理なら十分対応できツールが一言で完成したのです。

AIとの二人三脚!「理想のガントチャート」への道

機能追加の連続!「要求を伝える」という作業

基本的なガントチャートの雛形が得られただけでなく、Gemini側から「今後の改善点」まで提案してくれました。そこで、機能追加の要望を少しづつGeminiに伝えていきました。

改善点として、
まずは「タスクのドラッグ&ドロップによる日付変更機能」の実装をお願いします。

はい、承知いたしました。「タスクのドラッグ&ドロップによる日付変更機能」を実装します。

これにより、ガントチャート上のタスクバーを直接ドラッグして、タスクの開始日と終了日を直感的に変更できるようになります。タスクの期間は維持されたまま、日付が移動します。

以下のドキュメントで、更新されたインタラクティブガントチャートのコードを提供します。

ー 略 ー

これで、タスクバーをドラッグして日付を変更できるようになりました。
引き続き、他の改善点(タスクの期間変更、依存関係など)も実装可能ですので、ご要望があればお申し付けください。

ドラッグ前

ガントチャート

ドラッグ後

ガントチャート

またしても「一言で」ドラッグ&ドロップによる日付変更の機能が実装されました。

エラーの解消も同時に進めてもらう

よく見るとタスク名のところに不明な文字が表示されています。また、ドラッグ&ドロップで日付を変更しても、バーの位置は変わらず、表示される日付が変わる仕様になっています。そこで、次はエラーの解消と次の機能追加をお願いしてみました。

以下の改善をお願いします。

  • タスク名のところに「{/* z-index increased */}」という表示が出ている
  • 日付の表示について、表示した日の週をスタートにする。

また、タスクの期間変更機能を実装してください。

ご要望ありがとうございます。以下の3点を改善します。

1.タスク名表示の不具合修正: タスク名列のヘッダーに表示されていた不要なコメント {/* z-index increased */} を削除しました。

2.タイムライン表示の改善: チャートのタイムラインが、最も古いタスクの開始日が含まれる週の月曜日から始まるように調整しました。これにより、週単位でのタスクの見通しが良くなります。

3.タスク期間変更機能の実装: タスクバーの右端にリサイズハンドルを追加し、これをドラッグすることでタスクの期間(終了日)を直感的に変更できるようにしました。

ー 略 ー

これらの変更により、より使いやすいガントチャートになったかと思います。ご確認ください。

ドラッグ前

ガントチャート

ドラッグ後

ガントチャート

では、タスクの依存関係機能を実装してください!

はい、承知いたしました。「タスクの依存関係」機能の実装、挑戦してみましょう!これは少し複雑な機能になりますが、ガントチャートがさらに便利になるはずです。

まず、最も一般的な「終了-開始(Finish-to-Start)」の依存関係を実装します。これは、「タスクAが終了したら、タスクBを開始できる」という関係です。

ー 略 ー

制限事項と今後の改善点:
循環依存の高度な検出と防止: 現在は簡易的なチェックのみです。
依存関係の種類の追加: 「開始-開始」など、他の種類の依存関係もサポートできます。
リードタイムとラグタイム: 「タスクA終了の2日後にタスクB開始」のような設定。
依存関係の編集: モーダルや視覚的な操作で依存関係を簡単に編集する機能。
パフォーマンス: タスク数や依存関係が多くなると、線の描画や日付更新のパフォーマンスに影響が出る可能性があります。

まずはこのバージョンをお試しいただき、フィードバックをいただければ幸いです!
ガントチャート

タスクの下にコメントが出ているので修正お願いします。

もう一つ相談ですが、「親タスク」「子タスク」「孫タスク」のような管理は可能でしょうか?

ご指摘ありがとうございます。

1.タスク下のコメント修正: タスクリストの下に表示されていたHTMLコメントを削除しました。これはSVGレイヤーの配置に関するメモ書きが誤って表示されていたものです。
2.親子孫タスク管理について: はい、「親タスク」「子タスク」「孫タスク」のような階層構造(ワーク・ブレークダウン・ストラクチャー、WBSとも呼ばれます)をガントチャートで管理することは可能です。
実装イメージ:
 ー 略 ー

考慮点:
 ー 略 ー

これで、基本的な階層表示、展開・折りたたみ、親子同時移動が可能になっているはずです。
ご確認ください。親子関係と依存関係が共存するため、動作が複雑になっています。もし不具合があれば、具体的な操作手順と期待される動作を教えていただけると助かります。
ガントチャート

これらのやり取りは一部です。機能の追加、微調整、エラーの解消をGeminiとのチャットを繰り返し、理想に近づけていきました。

そしてついに…!高機能ガントチャートの完成

多くの機能追加と、繰り返されたエラー修正を経て、最終的に、要望を盛り込んだガントチャートが完成しました。このプロセスは、大きな達成感を得られるものでした。最初にGeminiへ「ガントチャートが欲しい」と伝えた漠然とした一言から始まったプロジェクトが、ここまで本格的で高機能なツールへと進化するとは、当初は予想していませんでした。

ガントチャート

完成したガントチャートの機能

機能説明
タスクの追加・編集・削除直感的なフォーム入力でタスクを管理。
ドラッグ&ドロップタスクバーをマウスで掴んで、開始日・終了日・期間を自由に変更可能。
依存関係設定先行タスクと後続タスクを線で結びつけ、日付の自動調整も実現。
階層管理(親子タスク)タスクを親子関係で整理し、展開・折りたたみが可能。親タスクの移動で子も追従。
日付ヘッダーのカスタマイズ週の始まりを月曜日にしたり、表示期間を調整したり。
ローカルストレージ保存作成したタスクデータはブラウザに保存され、次回アクセス時もそのまま利用可能。
レスポンシブデザインスマートフォンやタブレットなど、様々な画面サイズでも見やすいように基本的な配慮がされている。

これらの機能が、すべてGeminiとのチャットを通じて実現できたのです。「プログラミングの知識がなくても、これほど自分好みの、しかも実用的なツールが作れる」という事実は、自信につながり、AIというテクノロジーに対する大きな可能性を感じさせるものでした。これは単なるガントチャートではなく、非常に有用なツールと言えるでしょう。

なぜGeminiはこれほどの能力を発揮できたのか?非専門家から見た考察

ガントチャート

専門用語不要!曖昧な要求を解釈する能力

今回、プログラミング知識のない私がGeminiと協力してガントチャートを作成できた大きな要因の一つは、Geminiの優れた「要求解釈能力」にあると考えられます。

開発の初期段階では、「このようなものが欲しい」「こうなればもっと便利になる」といった、非常に曖昧な要望しか伝えられませんでした。

例えば、「タスクをドラッグで動かせるようにしたい」という要望も、専門的なプログラミング用語で言えば、「dragstartdragoverdropといったイベントを適切に処理し、タスクの開始日と終了日を再計算してUIに反映させる機能を実装してほしい」といった具体的な指示になるのかもしれません。しかし、そのような専門知識はありませんでした。

それでもGeminiは、こちらの意図を汲み取り、「なるほど、タスクバーをマウスでドラッグして日付を直感的に変更できるようにしたいのですね。承知しました、関連するイベントリスナーを設定し、UIも同期するように実装します」といった形で、専門的な知識を補完しながら具体的な機能へと落とし込んでくれました。

この「専門用語の壁が低い」という点は、プログラミングの敷居を大きく下げ、専門家でなくてもアイデアを形にする道を開いてくれた、特筆すべき能力だと感じます。

複雑なロジックへの対応!高度な要求に応える生成能力

Geminiのもう一つの注目すべき点は、その高度な「コード生成能力」です。ガントチャートの開発が進むにつれて、要望は次第に複雑化していきました。

例えば、「タスク間に依存関係を設定して、先行タスクの日付が変わったら後続タスクの日付も自動で調整されるようにしたい」あるいは「タスクを親子関係で階層化して、親タスクを動かしたら子タスクも一緒に動くようにしたい」といった機能は、その背後にあるロジックの複雑さが想像できます。

これらの機能を自力で実装しようとすれば、膨大な時間と学習コストが必要になるでしょう。

しかし、Geminiはこれらの高度な要求に対しても、的確に対応してくれました。依存関係のロジックでは、タスク間の前後関係を管理し、循環参照を避けながら日付を再計算するコードを生成。階層構造では、再帰的な処理を用いてタスクの親子関係を管理し、UIにインデントや展開・折りたたみ機能を実装するコードを提示してくれました。

もちろん、一度で完璧なコードが出てくるわけではなく、何度か修正のやり取りはありましたが、最終的には思い描いていた通りの、あるいはそれ以上の機能を実現してくれたのです。

この経験を通じて、Geminiは単に定型的なコードを生成するだけでなく、複雑なアルゴリズムやデータ構造を理解し、それを具体的なプログラムとして形にする能力を持っていることが示唆されました。

粘り強い対応!度重なる修正依頼への柔軟性

ガントチャート開発の道のりは、常に平坦だったわけではありません。新しい機能を追加したり、既存の機能を変更したりするたびに、思わぬ不具合が発生したり、表示が崩れたりすることは頻繁にありました。その都度、Geminiに「ここが上手く動かない」「この部分の表示をもう少しこうしたい」と、何度も修正を依頼することになりました。

しかし、Geminiは度重なる要望に対して、常に真摯に、そして柔軟性と忍耐力をもって応え続けてくれました。エラーの状況を伝えれば、考えられる原因を複数提示したり、具体的な修正コードを提案したり。表示の微調整を依頼すれば、CSSのプロパティを的確に変更したり。

時には、こちらの説明が十分でなく、意図が正確に伝わらないこともあったかもしれませんが、Geminiは途中で対話を中断することなく、納得がいくまで辛抱強く対応を続けてくれたのです。この粘り強い対応があったからこそ、プログラミング初心者でも、複雑なツールの開発を最後までやり遂げることができたのだと考えられます。

AIがこれほどの柔軟性と対話能力を持つという事実は、今後のAIとの協調作業において大きな可能性を示しています。

Geminiとのガントチャート開発体験から見えたAIの可能性

ガントチャート

「アイデアはあるけど作れない」の壁を壊すAI

今回のGeminiとのガントチャート開発体験は、「アイデアはあるけれど、それを形にするための専門スキルがない」という長年の壁が、AIによって打ち破られる可能性を示唆するものでした。

これまで、頭の中に「こんなツールがあったら便利なのに」「あんなシステムが作れたら面白いのに」といったアイデアが浮かんでは消えていく、ということを繰り返してきました。その理由は単純で、プログラミングという具体的なスキルセットを持っていなかったからです。しかし、Geminiのような高度なAIが登場したことで、その状況は劇的に変わりつつあると感じています。

もはや、素晴らしいアイデアを実現するために、必ずしも自分がプログラミングの専門家である必要はないのかもしれません。大切なのは、何を創りたいかという明確なビジョンと、それをAIに伝えるコミュニケーション能力、そしてAIと協力して試行錯誤を繰り返す根気です。

Geminiは、私たちのアイデアを具体的なコードへと翻訳し、技術的なハードルを乗り越える手助けをしてくれます。これは、個人の創造性や問題解決能力が、AIという強力な触媒を得て、これまで以上に自由に、そしてダイナミックに発揮される時代の到来を意味するのではないでしょうか。

AIは「壁打ち相手」であり「共同作業者」となり得る

ガントチャート開発の全工程を通じて、Geminiは単なる「コード生成ツール」としてだけでなく、アイデアを具体化する上での「壁打ち相手」や、開発を進める上での「共同作業者」としての側面も持ち合わせていると感じました。

新しい機能のアイデアを伝えると、技術的な実現可能性や代替案についてフィードバックが得られました。これは、アイデアを具体化していく上で重要なプロセスです。また、開発途中でエラーに直面した際には、問題の原因究明から解決策の提案まで、経験豊富なエンジニアからサポートを受けているかのような感覚を覚えることもありました。

さらに、細かなUIの調整や機能改善の要望に対しても、Geminiは根気強く対応しました。この一連のやり取りは、AIが人間の思考を拡張し、創造的なプロセスを加速させるパートナーとなり得る可能性を示しています。

一人では行き詰まってしまうような場面でも、AIと対話することで新たな視点や解決策が見つかる。この「共創」の体験は、これからの働き方やものづくりのあり方に変革をもたらす可能性を秘めていると言えるでしょう。AIは、人間の能力を補完し、増幅させる存在になりつつあるのかもしれません。

まとめ:AIと共に「欲しいもの」を作るという選択肢

ガントチャート

「ガントチャートでタスク管理がしたい」という、当初は漠然とした願いから始まった今回の試み。プログラミング知識のない筆者が、AIチャットボットGeminiとの対話を通じて、多機能で実用的なガントチャートツールを完成させることができたという事実は、AI技術の進化を実感させるものでした。

この体験を通じて、AI、特にGeminiのような生成AIが、個人の創造性や問題解決能力を高め、これまで専門的なスキルを持つ人に限られがちだった「ものづくり」の機会を、より多くの人に開かれたものへと変えていく力を持っている可能性を感じました。

もちろん、AIがすべてを自動で完璧にこなしてくれるわけではありません。何を創りたいのかという明確なビジョン、それをAIに伝えるコミュニケーション、そしてAIと協力して試行錯誤を繰り返す姿勢は不可欠です。

しかし、そのハードルは、プログラミングを一から学ぶことに比べれば、相対的に低いと言えるかもしれません。この記事を読まれた方も、もし頭の中に「こんなものがあったらいいな」というアイデアが眠っているのであれば、一度Geminiに相談してみるという選択肢を検討してみてはいかがでしょうか。

最初は小さな「欲しい」という動機で十分です。その一歩が、自身の可能性を広げる新たな体験の始まりになるかもしれません。AIとの共創がより身近になる未来は、着実に近づいていると言えるでしょう。

4か月分の割引がもらえる招待リンクはこちらから