AIと創るアイデアJavaScriptツールキット開発ストーリー
このサイトで紹介している8つのWebアプリケーションは、特別なプログラミングスキルがなくても、生成AI（Google AI Studioなど）との対話を通じて開発されました。ここでは、そのプロセスやAI活用のポイントについてご紹介します。
発想の源泉：「あったらいいな」を形に
すべての始まりは、「こんなWebツールがあったら便利だ」というシンプルなアイデアでした。
- ブレインストーミングの結果を整理したい → マインドマップ
- チームメンバーの簡単な出欠を確認したい → スケジュールチェック
- PC上に手軽なメモ帳が欲しい → 付箋アプリ
- プロジェクトの工程を可視化したい → ガントチャート
- タスクの進捗をカードで管理したい → カンバンボード
- ToDoリストを管理したい → 週間ToDoカレンダー
- アサインを管理したい → アサイン管理
- 作業時間を管理したい → 月次作業時間トラッカー
しかし、これらのアイデアを実現するには、通常、HTML, CSS, JavaScriptといったWeb技術の知識、そして開発時間が必要です。そこで注目したのが、近年目覚ましい進化を遂げている生成AIでした。
AIとの協働プロセス
開発は、AIに対して具体的な要望を伝えることから始まりました。
- 初期プロトタイプの依頼:
「HTMLとJavaScriptで、ドラッグ＆ドロップできる付箋アプリの基本的なコードを作って」のように、まずは核となる機能を持つシンプルなコードをAIに生成してもらいます。
- 段階的な機能追加:
「付箋の色を変えたい」「内容をファイルに保存したい」といった具体的な機能追加の要望をAIに伝えます。
- 試行錯誤とデバッグ:
エラーが発生した場合、「〇〇を実行するとエラーが出る」のように具体的な問題点をAIに伝え、修正案を求めます。この試行錯誤がアプリの完成度を高めます。
- ライブラリやフレームワークの活用:
複雑な機能は「Vue.jsを使ってカンバンボードを作りたい」のように、特定のライブラリを指定して効率的に開発を進めることも可能です。
具体的な開発事例：『月次作業時間トラッカー』の場合
AI開発日誌：53回の対話でアプリは完成するのか？
このサイトで最も複雑なアプリの一つである『月次作業時間トラッカー』は、どのようにして生まれたのでしょうか？
53回にわたるAIとのリアルな対話、エラーとの格闘、そして問題を突破した『Chatリセット』のテクニックまで、開発の全記録を公開しています。AIとの協働開発のリアルな現場をご覧ください。
開発日誌の全記録を読むAI活用のポイント
- 具体的に指示する: 「いい感じにして」ではなく、「ヘッダーに保存ボタンを追加して」のように、目的と手段を明確に伝えます。
- 小さく始める: 基本的な機能から始め、段階的に機能を追加していきます。
- エラーを恐れない: エラーメッセージや問題点をAIにフィードバックすることが、より良いコードへの近道です。
- 既存コードを提示する: 機能追加や修正の際は、現在のコードをAIに提示すると、文脈を理解した提案が得られやすくなります。
コードが書けなくても、アイデアは形にできる
このプロジェクトは、プログラミングの専門家でなくても、生成AIという強力なツールを使いこなせば、複雑なWebアプリケーションでさえも作り上げられることを示しています。
大切なのは、明確なアイデアと、AIと粘り強く対話し、試行錯誤を繰り返す意欲です。
あなたも、頭の中にある「あったらいいな」を、AIと共に形にしてみませんか？このサイトのアプリが、その第一歩を踏み出すきっかけとなれば幸いです。