ファイルを開いたまま、選択した範囲だけをAIに「ここをこう直して」と伝える――Cursorのインライン編集(Ctrl+K)は、その場でコードを書き換えたり、選択なしで新規コードを挿入したり、短い質問に答えさせたりできる最短ルートです。
「Ctrl+K」で入力欄が開き、選択中ならその部分だけを指示に沿って編集し、未選択ならカーソル位置にコードを生成します。さらにターミナルでもCtrl+Kで自然言語からコマンドを生成でき、直近の履歴などを文脈として使ってくれます。
今回は部分的なコード追加・修正作業をインライン編集機能で試してみます。
試行に使うダミープログラム
// ユーザー情報を表すインターフェース
interface User {
id: number;
name: string;
email: string;
}
// 商品情報を表すインターフェース
interface Product {
id: number;
name: string;
price: number;
}
// ショッピングカートのアイテムを表すインターフェース
interface CartItem {
product: Product;
quantity: number;
}
/**
* ショッピングカートを管理するクラス
*/
class ShoppingCart {
private items: CartItem[] = [];
/**
* カートに商品を追加します。
* @param product 追加する商品
* @param quantity 追加する商品の数量
*/
addItem(product: Product, quantity: number): void {
const existingItem = this.items.find(
(item) => item.product.id === product.id
);
if (existingItem) {
existingItem.quantity += quantity;
} else {
this.items.push({ product, quantity });
}
console.log(`${product.name}を${quantity}個カートに追加しました。`);
}
/**
* カートから商品を削除します。
* @param productId 削除する商品のID
*/
removeItem(productId: number): void {
const itemIndex = this.items.findIndex(
(item) => item.product.id === productId
);
if (itemIndex > -1) {
const removedItem = this.items.splice(itemIndex, 1)[0];
console.log(`${removedItem.product.name}をカートから削除しました。`);
} else {
console.log(`商品ID ${productId} はカート内に見つかりませんでした。`);
}
}
/**
* カート内の商品の合計金額を計算します。
* @returns 合計金額
*/
calculateTotal(): number {
return this.items.reduce(
(total, item) => total + item.product.price * item.quantity,
0
);
}
/**
* カートの中身を一覧表示します。
*/
viewCart(): void {
if (this.items.length === 0) {
console.log("カートは空です。");
return;
}
console.log("現在のカートの中身:");
this.items.forEach((item) => {
console.log(
`- ${item.product.name} (価格: ${item.product.price}円) x ${item.quantity}個`
);
});
console.log(`合計金額: ${this.calculateTotal()}円`);
}
}
// --- 以下は動作確認用のサンプルコードです ---
// ユーザーの作成
const user: User = {
id: 1,
name: "山田 太郎",
email: "taro.yamada@example.com",
};
// 商品の作成
const product1: Product = { id: 101, name: "高性能ラップトップ", price: 150000 };
const product2: Product = { id: 102, name: "ワイヤレスマウス", price: 5000 };
const product3: Product = { id: 103, name: "メカニカルキーボード", price: 12000 };
// ショッピングカートのインスタンスを作成
const cart = new ShoppingCart();
// 操作シミュレーション
console.log(`${user.name}さんのショッピング体験シミュレーション`);
cart.addItem(product1, 1);
cart.addItem(product2, 2);
cart.addItem(product1, 1); // 同じ商品をもう一つ追加
cart.viewCart();
cart.removeItem(102);
cart.viewCart();
cart.removeItem(999); // 存在しない商品を削除しようとする
ダミープログラムの内容
このコードは、TypeScriptで書かれたシンプルなEコマースサイトのショッピングカート機能を模したプログラムです。
コードの主要な構成要素
大きく分けて、3つの役割を持つ要素で構成されています。
- データ構造を定義するインターフェース (
interface)User: ユーザー情報を表します。（ID、名前、メールアドレス）Product: 商品情報を表します。（商品ID、名前、価格）CartItem: カートに入っている個々の商品情報を表します。（商品情報(Product)と数量(quantity)）
- ショッピングカートの機能を実装するクラス (
class)ShoppingCart: ショッピングカートそのものを表すクラスです。以下の機能（メソッド）を持っています。addItem(product, quantity): カートに商品を追加します。同じ商品が既にあれば数量を加算し、なければ新しく追加します。removeItem(productId): 指定された商品IDの商品をカートから（完全に）削除します。calculateTotal(): カート内の商品の合計金額を計算します。viewCart(): 現在のカートの中身（商品名、価格、数量）と合計金額をコンソールに表示します。
- 動作確認用のサンプルコード
// --- 以下は動作確認用のサンプルコードです ---というコメント以下の部分です。userやproduct1、product2といった具体的なデータを作成し、ShoppingCartクラスのインスタンス（cart）を作っています。- 実際に
cartオブジェクトのメソッドを呼び出して、商品の追加、表示、削除といった一連の操作をシミュレーションし、その結果をコンソールに出力しています。
プログラムの流れ
このプログラムを実行すると、以下の流れで処理が進みます。
- 「山田 太郎」さんというユーザーと、いくつかの商品データを作成します。
ShoppingCartのインスタンスであるcartを作成します。cart.addItem()を使って、ラップトップ1つとマウス2つをカートに追加します。- さらに同じラップトップをもう1つ追加します（これにより、ラップトップの数量は2になります）。
cart.viewCart()で、この時点でのカートの中身と合計金額を表示します。cart.removeItem()で、マウス（ID: 102）をカートから削除します。- 再度
cart.viewCart()で、マウスが削除された後のカートの状態を表示します。 - 最後に、カートに存在しない商品ID（999）を削除しようとして、エラーメッセージが表示されることを確認します。
このように、オブジェクト指向プログラミングの基本的な考え方を用いて、ショッピングカートの概念をコードで表現したサンプルとなっています。
試行1: インライン編集でカート内の合計商品数を取得する機能の追加
ShoppingCartクラスにカーソルを合わせて「Ctrl+K」を押し、「カート内の合計商品数を取得する機能の追加」するよう指示していきます。
まずはインライン編集の対象個所(ShoppingCartクラス)にカーソルを合わせます。
「Ctrl+K」を押すとプロンプト入力欄が表示されます。
プロンプトを入力・実行します。
カート内の総商品数を返すgetItemCountメソッドを追加して
ShoppingCartクラス内の末尾にgetItemCountメソッドが追加されました。
内容を確認し、当該コードを採用する場合は「Keep」、却下する場合は「Undo」を押します。
試行2: 商品の数量を減らす機能の修正
removeItemメソッドは現在、商品を完全に削除します。これを、指定した数量だけ減らすように変更してみましょう。
removeItemメソッドにカーソルを合わせ、「Ctrl+K」を押し、プロンプトを入力・実行します。
removeItemメソッドを、IDだけでなく数量も引数に取り、指定した数だけ商品を減らすように修正して。もし数量が0以下になったら商品をカートから削除して。
removeItemメソッドの内容を下図のように修正する提案を受けました。
赤色の行は元々のコード、緑色の行は修正案のコードです。
内容を確認し、採用するなら「Keep」、却下するなら「Undo」をそれぞれ押します。
試行3: カートを空にする機能の追加
カート内のすべての商品を一度に削除する機能を追加します。
ShoppingCartクラスにカーソルを合わせて「Ctrl+K」を押し、プロンプトを入力・実行します。
カートを空にするclearCartメソッドを追加して
ShoppingCartクラス内の末尾にclearCartメソッドの追加されます。
内容を確認し、採用するなら「Keep」、却下するなら「Undo」を押します。
試行4: 注文を作成する機能の追加
少し応用的な課題です。カートの情報をもとに注文を作成するOrderクラスと、ShoppingCartクラスに注文を作成するメソッドを追加します。
まずOrderクラスの作成ですが、これは既存のクラス定義の前、つまりShoppingCartクラスよりも前に記述するのが自然でしょう。
したがって、ShoppingCartクラスの手前の行にカーソルを合わせて「Ctrl+K」を押し、プロンプトを入力・実行します。
今回はLLMモデルも「gemini-2.0-flash」に変更して実行してみます。「Ctrl+K」でも任意のLLMモデルを使うことができるのです。
注文情報を表すOrderクラスを追加して。注文ID、ユーザー情報、商品リスト、合計金額を持つようにして。
ShoppingCartクラスの手前にOrderクラスが追加されます。
内容を確認し、採用するなら「Keep」、却下するなら「Undo」を押します。
次にShoppingCartクラスに注文を作成するメソッドを追加します。
ShoppingCartクラスにカーソルを合わせて「Ctrl+K」を押し、プロンプトを入力・実行します。
ShoppingCartクラスに、現在のカートの中身からOrderオブジェクトを生成して返すcreateOrderメソッドを追加して。
ShoppingCartクラス内の2行目にフィールド定義、末尾にcreateOrderメソッドが追加されます。
内容を確認し、採用するなら「Keep」、却下するなら「Undo」をそれぞれ押します。
さいごに
インライン編集機能(Ctrl+K)は、Tabの自動補完とAgentによる一括自動化の「あいだ」をつないで、ファイル内の「ここだけ」を素早く確実に直すための実務的な選択肢です。
今回は自然言語による指示からどのようにコードが生成されるかを体験しました。指示の仕方を少し変えるだけで、生成されるコードが変わることも確認してみてください。
AIの出力は誤りを含むことがあるため、提案差分は必ず目で確認してから適用しましょう。
