こんにちは！　エンジニアの奥井です。
今回はCursorというAI搭載のコーディングエディタとペアプログラミングをしてみたのでそのレポートをしたいと思います。

今までCursorの使い方として、自分がメインでコーディングをして、わからない部分をCursorに聞いてみたり、時間がかかる単純作業を任せるという補助的な使い方をしていました。
ただ、理解が進んだこともありますので、今回はCursorをメイン、自分が補助・監修する形でペアプログラミングをしていきたいと思います。

ペアプログラミングは2人のプログラマーが同じPCを使用して同じプログラムを作成する方法（現在では同じPCを使う方法は減り、リモートで行われる方法が主流）で、コードを書く人をドライバー、指示する人をナビゲーターと言います。今回はCursorをドライバー、自分がナビゲーターで進めます。

まずはルールづくり

Cursorにはcursor rulesという機能があります。これはエージェントに指示を与える際に、このルールを先に送ってから具体的な指示を送るようになる機能で、わざわざ前提条件を毎回送る必要がなくなります。環境全体で適用するUser rulesとそのプロジェクトだけで使うProject Rulesがありますが、今回はProject Rulesを作っていきます。これもCursorに指示をしてrulesを作ります。

以下の内容でproject rulesを作成してください。
・html,css,jsのコーディングを想定しています。
・保存したらlive serverを起動してchromeで確認するようにしてください。
・imgタグのaltは必ず入れてください。画像の内容を認識して入れてください。それができない場合は前後の文章を要約して入れてください。
・hタグは必ず”hdg_lvX”というクラスを入れてください。Xはh2のときは2、h3のときは3が入るので、<h2 class=”hdg_lv2″>というようにしてください。
・cssでfont-sizeとfont-weightを一緒に記述する際は、必ずfont-sizeから書いてください。

このようなチャットを送ると勝手にruleのファイルを作ってくれて、今後の指示においても有効に働きます。

実際にコーディングしてもらおう

ここからは実際にCursorにコーディングしてもらいましょう。以下のような指示を出します。

ありがとうございます。以下の内容でページを作成してください。
【基本仕様】
・html,cssで作成
・ウインドウサイズが767px以下の時、スマートフォンに対応
・コンテナーは左右に20pxのpadding、max-widthは1200px
【ページ情報】
・ページタイトルは「ネクストコーラ」
・飲料会社、主力製品は「ネクストコーラ」「ソーダページ」「次頁茶」
・青を基調としたデザイン
【ページレイアウト】
・メインビジュアル（幅いっぱいにする）
・お知らせリスト（最新5件のリンクを表示、お知らせ一覧へのリンクボタン）
・製品紹介（サムネイルと商品名のカードを作成して、各商品紹介にリンクさせる）

もちろん架空のページですが、実際にありえる案件を想定して指示を出してみました。
すると…

しっかりとしたページができました！スマートフォンにもしっかり対応しています。

修正してもらおう

正直もう完成しているような気がしますが、ここから細かいところの修正をしてもらいましょう。

ページを要約してdescriptionとkeywordsを追加してください。

こういった内部の修正をはじめ、

全角スペースは使わず、半角スペースにしてください。また、ruleに追加してください。

こういった形で修正してもらいながらルールを追加・削除していくことも可能です。

人間、いらなくなるかも

どんどんとAIが進化していて、Cursorの機能が充実していることが実感できました。
これからの人間のエンジニアは必要となる能力が変わってくるかもしれません。
この流れに置いていかれないよう、これからも頑張ります！