はじめに
最近AIによるコード補完が当たり前になりつつある時代、AIアシスタントを触ってみたいけどお金はかけたくないという思いがあって今まで触ってきませんでしたが、Googleから個人向けにGemini Code Assistが無料で利用できるようになったと2/27に発表がありました。
https://cloud.google.com/blog/ja/topics/developers-practitioners/gemini-code-assist
CousorやClineなどはお金がかかるし、Github Copilotも無料枠は使用できるようが少ないと聞いていたので触ろうとは思わなかったのですが、今回Googleが提供ということと無料ということで他のAIアシスタントツールよりもハードルが低いというところに惹かれたので、同じ思いを抱いている方はぜひ一度触っていただきたいです。ホント便利なので。
※Gemini Code Assistは、Googleが提供するAIアシスタントで、VS Code上でコードの補完、解説、テスト生成などを行ってくれます。
ここでは、Gemini Code AssistをVS Codeにインストールし、利用する手順を解説します。
準備するもの
-
Visual Studio Code
Macの場合はbrewでinstallするのがオススメ -
Googleアカウント
個人用アカウントでOK
インストール手順
-
Gemini Code Assistのダウンロード
- 「拡張機能」から「Gemini Code Assist」を検索します。
- Gemini Code Assistを探してインストールします。
-
Googleアカウントとの連携
- インストール完了したら画面左のGeminiのアイコンをクリックしてGemini Code Assistを開きます。
- 画面内の「Sign in Google」をクリックするとブラウザが開きます。画面に従ってGoogleアカウントとの連携を実施します。
- 完了したらブラウザを閉じてVS Codeに戻ります。
利用方法
Gemini Code Assistがインストールされると、VS Codeでコードを編集する際に様々な機能を利用できます。
- コード補完
- コードの解説
- コードの生成
- コードのテスト生成
- チャット機能
利用例
今回はチャット機能を利用してみます。
ブラウザでMarkdownを編集、プレビューできるHTMLをGemini Code Assistで作成します。
日本語で回答して
ブラウザ上でマークダウンを編集、プレビュー確認ができるHTMLファイルを作成して。
編集画面は半分、プレビューは右半分に表示するようにして。
プレビューはリアルタイムで反映されるようにして。
上記チャットを入力すると以下の回答が返ってきました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Markdown Editor</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: sans-serif;
}
.container {
display: flex;
height: 100%;
}
.editor {
width: 50%;
height: 100%;
padding: 20px;
box-sizing: border-box;
border-right: 1px solid #ccc;
}
.preview {
width: 50%;
height: 100%;
padding: 20px;
box-sizing: border-box;
overflow-y: auto; /* プレビュー内容が長い場合、スクロール可能にする */
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
outline: none;
font-family: monospace;
box-sizing: border-box;
}
.preview p, .preview h1, .preview h2, .preview h3, .preview h4, .preview h5, .preview h6, .preview li{
line-height: 1.6em;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/11.0.0/marked.min.js"></script>
</head>
<body>
<div class="container">
<div class="editor">
<textarea id="markdown-editor"></textarea>
</div>
<div class="preview" id="markdown-preview"></div>
</div>
<script>
const editor = document.getElementById('markdown-editor');
const preview = document.getElementById('markdown-preview');
// 初期値（必要に応じて変更）
editor.value = `# Markdown Editorへようこそ！\n\n- このエリアでMarkdownを編集します。\n- 右側にリアルタイムプレビューが表示されます。\n- 自由にMarkdownを試してみてください！\n\n## 例：\n- リスト\n- リスト2\n\n[リンク](https://www.google.com)\n\n\`\`\`javascript\nconsole.log('コードも書けます！');\n\`\`\`\n\n**太字**や*イタリック*も使えます。\n`;
updatePreview();
editor.addEventListener('input', updatePreview);
function updatePreview() {
const markdown = editor.value;
const html = marked.parse(markdown);
preview.innerHTML = html;
}
</script>
</body>
</html>
普通に実行できそう‥
実際にブラウザで開いた結果こちらです。
普通に指示通りのUIでかつ動作も同じように実行できました。
最後に
無料枠でここまで利用できるAIアシスタントツールは他にないと思います。
ただし無料枠でもあることから一部制約があるのと補完能力が有料のアシスタントツールと比べ、少し精度が低く感じる場面がありました。
それでもあるとないとでは作業スピードの差がかなりありました。
利用したことない方はぜひ一度触ってみてはいかがでしょうか。
最後に...ぼざろ2期きました。見ましょう。