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) を使ってみよう(執筆時点: cursor v2.2 2025/12/17) 本格的に使うには課金が必要ですが、無料で体験することができます！
6. Cursor とは？ 6 Cursorとは「AI支援機能が搭載されたコードエディタ」です。 Visual Studio Codeをベースに作られているため、VS Codeを使ったことがあれば学習が容易です。 個人プランにはPro+($60), Ultra($200)も追加されました。AIモデルの使用量が増加します。詳細 プランについて 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 4種類のモードからチャットモードを選ぶことができます。 Agent: 複数ファイルを編集したり、コマンドの実行も可能。複合的にタスクを自動実行します。 Plan: アプリの作成やコードを実行するための実行計画を策定・調整する。実行計画が確定したらその通り に作業を進めてくれます。 Debug: バグ内容を説明すると、そのバグに対して原因になりそうな複数の仮説を立ててくれる。 その仮説を検証するためのログ出力用のコードを埋め込み、根本原因の特定、解決を支援する。 Ask: コードの説明や疑問の解消におすすめ。コードの修正はしない。
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 @Symbolsの一つの例として、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. Cursor の使い方 ⑦コマンド 19 自身で定義可能なカスタムコマンドを設定し、作業の効率化を行うことができます。 例えば、事前に決めた手順に沿ってテストの実行を行わせたり、コードレビューを行わせたりできます。 (下記は/review　でレビューを行うように設定した時の例 )
20. Cursor の使い方 ⑦コマンド 20 コマンドの作り方はチャットで /を押して Create Commandを押すか あるいは.cursor/commands/配下に ファイル名.md でファイルを作成することでコマンドが作られます。 公式サイトにいくつか例 があるので、すぐに試すことが可能です。 マークダウンでどういう観点やどんなことに気をつけてコマンドを実行するかなどを記載しましょう。
21. Cursor の使い方 ⑦コマンド 21 また、コマンドはチャットの中で複数のコマンドを組み合わせたり、引数のような形で 追加の文脈を与えることができます。 例えば/testというテストを行うコマンドを実行させ、テストが問題なければ /review というレビューを行うコマンドを行い、テストに異常があれば修正をさせる というようにしたい場合は下記のように入力ができます。 /test で問題なければ /review を行い、問題があれば修正を行ってから /review を実行してください
22. Cursor の使い方 ⑧ブラウザ 22 Webブラウザの操作を伴う生成 AIの利用が可能です。 例えば、下記のような目的で利用します。 ・E2Eテストを行う ・各ページのスクリーンショットを取る ・アクセシビリティのチェック ・デザインをコードに変換する ・レイアウトやスタイルを直接指定して編集を依頼する
23. Cursor の使い方 ⑧ブラウザ 23 ブラウザにはビジュアルエディタ機能があり、デザインとコードを同時に編集ができます。 直接ブラウザ操作で場所を移動し、 Applyを実行するとhtmlやcssの調整を自動的に行います。
24. 最後に 24 生成AIでのプログラミングはとても便利で、どんどん発達していくと思います。 使いこなして、生産性を上げていきましょう。 Cursor以外にも色々ツールがあるので、興味を持った方はぜひ調べてみてください。