連載 Cursor 実践録②:Laravel開発における具体的な活用法と導入してみて分かったこと

サムネイル

はじめに

エンジニアリング部のデレクです。現在、バックエンドとフロントエンドのエンジニアとしてLaravelを使った開発を行っています。最近、開発効率を向上させるためにCursorを導入し、AIを活用したコーディングを実践しています。

今回の記事では、Cursorを実際のプロジェクトでどのように活用したか、その効果や課題についてまとめました。AIを使った開発に興味がある方の参考になればと思います。

Cursor実践録の第1弾はこちらからご覧ください。
連載 Cursor 実践録①:実装スピードが2倍に─Cursorを使いこなすためのコツ

プロジェクト概要

今回、アイスリーデザインが提供するエンジニアと案件をマッチングするサービス(Eland)のWebアプリをLaravel(Blade)で開発しました。

アイスリーデザインのエンジニア人材プラットフォーム「Eland」のサービスページトップ

エンジニアは履歴書やスキルシートをアップロードすることで、AIがスキル情報を自動登録します。案件登録者は条件に合うエンジニアを検索・スカウトでき、双方が効率的にマッチングできるサービスです。

AIを導入した目的は、スキル登録の自動化と、コードの一貫性・開発速度の向上です。

技術スタック

  • バックエンド : Laravel
  • フロントエンド : Blade, Alpine.js
  • データベース : PostgreSQL

Cursorの具体的な活用方法

コード補完で画面作成を効率化

例えば、新しい画面を作成する際、以下の流れでCursorを活用しました。

①Composerを使って基本コードを自動生成

    動画のように、Composerは web.phpProjectController も生成してくれました。次に、Bladeファイルの置き場所については私から指示していませんでしたが、コードを解析し、これまでの ProjectController のBladeファイルと同じ場所に自動で配置されました。

    さらに、Composerは勝手にテーブルのコードも生成しました。その理由は、list 用のBladeファイルにはすべてテーブルが含まれているため、一貫性を保つために自動生成したようです。

    ②補完機能で一貫性のあるコードを生成

      動画のように、Cursorは現在のコードの流れや文脈をもとに、次に書くべき内容をある程度予測して提案してくれます。

      そして、これらのコードは自分の設定した、cursor rulesに沿って生成してもらうため、命名規則や書き方の統一がしやすく、完成度の高いコードを効率よく仕上げることができました。

      重複した処理や重複したUIコードはCursorによって自動補完されます。例えば、if文で、trueの場合を書いたら、elseの場合も自動的に書きそしてtrueの反転したコードがelseにおすすめされます。

      ③リファクタリングの支援

        このプロジェクトの途中からCursorを導入したため、それ以前のコードはCursorによって生成されたものではありません。そのため、コードの品質向上を目的としてリファクタリングを行っています。

        肥大化した関数や処理を、一つずつComposerに渡してリファクタリングを進めています。

        しかし、別のファイルでリファクタリングした関数を修正する際、関数の使い方が変更された場合でも、自動で検知されないことがあります。そのため、手動で修正する必要がある場合があります。また、エラーが発生した場合は、Composerに報告することで再修正を依頼できます。

        AIを活用したバグ調査

        バグが発生した際、Cursorを使って修正案を提案しました。

        • エラーメッセージを元に、該当コードを自動解析
        • 可能性のある修正方法を提示
        • 実際に試しながら修正を適用

        Cursorで画像からWeb画面を作成する方法についてはこちらの記事でご紹介しています。あわせてご覧ください。
        Cursorで画像からWeb画面を作成してみた

        導入時の設定や工夫

        Cursorのルール設定

        チーム全体で統一された開発を実施するため、導入時には以下のようなルール設定をしました。

        • 言語の統一 : JavaScriptを使用
        • Laravelの書き方 : Bladeを活用
        • 命名規則 : チームの既存ルールに準拠
        • ファイルの配置 : 過去のパターンを、自動で適切なディレクトリへ
        • Cursorの設定やルールをプロジェクトルートに「cursor-rules」として保存
        「Cursor」サービスページトップ
        Cursor – The AI Code Editor

        メリット・デメリット

        導入してみて感じたメリット

        Cursorを導入して感じたメリットは、開発効率とコード品質の両面で大きな効果があったことです。まず、コードの自動補完により手書きの作業が大幅に減り、実装スピードが向上しました。また、既存の書き方や命名規則に沿ったコードが自動で生成されるため、チーム全体でコードの一貫性を保ちやすくなったのも大きな利点です。さらに、AIによる修正提案により、エラーの原因を素早く把握できるようになり、デバッグにかかる時間も短縮されました。

        注意すべきデメリット

        Cursorの導入によって多くのメリットを得られた一方で、いくつか注意すべき点もあると感じました。まず、Cursorはあくまで補助的なツールであり、すべてを自動で完結してくれるわけではありません。AIが提案するコードをそのまま採用するのではなく、最終的な確認や判断は人間が行う必要があります。

        また、Cursorは他のファイルで行った変更を自動で追跡できないことがあるため、関連ファイルとの整合性には注意が必要です。さらに、まれに意図しないコードが補完されるケースもあるためレビューは欠かせません。

        こうした特性を理解したうえで、使いどころを見極めながら活用するのが、AIツールと上手につき合うコツだと感じています。

        まとめ

        Cursorを導入したことで、開発の効率とコードの一貫性が向上しました。特に新機能の作成やリファクタリング時の支援は大きな助けとなりました。

        AIを活用した開発に興味がある方は、ぜひ試してみてください!

        サムネイル
        Cursorで画像からWeb画面を作成してみたの記事サムネイル

        ABOUT US
        デレク
        新卒としてアイスリデザインに入社し、主にフロントエンジニアとして働いています。アイスリデザインの中で、アプリとWebサイトを日々開発し、活動中です。