＜Web制作学習記録＞デイトラ中級、始めました。 Day 3 [AIを活用したコーディング Github Copilot と Cursor]
AIで効率的にコーディングしよう
Github Copilot（VsCode）と、Cursorでai機能を比較しながら使ってみます。
コードのリアルタイム提案
・Github Copilot のみ
コードを書いていると次のコードが自動で提案されてくる。
全て受け入れる場合は[Tab]。
単語ごとに選択する場合は[cmd + →]で選択していく。
コードを生成してもらう
・Github Copilot
[cmd + i] インラインチャットで日本語で指示（例：2列4行のレイアウトをgridで作ってください。768px以上の時は4列2行にしてください。）
・Cursor
[cmd + K ] で 入力欄が出るので、に日本語で指示（文言同様）→ [Generate]
コードを書き換えてもらう
・Github Copilot
該当箇所のコードを選択して、[cmd + i] で日本語で指示（例：該当箇所のコードのjQueryをJavaScriptに変更してください）
※「該当箇所の」と言う文言がないと違う範囲が変換されてたりする
・Cursor
該当箇所のコードを選択して、[cmd + L] で右側にchat欄と選択したコードが出るので、日本語で指示（文言同様）
コードの説明をしてもらう
・Github Copilot
[cmd + i] でチャット欄のタブが開く。
該当箇所のコードを選択して、入力欄に 「/explain 」とコマンドを入れると、コードの説明文を表示してくれる。
・Cursor
該当箇所のコードを選択して、[cmd + L] でAdd to Chatすると、チャット欄のタブが開く。日本語で「このコードを解説してください」と依頼する。
コードの問題を提示してくれる拡張機能との共同作業で、修正の手伝いをしてもらう。
・Github Copilot
・Cursor
html: markuiplint, css: stylelint, JavaScript:ESLint などの拡張機能がはいっていると、問題箇所にカーソルを当てると「変更する？こんなふうに修正できるよ？」と提案してくれるので、受け入れたり修正したりしていく。
※画像のサイズ（width,height）などはちゃんと調べて入れてくれないので、自分で修正すること。
ファイルを横断した提案をしてもらう
・Cursorのみ
使いたい複数ファイルをエディタで開く
→[cmd + K ] で 入力欄がインライン表示
→＠マークを入力し、[Files]で参照したいファイルを選択。日本語で指示。
使用例：cssのエディタ上で[cmd + K ]インラインチャットを開き、[Files]でhtmlファイルを選択。指示内容「.case のHTMLに付随するファイル名をすべてピックアップしてcssのブロックを作ってください。」
ファイル全体（ワークスペース）を参照して、readme.txtを作成してもらう。
・Github Copilot
チャット欄に「@workspace」と入力する。
→「このプロジェクトのreadme.txtを作成してください」
※一応できるが、Cursorのほうが詳しくていい感じ。
・Cursor
[cmd + L] で「このプロジェクトのreadme.txtを作成してください」と入力した上で、[cmd + Enter](codebase)
※ 詳細に作成された。ほぼ内容も合っている感じ（要確認）。
公式ドキュメントを参照し、CSSやスクリプトを読み込んでもらう
・Github Copilot
ドキュメントを読み込む機能はないけど、チャットでお願いすればできる。
例：「Swiper」のCss をhtmlに読み込むためのコードを教えてください。」
・Cursor
インラインチャットで「@swiper」などと入力し、「Swiper Official」を選択。
コマンドで「CSSを読み込んでください」「スクリプトを読み込んでください」と指示する。
その他、大体のことはチャットに日本語入力して解決。
・レビュー依頼「該当箇所のコードレビューをしてください。」など。
あとがき
自動でコード補完は結構助かるのでCopilotがありがたい、ファイル横断できるのはCursorが便利そう。
実はすでにCopilotに献金しておりますので、今のところは基本Copilot、ファイル横断で必要そうになったらCursor使用していこうと考えております。そんな使い分けでもいいのかな。
皆さんはどちらを使っていますか？