GPT4搭載!AIコードエディタ「Cursor(カーソル)」の使い方
Summary
TLDRこの動画では、新しいコードエディター「Cursor」の紹介と使い方が解説されています。CursorはVS Codeと同様の操作感でAI機能が搭載されており、無料プランでもChatGPT3.5や4を一定回数利用できます。動画ではCursorのインストール方法から、HTMLやCSSコードの生成、JavaScriptによるインタラクション実装までAIを活用しながら実践的に紹介しています。AIによるコード生成は効率化に役立ちますが、一部手直しが必要な点も示されています。従来のVS Codeユーザーにとっても魅力的なAI搭載コードエディターとして、Cursorの活用が促されています。
Takeaways
- 🆕 カーソルは、VSCodeに似た新しいコードエディターで、AI機能が搭載されている。
- 🤖 無料プランでも月に200回のChatGPT 3.5と50回のChatGPT4の質問が可能。
- ⬇️ カーソルエディターは公式サイトからダウンロードしてインストールできる。
- 🔑 アカウント作成が必要で、Googleアカウントでもサインアップできる。
- 📦 VSCodeの拡張機能や設定がカーソルエディターに引き継がれる。
- 🖥️ コマンド+KでAIに質問し、コードの生成やスタイル適用ができる。
- 💭 AIにできるだけ具体的な指示を出すことで、より適切なコードが生成される。
- ✏️ HTMLやCSSだけでなく、JavaScriptコードの生成もAIに依頼できる。
- 🔍 生成されたコードを確認し、必要に応じて手動で修正する必要がある。
- ⭐ カーソルエディターは、AIの支援を受けながらコーディングできる実用的な選択肢。
Q & A
カーソルエディターとはどのようなコードエディターですか?
-カーソルエディターは、AIを駆使してコーディングができるVSコードベースのコードエディターです。VSコードと似た操作感や機能に加え、無料プランでChatGPTを利用できるAI機能が搭載されています。
カーソルエディターの導入方法について教えてください。
-ブラウザで「カーソルエディター」と検索し、公式サイトからファイルをダウンロードします。ダウンロードしたインストーラーを実行し、必要に応じて設定を行います。最後にアカウント作成が必要になります。
カーソルエディターでコードをAIに生成してもらう方法は?
-コード上でコマンド+K(Windows の場合はCtrl+K)のショートカットキーを押すことで、AIの入力欄が表示されます。そこに指示を入力し、「Generate」ボタンを押すとコードが生成されます。
AIにコードを生成させる際の注意点はありますか?
-できるだけ詳細な指示を与えることが重要です。ざっくりとした指示では、期待通りのコードが生成されない可能性があります。指示が曖昧だと思われる場合は、より具体的に指示を与える必要があります。
カーソルエディターのAI機能の利用制限はありますか?
-無料プランでは、ChatGPT 3.5を月に200回、ChatGPT 4を合計で50回まで質問できます。有料プランを契約すれば、制限は増えます。
VSコードからカーソルエディターへの移行はスムーズですか?
-はい、カーソルエディターはVSコードをベースにしているため、画面や操作感がほとんど同じです。また、VSコードで使っていた拡張機能や設定なども自動で引き継がれます。
カーソルエディターの長所は何ですか?
-主な長所は、VSコードの機能に加えてAI機能が使える点、コードの大枠を一瞬で生成できる点、コーディング時間の短縮が図れる点などが挙げられます。
カーソルエディターで生成されたコードに問題がある場合はどうすればよいですか?
-生成されたコードを自分で読み解く力が必要になります。AIでも完全にミスのないコードを生成するのは難しいため、必要に応じて手動で修正を加える必要があります。
カーソルエディターとVSコードではどちらがよりおすすめですか?
-現時点ではカーソルエディターをメインのエディターとして使うのがおすすめです。ただし、VSコードで使えていた機能がカーソルエディターで使えない場合は、VSコードを使う選択肢もあります。
カーソルエディターの今後の展望はどうですか?
-カーソルエディターはまだ出始めで、今後さらに機能が拡張されていくことが予想されます。AIの進化に伴い、より高度なコード生成が可能になる可能性があります。また、ユーザー数の増加が見込まれています。
Outlines
🖥️ カーソルエディターの紹介
この段落では、新しいコードエディターであるカーソルエディターについて紹介しています。カーソルエディターはAIを活用してコーディングを支援するツールで、VSCodeと同様の操作感で使用できます。無料プランでも一定回数のAI質問が可能で、VSCodeで使用していた拡張機能や設定を引き継げるため、スムーズに移行できるとしています。この動画では、カーソルエディターの導入方法と使い方を解説するとしています。
💻 カーソルエディターの実践的な使い方
この段落では、カーソルエディターを実際に使ってみた様子が書かれています。まずWebサイトのヘッダー部分のHTMLコードをAIに生成してもらい、CSSスタイルも生成しています。さらに、ヒーローセクションやメインコンテンツ部分のコーディングも試しています。JavaScriptについても、アコーディオン形式のQ&A機能やスクロールでの要素のふわっと表示の動作をAIに生成してもらっています。一部修正が必要な点もありましたが、全体として役立つコードが生成できていることが分かります。
🥇 カーソルエディターのまとめと評価
最後の段落では、カーソルエディターについてのまとめと評価が述べられています。VSCodeの機能に加えてAIの機能が使えるため、メインのエディターとして使うのは良い選択肢だと述べられています。フリープランでも一定回数AIに質問できるので、まずはフリープランから試してみるのがよいとアドバイスしています。視聴者に対しても、動画が参考になれば高評価とチャンネル登録を呼びかけています。
Mindmap
Keywords
💡カーソルエディター
💡ChatGPT
💡コマンド
💡HTML
💡CSS
💡JavaScript
💡拡張機能
💡指示
💡修正
💡実用性
Highlights
今回は新しいコードエディター「カーソル」の使い方について紹介します。
カーソルはAIを駆使してコーディングができるVSCodeベースのコードエディターです。
VSCodeと同様の操作感で使えるので無理なく使い始められます。
VSCodeで使っていた拡張機能や設定も自動で引き継がれます。
無料プランでもChatGPT 3.5を月に200回、ChatGPT 4を50回質問できます。
カーソルエディターの導入方法から使い方を解説します。
インストール時にAIで使う言語を日本語に設定できます。
VSCodeの拡張機能をカーソルエディターに引き継げます。
アカウント作成が必要になります。
VSCodeとほとんど同じ構成なので新しいエディターというよりは機能が加わった形です。
コード上でAIを呼び出して基本的なコードを生成できます。
AIに具体的に指示を出すとより適切なコードを生成してくれます。
CSSコードの生成やスタイリングもAIに指示できます。
JavaScriptのコードもAIに生成させることができます。
修正の指示によってはAIが正しいコードを再生成してくれる場合もあります。
Transcripts
こんにちはひろです今回は今話題の新しい
コードエディターカーソルの使い方につい
て紹介していこうと思いますまずカーソル
とはどんなコードエディターなのかと言と
AIを駆使してコーディングをすることが
できるvsコードベースのコード
エディターですこれまでvsコードを使っ
てコーディングしてきた方も多いかと思う
んですがこのカーソルは画面や操作感など
はほとんどvsコドと同じように使うこと
ができるので無理なく使い始められ
るっていうのも魅力のうちの1つですまた
vsコードで使っていた拡張機能や設定
なども自動で引き継いでくれ
るっていうのも嬉しいポイントですさらに
このエディターにはAI機能が搭載されて
いて無料プランであればChatGPT
3.5を月に200回チッGPT4は合計
で50回まで質問することができますま
この無料プランだとしてもとりあえず使っ
てみる分には十分な質問料なんじゃないか
なと思います今回はそんなカーソル
エディターの導入方法から使い方までこの
動画で解説していこうと思いますそれでは
早速始めていきたいと思い
ますまずはブラウザでカーソルエディター
と検索してカーソルエディターのサイトに
アクセスしますこの動画の概要欄にも
リンク貼っておきますこんな感じの
スタイリッシュなサイトがありますがここ
にダウンロードボタンがあるのでここから
ファイルをダウンロードし
ますMacOS以外のOSはここから
ダウンロードして
ください続けでダウンロードした
インストーラーを立ち上げてインストール
作業を行っていきますまするとこんな感じ
で設定の画面が表示されますが基本的には
そのままで大丈夫だと思いますでここに
あるランゲージの部分でまAIでどの言語
を使うかっていう指示ができるのでここに
は日本語と入力しておき
ますでここではvsコードに入っている
拡張機能をカーソルエディターに
引き付ける設定ができます引き続く場合は
このユスエクステンションズをクリックし
ますはい最後にカーソルエディターを使う
場合にはアカウントが必要になりますその
ため初めはアカウントがないと思うので
ここにあるサインアップからアカウントを
作成しますアカウントの作成にはメール
アドレスやもしくはGoogle
アカウントからでも作れ
ます今回はGoogleアカウントで作っ
てみ
ますはいこれでインストールすることが
できましたでこれ見て分かるようにvs
コードとほとんど同じ構成になっています
まなので新しいエディターというよりかは
まVSコードに新しい機能が加わっただ
けっていう形で使用することができるかと
思いますまちなみにここの拡張機能を見て
みるとまVSコードで元々入っていたもの
がちゃんと移行されているのが分かり
ますでは試しに新しくプロジェクトを作成
してコドを書いてみたいと思いますまず
とりあえずINDEX.HTmlファイル
を作ってそこに新しく使えるAIの機能を
使ってコードを書いてもらおうと思います
コード上でAIを呼び出すにはコマンド+
Kのショートカットキーを押すことで
こんな感じでAIの入力欄を表示すること
ができますで試しにウェブサイトの基本的
なヘッダーと入力してここにある
ジェネレートボタンをクリックしてみると
まこんな感じのコードが生成されました
これ見て分かる通りにまナビゲーション
だけのシンプルなものが生成されてしまっ
たのでより具体的にどういったものが必要
なのかっていうのを追求して再度を生成し
てもらいたいと思い
ますまするとこんな感じで普段書くような
コードに近いような形でAIが一瞬にして
コードを生成してくれましたまこんな感じ
でこのエディター上でコードのベースを
一瞬にして作ってくれるっていうのはま
かなり実用性が高いんじゃないかと思い
ますま結構普段書いているようなちょっと
したコードでもま0から書くとなると結構
それなりに時間がかかってしまうと思うの
でまこんな感じで大枠を書いてもらって
後々調整するっていう形を取った方が全体
のコーディング時間の短縮につがるんじゃ
ないかと思いますでは次にSTY.CSS
ファイルを作成してさっきHTML側で
生成したコードに対してのスタイルシート
を書いてもらおうと思います先ほどと同様
にコマンド+Kで入力欄を表示してさっき
のHTMLに対してのスタイルシートを
書いて欲しいという指示をするとこんな
感じで別ファイルを考慮して書いてくれ
ませんでしたでこの場合どうしたらいいか
と言とコマンド+Lを押してチャットの
タブを開きますでここのチャット部分では
このプロジェクト全体に対しての質問が
行えるようになっていますなのでここで
スタイルシートを書いて欲しいという指示
をしてみるとまこんな感じで先ほど作成し
たHTMLに対してのサイルを書いてくれ
ていますこれをstle.CSSにコピペ
してみてみるとまこんな感じでスタイルが
当たっているのが確認できますで
とりあえずロゴ画像のソースだけ指定して
あげてま見てみるんですがこな感じで結構
おかしいレイアウトになっているのでここ
から修正の指示をしてみたいと思いますで
CSSのコドを全体的に修正してもらい
たいのでCSSのコードを全て選択した上
でコマンド+Kで入力フォームを表示し
ますでここでヘッダーに対してもう少し
詳しい指示をした上で再度CSSコードを
生成してもらおうと思い
ますすると今あるコードをこんな感じで
書き換えてくれるのでこれをそのまま反映
してみたいと思い
ますはいするとこんな感じである程度指示
に沿った修正をしてくれましたただボタン
の色の修正とかはされていないみたいなの
でそこら辺は再度を生成してもらう必要が
ありそうですでヘッダーの下にはヒーロー
セクションを設けて背景に画像を配置して
その上にテキストとボタンを配置すると
いう指定をしてみますでさっきの手順と
同様にこのヒーローセクションにも
スタイルを当てたいので右側のチャット
エリアにヒーローセクションのスタイルを
書いて欲しいという指示をしてみますま
すると今あるクラスに対してまちゃんと
サイルを生成してくれてい
ます
で生成されたコードをCSSに貼り付けて
みてみる
とはいこんな感じになっています細かい
調整はもちろん必要だと思うんですがある
程度ちゃんとしたコードで出力されている
んじゃないかと思い
ますでこの下にはメインエリアが来ると
思うので一般的なLPに必要なセクション
を3つ設けて欲しいという指示をしてみ
ましたただこのコードの結果を見たところ
かなりざっくりとした指示だったのでそこ
こから複雑な行動を生成するというわけに
はいきませんでしたまなので指示をする
ポイントとしてはいくつの要素だったりと
かどういったレイアウトなどできる限り
細かく指示をしてあげるっていうのが重要
なんじゃないかと思い
ますで最後JavaScriptコードの
生成を試してみたいと思いますまずは
HTML側でアコーディオン形式のQ&A
の要素を作ってもらいます続けて作成され
た要素に対して必要なスタイルシートを
生成してもらい
ますはいこんな感じの要素を作ることが
できましたではここから今作成したものに
対してJavaScriptを書いて
欲しいという指示だけ与えてみ
ますはいするとこんな感じで
javascriptのコドを生成して
くれるのでまこれをHTMLで読み込んで
みたいと思い
ますはいこれで見てみるとはいこんな感じ
で質問をクリックしたら回答が表示される
という正しいコードが生成されています
続けてページをスクロールした際に要素を
ふわっと表示させるための
javascriptを書いて欲しいと
いう指示をしてみ
ますこれで生成された行動を見てみるとま
画面上スクロールしても何も変化が起こら
ないんですがまこれを要素の検証で見て
みるとこんな感じでスタイルが変化して
いるのは分かるんですが少し手直しが必要
な状態ですここでいくつかこのコドを修正
して欲しいという指示をしてみたんですが
なかなか思うような修正結果が得られ
なかったので今回は自分で行動を見て修正
するっていう手段を問いましたもしかし
たら修正の指示の仕方によっては正しい
コードが再度生成されるっていう形も
取れるかと思うんですがいくらAIでも
全て正しく生成してくれるっていうわけに
はいかないようなのでまそこら辺ある程度
どういうコードになっているのかっていう
のを読み解く力も必要になってくるんじゃ
ないかと思います
はいで一応動くようにはなったんですが
変化が一瞬すぎてスタイルの変化が分から
ないっていう形になっているのでそれの
修正の指示をしてみましたするとその指示
に対しては正しい結果が返ってきてい
ますはい今回紹介したカーソルエディター
なんですけど今までvsコードで使えてい
た機能はそのままにプラスアルファでAI
の機能が使えるっていった形になっている
のでメインのエディターとして使のは
かなりありな選択肢なんじゃないかなと
思いますままだ出始めだと思うんでこれ
からvsコードで使えていたのにカーソル
エディターでは使えないみたいなことが
あればもしかしたらvsコードを使うって
選択肢にはなるかと思うんですがそれが
ない限りはこのカーソルエディターを使っ
ていくっていう人がかなりここから増えて
いくんじゃないかなと思いますま最初に
説明した通りにフリープランであっても月
に何百回かはChatGPTに質問をする
ことができるのでまずはフリープランから
試してみるのがいいんじゃないかと思い
ますこの動画が少しでも参考になったと
いう方はいいねとチャンネル登録して
いただけたら嬉しいです最後までご視聴
いただきありがとうございまし
[音楽]
た
Y
関連動画をさらに表示
5.0 / 5 (0 votes)