バイブコーディングは、無限のコード行の代わりに自然言語を使用してアプリケーションを作成できるようにすることにより、ソフトウェア開発の世界を再構築しています。 Andrej Karpathyのような先見の明のある人に触発されたこの革新的なアプローチにより、開発者はアイデアを単純に話したりタイプしたりすることができますが、Cursor AIなどのAIツールはヘビーリフティングを処理できます。 Cursor AIは、初心者と専門家向けのワークフローを高速化する画期的なコードエディターです。それは日常的なタスクを自動化し、開発者を解放して創造的なデザインと戦略的な問題解決に焦点を合わせます。この記事では、カーソルAIを使用した雰囲気のコーディングが最新のソフトウェアの構築方法をどのように変換しているかを徹底的に調査します。
バイブコーディングは、プログラミングのパラダイムシフトであり、焦点が構文や手動コーディングから高レベルのデザインとアイデアの表現に移行します。コードを積極的に入力する代わりに、アプリケーションに何をしたいかを説明するだけです。 AIはあなたの指示を受け取り、それらを処理し、最小限の介入で作業コードを生成します。その結果、コーディングエクスペリエンスが限られている人でも、機能的なアプリケーションを迅速に構築できます。この方法は、シリコンバレー以降で波を作っており、ソフトウェア開発を民主化することを約束しています。
「それは実際にはコーディングではありません。私はただ、物を見たり、言ったり、物を走らせたり、コピーをコピーしたりするだけで、主に機能します。 」 - Andrej Karpathy
そのコアでは、バイブコーディングとは、アプリケーションに何をしたいかを説明し、AIツールに必要なコードを生成できることを意味します。それは、アイデアの表現、反復的な改良、およびルーチンコーディングタスクの自動化に関するものです。このプロセスは、機能的で高品質のソフトウェアを形成するための自然言語のプロンプトと継続的なフィードバックに依存しています。
従来のコーディングには、深い技術的専門知識と時間のかかるデバッグが必要ですが、カーソルなどのAI駆動のツールは口頭または書面による指示を解釈し、コードを迅速に生成します。この進化は、開発者の役割を手動のコーディングから創造的な問題解決とシステム設計にシフトします。
また、プロトタイピングの高速化を可能にし、生産性を大幅に向上させます。ありふれたタスクを自動化することにより、非専門家でさえも機能するアプリケーションを構築するための扉を開き、ソフトウェア開発をよりアクセスしやすく革新的にします。
カーソルAIは、自然言語の指示をコードに変換する高度なAI駆動の統合開発環境（IDE）です。最先端の言語モデルとコンテキスト分析を活用することにより、カーソルAIは、開発者がコードを効率的に生成、デバッグ、および維持し、開発プロセス全体を合理化するのに役立ちます。
次に、カーソルAIの仕組みを理解しましょう。関連するステップは次のとおりです。
1。自然言語入力
開発者は、「ユーザー認証ルートの作成」や「この関数のエラーの修正」など、要件を入力またはスピーキングすることから始めます。この入力は、AIの行動の基礎を形成します。
2。コンテキスト分析
コードを生成する前に、カーソルAIはコードベース全体を分析します。プロジェクト構造、コーディング規則、および既存のパターンを理解して、新しいコードが既存のシステムとシームレスに統合されるようにします。
3。AI搭載コード生成
プログラミングタスクのために微調整された強力な言語モデルを使用して、AIは自然言語のプロンプトを動作コードに変換します。ベストプラクティスと確立されたコーディング基準を順守し、信頼できる生産対応コードを作成します。
4。自動化されたデバッグと改良
カーソルAIは、構文エラーと論理的な問題を自動的に検出することにより、コード生成を超えています。デバッグの提案を提供し、開発者のフィードバックに基づいて出力を繰り返し洗練し、手動介入なしに問題を迅速に修正するのに役立ちます。
5。ドキュメントの検索を強化しました
IDEには、開発者が内部プロジェクトドキュメントと外部リソースの両方に迅速にアクセスできるようにするスマートドキュメントシステムが組み込まれています。この機能により、開発者は関連するコードの例、APIドキュメント、および必要に応じてガイドのトラブルシューティングを簡単に見つけることができます。
カーソルAIの重要な機能の一部を次に示します。
カーソルAIは、繰り返しタスクを自動化することにより開発時間を大幅に短縮し、開発者が高レベルの設計と問題解決に集中できるようにします
バイブコーディングに飛び込む前に、カーソルAIをインストールする必要があります。これがあなたを始めるための段階的なガイドです：
公式ウェブサイト（通常はcursor.aiまたは[cursor.com]）にアクセスし、[ダウンロード]ボタンをクリックします。ウェブサイトはオペレーティングシステムを自動的に検出し、正しいインストールファイルを提供する必要があります。
WindowsとMacOSの場合：
ダウンロードしたインストーラーファイルを実行して、他のアプリケーションと同じように、画面上の手順に従ってください。
Linux（ubuntu）の場合：
- Linux用に提供されるAppimageファイルをダウンロードします。
- ターミナルを開き、実行してappimageを恒久的な場所（ /optディレクトリなど）に移動します。
sudo mv [file-of-file] /opt/cursor.appimage
- appimageを実行可能にします：
chmod x /opt/cursor.appimage
WindowsとMacOSの場合：
インストール後、デスクトップショートカットまたはアプリケーションメニューからカーソルAIを起動します。
Linux（ubuntu）の場合：
- 端末を開いて実行して、デスクトップエントリを作成します。
sudo nano /usr/share/applications/cursor.desktop
- 次のコンテンツをファイルに挿入します。
[デスクトップエントリ]
name = cursor
exec =/opt/cursor.appimage
icon =/opt/cursor.png
type = application
カテゴリ=開発;
- ファイルを保存します（ctrl xを押してからy、次に入力します）。
- （オプション）cursor.pngという名前のpng画像を /optディレクトリに配置して、アプリケーションアイコンを設定します。変更を有効にするには、ログアウトしてログインする必要がある場合があります。
最初の起動時には、キーボードショートカット、AIインタラクションの言語、コードベース全体のインデックスを有効にするかどうかなどの必須設定を設定するように求められます。
また、ターミナルから直接カーソルAIを起動できる追加のコマンドをインストールすることもできます。
あなたがビジュアルスタジオコードユーザーの場合、VSコード設定をインポートするように求められる場合があります。このステップでは、拡張機能、テーマ、ユーザー設定、キーボードショートカットをインポートして、おなじみの開発環境を提供します。
メール、Google、またはGitHub資格情報を使用してアカウントを作成します。多くの場合、新規ユーザーは登録時にCursor Proの無料トライアルを受けます。
Cursor AIは、趣味、プロ、ビジネスの3つの異なる価格設定計画を提供しています。無料版または趣味の計画には、14日間のプロトライアル、2,000の完了、および試用期間後に1か月あたり50の遅いプレミアムリクエストが付属しています。月額20ドルのProプランには、無制限の完了、500の高速プレミアムリクエスト、無制限の遅いリクエストが含まれています。毎年請求された場合、月額16ドルの割引価格でPROプランを取得できます。この事業計画は、1か月あたり40ドル/ユーザーの費用がかかり、集中請求、管理者管理、プライバシー執行、およびSSO統合がPROプランに追加されます。
これらの固定価格層とは別に、カーソルAIは、カスタム価格設定と拡張サポートを備えたエンタープライズソリューションも提供しています。 14日間のPROトライアルでは、無制限の完了と500の高速リクエストへのアクセスを提供しますが、一部のユーザーは非公式のトライアルリセットを報告しています。速いリクエストは優先順位を付けられますが、遅いリクエストには遅延があります。 GPT-4OやClaudeなどの大規模なAIモデルを実行すると、高コストが発生するため、価格設定により持続可能性が保証されます。
次に、Cursor AIの助けを借りてFlaskを使用してWebベースのTo Doアプリを構築してみましょう。 AIアシストコーディングを使用することにより、必要に応じて設計と機能を改良しながら、プロジェクトをすばやく設定できます。
FlaskとCursor AIを使用したWebベースのTo Doアプリを作成すると、開発者は設計と機能に焦点を当てながら開発プロセスを合理化できます。このガイドは、プロジェクトディレクトリのセットアップからアニメーションの追加、スムーズで洗練されたアプリケーションを確保することまで、ワークフロー全体を進みます。
カーソルAIは、同じプロンプトに対して異なる出力を生成する可能性があることに注意してください。プロジェクトの要件に合わせて受け取った出力に基づいて、後続のプロンプトを変更することをお勧めします。それでは、始めましょう。
To-Doアプリを生成する前に、プロジェクトの専用ディレクトリを作成することをお勧めします。これにより、カーソルAIが生成されたすべてのファイルを正しい場所に配置することが保証されます。
ディレクトリを作成するように求められ、プロジェクト： 「Flaskを使用してアプリを実行するためにWebベースのWebを構築してください」
「Flaskを使用してWebベースのTo-Doアプリを構築する」プロンプトを求めると、Cursor AIがプロジェクトをすばやく設定します。ワークスペースをチェックし、依存関係のためのEssential Files： Recomations.txt 、メインアプリケーションのApp.py 、HTMLのテンプレート/フォルダー、 CSS用の静的/フォルダーを作成します。
Cursor AIは、タスクを追加、マーク、削除する機能を備えたアプリを構築します。ストレージにSQLiteデータベースを使用し、アニメーション、ホバーエフェクト、ポピンフォントを備えた最新のレスポンシブUIを設計します。各タスクには、追跡用のタイムスタンプも含まれています。
アプリを実行するには、 PIPインストールで依存関係をインストールし、 Python App.pyでサーバーを起動することをお勧めします。上記の画像で見ることができるように、「すべてを受け入れる」をクリックするだけで、すべての変更を受け入れました。
ここでは、ディレクトリが作成されていることがわかります。
以下のビデオでは、カーソルAIがTo Doアプリを作成するために必要なファイルを作成していることがわかります。
ファイルが作成された後、次のステップは、要件から必要な依存関係をインストールすることです。txt。このためにも、カーソルエージェントにプロンプトを提供します。
プロンプト： 「要件をインストールする」
画像でわかるように、カーソルAIの「実行コマンド」ボタンをクリックして、インストールプロセスを確認するだけです。
すべての依存関係をインストールすると、App.pyファイルを実行してFlaskアプリケーションを開始できるようになりました。
プロンプト： 「今すぐapp.pyを実行します」
[コマンドの実行]をクリックするだけです。
アプリを実行した後、このURLをクリックしたとき、WebベースのTo Doアプリhttp://127.0.1:5000を入手しました
アプリは正常に実行されていますが、フロントエンドに満足していません。それはあまりにも基本的に見え、私が望むほど視覚的に魅力的ではありません。デザインを強化するために、スタイリングを改良し、レイアウトを最適化し、インタラクティブな要素を追加してUIをより魅力的にすることにより、カーソルAIに改善を促します。それがどのように行われているか見てみましょう
UIを改善するための迅速な： 「私はアプリの現在のデザインが好きではなく、より青い色を含めて、それをより良くし、目を引くものにします」
これが変更されている変更のビデオです。
これらの拡張機能を適用した後、To-Doリストはより洗練され、視覚的に魅力的に見えます。次に、タスクを追加して、それがどのように機能するかを見てみましょう。
したがって、タスクを追加した後、「完全」や「削除」などのオプションが表示されることがわかります。 「Complete」は作業を行ったことを示し、「削除」はリストからタスクを削除します。また、リストを作成する時間も示しています。
新しい改良されたWebアプリの準備が整いました。
UIは素晴らしく見えます！しかし、それでは、アニメーションを追加しましょう。
アニメーションを追加して、よりスムーズなトランジションを作成し、ユーザーエクスペリエンスを向上させることができます。
アニメーションを追加するためのプロンプト： 「タスクアクション、ボタンホバーエフェクト、および遷移のためのスムーズなCSSとJavaScriptアニメーションを使用して、フラスコトゥDOリストUIを強化します。」
[コマンドの実行]ボタンをクリックすると、アニメーション用のJavaScriptを作成していることがわかります。
カーソルAIがアニメーションを生成すると、それらの機能をテストし、より滑らかなエクスペリエンスのためにそれらを改良することができます。
これは、Cursor AIを使用したVibe Codingによって作成したWebベースのTo-Doアプリの最終結果です。
アニメーションを実装した後、タスクを追加、更新、削除してアプリケーション全体をテストして、スムーズに機能していることを確認します。必要に応じて、ユーザーエクスペリエンスを向上させるために追加の改良を加えます。
また読む：レプリットモバイルアプリを使用して、携帯電話でノーコードAIエージェントをビルドしてください！
Cursor AIなどのプラットフォームを使用したバイブコーディングは、変革的機能を提供しますが、独自の課題もあります。これらの制限を理解することは、開発者が欠点を最大化しながら、欠点を緩和するために重要です。
カーソルAIを使用すると、自分のアイデアを動作コードにまっすぐにコピーしているように感じました。速く、直感的で、本当に楽しかったです。完璧ではなく、まだ人間の監視が必要ですが、コーディングを単純化する方法はゲームを変えるものです。開発者の場合は、バイブコーディングを試してみてください。それはあなたの働き方を変えるかもしれません！
カーソルAIはコーディングを楽に感じさせ、最小限の労力でアイデアを機能的なアプリケーションに変えます。それは完璧ではなく、複雑な論理とバグ修正のための人間の介入が必要ですが、開発を合理化する能力は否定できません。開発者は、繰り返しコーディングタスクではなく、創造性に集中できるようになります。初心者であろうと経験豊富なプログラマーであろうと、カーソルAIを使用したVibe Codingは、イノベーション、速度、効率性が中心的なステージを獲得するソフトウェア開発の将来を垣間見ることができます。
A.バイブコーディングは、開発者が自然言語で望むものを説明するソフトウェア開発への新しいアプローチであり、カーソルAIのようなAIツールはコードを自動的に生成します。
Q2。バイブコーディングは従来のコーディングとどのように異なりますか？A.従来のコーディングには、構文、デバッグ、および構造化コードの手動書き込みが必要ですが、Vibe Codingは高レベルのアイデア表現に焦点を当て、AIがコード生成と改良を処理できるようにします。
Q3。誰がバイブコーディングの恩恵を受けることができますか？A.初心者と経験豊富な開発者の両方は、コーディングタスクを簡素化し、開発をスピードアップし、問題解決と設計により多くの集中を可能にするため、雰囲気のコーディングの恩恵を受けることができます。
Q4。カーソルAIとは何ですか？また、バイブコーディングにどのように役立ちますか？A.カーソルAIは、自然言語のプロンプトを動作コードに変換し、デバッグを自動化し、ドキュメントを支援し、開発をより速く、より効率的にするためのAI駆動のコードエディターです。
Q5。バイブコーディングを使用するためにコーディングを知る必要がありますか？A.プログラミングの知識もありますが、Vibe Codingは、構文と構造を自動的に処理することにより、コードエクスペリエンスが限られている人がソフトウェア開発にアクセスできるようにします。
Q6。 AIに生成されたコードは、人間のプログラマーを完全に置き換えることができますか？A. AIは自動化と効率を支援できますが、複雑なロジックの処理、デバッグ、高品質の安全なコードの確保には、人間の監視が依然として不可欠です。
Q7。バイブコーディングの主な利点は何ですか？A.バイブコーディングは、開発を加速し、繰り返しタスクを減らし、非専門家のアクセシビリティを向上させ、開発者が創造性と戦略的問題解決に集中できるようにします。
以上がカーソルAIでバイブコーディングを試してみましたが、驚くべきことです！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
