handleDateClick(date)}
className={`min-h-[100px] p-2 border ${isCurrentMonth ? 'bg-white' : 'bg-gray-50'} ${
selectedDate?.toDateString() === date.toDateString()
? 'border-blue-500'
: 'border-gray-200'
} hover:border-blue-300 cursor-pointer`}
>
{date.getDate()}
```
素直にコードを修正するのであれば、`onClick={() => isCurrentMonth && handleDateClick(date)}` のように `handleDateClick` の前に `isCurrentMonth` の条件分岐を追加することになります。しかし、GitHub Copilot を使用している場合には `handleDataClick` の前に `i` と入力してもうまい具合に補完をしてくれません。
このような場合には一旦改行を挟んでからコード補完が効くようにする、といったテクニックをよく使っていました。
Cursor ではカーソルの位置に関係なくコードの補完が行われます。
## インラインチャット
インラインでのチャット機能も試してみます。コードを範囲選択したうえで `⌘ + K` を押すとインラインでコードの修正を指示できます。
ラベルと入力が紐づけられるように修正を指示しました。
行単位でコードの変更を受け入れる場合には `⌘ + Y` を、変更を破棄する場合には `⌘ + N` ショートカットキーを使用します。ここまでのコードの変更はすべてショートカットキーで行えるのでほとんどマウスを操作する必要はありませんでした。
さらに変更受け入れると、カーソルの位置を問わずに似たような変更を行うべき点を自動で Tab キーによる補完で提案してくれます。
## シンボルを使用してチャットを開始する
Cursor でチャットを行う場合、デフォルトでは現在開いているファイルがコンテキストとして含まれます。また Composer では現在の作業に基づいたコンテキストが選択されます。特定のファイルやディレクトリ、ドキュメントをコンテキストに含めたい場合には `@` シンボルを使用します。
プロンプトの入力欄で `@` をタイプするとコンテストの候補が表示されます。
Files を選択するとファイルの一覧が表示されるので、選択したいファイルを選択します。ここでは `EventModal.tsx` を選択しました。
`EventModal.tsx` のテストコードを生成するように指示を与えてみましょう。以下のプロンプトを入力しました。
```txt
Vitest を使ってテストコードを生成してください。
```
このプロンプトをサブミットすると、`EventModal.test.tsx` が生成され、必要なパッケージをインストールするように指示されました。確かにコンテキストに応じて必要なテストコードを生成してくれています。
またテストコマンドを実際に実行したうえで、テストが失敗したことに対して自動で修正まで行ってくれました。エージェントタイプの AI の強みが出ている点といえますね。
実際に生成された回答
EventModal コンポーネントのテストを実装していきます。まず、テストファイルを作成します：
```tsx:EventModal.test.tsx
mport { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { EventModal } from './EventModal';
describe('EventModal', () => {
const mockOnClose = vi.fn();
const mockOnSave = vi.fn();
const mockOnDelete = vi.fn();
const mockDate = new Date('2024-03-20');
const mockEvent = {
id: '1',
```
必要なパッケージをインストールします：
```sh
npm install -D @testing-library/react @testing-library/jest-dom @testing-library/user-event
```
次に、テスト設定ファイルを作成します：
```ts:setupTests.ts
import '@testing-library/jest-dom';
```
Vitest の設定を更新します：
```diff:vite.config.ts
+ ///
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
- // https://vite.dev/config/
+ // https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
+ test: {
+ globals: true,
+ environment: 'jsdom',
+ setupFiles: './src/setupTests.ts',
},
})
```
jsdom の環境をインストールします：
```sh
npm install -D jsdom
```
package.json にテストスクリプトを追加します：
```diff:package.json
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview",
- "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}'"
+ "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,md,json}'",
+ "test": "vitest",
+ "test:coverage": "vitest run --coverage"
},
"dependencies": {
"react": "^18.3.1",
```
最後に、Vitest をインストールします：
```sh
npm install -D vitest
```
これで、EventModal コンポーネントのテストを実行できる環境が整いました。テストを実行するには以下のコマンドを使用します：
```sh
npm test
87|
88| fireEvent.change(screen.getByLabelText('タイトル'), { target: { value: '新しいイベント' } });
89| fireEvent.change(screen.getByLabelText('開始時間'), { target: { value: '11:00' } });
| ^
90| fireEvent.change(screen.getByLabelText('終了時間'), { target: { value: '12:00' } });
91| fireEvent.change(screen.getByLabelText('場所'), { target: { value: '会議室B' } });
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/3]⎯
Test Files 1 failed (1)
Tests 3 failed | 4 passed (7)
Start at 16:52:40
Duration 840ms (transform 42ms, setup 87ms, collect 73ms, tests 65ms, environment 283ms, prepare 178ms)
FAIL Tests failed. Watching for file changes...
press h to show help, press q to quit
```
テストが失敗しているのは、開始時間の input に id が設定されていないためです。EventModal コンポーネントを修正します：
```diff:EventModal.tsx
開始時間
setStartTime(e.target.value)}
```
これでテストが通るはずです。もう一度テストを実行してみましょう：
```sh
npm test
```
実装したテストは以下の項目をカバーしています：
1. 新規作成モードでの表示確認
- タイトル、フォーム要素、ボタンなどが正しく表示されること
- 削除ボタンが表示されないこと
2. 編集モードでの表示確認
- 既存のイベントデータが正しく表示されること
- 削除ボタンが表示されること
3. フォーム操作の確認
- 各入力フィールドの値が正しく更新されること
- 保存時に正しいデータが送信されること
4. ボタン操作の確認
- キャンセルボタンで閉じること
- 削除ボタンで削除処理が実行されること
5. モーダルの表示制御
- isOpen が false の時に何も表示されないこと
これらのテストにより、EventModal コンポーネントの主要な機能が正しく動作することを確認できます。
次に、Calendar コンポーネントのテストを実装しますか？
## まとめ
Cursor を使用して実際にアプリケーションを開発する流れを体験してみました。コード補完の部分は間違いなく GitHub Copilot よりも良い体験を得られたと感じています。実際に触ってみないとわからない部分もあると思うので、ぜひ試してみてほしいです。使いがっては VS Code とほとんど変わらないので、エディタの移行もあまり難しくないと思います。
エージェントを使用したコード生成も非常に強力だと感じました。コマンドの実行結果による誤りから、自動でファイル修正まで行ってくれたのまさにエージェントの強みが出た例だと思います。AI によりコードを生成するプロダクトは数多くありますが、Cursor はエディタに直接埋め込まれているため、より正確にコンテキストを理解したり、ウィンドウを切り替えることなくコードの生成や修正が行える点が強みだと感じました。
何度も言われていることかと思いますが、AI が生成したコードを鵜呑みにしないことは重要です。実際に実際に私がエージェントに生成させたコードには不適切な部分も多く含まれていました。今後 AI を利用したコードの生成が進んでいくのであれば、開発者が AI が生成したコードをレビューし、十分に理解したうえで修正を加えていくというスキルが求められるようになるかもしれません。
## 参考
- [Get Started / Migrate from VS Code – Cursor](https://docs.cursor.com/get-started/migrate-from-vscode)