Go to Qiita Advent Calendar 2024 Top
LoginSignup
7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@i-chini-techoesin株式会社Techoes

Cursorを使ったシンプルなWebアプリ作成体験

Last updated at Posted at 2024-11-21

目次

はじめに

こんにちは、TechoesのCです。この記事では、簡単なWebアプリを作成しながら、AIコード補完ツールであるCursorを実際に使ってみた体験を共有します。Cursorを使うことで、コードを書く作業がどれだけ効率化できるのかを確認し、日々の開発業務にどのように役立つかを探っていきます。

Cursorについて

概要

Cursorは、AIを活用したコード補完やリファクタリング、自動生成をサポートする次世代の開発ツールです。従来のコードエディタと比較して、以下のような特徴があります：

  • コード補完：入力途中のコードをAIが解析し、適切な候補を提示。特に複雑なロジックや長いコードを記述する際に威力を発揮します
  • リファクタリング：冗長なコードを簡潔にし、または構造を最適化する提案を自動で行います
  • エラー検出：コード内の潜在的なエラーを検出し、修正方法を提案します
  • VS Codeベースの設計：CursorはVS Codeをベースに開発されており、既存のVS Codeユーザーにとっては馴染みやすい設計です。また、拡張機能の一括インポートにも対応しており、インストール後すぐに利用を開始できます
  • 多言語対応：TypeScript、Python、JavaScript、Go、Ruby、C++など、さまざまなプログラミング言語をサポートしています

これらの機能を活用することで、Cursorはプログラミング初心者から熟練者まで幅広い開発者の作業効率を向上させます

インストール手順

Cursorをインストールして利用する手順は非常に簡単です。以下の流れに従えば、すぐに利用を開始できます：

  1. 公式サイトからダウンロード
    まず、公式サイトにアクセスしてアカウントを登録します。登録が完了したら、OSに対応したインストーラーをダウンロードしてください

image.png

  1. インストールと起動
    ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールを完了させます。インストール後、Cursorを起動します

  2. VS Codeからの移行（任意）
    VS Codeを利用した経験がある場合、現在使用している拡張機能やプロジェクトをCursorに移行することが可能です。ただし、一部の拡張機能は再インストールが必要な場合がありますので、ご注意ください

これで準備完了です！インストール後は、プロジェクトを開いてCursorの機能を体験してみましょう。

料金プラン

  • Hobby（無料）

    • Proの2週間無料トライアルを含む
    • 2000回のコード補完リクエスト
    • 50回のスロー・プレミアムリクエスト

  • Pro（月額 $20）

    • Hobbyプランのすべての機能を含む
    • 無制限のコード補完
    • 500回のファスト・プレミアムリクエスト/月
    • 無制限のスロー・プレミアムリクエスト
    • 10回/日までのoi-mini利用

  • Business（月額 $40 / ユーザー）

    • Proプランのすべての機能を含む
    • 組織全体のプライバシーモード
    • チーム向け集中請求
    • 使用状況を確認できる管理ダッシュボード

image.png

また、新規登録時には2週間のProプラン無料トライアルが提供されます。このトライアル期間を活用して、Cursorのコード補完やリファクタリング機能を存分に試すことができます。

この記事では、このProのトライアル期間を利用して、コード構成やCursorの実際のパフォーマンスを確認していきます。

プロジェクトの実装と機能追加体験

今回、簡易的なユーザー管理システムを制作し、Cursorのコード補完やリファクタリング機能を試します。

プロジェクト概要

  • ユーザー機能

    • ユーザー登録：新しいユーザーのアカウント作成機能
    • ログイン/ログアウト：認証トークンを利用したセッション管理
    • 個人情報管理：プロフィール情報の編集や閲覧

  • 管理者機能

    • ユーザー管理：登録されたユーザーの一覧表示、編集、削除
    • データ統計表示：システム内の利用状況やユーザー動向の可視化
    • システムモニタリング：リソース使用状況やエラー検出などの管理

このユーザー管理システムを通して、Cursorの機能を利用しながら各工程を実装していきます

基本機能の実装

Cursorの基本操作と特徴

Cursorを起動すると、VS Codeとほぼ同じインターフェースと操作性を持つため、VS Codeの使用経験がある方はすぐに慣れることができます。拡張機能のダウンロード方法もVS Codeと同様です
image.png

Chat機能の起動方法

  • 右上のチャットアイコン：画面右上にあるチャットボタンをクリックすることで、チャットウィンドウを開くことができます

image.png

  • Ctrl + I：
    Ctrl + I を押すことで、対話型ウィンドウが開きます。このウィンドウでは、CursorのAIがコードを自動生成する機能を活用できます。特にコードの構築や生成を行う際に、この方法が頻繁に使用されます
    image.png

コード生成の流れ

要求を入力
対話型ウィンドウ（Ctrl + I または右上のチャットアイコン）を開き、実装したい機能や要件を入力します。
image.png

Enterキーで生成開始
要求を入力したらEnterキーを押すだけで、Cursorが自動的にコードを生成します。

  • 必要なファイルやディレクトリ構造が自動的に作成されます。（最終的には構成に応じて変化します）
  • 生成されたコードには簡単な構造説明やコメントが含まれており、コード全体の理解がしやすくなっています
  • 自分でコードを書く必要がない場合でも、生成された内容を確認することで、基本的なコードの構造や動作を理解できます
    image.png
  • すべての変更を確認した上で、「Accept all」ボタンを押すことで修正内容が正式に適用されます。これにより、不必要な変更が反映されることを防ぎ、ユーザーに安心感を与えます
    image.png
  • コード内で気になる部分やエラー箇所を選択し、そのまま対話型ウィンドウで質問を入力します。Cursorがその場で適切な回答や修正提案を返してくれます
    • エラーが発生した箇所を選択すると、自動的に問題点が表示されます。青いボタンを押すと、チャット内に質問が自動生成されます
      image.png
    • 質問内容や回答はすべて自動的に生成されます
      image.png
    • 提案された修正内容が適切であれば、該当箇所に表示される「Apply」ボタンを押すことで、即座に修正が反映されます
      image.png
    • 自分で改善点を提案することも可能で、チャットが自動的に問題を解析し、適切な修正内容を提示します。提案された修正内容が適切であれば、その修正や追加（例えば、現在のようなコメントの追加）をコードに簡単に反映させることができます
      image.png

実装ページの確認と機能の追加

まず、生成したコードで実際に表示されたのは以下の状態

  • 登録画面

    • メールアドレスとパスワード入力欄
    • 「ログイン」ボタン：データベースを接続して、対応するユーザーを認証
    • 「新規登録」ボタン：登録画面へ移動
    • 入力値の空白検出：空欄の場合はエラーメッセージを表示
      image.png

  • 新規作成画面

    • 入力欄：ユーザー名、パスワード、メールアドレス
    • 入力値の検証（空白検出）
    • 登録成功時はログイン画面にリダイレクト
      image.png

  • 管理画面

    • ログイン中の管理者情報を表示
    • ログイン後、管理者ページではデータベース内のユーザーデータが表形式で表示されます
      DB追加：
      image.png
      管理画面：
      image.png

今回の記事では、ページの機能テスト内容については尺の都合で割愛しています。ただし、Cursorを使用すれば、コードを一行も手動で書くことなく、環境構成から機能実装までが自動生成されます。

これらのページは基本的な要件を満たした状態で問題なく動作し、大部分の機能が初期生成によって実現されています。ここからさらに、管理者ページの機能を追加・改善していきます。

機能追加

表機能の強化
  • カラムクリックで並び替え：各列のヘッダーをクリックすることで、昇順または降順でデータを並び替える機能を追加
  • 各行の操作ボタン：各ユーザー行の末尾に操作ボタンを配置
各種操作ボタンの追加
  • 「編集」ボタン：
    • ユーザー情報を編集するためのモーダルウィンドウを開く機能を追加
    • 編集可能な項目：ユーザー名、メールアドレス、パスワード、管理者権限
  • 「削除」ボタン：
    • ユーザーの状態（削除済みまたは正常）を切り替える機能を実装
  • 「統計」ボタン：
    • ユーザー状態の統計情報や特定の期間の変化データをエクスポートする機能を実装
検索機能
  • 「更新」ボタン：
    • 追加されたデータが即座に反映され、ページ上で確認可能
検索ボックス
  • ユーザー名またはメールアドレスを基に、ユーザーを検索する機能

これらの機能を追加することで、Cursorを活用して上述の機能を実装する体験を通じて、Cursorを使ったシンプルなWebアプリ作成がどの程度効率的に進められるかを検証します。

最終管理画面

管理画面（初期状態）

image.png

検索・フィルタリング機能

image.png

操作ボタンの機能確認

  • ユーザー情報を編集：
    image.png

  • ユーザー情報を削除：
    image.png

  • ユーザー状態の統計情報や特定の期間の変化データをエクスポートする機能：
    image.png

実際に生成されたUIは期待通り動作し、データベースとの連携についても基本的な操作が正常に実現されました。また、今回の体験を通じて、Cursorを使えば、さらに複雑な機能も十分実現可能であることを実感しました。

まとめ

Cursorを活用することで、開発初期の効率を大幅に向上させられました。環境構築や基本的な機能の実装を短時間で完了させることができ、開発者の負担が軽減されます。また、コード補完やエラー修正の提案機能により、問題解決のスピードがさらに向上しました。

Cursorは基礎的な開発効率の向上に非常に有用ですが、複雑な開発では適切な機能分割と開発者自身の介入を組み合わせることで、さらに効果的に活用できるツールといえるでしょう。

以上、Cursorを活用したWebアプリ作成の体験談でした。

7
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?