実践AIコーディング

前回入れたVSCodeにAI機能を組み込むことでAIアシスタント機能を利用できるようにします。

Gemini Code Assistの導入

Gemini Code AssistというGoogleのAI機能を導入します。

Gemini Code Assistのダウンロード

「検索拡張機能」にGemini Code Assistと入力して検索

[Install]をクリックしてインストールします。

Googleアカウントの連携

インストール完了したら画面左のメニューバー内にあるGeminiのアイコンをクリックしてGemini Code Assistを開きます。

画面内の「Sign in Google」をクリックするとブラウザが開きます。画面に従ってGoogleアカウントとの連携を実施します。
(※自身のGoogleアカウントでログインしてください。料金はかかりません。)

ブラウザに下記画面が表示されたら連携完了です。

初期セットアップ

プロジェクト用ディレクトリの作成

  1. 下記ファイルをダウンロードします。 プロジェクト用ディレクトリのダウンロード
  2. zipファイルを解答して、ディレクトリ名を適切な名称に変更します。
  3. VSCodeで作成したディレクトリを開きます。

    メニューバー内ファイルボタンから【フォルダーを開く】
    または上部メニューから[ファイル]→[フォルダーを開く]を選択

    [信頼しますか？]のメッセージが出てきたら[はい、作成者を信頼します。]をクリックします。

AIコーディングをやってみる

左側メニューバーのGeminiアイコンをクリックして、下部の入力欄にプロンプトを入力して実行します。

ストップウォッチアプリの作成

プロンプトの入力

下記プロンプトを入力して実行してください。

ストップウォッチのウェブアプリを作ってください。
コード反映

AIが生成したコードをエディターエリアに反映します。

手順としては

  1. コードを記載するための空ファイルを作成
  2. 1で作成したファイルにAIが生成したコードを反映
    (手順は後述)
  3. ファイルを保存

というかたちになります。

AIの回答内に記載されたコードブロックは以下の操作で反映できます。

①コピー
ブロック内のコードを全てクリップボードにコピーします。
②反映
現在開いているファイルへコードを追加、反映します。
③比較
現在開いているファイルとブロック内のコードを比較表示します。

ポートフォリオサイトの作成

下記プロンプトで簡単なポートフォリオサイトが作成できます。

下記ポートフォリオサイトを作ってください。
ページ構成：TOPページ、お問い合わせページ

■共通
ヘッダーエリアに以下を配置してください。
・サイトロゴ
・お問い合わせページへのリンクボタン
・インスタアイコンとリンク

■TOPページ
写真9枚を3×3で表示するポートフォリオを表示。なお画像は実際に表示できる風景写真を記載。
ポートフォリオの写真はクリックしたら拡大表示される

■お問い合わせページ
お問い合わせ項目は【お名前】【メールアドレス】【お問い合わせ内容】