Cursorを活用したAIプログラミングについて 入門

AIを活用することで、プログラミングを効率よく進めることができます。
今回はその中でも、Cursorを活用したプログラミングの効率化について説明をしたスライドになります。

Transcript

1. 生成AIを使ってプログラミング を楽にしよう
2. 生成AIとは？ 2 AI(人工知能)は人間のように推論したり学習するコンピューターのことです。 今までのAIは既存のデータを学習して、未来のことを予測したり、現状分析をしたりするのがメイン。 生成AIは文章や画像、プログラムなどコンテンツを生み出す AIのことです。 この生成AIを使うことで、プログラミングの生産性を上げることができるので使ってみましょう！
3. 生成AIをプログラミングに用いる利点 3 • エラー・バグの早期特定 /修正 ◦ 間違いの指摘/修正方法の指示 • 開発スピードの向上 ◦ コードの自動生成 ◦ 既存コードのリファクタリング (整理・最適化) • コードの理解補助 ◦ コードの解説 • ドキュメント生成 ◦ コードを説明する資料やコメントを自動生成
4. 生成AIを使う上で気をつけること 4 • ハルシネーション ◦ あたかも事実かのように誤情報を言うことがあります。 ◦ 自分自身で二次情報を調べたり、批判的思考で AIの出力結果を見るようにしましょう。 • プライバシーやセキュリティ ◦ 入力した内容が学習データに使われてしまう可能性があります。 ◦ 個人情報や、ID・パスワードなど秘密情報を入力することは避けましょう。 • 著作権侵害 ◦ 出力される内容が既存の著作物にあまりにも酷似している場合、権利侵害になることも ◦ 過去のデータを学習しているため、似ているものを知らずに出力することがあります。 ◦ 自分自身で必ず問題ないかを確認しましょう。
5. 実際に生成 AIを使ったプログラミングをしてみよう 5 Cursor (https://www.cursor.com/ja) を使ってみよう 本格的に使うには課金が必要ですが、無料で体験することができます！
6. Cursor とは？ 6 Cursorとは「AI支援機能が搭載されたコードエディタ」です。 Visual Studio Codeをベースに作られているため、VS Codeを使ったことがあれば学習が容易です。 プランについて Cursor Hobby Cursor Pro Cursor Business 料金 無料 $20/月 $40/ユーザー/月 コードの自動補完 2000回/月 無制限 無制限 低速でのAI利用 50回/月 無制限 無制限 高速でのAI利用 ❌ 500回/月 500回/月
7. Cursor の使い方 ①コードの部分生成 /修正 7 cmd+k(windowsはCtrl+k)を押すことで、すぐに生成AIに指示を出すことができます。 問題なければAccceptをして、AIの生成したコードを反映できます。
8. Cursor の使い方 ②チャット 8 画面右側にあるチャット機能を駆使してコードの説明をさせたり、バグがないか確認させたり コードについて相談したりすることができます。
9. Cursor の使い方 ②チャット 9 3種類のモードからチャットモードを選ぶことができます。 Agent: 複数ファイルを編集したり、コマンドの実行も可能。複合的にタスクを自動実行します。 Ask: コードの説明や疑問の解消におすすめ。コードの修正はしない。 Edit: 細かい部分的なコードの修正におすすめ。コードの一部を直接編集します。
10. Cursor の使い方 ②チャット 10 Agentの実行例。 HTMLを編集して、git commitまで実行
11. Cursor の使い方 ③@Symbols 11 質問や命令を指示する上で、参照して欲しい情報を選択することができる。 • Files & Folders: 特定のファイルやフォルダを参照する • Code: 特定のコードブロック、関数などを参照する • Docs: プロジェクト内のドキュメントを参照する • Git: Gitリポジトリの内容を参照する • Past chats: 過去やりとりしたチャット内容を参照する • Cursor rules: Cursorに指示したプロジェクト固有のルールを参照する • Terminals: ターミナルに入力したコマンド内容を参照する • Linter errors: 現在開いているファイルの Lintエラー・警告を参照する • Web: Webサイトの情報を参照する • Recent changes: 直近のコードの変更履歴を参照する
12. Cursor の使い方 ③@Symbols 12 @Symboleの一つの例として、Docsを使うと、 特定のWebサイトのドキュメントを学習させることができます。 例えば、MDN(https://developer.mozilla.org/en-US/)というWeb開発者向けの情報まとめサイトを学習 させることで、下記のように回答内容が変化します。
13. Cursor の使い方 ④cursor rules 13 cmd + shift + p (windowsはctrl + shift + p)で開く窓からcursor ruleと入力することで作成できます。 ルール名を決めて、そのファイルの中にルールを記載することができます。 コードの編集時等に生成 AIに記載したルールを守らせて命令を出すことができます。
14. Cursor の使い方 ④cursor rules 14 例えば、こんなルールを付け加えます。 ## 説明の口調について - 毎回語尾にだってばよをつけること すると説明の口調が変わります。
15. Cursor の使い方 ④cursor rules 15 実際には、下記のようにコードをより正確に記載してもらうようなルールを設定するのが良いです。 ## あなたの持つ能力・特性 • 高度な問題解決能力を持つ • 誰にでもわかりやすくシンプルなコードを書く • 不明点や疑問点があれば推測するのではなく、確認を行い意図を必ず確かめる ## 品質評価 • 各コードを事前に実行・検証し不具合がないかを検証すること • エラーがあれば即座に修正すること ## 説明 • 1行ずつどんなコードを書いているか説明を入れてください。
16. Cursor の使い方 ⑤コードの自動補完 16 Tabキーを押すことで、コードの自動補完が行われます。 次に何を記載するかを予測して、グレーアウトでコードが記載されます。 そのまま採用したければ Tabキーを押すことで採用され、不採用ならそのままコードを記載します。
17. Cursor の使い方 ⑥モデルの変更 17 claude系やdeepsheek,geminiやgptなど色々なAIモデルを使用することができます。
18. Cursor の使い方 ⑥モデルの変更 18 画面上部のCursor -> 基本設定 -> Cursor Settings -> Models からモデルの変更ができます。 AIモデルによって特徴があるので、色々使ってみて比較したり、調べてみましょう！
19. 最後に 19 生成AIでのプログラミングはとても便利で、どんどん発達していくと思います。 使いこなして、生産性を上げていきましょう。 Cursor以外にも色々ツールがあるので、興味を持った方はぜひ調べてみてください。