無料でAIがコードを生成!CodeiumのVSCode拡張機能インストール&活用法

ウェブ制作
はる
はる

今回は、Visual Studio Code(VSCode)にCodeiumの拡張機能を導入し、無料でコード生成AIを活用する手順をご紹介します。個人開発では無料とのことなので使ったことない人はぜひ使ってみてください。

Codeiumの料金プランについて

Codeiumは、個人開発者向けに「Individual」プランを提供しており、このプランは $0/月 で利用できます。個人開発での使用であれば、無期限に無料で利用できることが特徴です。

このプランには以下の機能が含まれています

  • コード自動補完機能
  • エディター内のAIチャットアシスタント
  • AIコマンド機能
  • 無制限の使用
  • 非許可データに基づいたトレーニングなし
  • Discordコミュニティへの参加
  • 転送中のデータ暗号化

個人開発でAIコード生成を試してみたい方にとって、無料でこのプランを活用できるのは非常に魅力的です。

また、チームやエンタープライズ向けの有料プランも用意されていますが、今回の記事の目的である個人開発には、無料の「Individual」プランが最適です。

拡張機能の導入と設定方法

Codeium公式サイトにアクセスします。

② トップページの『Get Extension』をクリック。

③ 「Download Extensions」というページが表示されるので、拡張機能一覧から「Visual Studio Code」を選択します。

④ まだログインしていない場合、ログイン画面が表示されます。Google アカウントでログインしたい場合は「Sign up with Google」を選択し、指示に従って進めます。

⑤ ログイン後、「Codeium in Visual Studio Code」というタイトルのページが表示されます。ページ内の「Quick Install」ボタンをクリック。

⑥ ブラウザのアラートで「Visual Studio Code を開きますか」と表示されるので「開く」を選択。VSCodeで拡張機能のインストールページが表示されるので、インストールを行います。

⑦ インストールが完了すると、VSCode側でCodeiumのログイン案内が表示されるので、ログインします。これでインストールが完了です。

Codeiumを使う

Autocompleteでソースコードを生成

  • コードを書いている途中で補完が利用できます。
  • コメントアウトからソースコードを予測補完する機能も備えています。

補完候補のコードは、薄い文字で表示され、Tabキーを押すことで補完が確定します。

コメントアウトで指示を書く
改行をして待機すると候補がでる
Tabキーを押すとコードが生成される

例えば、
ソースコード内で、 {/* h2で見出しを追加する */} のようにコメント書いた後に補完の候補が出るのでタブを押すことでコードが生成されます。

AIとのチャット機能

① VSCodeの左メニューからCodeiumのアイコンを選択します。

② 「CHAT」タブを開き、下部のメッセージ入力欄から質問を送信できます。


「_componentsフォルダの中にTitleコンポーネントを作りたい日本語で説明して欲しい」
このように、やりたいことを日本語で伝えるとAIが対応してくれます。

ショートカットキーの活用

以下はCodeiumをより効率的に利用するためのショートカットキーです:

ショートカット説明
⌥+C新しいチャットを開始
Tabコード編集中に補完を確定
⌥+]次の補完を表示
⌥+[前の補完を表示
⌘+Iコード編集中にインラインコードを生成
⌘+Shift+AエディターとCodeiumチャットの切り替え
↑/↓Codeiumチャットで過去のメッセージを編集

これらのショートカットを活用することで、Codeiumの利用がさらにスムーズになります。

タイトルとURLをコピーしました