【非エンジニア・初心者向け】AI搭載エディタ「Cursor」で爆速コーディングを目指す4つのコツ

Webエンジニアを中心に人気急上昇中のコードエディタCursor。
本格的にWeb制作を学ぶために、しようするエディタを探していて「Cursor使ってみたいな」と思われている方も多いと思います。ただ、CursorはVS codeベースなうえに利用層がエンジニア中心ということもあって、あまり基本操作的な部分の説明ってないんですよね。

そこで、本記事では「コーディング初心者の方がCursorを使って効率よく作業をするために覚えたいこと」をご紹介します。VS code使ったことないんだけど…という方も安心して始めてみてください！

• 1. Emmetを使おう
• 2. Cursorのショートカットキーを活用しよう
• 3. Tab機能（コード補完機能）を活用しよう
• 4. AIエージェントに協力してもらおう
• 最後に：AI機能を安全・安心に使うための注意

1. Emmetを使おう

1-1. Emmetとは

Emmetとは、簡単な記載でHTMLやCSSを補完入力できるツールです。
HTMLやCSSを省略記号（ショートハンド）で書いて、Tabキーを押すと一瞬で展開できる機能になっています。

【アニメ図解たっぷり】VSCodeの使い方入門！～ 基本からWeb制作まででもご紹介しているように、VSCodeやSublime Textなど他のコードエディターでもよく使用されています。覚えておくとCursorに限らずコーディング速度が上がるので、ぜひ活用してください。

1-2. まずはこれだけ：Emmet頻出略記5選

.（ドット/ピリオド）=クラス名

CSSを書いたことがある方なら、これはわかりやすいと思います。 HTMLファイルでdiv.containerのように要素.好きなワードを入れてtabキーを押すと、.の後ろに書いた文字をクラス名として展開してくれます。

ちなみに、コードを書いているとCursor特有の賢くて気が利きすぎる問題が発生することもあります。
過去に書いたコードから、あなたが書きたいのはこれじゃない？と提案してくれるんですよね。

この状態でTabキーを押すと、Emmet展開ではなく、CursorのTab補完が効いてしまいます。

この辺は自分で書く（Tab補完は使わない）という時は、Cursorアプリウィンドウ下部にある [ Cursor tab ] 部分にカーソルを重ね、DisableもしくはSnooozeで一時的にオフにするのがおすすめ。
とっちもガンガン使いたい、という場合はCursorのショートカットキーを活用しよう：2-5. 自分仕様にカスタマイズの方法で、Emmet展開に別のキーを割り当てることもできます。

#（井桁/シャープ）=ID名

こちらもCSSを書いている方ならお馴染み、要素のID名を意味する記号です。
header#globalNav → <header id="globalNav"></header> という形で展開されます。

+（プラス）

+でつなぐと、兄弟要素を並べて展開します。

header+main+footer
　↓

>（だいなり記号）

>で繋ぐと、親子関係のある構造も一気に展開できます。

div.container>div.row>div.col
　↓

<div class="container">
    <div class="row">
        <div class="col"></div>
    </div>
</div>

*（アスタリスク）

*はプログラミングではよく乗算記号として使われるもので、Emmetでも「この要素を３つ」というような場面で使います。
例えば、リストでli要素を複数個入れたい時などです。

ul.check>li*3
　↓

<ul class="check">
    <li></li>
    <li></li>
    <li></li>
</ul>

1-3. 数・階層・テキストを一気に作る

上記の5つ以外に、知っていると便利な記号としては があります。
$は連番を付けるための記号で、$の個数で桁数を指定できます。

li.item$*5{項目$$}
　↓

<li class="item1">項目01</li>
<li class="item2">項目02</li>
<li class="item3">項目03</li>
<li class="item4">項目04</li>
<li class="item5">項目05</li>

Emmetで使える省略の方法は他にもあります。
CSSもかなり短く書けるので、チートシートをご参照ください。
Emmetチートシート

全て覚えて、全部をEmmet記号で書く必要はありません！
よく使いそうな物から使ってみましょう。

2. Cursorのショートカットキーを活用しよう

Cursorに限らず、アプリを使った作業の効率化に欠かせないのがキーボードショートカット。 ショートカットキーとも言われる、Ctrl ( cmd ) + C で「コピー」などがそうですね。
いちいちマウスを持って右クリックして…という動作を省けるので、時短につながります。

なお、キーボードショートカットはユーザー設定によって使用できないものがあります。
例えば「Cursorの設定と被ってしまって、思っていたアクションにならない」というようなケースです。試してみたけど動かない、紹介されたアクションにならない…という方はショートカットの確認とカスタマイズでキーボードショートカットの確認、カスタマイズ設定を紹介していますのでご確認ください。

2-1. 超基本：たいていのアプリ共通のショートカット

2-2. Cursor基本操作のショートカット

コマンドパレット

• Mac： Cmd + Shift + P
• Windows：Ctrl + Shift + P

コマンドパレットとは、機能を検索して呼び出すCursorの「何でも屋」的な機能です。
Cursorの設定を行ったり、拡張機能を追加するときなどにも使います。

前回の記事でCursorのメニューを日本語化するときにも使用しましたね。

タブを切り替える

いくつかのタブを開いてファイルを編集しているときは、以下のショートカットキーでタブを切り替えられます。

• Mac：Cmd + Tab
• Windows：Ctrl + Tab

ファイルをすぐ開く

開いていない（タブにない）ファイルを開きたいときは、以下のショートカットキーを使います。

• Mac： Cmd + P
• Windows：Ctrl + P

上部にファイル一覧が表示されるので、そのまま選択しても良し、ファイル名を入れて絞り込んでも良し。
開きたいファイルがハイライトされている状態でEnterキーを押せば開けます。

エディタを分割する

• Mac：Cmd + \
• Windows：Ctrl + \

AIチャットパネルを開く：Command +

Cursorの目玉機能、エディタ右側にAIとのチャットパネルを開くためのショートカットキーです。
質問や相談を入力すると、コードの解説や改善提案をAIが返してくれますよ。

• Mac：Cmd + L
• Windows：Ctrl + L

コード生成・編集を呼び出す

こちらは、エディタ内に出現するテキストボックスです。

選択したコードに対して、AIに「書き換え」「リファクタリング」「追記」を依頼したい場面で役立ちます。 依頼内容を入力すると即座に反映されます。

• Mac：Cmd + K
• Windows：Ctrl + K

ファイル内の検索／置換

今開いているファイルの中から、特定のワードを検索・置換するには以下のショートカットキーを使います。 数千行のstyle.cssの中から「このクラスのスタイル指定を修正したい」とか、クラス名を変えたい、なんて時にもよく使います。

置換の際は下図のようにCtrl + alt + F （Macの場合は Cmd + Option + F ）で一括置換、のようなショートカットキーがあります。
画面上にショートカットキーが表示されるので、それを見ながら使っていくと自然と覚えられます。

2-3. 編集が速くなるショートカット

コメントアウトする

コードを書いていると、絶対といっても良いくらい使うコメントアウト。
これも VS codeやSublime Textなど多くのコードエディタで同じショートカットキーを使えます。

• Mac：Cmd + /
• Windows：Ctrl + /

整形（フォーマット）する

一生懸命コードを書いて直してしていると、インデントが乱れがちになります。 ポチポチとTabキーを押したり、余分なインデントを消すのは面倒なのでCursorにお任せしましょう。

• Mac：Shift + Option + F
• Windows：Shift + Alt + F

コードがきれいだと、見やすく、閉じタグ抜けなどもすぐわかります。
クライアントの心象も良くなるので、メリットしかありません。

その他

そのほかにもマルチカーソル（複数選択・矩形選択）や選択行の移動など、便利なショートカットキーがCursorにはたくさん用意されています。
Cursorのショートカットキーはほぼ VS code と同じですので、もっとショートカットキーを使いこなしたい！という方は下記の記事もご確認下さい。

Skillhubブログ

【VSCode】まずはこれを覚えよう！初心者のためのショートカット２９選！【Mac/Win】

2-4. ショートカットの確認とカスタマイズ

Cursorのキーボードショートカットを試したけど動かない、なんか違うのが出てきた…ということも偶にあります。もしくは自分の使いやすい設定に変更したいシーンも出てくるかもしれません。
そんなときはキーボードショートカットを確認して、必要に応じてカスタマイズしていきましょう。

例えば、私のパソコンでは、名前を付けて保存・別名で保存（Ctrl + Shift + S）をCursorで実行しようとすると、保存ではなくサイドバーのSearch Agentが開かれてしまいました。

Cursorのキーボードショートカットを確認してみましょう。
上部メニューのファイル > ユーザー設定 > キーボードショートカット を開きます。
以下のような、キーボードショートカットの一覧が表示されます。

上部の検索バーに調べたいアクション、もしくはキーボードショートカットに使ったキーを入力します。半角スペースで区切れます。
そうすると表示が絞り込まれるので、設定が被っているか確認できます。

変えたいキーボードショートカットがあれば、左横のペンアイコンをクリックするとカスタマイズ可能です。 どちらを優先するか、ご自身が使いやすい形でカスタマイズすると良いでしょう。

私の場合はいろんなアプリで「名前を付けて保存（Ctrl + Shift + S）」を使っているので、Agentの方を変更してみます。
既に設定されているキーを使うと教えてくれるので、衝突しないものを探しても良いですね。

Enterキーで、キーボードショートカットを更新します。
変更すると、Cursor上に表示されるキーボードショートカットも更新してくれます。親切！

3. Tab機能（コード補完機能）を活用しよう

では、Cursorらしい機能を見ていきましょう。
まずはエンジニア勢が「超有能」と絶賛しているTabキーの補完機能。Webデザイナー/コーダーにとっても役立ちますよ。

3-1. Tab補完の基本を知ろう

CursorのTab補完は、文字を数文字入力すると、候補（サジェスト）が自動で表示されるという機能です。

候補はゴーストテキストと呼ばれる薄い字で表示されます。 候補の中から使いたいものを選んで Tabキー を押すと、一気にコードが入力されますよ。

HTMLでの例

下図のtest.htmlで、style.cssとimgフォルダの中にあるpanda.jpgを読み込ませたいと思います。

<linkと打つと、style.cssを読み込むための記述がうっすら出てくるのでTabキーで確定。

次に画像ですね。
imgフォルダには画像が2つ入っているのですが、どうでしょうか？

<imgと打っただけだとダミー画像を読み込むような表示になっています。 HTMLの文法と少し違いますが、読み込みたいファイル名を打ち込むと…欲しかった補完が出ました！

使い方のコツ・慣れが多少必要かもしれませんが、慣れると便利ですね。 定型文的な部分は、補完機能で入力してもらったほうがスペルミス・打ち間違いも無くせて一石二鳥です。

3-2. 少し工夫すると、もっと便利に

上の「panda.jpg」の例もそうですが、補完機能が優秀といっても万能ではありません。
より効率よく助けを求める場合は、何をどうしたいかをCursorにわかるようにする必要があるのです。

具体的には、以下のようなことが挙げられます。

• 変数名やクラス名、ファイル名などを 先に決めて書きかける と、候補に出やすくなる
• コメントで「やりたいこと」を書いてから補完を使うと、AIが意図を理解しやすい

例えば、デモで使っているtest.html。 コメントで<!-- グローバルナビゲーション -->などと入れると「よく使う感じ」のコードが出てきます。

もちろんJavaScriptなどでも補完候補を出してくれます。
補完がいらないときはEscキーを押すとキャンセル（ゴーストテキストの非表示化）が可能。
上の例のように全部をTabキーで出すのではなく、自分で書いていって候補から querySelectorや querySelectorAllなどを選択してもOK。

3-3. 間違えても平気！自分なりの活用方法を見つけよう

思っていたコードが出ないのにTabを押しちゃった、選択するのを間違えた…というときはCtrl + Z（Cmd + Z）ですぐ戻せます。

どんなふうにTab補完を活用するか、どこまで自分で書くか…みたいなところは使ってみないとイメージしにくいと思います。
自分で改変して使えそうなものは、そのまま修正して使ってもOK。
間違えてもすぐに戻せるので、安心して試してみてください。

4. AIエージェントに協力してもらおう

4-1. “やってほしいこと”をはっきり伝える

ここまでのデモではAIに結構アバウトな指示をしてきましたが……本当に活用する際は、どこをどんな風にしたいかを明確に伝えてください。具体的に伝えるほど、想像に近いコードを提案してくれます。

基本の指示型

最低でも、以下の3つを入れると良いです。

1. 目的：何を作る／直す？
2. 条件：どんな見た目・振る舞い？（指定例：スマホ優先／CSSの命名規則など）
3. 出力：どのファイル・どの範囲に？（指定例：HTMLだけ／CSSだけ／このファイル内にインラインで、など）

また、ショートカットキーで紹介した２種類のAIプロンプト入力欄を使い分けるのも有効です。

• Cmd+L（AIチャット）
  → 漠然とした構想や、広い範囲にわたるコード：たたき台づくり・手順の質問など
• Cmd+K（コード編集）
  → この場所、このコード、というのが明確な場合：置換・追記・リファクタなど

プロンプトの例

例：HTMLを作ってほしい（Cmd+L：チャット）
「ヒーローセクションのHTMLを作ってください。背景画像を全面に敷き、タイトルとキャッチコピーを入れます。背景画像はPC幅ではtop.jpg、モバイル幅ではtop_sp.jpgを使います」

例：エラーが出ているコード修正（Cmd+K：コード編集）

C:\xampp\htdocs\wcb\wp-content\themes\theme_name\header.php on line 2

上記のWordPressテーマエラーのように「この辺の記述でエラーだよ！」と表示されていたり、自分でどのあたりが原因かわかる場合は、そのブロックを選択します。 選択状態のまま Cmd+Kを使って「エラーが出ているので修正したい。問題箇所を探して、正しい記述に直してください」のように入力します。

4-2. 文脈を渡すと“当たり”が増える

場所を指定して依頼する

直してほしい範囲だけ選ぶと、余計な変更が減り、AIのレスポンスも早くなります。

選択→Cmd+Kを使う
該当するコード部分を選択してプロンプトを入力することで、「どこを」見てほしいかがAIに伝わります。
人間も文字で入力しなくて良いので、楽ですね。

@シンボルを使う
Cmd + L で表示できるAIチャットパネルでは、@シンボルと呼ばれている機能があります。
左上にある＠の部分をクリックして、AIが参照する範囲を指定することができます。

例えば「この関数はどこで定義しているんだ…」という場合はフォルダ（広い範囲）を指定します。
フレームワークを使用しているときは@Docsで公式ドキュメントを参照させたり、@Webを使うとAIが最新情報をウェブで検索してくれたり…と、素晴らしい機能です。

利用可能な@シンボルのリスト、使い方は日本語版Cursorドキュメントでも紹介されています。
https://docs.cursor.com/ja/context/@-symbols/overview

エラーがあるときは、エラーの文言を貼るのも〇

ただエラーが出ているとかではなく 「Uncaught TypeError: … が出ました。ここを直してください。」のように具体的に指示をすると、的確な修正案をくれる率が高まります。

完成イメージを文章で伝える

「モバイルは1列・PCは3列／ギャップは16px／ボタンはホバーで不透明度80%」など“できあがり”を言語化すれば、AIは忠実にそれを再現しようと頑張ってくれます。なるべく少ない回数で、精度の高い回答を得ようと思ったら、書けるものは具体的にどんどん書いていきましょう。

定型フレーズ集

• 「この選択範囲を読みやすくリファクタしてください。動作は変えないで。」
• 「CSSを共通化してください。重複セレクタを統合。」
• 「このHTMLに最低限のアクセシビリティを追加。ラベルとコントロールの関連付け。」
• 「このJSを動作は変えずにバニラJSで書き直してください。依存なしで動くようにしたい。」

4-3. 出力の“確認→微調整→やり直し”

AIはとても優秀ですが、一発で完璧なコードを出してくれるわけではありません。
ですので、何度か追加指示を加えて完成形に近付けていくイメージで進めていきましょう。

1. 作りたい内容を入力
2. AIが生成したコードを確認
3. プレビューして見た目が崩れていないか、コンソールエラーが出ていないかチェック
4. 追加指示を出す
5. AIがコードを修正する

もちろん、AIに土台を作ってもらって、細かい調整は自分で書く方針でもOK。
「ここの上部余白が広すぎるので 24px → 16px に変えて」とか打つくらいなら、自分で直しちゃったほうが早いですしね。

追加指示の例

• 「余白が広すぎるので 24px → 16px に」
• 「モバイルでは画像を上、テキストを下に」
• 「class名だけBEM準拠に置換して、HTML構造はそのまま」
• 「このクリックイベントを委譲で書き直してください。動的に追加される要素にも反応するように。」

最後に：AI機能を安全・安心に使うための注意

CursorのAI機能を活用することで、今まではコードを書くのに時間がかかっていた部分を手早く作ったり、「難しいなぁ」と諦めていた表現を実装することができます。

コーディングの学習としても、うまくいかないところをチェックしてもらったり、デモコードを作ってもらって解析したりと、活用幅は広いです。今まではモデルコード集（レシピ集）などを見ながら学習していたものが、Cursor１つで完結しちゃうので便利ですね。

とても便利で有能なCursor、生成AIですが、活用するときは以下の点に気を付けてください。

• 秘密情報を書かない：APIキーや個人情報は貼らない。
• 過信しない：実際の見た目や動作、HTMLの意味付けやアクセシビリティを自分の目でチェックする。