YATのBlog

当ブログでは商品やサービスの紹介にアフィリエイト広告を掲載しています

Web制作を行う全ての方へ

先日Cursor Composer 1.5が登場しました。そもそもCursor Composerがどういう機能なのか?

AI機能を搭載したコードエディタとして、今や多くの開発者に使われているCursor。2026年2月にComposer 1.5がリリースされ、さらなる進化を遂げました。しかし、「そもそもCursor Composerって何?」と思っている方も多いのではないでしょうか。

今回は、Cursor Composerの基本的な機能から、最新のComposer 1.5で追加された新機能まで、じっくり解説していきたいと思います。

Cursor Composerとは?従来のコーディング支援ツールとの決定的な違い

Cursor Composerは、2024年8月に登場したCursorの機能で、一言で表すなら「AIが主体となってコードを書く、エージェント型のコーディング支援ツール」です。

従来のコード補完ツール(GitHub CopilotのようなTab補完)は、開発者が書いているコードの続きを予測して提案する、いわば「開発者が主役、AIが脇役」というスタンスでした。しかし、Composerは根本的に異なります。Composerでは、開発者が要件を伝えると、AIが自ら複数のファイルを編集し、コードを生成し、実装を完成させるのです。

つまり、「AIが主役、開発者がレビュアー」という関係性に変わったわけです。

Composerの基本的な使い方:Cmd/Ctrl + I で始まる新しいコーディング体験

Composerの起動は簡単です。Cursorエディタ上でCmd + I(Mac)またはCtrl + I(Windows)を押すだけ。すると、画面下部にComposerのインターフェースが現れます。

ここに「この機能を実装してほしい」という要件を自然言語で書くだけで、Composerが動き出します。例えば:

  • 「ユーザー認証機能を追加してください」
  • 「このAPIのエラーハンドリングを改善してください」
  • 「レスポンシブ対応のヘッダーコンポーネントを作成してください」

といった具合です。

Composerは指示を受け取ると、プロジェクト内の複数のファイルを自動的に読み込み、コードを編集・生成します。そして、変更内容をDiff形式で表示してくれるので、開発者は変更箇所を確認し、納得したらApply Allボタンで一括適用できます。

もちろん、気に入らない部分があれば個別に却下したり、追加の指示を出して修正させることも可能です。

Composerを使い始めるための初期設定

Composerを使い始める前に、いくつかの設定を確認・調整しておくと、より快適に使えるようになります。

ステップ1:Cursor Proプランの確認

まず、Composerを使用するにはCursor Proプラン(月額20ドル)以上が必要です。無料のHobbyプランでは利用できないので注意してください。

プランの確認・アップグレードは以下の手順で行います:

  1. Cursorエディタを開く
  2. 右上の歯車アイコン(⚙️)をクリック
  3. 「Settings」を選択
  4. 左サイドバーの「Account」をクリック
  5. 現在のプラン状況が表示されます

Hobbyプランの場合は、「Upgrade to Pro」ボタンからアップグレードできます。

ステップ2:Composerを有効化する

Cursor 2.0以降では、Composerは基本的にデフォルトで有効になっていますが、念のため確認しておきましょう。

  1. Cursorエディタ右上の歯車アイコン(⚙️)をクリック
  2. 「Settings」メニューから「Beta」セクションに移動
  3. Composer」の項目を探す
  4. トグルスイッチがオンになっていることを確認

もしオフになっている場合は、クリックしてオンにしてください。

ステップ3:使用するAIモデルを選択する

Composerでは、使用するAIモデルを選択できます。デフォルトでは最適なモデルが自動選択されますが、用途に応じて変更も可能です。

  1. Composerを起動(Cmd/Ctrl + I
  2. 入力欄の右上にあるモデル選択ドロップダウンをクリック
  3. 利用可能なモデルから選択:
    • Composer 1.5(最新・推奨):高速で実践的
    • Claude Sonnet:高度な推論が必要な場合
    • GPT-4:特定のタスクで有効
    • その他のモデル

おすすめ設定:基本的にはComposer 1.5を使用し、特に複雑な推論が必要な場合のみ他のモデルに切り替えるのが効率的です。

ステップ4:プロジェクトのルールを設定する(重要!)

Composerが生成するコードの品質を大きく左右するのが、この「Rules」の設定です。プロジェクトのコーディング規約やスタイルガイドをあらかじめ設定しておくことで、一貫性のあるコードが生成されます。

  1. プロジェクトのルートディレクトリに「.cursorrules」ファイルを作成
  2. プロジェクトのルールをテキストで記述

例えば、Reactプロジェクトの場合:

# Coding Style
- Use TypeScript for all new files
- Use functional components with hooks (no class components)
- Prefer arrow functions over function declarations
- Use 2 spaces for indentation

# Naming Conventions
- Use PascalCase for component names
- Use camelCase for variables and functions
- Use UPPER_SNAKE_CASE for constants

# File Structure
- Place components in src/components directory
- Each component should have its own directory
- Include component.tsx, styles.module.css, and index.ts

# State Management
- Use React hooks (useState, useEffect, useContext)
- Avoid prop drilling; use Context API for global state

# Styling
- Use CSS Modules for styling
- Use Tailwind CSS utility classes where appropriate

この設定により、Composerは指定したルールに従ってコードを生成してくれます。

ステップ5:.cursorignoreファイルの設定(オプション)

Composerが参照するファイルを制限したい場合、.cursorignoreファイルを作成します。これは.gitignoreと同じ形式です。

プロジェクトルートに.cursorignoreファイルを作成し、除外したいファイルやディレクトリを記述:

node_modules/
dist/
build/
.env
*.log
.DS_Store
coverage/

これにより、Composerが不要なファイルを読み込むのを防ぎ、処理速度が向上します。

実際の使い方:ステップバイステップ

設定が完了したら、実際にComposerを使ってみましょう。具体的な使用フローを紹介します。

実践例:ログイン機能を実装する

ここでは、Reactアプリにログイン機能を追加する例を見ていきます。

ステップ1:Composerを起動する

エディタ上でCmd + I(Mac)またはCtrl + I(Windows)を押します。画面下部にComposerのインターフェースが表示されます。

ステップ2:関連ファイルを指定する

入力欄で@を押すと、ファイル選択メニューが表示されます。今回の実装に関連するファイルを選択しましょう:

  • @src/App.tsx - メインアプリケーションファイル
  • @src/components/ - コンポーネントディレクトリ
  • @src/api/ - API関連ファイル

ファイル名を入力すると候補が絞り込まれます。

ステップ3:具体的な指示を書く

抽象的な指示ではなく、具体的な要件を書くのがポイントです:

Reactでログイン機能を実装してください。

要件:
- src/components/Login/にLoginコンポーネントを作成
- EmailとPasswordの入力フォーム
- バリデーション機能(メール形式チェック、パスワード8文字以上)
- 送信ボタン(ローディング状態を表示)
- エラーメッセージ表示エリア
- スタイリングはTailwind CSSを使用
- TypeScriptで型安全に実装
- ログイン成功時はlocalStorageにトークンを保存
- APIエンドポイントは/api/auth/loginを使用

このように、実装の詳細を明確に伝えることで、期待通りの結果が得られやすくなります。

ステップ4:Composerの作業を確認する

Enterキーを押すと、Composerが作業を開始します。画面には以下のような情報が表示されます:

  • 読み込んだファイル
  • 作成・編集しようとしているファイル
  • 生成中のコード(リアルタイム表示)

ステップ5:Diffで変更内容を確認する

Composerが作業を完了すると、各ファイルの変更内容がDiff形式で表示されます。

  • 緑色:追加された行
  • 赤色:削除された行
  • グレー:変更されていない行

各ファイルごとに内容を確認し、問題がないかチェックしましょう。

ステップ6:変更を適用する

変更内容に問題がなければ、以下のいずれかの方法で適用します:

  • Apply All:すべての変更を一括適用
  • Accept:個別のファイルごとに適用
  • Reject:特定の変更を却下

もし修正が必要な箇所があれば、Composerに追加の指示を出すこともできます:

ログインボタンのスタイルをもう少し目立つようにしてください。
背景色を青色のグラデーションにして、ホバー時に少し明るくなるようにお願いします。

ステップ7:動作確認と調整

変更を適用したら、実際に動作確認を行います。もし問題があれば、再度Composerに指示を出して修正してもらいましょう。

ChatとComposerの違い:どう使い分けるべき?

Cursorには、Composerの他にも「Chat」機能があります。これらの違いを理解しておくと、より効率的に作業できます。

Chat機能は、主に質問や相談をする場です。「このエラーの原因は?」「どういうアプローチが良い?」といった疑問をAIに投げかけ、アドバイスをもらうために使います。コードの生成もできますが、基本的には1つのファイルに対する部分的な修正や提案が中心です。

一方、Composerは実装そのものを担当します。複数ファイルにまたがる大規模な変更や、新機能の追加、リファクタリングなど、実際にコードを書いて適用する作業に特化しています。

使い分けの目安としては:

  • Chat:理解したい、相談したい、方向性を決めたい
  • Composer:実装したい、コードを書いてほしい、複数ファイルを編集してほしい

という感じです。

Composer 1の登場:強化学習で構築された高速フロンティアモデル

2025年10月にリリースされたCursor 2.0と共に登場した「Composer 1」(初代Composerモデル)は、Cursorの開発チームが独自にトレーニングした画期的なAIモデルです。

このモデルの最大の特徴は、強化学習(RL:Reinforcement Learning)によってソフトウェアエンジニアリングに特化した訓練を受けている点です。

通常の大規模言語モデル(LLM)は、インターネット上の膨大なテキストデータから学習しますが、Composer 1は実際の開発環境で「問題を解決する」という経験を積み重ねることで学習しています。具体的には:

  1. 実際のソフトウェア開発の課題が与えられる
  2. ファイルの読み書き、検索、ターミナルコマンドの実行といったツールを使って解決を試みる
  3. 解決の質と効率性が評価され、より良い方法を学習していく

このプロセスを繰り返すことで、Composer 1は単にコードを生成するだけでなく、「どのファイルを読むべきか」「どの順序で作業すべきか」「どう効率的に実装すべきか」といった、実際のエンジニアが行う判断も学習しているのです。

圧倒的な速度:同等モデルの4倍速を実現

Composer 1のもう一つの革新的な点は、その生成速度です。

従来のフロンティアモデル(Claude Sonnet、GPT-4など)と同等の精度を保ちながら、生成速度は約4倍を実現しています。具体的には、1秒間に約250トークンを生成できるとされています。

なぜ速度が重要なのか?それは、コーディング作業における「フロー状態」を維持するためです。AIの応答が遅いと、待ち時間の間に集中力が途切れてしまいます。Composer 1は、人間が考えながらコードを書くのと同じくらいのスピードで動作するため、まるで隣に超優秀なペアプログラマーがいるような感覚で開発を進められるのです。

この高速化は、Mixture-of-Experts(MoE)アーキテクチャと呼ばれる技術を採用することで実現されています。MoEは、複数の専門家モデルを組み合わせ、タスクに応じて最適なモデルを選択することで、効率的に処理を行う仕組みです。

Composer 1.5で何が変わったのか?さらなる進化のポイント

そして2026年2月、Composer 1.5がリリースされました。公式ブログによると、主な改善点は以下の通りです:

1. Thinkingモードの搭載

Composer 1.5には、「考える」プロセスが追加されました。これは、いきなりコードを書き始めるのではなく、まず問題を分析し、アプローチを考え、それから実装に移るという、より人間に近い思考プロセスを取り入れたものです。

このThinkingモードにより、複雑な問題に対してもより的確な解決策を提示できるようになりました。

2. Self-Summarizeによる効率化

Composer 1.5は、自分が行った作業を要約する能力を持っています。これにより、長い会話の中でも文脈を見失わず、効率的に作業を進められるようになりました。

3. 強化学習のさらなる進化

Composer 1からのRL(強化学習)アプローチがさらに洗練され、より複雑なタスクにも対応できるようになっています。公式サイトでは、Composer 1.5がComposer 1を大きく上回るベンチマークスコアを記録したことが報告されています。

Composerを効果的に使うためのコツ

実際にComposerを使ってみて、効果的だと感じたポイントをいくつか共有します。

コツ1:プロジェクトのルールを設定しておく

Cursorには「Rules」という機能があり、プロジェクト全体で守るべきコーディング規約や命名規則を設定できます。Composerはこれらのルールを参照してコードを生成するため、設定しておくことで一貫性のあるコードが出力されます。

コツ2:具体的な指示を心がける

「ログイン機能を作って」だけでは抽象的すぎます。「Reactで、EmailとPasswordの入力フォーム、送信ボタン、エラーメッセージ表示機能を持つログインコンポーネントを作成してください。スタイリングはTailwind CSSで」といった具体的な指示の方が、望む結果が得られやすいです。

コツ3:複数ファイルを@で指定する

Composerは複数ファイルを扱えますが、関連するファイルを明示的に指定することで、より精度の高い編集が可能になります。入力欄で@を押すと、ファイルやフォルダを選択できるので、関連ファイルをあらかじめ指定しておきましょう。

コツ4:Checkpointを活用する

Composerは自動的にCheckpointを保存します。万が一、意図しない変更が適用されてしまっても、チャット履歴から「Checkpoint saved. checkout」をクリックすることで、その時点のファイル状態に復元できます。Gitを使っていなくても安心です。

Composerを使う際の便利なショートカット

効率的に作業するために、以下のショートカットを覚えておくと便利です:

ショートカット 機能
Cmd/Ctrl + I Composerを起動(通常モード)
Cmd/Ctrl + Shift + I Composerを全画面モードで起動
@ ファイル・フォルダ選択メニューを表示
Esc Composerを閉じる
Cmd/Ctrl + Enter 指示を送信

よくあるトラブルと解決方法

トラブル1:Composerが期待通りのコードを生成しない

解決方法:

  • 指示をより具体的にする
  • .cursorrulesファイルでプロジェクトのルールを明確化する
  • 関連ファイルを@で明示的に指定する

トラブル2:生成速度が遅い

解決方法:

  • .cursorignoreで不要なファイルを除外する
  • 巨大なファイル(ログファイルなど)をプロジェクトから除外する
  • ネットワーク接続を確認する

トラブル3:意図しない変更が適用されてしまった

解決方法:

  • チャット履歴の「Checkpoint saved. checkout」をクリックして復元
  • Gitを使っている場合はgit checkoutで元に戻す
  • Cmd/Ctrl + Zで手動でUndoする

Composerの使い分けガイド

最後に、どんな場面でComposerを使うべきか、使わないべきかのガイドをまとめておきます。

Composerが得意なタスク ✅

  • 新規機能の実装
  • 複数ファイルにまたがるリファクタリング
  • ボイラープレートコードの生成
  • テストコードの作成
  • APIエンドポイントの追加
  • コンポーネントの作成
  • データベーススキーマの変更

Composerより手動が良いタスク ❌

  • 1〜2行の小さな修正(Tab補完の方が速い)
  • 既存コードの細かい調整
  • デバッグ時の試行錯誤(Chatの方が適切)
  • パフォーマンスチューニング
  • セキュリティ関連の慎重な実装

Composerの料金体系:無料でも使える?

Composerは、Cursor Proプラン(月額20ドル)以上で利用可能です。

無料のHobbyプランでは、従来のChat機能やTab補完は使えますが、Composerは使えません。本格的に開発業務でCursorを活用するなら、Proプランへのアップグレードを検討する価値は十分にあります。

特に、Composerによって節約できる開発時間を考えれば、月額20ドルは決して高くない投資だと感じています。

Visual Editorとの組み合わせでさらに強力に

Cursor 2.2では、Figmaのようなビジュアルエディタ機能「Cursor Browser」も追加されました(別記事で詳しく紹介していますが)。これとComposerを組み合わせることで、「視覚的にデザインを調整 → Composerにコード化させる」というワークフローが可能になり、さらに効率的な開発が実現します。

エディタ上でデザインを確認しながらコードを編集できるのは、従来のDreamweaverを彷彿とさせますが、AI支援が加わることで、次元の違う便利さになっています。

まとめ:Composerは「AIペアプログラマー」という新しい開発スタイルの象徴

Cursor Composerは、単なるコード補完ツールではありません。開発者が考えた要件を、AIが実際に実装してくれる「AIペアプログラマー」とも言える存在です。

Composer 1で実現された高速性と強化学習による実践的な学習、そしてComposer 1.5でさらに進化した思考プロセスにより、今やComposerは実務レベルの開発タスクを任せられるレベルに達しています。

もちろん、AIが生成したコードを盲目的に信じるのではなく、開発者がレビューし、判断することは依然として重要です。しかし、定型的な実装や、複数ファイルにまたがる退屈なリファクタリング作業などは、Composerに任せてしまうことで、開発者はより創造的な部分に集中できるようになります。

VS Codeを使っている方は、設定をそのまま引き継いでCursorに移行できるので、思っている以上に移行は楽です。これからますますユーザーが増えて、利便性も向上していくでしょうから、思い立ったらサクッと移行してしまいましょう。その方が将来断然楽できますよ!

Cursor 公式サイト

お役に立てたらお願いします🙇

Kyashで送金する

Ad



Share