Slide 1

Slide 1 text

生成AIを使ってプログラミング を楽にしよう

Slide 2

Slide 2 text

生成AIとは? 2 AI(人工知能)は人間のように推論したり学習するコンピューターのことです。 今までのAIは既存のデータを学習して、未来のことを予測したり、現状分析をしたりするのがメイン。 生成AIは文章や画像、プログラムなどコンテンツを生み出す AIのことです。 この生成AIを使うことで、プログラミングの生産性を上げることができるので使ってみましょう!

Slide 3

Slide 3 text

生成AIをプログラミングに用いる利点 3 ● エラー・バグの早期特定 /修正 ○ 間違いの指摘/修正方法の指示 ● 開発スピードの向上 ○ コードの自動生成 ○ 既存コードのリファクタリング (整理・最適化) ● コードの理解補助 ○ コードの解説 ● ドキュメント生成 ○ コードを説明する資料やコメントを自動生成

Slide 4

Slide 4 text

生成AIを使う上で気をつけること 4 ● ハルシネーション ○ あたかも事実かのように誤情報を言うことがあります。 ○ 自分自身で二次情報を調べたり、批判的思考で AIの出力結果を見るようにしましょう。 ● プライバシーやセキュリティ ○ 入力した内容が学習データに使われてしまう可能性があります。 ○ 個人情報や、ID・パスワードなど秘密情報を入力することは避けましょう。 ● 著作権侵害 ○ 出力される内容が既存の著作物にあまりにも酷似している場合、権利侵害になることも ○ 過去のデータを学習しているため、似ているものを知らずに出力することがあります。 ○ 自分自身で必ず問題ないかを確認しましょう。

Slide 5

Slide 5 text

実際に生成 AIを使ったプログラミングをしてみよう 5 Cursor (https://www.cursor.com/ja) を使ってみよう 本格的に使うには課金が必要ですが、無料で体験することができます!

Slide 6

Slide 6 text

Cursor とは? 6 Cursorとは「AI支援機能が搭載されたコードエディタ」です。 Visual Studio Codeをベースに作られているため、VS Codeを使ったことがあれば学習が容易です。 プランについて Cursor Hobby Cursor Pro Cursor Business 料金 無料 $20/月 $40/ユーザー/月 コードの自動補完 2000回/月 無制限 無制限 低速でのAI利用 50回/月 無制限 無制限 高速でのAI利用 ❌ 500回/月 500回/月

Slide 7

Slide 7 text

Cursor の使い方 ①コードの部分生成 /修正 7 cmd+k(windowsはCtrl+k)を押すことで、すぐに生成AIに指示を出すことができます。 問題なければAccceptをして、AIの生成したコードを反映できます。

Slide 8

Slide 8 text

Cursor の使い方 ②チャット 8 画面右側にあるチャット機能を駆使してコードの説明をさせたり、バグがないか確認させたり コードについて相談したりすることができます。

Slide 9

Slide 9 text

Cursor の使い方 ②チャット 9 3種類のモードからチャットモードを選ぶことができます。 Agent: 複数ファイルを編集したり、コマンドの実行も可能。複合的にタスクを自動実行します。 Ask: コードの説明や疑問の解消におすすめ。コードの修正はしない。 Edit: 細かい部分的なコードの修正におすすめ。コードの一部を直接編集します。

Slide 10

Slide 10 text

Cursor の使い方 ②チャット 10 Agentの実行例。 HTMLを編集して、git commitまで実行

Slide 11

Slide 11 text

Cursor の使い方 ③@Symbols 11 質問や命令を指示する上で、参照して欲しい情報を選択することができる。 ● Files & Folders: 特定のファイルやフォルダを参照する ● Code: 特定のコードブロック、関数などを参照する ● Docs: プロジェクト内のドキュメントを参照する ● Git: Gitリポジトリの内容を参照する ● Past chats: 過去やりとりしたチャット内容を参照する ● Cursor rules: Cursorに指示したプロジェクト固有のルールを参照する ● Terminals: ターミナルに入力したコマンド内容を参照する ● Linter errors: 現在開いているファイルの Lintエラー・警告を参照する ● Web: Webサイトの情報を参照する ● Recent changes: 直近のコードの変更履歴を参照する

Slide 12

Slide 12 text

Cursor の使い方 ③@Symbols 12 @Symboleの一つの例として、Docsを使うと、 特定のWebサイトのドキュメントを学習させることができます。 例えば、MDN(https://developer.mozilla.org/en-US/)というWeb開発者向けの情報まとめサイトを学習 させることで、下記のように回答内容が変化します。

Slide 13

Slide 13 text

Cursor の使い方 ④cursor rules 13 cmd + shift + p (windowsはctrl + shift + p)で開く窓からcursor ruleと入力することで作成できます。 ルール名を決めて、そのファイルの中にルールを記載することができます。 コードの編集時等に生成 AIに記載したルールを守らせて命令を出すことができます。

Slide 14

Slide 14 text

Cursor の使い方 ④cursor rules 14 例えば、こんなルールを付け加えます。 ## 説明の口調について - 毎回語尾にだってばよをつけること すると説明の口調が変わります。

Slide 15

Slide 15 text

Cursor の使い方 ④cursor rules 15 実際には、下記のようにコードをより正確に記載してもらうようなルールを設定するのが良いです。 ## あなたの持つ能力・特性 ● 高度な問題解決能力を持つ ● 誰にでもわかりやすくシンプルなコードを書く ● 不明点や疑問点があれば推測するのではなく、確認を行い意図を必ず確かめる ## 品質評価 ● 各コードを事前に実行・検証し不具合がないかを検証すること ● エラーがあれば即座に修正すること ## 説明 ● 1行ずつどんなコードを書いているか説明を入れてください。

Slide 16

Slide 16 text

Cursor の使い方 ⑤コードの自動補完 16 Tabキーを押すことで、コードの自動補完が行われます。 次に何を記載するかを予測して、グレーアウトでコードが記載されます。 そのまま採用したければ Tabキーを押すことで採用され、不採用ならそのままコードを記載します。

Slide 17

Slide 17 text

Cursor の使い方 ⑥モデルの変更 17 claude系やdeepsheek,geminiやgptなど色々なAIモデルを使用することができます。

Slide 18

Slide 18 text

Cursor の使い方 ⑥モデルの変更 18 画面上部のCursor -> 基本設定 -> Cursor Settings -> Models からモデルの変更ができます。 AIモデルによって特徴があるので、色々使ってみて比較したり、調べてみましょう!

Slide 19

Slide 19 text

最後に 19 生成AIでのプログラミングはとても便利で、どんどん発達していくと思います。 使いこなして、生産性を上げていきましょう。 Cursor以外にも色々ツールがあるので、興味を持った方はぜひ調べてみてください。