初心者AI駆動開発の極意①Canvasで「会話しながら」組み上げる

これまでのプログラミング学習において、最大の壁は「開発環境の構築」でした。エディタのインストールや複雑な設定で、コードを書く前に挫折してしまった人も多いはず。

しかし、Geminiの「Canvas（キャンバス）」機能を使えば、その苦労は過去のものになります。ブラウザ上でAIとチャットしながら、横に表示されたコードがリアルタイムで書き換わっていく体験は、まさに「爆速」そのもの。

今回は、Canvasを確実に起動させるための準備と、AIを最強の相棒にする活用術を解説します！

1. 【最重要】事前準備：Canvasツールを有効にする

Canvasを起動させるには、まずGeminiの設定を確認する必要があります。指示を出す前に、以下の手順を必ず踏んでください。

1. モデルの選択： プロンプト入力欄（メッセージを打つ場所）の右下にあるモード選択から「Pro」を選択します。
2. ツールからオンにする： プロンプト入力欄の下にある「ツール（宝石のようなアイコン、または＋アイコン）」をクリックします。
3. Canvasを有効化： メニューの中から「Canvas」をオンにします。

これで準備完了です！これをしておかないと、AIがチャット欄にただ長いコードを貼り付けるだけになってしまうので注意しましょう。

2. 「Canvas」とは何か？：AIと共作するホワイトボード

GeminiのCanvasは、単なるチャット画面ではありません。チャット欄の横に、ソースコードを編集するための「専用作業スペース（Canvas）」が出現します。

• 右側（Canvas）： AIが生成したコードが表示される場所。あなた自身も直接編集できます。
• 左側（Chat）： あなたが指示を出し、AIが修正案を出す場所。

この構成の最大の特徴は、「コード全体を何度もコピペする必要がない」点です。AIに「ここを直して」と言えば、Canvas上の該当箇所だけが魔法のようにスルスルと書き換わります。

3. Canvasを起動し、最初の設計図を出力させる

準備ができたら、アプリのアイデアをGeminiに投げましょう。

【司令塔のプロンプト術】 「Webアプリを作りたいです。HTMLで作成してください。画面はマテリアルデザインで作成してください。インターネット上に公開しても大丈夫なようにセキュリティを配慮してください。初心者でもわかりやすくなるよう、ソースにコメントをつけてください。作りたいもの： [シンプルなタイマーアプリ] デザイン： [ダークモードで、ネオンブルーを基調としたかっこいい感じ]」

「HTMLで作成してください。」と伝えるのがコツです。数秒後には、右側に綺麗なコードの原型が完成しているはずです。

4. 「部分修正」の魔法：Canvas操作を極める

Canvasの真の力は、生成された後の「微調整」にあります。

• ハイライトして指示： 修正したいコードの部分をマウスで選択してみてください。その部分だけに対する指示メニューが現れます。「ここをもっと大きくして」といったピンポイントな修正が可能です。
• ワンクリック・リファクタリング： コードを綺麗に整える専用ボタンを使えば、初心者特有の「動くけれど汚いコード」を一瞬でプロ級のコードへ昇華できます。

5. 「プレビュー」ボタンで命を吹き込む

Canvasの右上に配置された「プレビュー（実行）」ボタン。これこそが、環境構築なしでアプリを完成させるための魔法のボタンです。

• タイムラグをゼロにする： 従来の「保存→リロード」という手間は不要。ボタンを押した瞬間にアプリが動き出します。
• 触りながら直す： プレビュー画面を見ながら「ボタンが少し小さいな」と感じたら、即座にチャットで「ボタンを大きくして」と指示。書き換わった瞬間に再度プレビューすれば、すぐに結果が反映されます。

まとめ：AIと「言葉」でコードを編む

Canvas活用術の本質は、プログラミングを「タイピング作業」から「思考と言語化の作業」に変えることにあります。

1. ツールメニューからCanvasを有効にする
2. Canvasでコード全体を俯瞰しながら開発する
3. プレビュー機能で、環境構築なしにその場で動かす

この手順をマスターすれば、あなたはもう「コードが書けなくて詰まる」という状態から卒業です。

次は、このCanvasをさらに高度に使いこなすための「プロンプト・エンジニアリング」について学んでいきましょう！