はじめに

divxエンジニアの石川です。divxアドベントカレンダー12日目の記事をお送りします。
この度テックブログ執筆の機会をいただいたので、以前やってみていい感じだったテクをご紹介いたします。

Cursorの参照機能とMermaid(or PlantUML)のシナジーを知って欲しい

用語

• Cursor
  • vscodeからフォークしたIDE
  • 使用感はほぼvscodeそのままで、AI活用にフォーカスした機能が追加されている
• Mermaid
  • テキストでUML定義を書くと自動で描画してくれるツール
  • PlantUMLも同じようなツール
  • MermaidはNotionのコードブロックでも利用できるのでMermaidがおすすめ

テンプレ的な作業やボイラープレートコードを減らしたい

フレームワーク通りにコーディングしていると、似たような処理を何度も書くという機会は多いですよね。初期開発以降は、「既存コードからコピペして、クラス名・変数名を変えるだけ」といった作業がよく出てきます。ER図からスキーマファイルやマイグレーションファイルを書き起こすのも、設計が済んでいればただの作業です。
開発に慣れたエンジニアにとっては、このようなテンプレ的な記述を何度も書いても成長の機会にはなりませんし、なるべく効率化したい部分です。

CursorやCopilotの導入で、テンプレ作業は既にほぼ自動化できてる

CursorやCopilotを用いた開発経験がある方はご存知かと思いますが、これらのAIコーディング支援ツールを使って、少しヒントを書けば、続きの記述を予想して補完してくれます。
言語特有の書き方、フレームワークに倣った書き方にも概ね沿った補完をしてくれるので、この時点でテンプレ的コードの記述はほぼ自動化されています。
（Cursorの凄さについての詳細はこちらをご覧ください → https://www.divx.co.jp/media/161）
恐らく、ここまでは皆さんもう活用されているかと思いますが、Cursorとテキストベースの定義ツールにはより強力なシナジーがあるのです！

CursorとテキストベースUML描画ツールのシナジーでより加速！

この記事で一番伝えたい部分です。
Cursorには参照機能があり、これは、テキストベースの定義ツールと組み合わせると非常に強力なシナジーがあります。

サンプル1　ER図を参照してスキーマファイルを生成

erDiagram

users {
	number id
	string name
	string email "unique"
	string password
}

task_lists{
	number id
	number user_id
	string title
	string color "nullable"
}

tasks{
	number id
	number task_list_id
	string title
	string description
	date completed_at
}

users ||--|{ task_lists : ""
task_lists ||--o{ tasks : ""

上記のようなER図を作成していれば、Cursorのチャット機能でER図を参照することができ、スキーマファイルのモデル定義をサクッと作成してくれます。

id指定やnullable, uniqueの指定も汲み取ってくれていますね。

サンプル2　Git差分を参照してマイグレーションファイルを生成

Cursorでは、Git差分を参照する機能があります。
レビュー等にも使えますが、今回はマイグレーションファイルの生成に使います。
尚、この使い方をするには、ドキュメントをソースコードと同じリポジトリでGit管理する必要があります。

Mermaid・PlantUMLで作図しているので、ER図の差分がそのままDBの差分になります。draw.ioやPowerPointで作図していると、デザイン更新等による差分が非常に多く出てしまい、AIが差分を理解しづらくなってしまいます・・・
ER図の差分 = DBの差分は、マイグレーションファイルに記載すべき内容なので、ER図のGit差分を参照することで、マイグレーションファイルの自動生成ができます。
今回はER図で、task_listsテーブルのcolorカラムに、”#000000”のデフォルト値の設定を追加しました。差分に沿ったマイグレーションファイルを作成してくれていますね。

マイグレーション時にDMLを実行する必要がある時や、ビジネスロジック的な意味でのデータの更新作業がある時には、流石にそこまでは察して自動生成してくれません。人の目でレビューして、必要に応じて手書きしましょう。

サンプル3　フローチャートを参照して実際の処理を作成

graph TD;
    A[ユーザー] --> B{ログイン};
    B -->|ログイン成功| C[ダッシュボードにリダイレクト];
    B -->|ログイン失敗| D[エラーメッセージを表示];
    D --> B;

実装メモをフローチャートで書いて、具体化する際のヒントとしても利用できます。
参照と組み合わせて、「このファイルの既存処理に追加してください」と指示すれば、実装がほぼ完了することもあります。

ただ、体感ですがこの使い方は何かしら致命的な欠陥があるコードを出してくる事が多いので、人間の目でもレビューしましょう。

おわりに

デザインに凝らずに定義に凝る事ができるため、前からテキストベースでの作図推進派だったのですが、Cursorとの相乗効果に気づいてからはテキストベース作図は必須とまで感じています。
超軽量で、差分も明瞭で、UMLの記法の流派に左右されることもなく、自動で描画してくれる上、AIとも相性が良いなんて。最高ですね。
弊社では全社的にAI活用を推進しており、高品質・高速な実装が可能な技術者が多数在籍しております。AI活用やWebアプリ開発でお悩みのことがございましたら、以下のフォームよりお気軽にご連絡ください。