cursorとは？
cursorとは、次世代のエディターです。
AtomやPyCharm等の乱立時代が終わり、VS Code一強となったここ数年。
生成AIのブレイクスルーがなされた2023, 2024年頃を迎え、生成AIネイティブな開発エディターであるCursorが登場しました。
Cursorは、
- 史上最速で、売上$100M（約1.5億円）を到達
- 売上が100倍成長
- 40万人の課金者で基本は継続
という世界を席巻するスタートアップになってきています。
生成AI業界で急成長している企業はOpenAIでなく、実はAIエディターの「Cursor」
— チャエン | デジライズ CEO《重要AIニュースを毎日最速で発信⚡️》 (@masahirochaen) 2025年2月7日
なんと1年で売上$100M（約1.5億円）は史上最速。
売上も100倍成長。40万人の課金者で基本は継続。
所謂ChatGPTのAPIを使ったラッパーアプリが本家を超える快挙。全AI事業者に勇気を与える成長曲線。
↓リサーチ詳細 pic.twitter.com/hJQ2G4boV5
VS Codeユーザーである筆者が、実際にCursorを試してみようと思います。
cursorをインストールする
まずは、公式より、ダウンロードをしてきます。
※ なお、筆者はMacユーザーです
インストールができたら、Sign Upだけします。
あとは、デフォルトの設定で行います。
セットアップが完了しました。
それでは、Cursorで遊んでみようと思います。
cursorの凄さを体験する
Cursor Agentに、すべてのコードを書かせようと思います。
テーマとしては、カレンダーUIの作成です。
結論、いい感じのものができました。
- 月送り、戻し
- ホバー
等、カレンダーUIを作ってくれました。
実際にAIが組んだコードは下記です。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>カレンダー</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="calendar"> <div class="calendar-header"> <button class="prev-month"><</button> <h2 class="month-year">2024年4月</h2> <button class="next-month">></button> </div> <div class="weekdays"> <div>日</div> <div>月</div> <div>火</div> <div>水</div> <div>木</div> <div>金</div> <div>土</div> <div>土</div> </div> <div class="days"> <!-- 日付はJavaScriptで動的に生成します --> </div> </div> <script src="script.js"></script> </body> </html>
style.css
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Arial', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f5f5f5; } .calendar { background: white; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; width: 350px; } .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .calendar-header button { background: none; border: none; font-size: 1.5em; cursor: pointer; padding: 5px 10px; } .calendar-header button:hover { background-color: #f0f0f0; border-radius: 5px; } .month-year { font-size: 1.2em; color: #333; } .weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: bold; margin-bottom: 10px; } .weekdays div { padding: 10px; color: #666; } .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .days div { padding: 10px; text-align: center; cursor: pointer; border-radius: 5px; } .days div:hover { background-color: #f0f0f0; } .days div.today { background-color: #007bff; color: white; } .days div.other-month { color: #ccc; }
scripts.js
document.addEventListener('DOMContentLoaded', () => { const calendar = { currentDate: new Date(), monthYear: document.querySelector('.month-year'), daysContainer: document.querySelector('.days'), prevMonthBtn: document.querySelector('.prev-month'), nextMonthBtn: document.querySelector('.next-month'), init() { this.renderCalendar(); this.addEventListeners(); }, renderCalendar() { const year = this.currentDate.getFullYear(); const month = this.currentDate.getMonth(); // 月の最初の日を取得 const firstDay = new Date(year, month, 1); // 月の最後の日を取得 const lastDay = new Date(year, month + 1, 0); // 月の最初の日の曜日を取得（0-6） const firstDayIndex = firstDay.getDay(); // 月の日数を取得 const daysInMonth = lastDay.getDate(); // 月と年を表示 this.monthYear.textContent = `${year}年${month + 1}月`; // カレンダーの日付をクリア this.daysContainer.innerHTML = ''; // 前月の日付を追加 const prevMonth = new Date(year, month, 0); const prevMonthDays = prevMonth.getDate(); for (let i = firstDayIndex - 1; i >= 0; i--) { const day = document.createElement('div'); day.classList.add('other-month'); day.textContent = prevMonthDays - i; this.daysContainer.appendChild(day); } // 今月の日付を追加 const today = new Date(); for (let i = 1; i <= daysInMonth; i++) { const day = document.createElement('div'); day.textContent = i; if (i === today.getDate() && month === today.getMonth() && year === today.getFullYear()) { day.classList.add('today'); } this.daysContainer.appendChild(day); } // 次月の日付を追加 const remainingDays = 42 - (firstDayIndex + daysInMonth); for (let i = 1; i <= remainingDays; i++) { const day = document.createElement('div'); day.classList.add('other-month'); day.textContent = i; this.daysContainer.appendChild(day); } }, addEventListeners() { this.prevMonthBtn.addEventListener('click', () => { this.currentDate.setMonth(this.currentDate.getMonth() - 1); this.renderCalendar(); }); this.nextMonthBtn.addEventListener('click', () => { this.currentDate.setMonth(this.currentDate.getMonth() + 1); this.renderCalendar(); }); } }; calendar.init(); });
VS CodeにてGithub Copilotを使っている筆者にとって、魅力的だった点ですが、
[1] 本当に手間いらずで、実装してました。
最初の指示文以外は、”Accept”を押すだけで作ってくれました。
また、システムへの権限不足は自分で認知して、権限をもらう等してくれます。
[2] ユーザーインターフェイスが生成AIネイティブに組まれていることで、初回起動時から、プロンプト画面があり、AgentやChatがContextを踏まえてやってくれます。結構感動しました。
VS Codeから移行は組織ルールなどもあり、簡単ではありませんが、私個人の開発において少なくとも今後は、Cursorベースでやろうと思います。
"イノベーションのジレンマ"がある限り、筆者としてはGithubやVS CodeよりもCursorはかなりやってくると思っています。
New Big Techになるかはわかりませんが、Salesforceに買収されたSlackぐらいの規模になる可能性は高いと思っています。
