CursorはAI機能を搭載したVSCodeの拡張版で、フロントエンド開発を効率化するための自動コード生成やスタイリング提案が可能。新機能「Composer」というAIエージェント機能(「目標」を与えて、それを遂行するまでAIが自律的に動き続ける機能)により、複数のタスクを一度の指示で実行できます。無料プランと有料プランがあり、GitHubとの連携も簡単にできます。
今年は爆速でコーディングできるようになりたい!
毎回同じような処理を手で書くのは疲れた…
jsの記述に毎回超時間がかかる…
と思っていたWebエンジニアのあなた!!
あなたがこれを発見したこと。これは縁です。
本コースを受講すると、AIコーディングをすぐに使い始められます!
動画にて、実際にAIコーディングをどのように使用して爆速化するのかを見てみましょう。
画像ファイルをプロンプトに添付することでもHTML、CSSのコードを生成できます!
最初から精度高く完成させるのは難しくても、追加指示をして調整かけることができます。
画像からおおよそのコードを生成できる!?めっちゃ気になる!
こういうところでサクッと完了できると、サクサク作っていけそう!
ここライトボックスにして、とか細かい機能追加要件が発生してもすぐ対応できるよね!
いかがでしょう?
AIを使わないで記述してもいいですが、仕様要件を満たすことがゴールであれば、結果できるものは同じです。
もちろん、コード生成したあとに、そのコードに欠陥がないかをレビューするのはエンジニアの仕事で、むしろAIコーディングでは、こここそがエンジニアの仕事になると思います。
なのでコーダーの方はひとつ上流職になる感覚です。
AIでエンジニアは不要になる、と言う人がいますが、上記のユースケースを見るとわかりますが、生成されたコードが何をしているかわわからなければ仕事では使えません。生成されたものがレビューできない場合は、「それっぽいもの」が作れるところで終わりです。
実際には、誰もが意図したコードを生成してそれを仕事にすることは今のところ不可能です。
AIに我々が駆逐されることはないのね、ホッ⋯
2024年4月のQiita調査によると、GitHub Copilotが35%のシェアで首位を維持しています。続いて、2位、3位にCodeium(15%)、Replit GhostWriter(10%)が続き、Amazon CodeWhisperer(8%)が第4位となっています。
ただし2024年4月のQiita調査によると、GitHub Copilotが35%で首位を維持しているのは、バックエンドや大規模なプログラムの開発において、その汎用性と精度が評価されているためだと考えられます。
また、Codeium(15%)、Replit GhostWriter(10%)、Amazon CodeWhisperer(8%)と続いていることから、これらのツールは複雑なロジックや多数のライブラリを扱うプログラマーやバックエンドエンジニアに支持されている傾向があります。
一方、Webコーダーにとっては、HTML、CSS、JavaScript、Liquidなどのマークアップやフロントエンド固有の技術が中心となります。
そのため、エディタとの統合や、フロントエンド特有の補完、ライブプレビュー、デザインとの連携などが重要なポイントになります。
Cursorは、こうしたWebコーダー向けの機能やUIに特化している可能性があり、Webコーダーの作業環境にフィットしやすいという強みがあると言えます。
つまり、バックエンドやプログラミング中心のツールと比較すると、WebコーダーにとってはCursorの方が使いやすく、ニーズに合った機能が提供されることでシェアを伸ばす可能性が十分にあると考えられます。
我々はCursorがふさわしいのね!
続きとなる以下の内容については、おそらく動画を見ながらのほうが理解が深まると思います。
【クーポン適用後価格】
¥3,000 → ¥1,500
【クーポン使用可能期限】
【クーポンコード】
DISCOUNTHALF
【クーポン付き受講リンク】
Deep Researchの調査結果ですが、
AIツールを「毎日利用」するエンジニアが12%、「週数回」が36%で、合わせて約半数が定期的に活用しています。
主要用途として「文章作成」(46%)、「コード作成支援」(26%)、「バグ検出」(23%)が挙げられ、プログラミング関連タスクが重要な利用領域となっています。
調査では、AI導入者の70%が効果を実感しており、特にコーディング支援での有用性が認識されています。
複数の調査で一貫して、コーディング支援が生成AIの主要用途トップに位置付けられています。
2024年12月調査では、AI導入者の38.9%が「コーディングやコードレビュー/構築」に活用していると回答しています。
Goolgeキーワードプランナーで”AIコーディング”で調べたところ、”コーディング ai”という組み合わせは前年比で900%増でした。
この業界の変化のスピードは目まぐるしく、数年後なんて悠長なスピードでなく、おそらく今年中にはほぼすべてのエンジニアがコーディング補助にAIを使うのではないかと思います。
ここからはCursorの導入方法をざっくりお伝えするよ!
Cursorは、Anysphere(エニースフィア)社によって開発され2023年に公開された、
AIを活用した次世代のコードエディタです。従来のコードエディタの機能に加えて、GPT-4、Claudeなどの強力なAIモデルを統合でき、コーダーの生産性を劇的に向上させます。
Cursorは操作性がVSCodeとほぼ同一なため、エディタの基本機能、ショートカットキー、UIの配置などは、今までの経験をそのまま活かすことができます。
つまり、VSCodeで使い慣れた操作方法を変更する必要がなく、新しく覚えるのはAI機能に関する部分だけで済みます。
参考)
Cursor
OpenAI社から800万ドルの出資
ポイント! 新機能である”Composer”を使えるのは、Proプランからになります。
【プラン概要】 Cursorには3つのプランがあります:
• Hobby(無料):2週間のPro試用期間、月2000回のコンプリーション、月50回の遅いプレミアムリクエスト
• Pro($20/月):無制限のコンプリーション、月500回の速いプレミアムリクエスト、無制限の遅いプレミアムリクエスト、日10回のo1ミニ使用可能
• Business($40/ユーザー/月):組織全体のプライバシーモード、チーム課金、管理ダッシュボード、シングルサインオン
無料プランでも2週間はProプランの機能を使えるんだね!いったん2週間使ってみて見極めて見よう!
Cursorのダウンロードとインストールは以下の手順で簡単に行えます:
ポイント! ちなみに、GIthubアカウントでログインできていると、Cursor機能の一つである、”Githubとの連携”のさいにより簡単にセットアップ可能です。
Cursorアカウントを通常のメールアドレスで作成しても、後からGitHubアカウントとの連携設定が可能であることがほとんどです。
ただし、初期設定がやや手間になる可能性があります。
VSCodeからの設定移行をすることで、VSCodeを使っていた方は同様の開発環境をそのまま引き継ぎながら、新しいAI機能を追加することができます。
VSCodeからの設定をインポートする手順は以下の通りです。
settings.json
ファイルです。この設定ファイルを活用することで、開発環境を細かく調整し、プロジェクトごとに異なるニーズに応じた環境を構築することができます。 settings.json
は通常、以下のディレクトリに保存されています。 C:\\Users\\<ユーザー名>\\AppData\\Roaming\\Code\\User\\settings.json
~/Library/Application Support/Code/User/settings.json
インポート後は、設定が正しく反映されているか確認し、必要に応じて微調整を行うことをお勧めします。
独自のOpenAI APIキーを使用することで、より柔軟なAI機能の利用が可能になります。APIキーの設定は簡単で、設定画面から直接入力できます。これにより、使用量の管理や請求の一元化、さらにはカスタマイズされたAIモデルの利用なども可能になります。
ポイント! Cursorのいくつかの機能(Tab、Apply from Chat、Composer)はカスタムモデルを必要とし、これらのAPIキーの登録では使用できません。 そのため、Cursorの最新の機能をフルに利用するためには、APIキーではなくCursorのProプランかBuisinessプランのアカウントを登録する必要があります。
モデルの選択は、設定メニューから簡単に変更することができます。プロジェクトの規模や要件に応じて、適切なモデルを選択することをお勧めします。
Cursorでは複数のAIモデルを選択できます。デフォルトではGPT-4oが使用されますが、特定のタスクや開発言語に特化したモデルを選択することも可能です。各モデルの特徴や得意分野を理解し、プロジェクトの要件に最適なモデルを選択することで、より効率的な開発が可能になります。
参考)
続きとなる以下の内容については、おそらく動画を見ながらのほうが理解が深まると思います。
このコースを見ながらセットアップや操作方法をやってみれば、AIコーディングの世界が広がっているのね!
いろんな資料を見ながら導入方法や操作方法を調べる手間が省けて、助かるね!
【クーポン適用後価格】
¥3,000 → ¥1,500
【クーポン使用可能期限】
【クーポンコード】
DISCOUNTHALF
【クーポン付き受講リンク】