AIと創るアイデアJavaScriptツールキット開発ストーリー
このサイトで紹介している6つのWebアプリケーションは、特別なプログラミングスキルがなくても、生成AI（Google AI Studioなど）との対話を通じて開発されました。ここでは、そのプロセスやAI活用のポイントについてご紹介します。
発想の源泉：「あったらいいな」を形に
すべての始まりは、「こんなWebツールがあったら便利だ」というシンプルなアイデアでした。
- ブレインストーミングの結果を整理したい → マインドマップ
- チームメンバーの簡単な出欠を確認したい → スケジュールチェック
- PC上に手軽なメモ帳が欲しい → 付箋アプリ
- プロジェクトの工程を可視化したい → ガントチャート
- タスクの進捗をカードで管理したい → カンバンボード
- ToDoリストを管理したい → 週間ToDoカレンダー
しかし、これらのアイデアを実現するには、通常、HTML, CSS, JavaScriptといったWeb技術の知識、そして開発時間が必要です。そこで注目したのが、近年目覚ましい進化を遂げている生成AIでした。
AIとの協働プロセス
開発は、AIに対して具体的な要望を伝えることから始まりました。
- 初期プロトタイプの依頼:
「HTMLとJavaScriptで、ドラッグ＆ドロップできる付箋アプリの基本的なコードを作って」のように、まずは核となる機能を持つシンプルなコードをAIに生成してもらいます。
例 (付箋アプリ): 最初は、単に四角い要素を画面に表示し、ドラッグで移動できるだけの簡単なHTMLとJavaScriptコードからスタートしました。
- 段階的な機能追加:
生成されたコードを実際に動かし、期待通りに動作するか確認します。そして、「付箋の色を変えられるようにしたい」「付箋の大きさを変えたい」「書いた内容をファイルに保存したい」といった具体的な機能追加の要望をAIに伝えます。
AIは、既存のコードを考慮しながら、機能追加に必要なコード（HTMLの変更、CSSの追加、JavaScript関数の追加・修正など）を提案してくれます。
- 試行錯誤とデバッグ:
AIが生成したコードが常に完璧とは限りません。エラーが発生したり、意図した通りに動作しなかったりすることもあります。その場合は、「〇〇を実行するとエラーが出る」「××の動きがおかしい」のように、具体的な問題点をAIに伝え、修正案を求めます。
実際にアプリを動かし、ブラウザの開発者ツールでエラーを確認したり、各アプリのデモページの「ページのソースを表示」機能で生成されたコードを直接確認しながら、AIへの指示を調整していく作業が欠かせません。
時には、AIの提案を元に自分でコードを微調整したり、別の角度から指示を出し直したりする必要もありました。この試行錯誤のプロセスが、アプリの完成度を高める上で重要でした。
- ライブラリやフレームワークの活用 (カンバンボードの場合):
カンバンボードのように、ドラッグ＆ドロップ機能が複雑な場合は、AIに「Vue.jsとVue.Draggableを使ってカンバンボードを作りたい」と、特定のライブラリを指定して依頼することも有効でした。AIはライブラリの基本的な使い方に基づいたコードを生成してくれます。
AI活用のポイント
- 具体的に指示する: 「いい感じにして」ではなく、「ヘッダーに保存ボタンを追加して、クリックしたらJSON形式でデータをダウンロードできるようにして」のように、目的と手段を明確に伝えます。
- 小さく始める: 最初から完璧を目指さず、基本的な機能から始めて段階的に機能を追加していきます。
- エラーを恐れない: エラーメッセージや問題点をAIにフィードバックすることで、より良いコードにたどり着けます。
- 既存コードを提示する: 機能追加や修正を依頼する際は、現在のコードをAIに提示すると、文脈を理解した適切な提案が得られやすくなります。
- 複数の選択肢を求める: 実装方法が複数考えられる場合、「他の方法はありますか？」と尋ねてみるのも有効です。
コードが書けなくても、アイデアは形にできる
このプロジェクトは、プログラミングの専門家でなくても、生成AIという強力なツールを使いこなせば、複雑なWebアプリケーションでさえも作り上げられることを示しています。
もちろん、基本的なHTMLやCSS、JavaScriptの構造を理解している方がAIとの対話はスムーズに進みますが、必ずしもゼロからコードを書ける必要はありません。紹介している各アプリのページから、実際の動作を確認し、ブラウザの機能でソースコードを見ることもできます。
大切なのは、明確なアイデアと、AIと粘り強く対話し、試行錯誤を繰り返す意欲です。
あなたも、頭の中にある「あったらいいな」を、AIと共に形にしてみませんか？このサイトのアプリが、その第一歩を踏み出すきっかけとなれば幸いです。