Cursorで爆速AIコーディング【フロントエンドエンジニア向け解説】

Cursorのプランについて解説します。

新機能「Composer」はProプラン以上で利用可能です。

Cursorのダウンロードとインストールプロセスについて解説します。

設定のインポートにより、VSCodeの使い慣れた環境をCursorでも継続して使用することができます。

VSCodeを使用したことのない方でも新規で設定をし、自身の使いやすい環境に調整することができます。

動画内で紹介したhtml.jsonとcss.jsonをダウンロードでできるようにいたしました。

jsonファイルの作成方法はまた長い内容になるので割愛しますが、設定の反映テストのさいにお使いください。

Webフロントエンド開発でよく使用すると思われる拡張機能

• Live Server：HTML/CSS/JavaScriptファイルをローカルでリアルタイムプレビューできる拡張機能です。

  開発中のWebページをローカルサーバー上でホストし、変更を保存するたびにブラウザで自動リロードします。

• Diff & Merge：ファイルの変更点や差分を視覚的に比較し、マージを支援する拡張機能です。2つのファイルやコードスニペット間の差分を表示します。

• JS & CSS Minifier（Minify）：JavaScriptやCSSファイルを自動的に縮小（Minify）して、ファイルサイズを軽量化する拡張機能です。

Cursorでは複数のAIモデルを選択できます。デフォルトではGPT-4が使用されますが、特定のタスクや開発言語に特化したモデルを選択することも可能です。

Cursorの画面構成の主要コンポーネントを解説します。

各機能はショートカットキーで素早くアクセスできます。

Cursorのコマンドパレットを使ってGithubのリモートリポジトリを作成できます。

ターミナルタブからGitコマンドの使用をすることも可能です。

サンプルプロジェクトのZIPファイルをダウンロード可能ですので、操作の練習にお使いください。

Cursorのコマンドパレットを使って作成したリモートリポジトリにローカルの更新内容を反映（push）できます。

ターミナルタブからGitコマンドの使用をすることも可能です。

Gitコマンドの場合、ターミナルに以下のコマンドを3行分貼り付けてEnter （Return）キーで実行します。

"new commit"の部分はGithub上で表示されますので、変更した内容を端的に書くと、あとから変更のログを追いやすくなります。

git add .

git commit -m "new commit"

git push

Cursorのコマンドパレットを使って作成したリモートリポジトリからローカルに更新内容を反映（pull）できます。

ターミナルタブからGitコマンドの使用をすることも可能です。

Gitコマンドの場合、ターミナルに以下のコマンドを2行分貼り付けてEnter （Return）キーで実行します。

※fetchは変更の確認のみを行い、pullは変更の取得とマージを行います。安全に作業を進めるために、まずfetchで変更を確認してからpullするのが本来の作法です。

git fetch

git pull

Cursorのコマンドパレットを使ってローカルまたはリモートのリポジトリ上に別ブランチを作成できます。

ターミナルタブからGitコマンドの使用をすることも可能です。

Cursorのコマンドパレットを使ってリモートリポジトリをローカルに複製（clone）できます。

ターミナルタブからGitコマンドの使用をすることも可能です。

ファイル内で特定の文字列を検索をする方法について解説します。

プロジェクト内で特定の文字列を検索をする方法について解説します。

プロジェクト内検索は、htmlやcss、jsなどプロジェクト全体のコード内の検索を行えます。

プロジェクト内で特定の文字列を別の文字列に置換をする方法について解説します。

ファイル内で特定の文字列を複数選択する方法について解説します。

CursorのChatタブ内で対話形式でコード生成する方法について解説します。

おそらく最も使うことになる目玉機能です。

Cursorのエディタ内で対話形式でコードを直接生成する方法について解説します。

エディタ上に生成されますが、生成内容を取り消したい場合は、Ctrl (command) + Z で元に戻すことができます。

Cursorに標準搭載されたEmmetの機能について解説します。

EmmetはHTMLコードの入力を爆速で行える機能としてVSCodeからの定番の拡張機能でしたが、Cursorでは標準で備わっています。

昨年からCursorに導入された機能であるComposer（AIエージェント機能）の使い方と、その注意点を解説します。

最後まで受講いただき、ありがとうございました。

受講者の方にメッセージをお贈りします。

プロンプトでカンプ画像を貼り付けて、その構図でコーディングしてもらいます。

プロンプトに使用したカンプ画像はダウンロードできますので、同じようにプロンプトをできます。

（画像をプロンプト入力枠にドラッグ＆ドロップしてから）

プロンプト

ここにこのような図形を書いて

クラスを割り当ててスタイルを記述

追加プロンプト1

ボックスを縦組みにして

追加プロンプト2

「全国販売」のラベルの背景をホワイトにして罫線のみつけて

linkタグでGoogle Fontの"Noto Sans"を使用できるように、"noto"とコード入力するだけでそれまでのHTMLコードの文脈から、Noto Sansフォントをリンクしてくれます。Noto Sans以外でも、Noto Serifなど、定番のフォントは呼び出せそうです。

プロジェクトファイルの"image_zoom_modal.zip"をダウンロードできますので、ぜひ同じプロンプトで試してみてください。

プロンプト

face.pngの画像のの右下に虫眼鏡マークのsvg画像をつけて、それをクリックするとライトボックスのように画面中央に大きく表示され背景は暗く暗転するようにできますか