AI開発ツールの使い分けと、Curosorを選ぶ理由

Transcript

1. AI開発ツールの使い分けと、Cursorを選ぶ理由 2026/03/13 かんの
2. 自己紹介
3. かんの クラスメソッド株式会社　製造ビジネステクノ ロジー部　フロントエンドエンジニア ウェブ制作会社で静的サイトやWordPress等 のCMSを用いたサイト開発からキャリアをス タート その後、システムのフロントエンドやバックエ ンドの開発も担当 現在はクラスメソッドでフロントエンドエンジ ニア ※本日人生初登壇 自己紹介 3
4. 本日の内容
5. 私のCursorとその他のAI開発ツールの使い分けと、 Cursorを選ぶ理由・感じている強みをご紹介します 本日の内容 5
6. 私のAI開発ツールの使い分け
7. チケットを丸投げして完成まで任せる開発 → CLIベースのAI開発ツール 既存のシステム開発案件で既にコードの土台ができあがっているケースが多い 自分で直接コードを触ることが多い開発 → Cursor 特にデザイン的な要素の影響で人の介入割合が高くなりがちなウェブサイト開発ではCursorが大 活躍しており、もはやなくてはならない存在に 本日は私がCursorの恩恵を最も感じているウェブサイト開発にフォーカスし、なぜCursorを選 ぶのか・どんな強みを感じているのかをお話しします 私のAI開発ツールの使い分け 7
8. なぜCursorを選ぶのか〜Cursorの強み〜
9. 細かなものまで挙げるとたくさんありますが… 本日は特に大きな以下のポイントを取り上げます。 Tab補完 行単位での差分確認と承認 Visual Editor Cloud Agents with Computer Use なぜCursorを選ぶのか〜Cursorの強み〜 9
10. Tab補完
11. 自分でコードを書く場面ではTab補完がとにかく便利で、効率が段違い 同じセクション構成が繰り返されるページでは、補完がどんどん埋めてくれる SCSSファイルに自分でクラスを書くことはほぼなくなった 補完がうまく効くようなHTML構造やCSS設計を意識するようになった こうした工夫によって行単位の補完からブロック単位の補完へ ファイル名もHTMLの内容からCursorが推測しやすい命名にしている 補完に乗る設計にすると、結果的に人間にも読みやすいコードになる Tab補完 11
12. 行単位で差分を確認&承認できる
13. 一部のCLIベースのツールでは差分がまとめて表示されるため、細かな調整がしづらい Cursorでは、エージェントが変更した箇所を行単位で差分確認し、keep / undo を選べる コードの細部まで関与したいとき、自分も手を動かしながら協働で進めたいときにとても便利 余談 文章をAIに手直しさせる時も行単位の差分承認は便利 100%AIが書いた文章にリプレイスすることより、部分的に取り入れることのほうが多いから Cursorは文章編集ツールとしても優秀 行単位で差分を確認&承認できる 13
14. 行単位で差分を確認&承認できる 14
15. Visual Editor
16. Visual Editorとは？ ブラウザ上でUIを直接操作したり、サイドバーから直感的に編集できる機能 主な機能 ドラッグ＆ドロップ — DOM要素をそのまま動かしてレイアウトを変更 サイドバーコントロール — 編集エリアからスタイルを細かく調整 Point & Prompt — 要素をクリックして自然言語で変更を指示。複数の変更を並列実行 Visual Editor 16
17. ブログ本文エリアにデモ動画あり Visual Editor 17
18. 「このセクションを入れ替えて」 「レイアウトをこう変えて」といった要望への対応がとても楽に なった SP版はデザインなしでよしなに作る案件が多い → ブラウザ上で確認しながらサイドバーで直感 的に調整できる ホットリロードでブラウザで確認しながらコードを書いて直す方が早いこともある → あくまで 選択肢が増えたという感覚 Visual Editor 18
19. Cloud Agents with Computer Use
20. Cloud Agents with Computer Useとは？ クラウド上の仮想マシンでエージェントが自律的に動作し、実際のブラウザやアプリを操作して 実装・検証までこなす機能 動画・スクリーンショット・ログを生成してくれる 主な機能 仮想マシン上でのブラウザ操作 — エージェント自身がUIを目で見て判断・修正 クラウド上で動き続ける — ラップトップを閉じても動き続ける Cloud Agents with Computer Use 20
21. ウェブサイト開発においてAIに任せられる領域が格段に増えた 視覚的要素の多いウェブサイト開発では、AIに任せると「コードにバグはないが見た目に違和 感がある」ということが多かった。 なので視覚的要素の多い領域はこれまでAIに頼みづらかったが、この機能で大きく改善され た。 使用例 アニメーションの調整 ウェブサイトを開いたときに出るようなリッチなアニメーションの作成を依頼したところ、 非常に自然な仕上がりにしてくれた 人間が見ると違和感のあるアニメーションの修正を依頼 → 自然な仕上がりにしてくれた これまではこうした対応を依頼しても、自然な仕上がりになることはあまりなかった それ以外にも インタラクションの網羅的な検証 — 操作パターンが多いサイトで、全インタラクション・全パタ ーンの挙動確認を任せると楽。 自然言語で頼むだけでいいから従来のツールよりも楽。 Cloud Agents with Computer Use 21
22. 当日はここでデモを見せましたが、ブログの都合上割愛 22
23. 感じているメリット 処理時間はかかるが、人間の時間が浮くという価値が大きい 修正 → 仮想マシン上のブラウザで確認 → 再修正、というフローを自律的に回してくれる 人間が出力を確認して再度修正指示を出さなくても良い スマホからも確認・修正指示が出せるので、出かける前に投げて出先から調整することも可能 自分で追加調整が必要な場合も、短時間で済む微修正のみになっている ウェブサイト開発におけるAIの弱み的なところが大分改善された Cloud Agents with Computer Use 23
24. まとめ
25. 人の介入が多い開発はCursor、ほぼ介入しない開発はCLIベースのAI開発ツール、という使い分 けをしている Tab補完は地味ながらも、自分でコードを書く場面では効率を大きく引き上げてくれる Cloud Agentsにより、視覚的な要素の調整もAIに任せやすくなった。クラウド上で動くため、 放っておいて出先から確認できるのもありがたい 特に人の介入が多く、視覚的要素が重要なウェブサイト開発において、Cursorはなくてはならな い存在 まとめ 25
26. ご清聴ありがとうございました！