🐙

エンジニア必見!コーディング以外でのCursor 活用術

2024/11/09に公開

Cursorについて

個人開発をする人の最強の味方Cursor。かくいう私もCursorのおかげで、経験年数2年弱のなんちゃってエンジニアからフルスタックエンジニアに転身し、アプリケーションを開発できるように。
そんな最強ツールであるCursorの個人的に気に入っている使い方をご紹介!!

🚀 活用術 1:インタラクティブにマインドマップ生成

マインドマップを生成できるツールがいくつかありますが、課金が必要だったり、編集ができなかったりといまいち柔軟性に欠けています。
そこで今回ご紹介するのが、拡張機能のMarkmapを使用したマインドマップの生成です!
例:

こんな感じのマインドマップが簡単に作成できます。
さらに、ここから手動で調整したり、特定の場所をAIに深掘りさせたりすることも可能です。

手順

まずは"Markmap"という拡張機能をインストールします。

インストールが完了したら、「.md」拡張子のファイルを作成します。
(そう、Markmapはmdファイルをマインドマップで表示する拡張機能なのです)

ファイルを作成したら、Cursorチャット欄でAIに「~~~をMarkmap形式で出力してください。」と指示を出します。今回は「フルスタックエンジニアになるまでの道のりをMarkmap形式で出力してください。」と指示を出しました。

出力された内容をファイルに反映したら、ファイルのタブの右側の方にある「Open as markmap」をクリックします。
するとマークダウンで書かれた出力された内容がマインドマップ形式で出力されます。

編集例

出力されたマインドマップを一部編集したり、もう少し詳細に出したいこともあるかと思います。そんなときは該当する箇所を選択し、「Ctrl+K」でチャット欄を開いて、詳細化する指示を出します。


他にも、全体に対して「もう一階層深掘りしてください。」や「アクションプランレベルまで分解してください。」など求めている形式に色々を変更することも可能です。

💡 活用術 2:フローチャートやシーケンス図のUML 作成

エンジニアであれば経験したことがあるであろう、、、フローチャートやシーケンス図をエクセルの図形で作成した経験が。
処理が間に追加されることで、全体の位置を調整しないといけなかったり、大変ですよね。
そんな時に使えるのがCursorを使用したUMLの作成です!
こちらの方法もマインドマップ同様にマークダウン形式で記述したものを拡張機能で表示します。
例:

手順

今回使用する拡張機能は「Markdown Preview Mermaid Support」です。

拡張機能をインストールしたら、「.md」拡張子のファイルを作成し、チャット欄で「~~をmermaid記法を使用して作成して」と指示を出します。今回は「ECサイトのログイン機能のシーケンス図をmermaid記法を使用して作成してください。」と指示しました。
すると以下のような内容が出力されます。

※3重の「~」もしくは「`」で囲む必要がありますが、Cursorがつけてくれないこともあるので、もしついていない場合は自身で付けてください。

ファイルが出来上がったらファイルのタブの右側にあるプレビューボタンを押すことでUMLが表示されます。

編集方法

後から、UMLを編集したいとなることもあるかと思います。そんな時、このUMLであれば簡単に編集することが可能です。例えば、先ほどのログインのシーケンス図に認証ミドルウェアも追加したいとなった場合、Cursorに「認証ミドルウェアを追加してください。」と指示を出せば、一瞬で修正することが可能です。

コードの設計や機能の説明時に、この機能を活用することで、図をわざわざ手書きする億劫な作業から解放されます。

まとめ

今回は自分がコーディング以外でよく使用する活用方法をご紹介しました。
結構拡張機能との相性がよかったりするので、今回紹介した方法以外にも色々試してみてください!

参考リンク

#cursor #開発効率化 #AI開発 #AIエンジニア #個人開発

Discussion