|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
このガイドでは、Cursor AI を使用して Web アプリケーション、特に暗号通貨の価格コンバーターを構築する方法を説明します。さらに、CoinGecko API を利用して暗号通貨の価格データを取得します。
In this tutorial, we'll be building a cryptocurrency price converter web application using React and fetching crypto prices from the CoinGecko API. We'll also be utilizing Cursor AI, an AI-powered code editor, to streamline our development process.
このチュートリアルでは、React を使用して暗号通貨価格コンバーター Web アプリケーションを構築し、CoinGecko API から暗号通貨価格を取得します。また、開発プロセスを合理化するために、AI を活用したコード エディターである Cursor AI も利用します。
Prerequisites:
前提条件:
Basic knowledge of JavaScript and React (ES6+ features, React components, hooks, state management)
JavaScript と React の基本的な知識 (ES6+ の機能、React コンポーネント、フック、状態管理)
Familiarity with web scraping concepts
Webスクレイピングの概念に精通していること
A text editor or IDE (we'll be using Visual Studio Code)
テキスト エディターまたは IDE (Visual Studio Code を使用します)
Node.js and npm (for our development environment)
Node.js および npm (開発環境用)
CoinGecko API for crypto price and market data (Demo plan is sufficient)
暗号通貨の価格と市場データ用の CoinGecko API (デモ プランで十分です)
Step 1: Setting Up Cursor AI
ステップ 1: カーソル AI のセットアップ
Head over to www.cursor.com and download the latest version of the Cursor AI desktop application. Once installed, open the app.
www.cursor.com にアクセスし、Cursor AI デスクトップ アプリケーションの最新バージョンをダウンロードします。インストールしたら、アプリを開きます。
Next, open a folder in Cursor AI where you want the source code to be saved. In the Terminal within the Cursor AI app, let's set up a basic React app using create-react-app.
次に、Cursor AI でソース コードを保存するフォルダーを開きます。 Cursor AI アプリ内のターミナルで、create-react-app を使用して基本的な React アプリをセットアップしましょう。
Run the following command:
次のコマンドを実行します。
This command will create a React boilerplate project in your designated folder.
このコマンドは、指定したフォルダーに React ボイラープレート プロジェクトを作成します。
Step 2: Using Cursor AI to Build the App
ステップ 2: Cursor AI を使用してアプリを構築する
Now that we have our development environment set up, let's start using Cursor AI to build our crypto price converter web app:
開発環境のセットアップが完了したので、Cursor AI を使用して仮想通貨価格コンバーター Web アプリの構築を開始しましょう。
Open the App.js file in the Cursor AI editor.
Cursor AI エディターで App.js ファイルを開きます。
Select the existing UI code in App.js.
App.js で既存の UI コードを選択します。
Press CTRL + K to edit the selected code.
CTRL + K を押して、選択したコードを編集します。
In the Cursor AI code editor, provide instructions for how you want the code to be modified. For our crypto price converter, you might use a prompt like: “Create a React component for a cryptocurrency price converter. Include input fields for the amount, 'from' currency, and 'to' currency. Add a button to trigger the conversion and display the result.”
Cursor AI コード エディターで、コードをどのように変更するかを指示します。暗号通貨価格コンバーターの場合、次のようなプロンプトを使用できます。「暗号通貨価格コンバーター用の React コンポーネントを作成します。金額、「開始」通貨、および「終了」通貨の入力フィールドを含めます。変換をトリガーして結果を表示するボタンを追加します。」
Cursor AI will generate code based on your instructions. Review the generated code and decide whether to accept or reject it.
カーソル AI は、指示に基づいてコードを生成します。生成されたコードを確認し、受け入れるか拒否するかを決定します。
If needed, provide follow-up instructions to refine the generated code further.
必要に応じて、生成されたコードをさらに改良するためのフォローアップ手順を提供します。
Step 3: Enhancing Styling and Functionality
ステップ 3: スタイルと機能の強化
After accepting the initial code changes from Cursor AI, we'll iterate on our application's styling and functionality:
Cursor AI からの最初のコード変更を受け入れた後、アプリケーションのスタイルと機能を繰り返します。
Use the same method as before to instruct Cursor AI to improve the styling of your component. For example: "Add CSS styles to make the converter visually appealing. Use a modern color scheme and ensure the layout is responsive."
前と同じ方法を使用して、コンポーネントのスタイルを改善するように Cursor AI に指示します。例: 「CSS スタイルを追加して、コンバーターを視覚的に魅力的なものにします。最新の配色を使用し、レイアウトの応答性を確保します。」
To add functionality for handling currency changes, provide instructions like: "Implement functions to handle changes in the input fields. Update the state when the user selects different currencies or enters an amount."
通貨の変更を処理する機能を追加するには、「入力フィールドの変更を処理する関数を実装します。ユーザーが別の通貨を選択するか、金額を入力したときに状態を更新します。」のような指示を提供します。
Cursor AI will provide inline suggestions as you edit the code. You can incorporate these suggestions by pressing the 'Tab' key.
コードを編集すると、カーソル AI がインラインで提案を提供します。 「Tab」キーを押すと、これらの提案を組み込むことができます。
To interact with the CoinGecko API, instruct Cursor AI to add the necessary API calls: "Add a function to fetch real-time exchange rates from the CoinGecko API when the user clicks the convert button."
CoinGecko API と対話するには、Cursor AI に必要な API 呼び出しを追加するように指示します。「ユーザーが変換ボタンをクリックしたときに、CoinGecko API からリアルタイムの為替レートを取得する関数を追加する」。
Continue this iterative process, providing instructions and refining the code until you're satisfied with the result.
満足のいく結果が得られるまで、この反復プロセスを継続して指示を提供し、コードを改良します。
Step 4: Testing and Debugging
ステップ 4: テストとデバッグ
Once you've implemented the core functionality of your crypto price converter, it's time to test and debug:
暗号価格コンバーターのコア機能を実装したら、次はテストとデバッグを行います。
Save your changes and run the development server by entering the following command in the terminal:
変更を保存し、ターミナルに次のコマンドを入力して開発サーバーを実行します。
Open your browser and navigate to http://localhost:3000 to see your application in action.
ブラウザを開いて http://localhost:3000 に移動し、アプリケーションの動作を確認します。
Test various scenarios, such as converting different cryptocurrencies and entering various amounts.
さまざまな暗号通貨の変換やさまざまな金額の入力など、さまざまなシナリオをテストします。
If you encounter any issues, use Cursor AI's chat feature (accessible by pressing CTRL + L) to ask for help. For example: "The conversion result isn't displaying correctly. Can you help me debug this issue?"
問題が発生した場合は、Cursor AI のチャット機能 (CTRL + L キーを押してアクセス可能) を使用して助けを求めてください。例: 「変換結果が正しく表示されません。この問題のデバッグを手伝ってくれませんか?」
Implement any necessary fixes or improvements suggested by Cursor AI.
Cursor AI によって提案された必要な修正または改善を実装します。
Essential Keyboard Shortcuts for Cursor AI
カーソル AI の必須キーボード ショートカット
Keyboard shortcuts are essential for maximizing productivity in any development environment, and Cursor AI is no exception. By mastering these shortcuts, you can significantly speed up your workflow and make the most of Cursor AI's powerful features.
キーボード ショートカットは、あらゆる開発環境で生産性を最大化するために不可欠であり、Cursor AI も例外ではありません。これらのショートカットをマスターすると、ワークフローを大幅にスピードアップし、Cursor AI の強力な機能を最大限に活用できます。
Essential Cursor AI Shortcuts
必須のカーソル AI ショートカット
Advanced Shortcuts and Techniques
高度なショートカットとテクニック
Customizing Shortcuts
ショートカットのカスタマイズ
To avoid conflicts with existing VS Code shortcuts, you can additionally customize Cursor AI's keyboard bindings:
既存の VS Code ショートカットとの競合を避けるために、Cursor AI のキーボード バインディングをさらにカスタマイズできます。
For example, you could remap the AI features to use CMD + U instead of CMD + K:
たとえば、CMD + K の代わりに CMD + U を使用するように AI 機能を再マッピングできます。
Another example of how you could remap Cursor AI shortcuts, this time focusing on remapping the AI Pane shortcuts to use CMD + P instead of CMD + L:
カーソル AI ショートカットを再マップする方法の別の例。今回は、CMD + L の代わりに CMD + P を使用するように AI ペイン ショートカットを再マップすることに焦点を当てています。
In this configuration:
この構成では:
We've retained the remapping of CMD + K to CMD + U from the previous example.
前の例の CMD + K から CMD + U への再マッピングを維持しました。
We've added new mappings for the AI Pane:
AI ペインに新しいマッピングを追加しました。
CMD + P now opens the AI Pane (replacing CMD + L)
CMD + P で AI ペインが開くようになりました (CMD + L の代わり)
SHIFT + CMD + P opens the AI Pane with the selected text (replacing SHIFT + CMD + L)
SHIFT + CMD + P は、選択したテキストを含む AI ペインを開きます (SHIFT + CMD + L を置き換えます)。
ALT + CMD + P toggles the AI Pane visibility
ALT + CMD + P で AI ペインの表示/非表示を切り替えます
This configuration allows you to use CMD + P for AI Pane operations, which might be more intuitive if you'
この構成により、AI ペインの操作に CMD + P を使用できるようになります。
免責事項:info@kdj.com
提供される情報は取引に関するアドバイスではありません。 kdj.com は、この記事で提供される情報に基づいて行われた投資に対して一切の責任を負いません。暗号通貨は変動性が高いため、十分な調査を行った上で慎重に投資することを強くお勧めします。
このウェブサイトで使用されているコンテンツが著作権を侵害していると思われる場合は、直ちに当社 (info@kdj.com) までご連絡ください。速やかに削除させていただきます。