Cursorを使ったら開発速度が変わった話｜CSVをMarkdown表に変換するWebツールを作ってみた

Smart IT & AI Hub｜AIという名の刃を、今日も抜く。

この記事はSmart IT & AI Hubが公開しているコンテンツです。
他の記事は目的別インデックスからどうぞ。

「Cursorを使えばコーディングが速くなる」

こういう話、よく聞きますよね。

ただ、実際にどのくらい速くなるのか。
本当に使いやすいのか。
逆に、人間が確認しないと危ない部分はどこなのか。

気になったので、実際に小さなツールを作って試してみました。

今回作ったのは、CSVテキストを貼り付けるとMarkdown表に変換するWebツールです。

感想だけではなく、

・何が速くなったのか
・どこでCursorが便利だったのか
・逆に人間が確認すべきところはどこか

このあたりも分けて書いていきます。

何を作るのか

今回作るのは、CSVをMarkdown表に変換するシンプルなWebツールです。

たとえば、以下のCSVを入力します。

name,age,role
Alice,30,Engineer
Bob,25,Designer

すると、以下のようなMarkdown表に変換します。

| name | age | role |
|------|-----|------|
| Alice | 30 | Engineer |
| Bob | 25 | Designer |

note記事や技術メモを書いていると、表を作りたい場面があります。

ただ、毎回手でMarkdown表を書くのは地味に面倒です。
列数が増えると、区切り線を整えるだけでも少し手間がかかります。

そこで今回は、CSVを貼り付けるだけでMarkdown表に変換できるツールを作ります。

HTMLとJavaScriptだけで動くので、サーバーもNode.jsも不要です。
index.htmlをブラウザで開くだけで使える構成にします。

事前準備

まずはCursorを使える状態にします。

Cursorのインストール

Cursorは、AI機能を統合したコードエディタです。
VS Codeに近い操作感で使えるため、普段VS Codeを使っている人なら比較的入りやすいと思います。

インストール手順は以下です。

① https://cursor.com にアクセス
② 「Download」ボタンをクリック
③ お使いのOS（Mac / Windows / Linux）を選択
④ ダウンロードしたファイルを実行してインストール
⑤ 起動後、GitHubアカウントなどでサインイン

料金について

Cursorには無料で使えるHobbyプランがあります。

ただし、無料プランではAIリクエストや補完機能に上限があります。
頻繁にAI機能を使う場合は、有料プランの検討が必要になる場合があります。

今回のように、小さなHTML / JavaScriptツールを試しに作る程度であれば、まずは無料プランで十分です。

料金や制限は変更される可能性があるため、実際に使う前に公式サイトで確認してください。

作業フォルダを作成する

任意の場所に作業フォルダを作成します。

例：
csv-to-markdown/

その後、Cursorで以下の操作をします。

File → Open Folder

作成したフォルダを開けば準備完了です。

実際の進め方

ここから、実際にCursorを使ってツールを作っていきます。

やることは大きく分けて5つです。

STEP 1｜Cursorに最初の依頼を投げる
STEP 2｜生成されたコードをファイルに保存する
STEP 3｜ブラウザで動作確認する
STEP 4｜変換ミスを見つけて修正依頼を出す
STEP 5｜最後に人間がコードを確認する

順番に進めます。

STEP 1｜Cursorに最初の依頼を投げる

Cursorのチャットパネルを開きます。

Macなら Cmd + L、Windowsなら Ctrl + L で開けます。
環境やバージョンによって異なる場合があるため、開けない場合はCursorのショートカット設定を確認してください。

チャットパネルを開いたら、以下をそのまま貼り付けます。

CSVテキストを貼り付けるとMarkdown表に変換する
シンプルなHTML/JavaScriptツールを作ってください。

要件：
・1ファイル（index.html）で動く構成にする
・左側にCSV入力エリア、右側にMarkdown出力エリア
・変換ボタンを押すと変換される
・コピーボタンで出力をクリップボードにコピーできる
・シンプルなデザインでOK

ここで大事なのは、最初から詰め込みすぎないことです。

最初から、

・CSVの細かい例外対応
・デザイン調整
・ダークモード
・ファイルアップロード
・履歴保存
・エラー表示

まで全部入れようとすると、コードが一気に複雑になります。

まずは「CSVを貼る → Markdown表に変換する」だけに絞る方が、あとから修正しやすいです。

STEP 2｜生成されたコードをファイルに保存する

Cursorが index.html のコードを生成してくれます。

生成されたコードは、以下のどちらかで保存します。

・チャット上の「Apply」ボタンを押す
・コードをコピーして index.html に貼り付ける

今回は1ファイルで動く構成なので、作成するファイルは index.html だけです。

この時点で、HTML・CSS・JavaScriptが1つのファイルにまとまった状態になります。

STEP 3｜ブラウザで動作確認する

保存した index.html をブラウザで開きます。

index.html をブラウザにドラッグ＆ドロップ

Macの場合は、ターミナルから以下でも開けます。

open index.html

画面が開いたら、CSVを貼り付けて変換ボタンを押します。

name,age,role
Alice,30,Engineer
Bob,25,Designer

Markdown表が出力されれば、まずは成功です。

STEP 4｜変換ミスを見つけて修正依頼を出す

実際に触ってみると、細かい問題が出てきます。

たとえば、以下のようなものです。

・カンマを含む値が正しく処理されない
  例："田中, 太郎"

・空行があると変換結果がおかしくなる

・ヘッダーの区切り線の幅が揃っていない

・空白セルの扱いが想定と違う

・改行コードの違いで動作が変わる

こういう問題を見つけたら、そのままCursorに修正依頼を出します。

たとえば、以下のように依頼します。

CSVの値にカンマが含まれる場合、
ダブルクォートで囲まれている値を正しく処理できていません。

例：
"name","memo"
"田中, 太郎","テスト"

この形式にも対応できるように修正してください。

ここでもコツがあります。

修正依頼は1つずつ出すことです。

複数の問題をまとめて投げると、どこを直したのか分かりにくくなります。
また、別の箇所が壊れる可能性もあります。

まず1つ修正する。
動作確認する。
次の修正を依頼する。

この流れの方が安全です。

STEP 5｜最後に人間がコードを確認する

Cursorが作ったコードが動いたとしても、最後は人間が確認します。

特に確認したいのは以下です。

・入力値をそのまま innerHTML に入れていないか
・エラー時に何も表示されないコードになっていないか
・コピー処理が失敗した場合の表示があるか
・CSVの例外パターンにどこまで対応しているか
・不要に複雑な処理が入っていないか

とくに注意したいのは、innerHTML とユーザー入力の組み合わせです。

ユーザーが入力した文字列をそのまま innerHTML に入れると、XSSの原因になる可能性があります。

今回のようにローカルで自分だけが使うツールなら大きな問題になりにくいですが、Web上に公開する場合は必ず確認した方がよいです。

また、クリップボードAPIにも注意が必要です。

navigator.clipboard.writeText

この処理は、ブラウザや実行環境によって動作条件があります。
うまく動かない場合は、HTTPS環境やlocalhostで動かすなどの確認が必要です。

Cursorで速くなった点

実際に使ってみて、速くなったと感じた点を整理します。

① 初期コードの作成が速い

【実体験】
「index.htmlを作って」と依頼してから、
動くコードが出るまで約3分でした。

自分でゼロから書いた場合、HTML構成、CSS、JavaScriptの処理を考える必要があります。

簡単なツールでも、20〜30分くらいはかかることがあります。

Cursorを使うと、まず動くたたき台をすぐに出せます。
ここが一番大きいです。

② エラー修正が速い

エラーメッセージをそのままCursorに貼ると、原因と修正案を出してくれます。

このエラーは何が原因ですか？
修正案も出してください。

このように聞くだけで、かなりの確率で原因の見当をつけてくれます。

もちろん最終確認は必要ですが、「このエラー何だろう」と検索して回る時間はかなり減ります。

③ 関数の意味をすぐ説明してくれる

生成されたコードの中で、

この関数は何をしていますか？

と聞くと、その場で説明してくれます。

知らない書き方や、読みにくい処理が出てきたときに便利です。

コードレビュー前の理解にも使えます。

④ UIのたたき台を作りやすい

たとえば、以下のような依頼も自然文でできます。

左側に入力欄、右側に出力欄を置く
2カラムのレイアウトにしてください。

ボタンは少し目立つようにしてください。
全体はシンプルで見やすいデザインにしてください。

CSSを細かく書かなくても、まず見た目のたたき台を作れるのは便利です。

あとから、

余白を広げてください
ボタンを中央に寄せてください
スマホでも見やすくしてください

のように追加で調整できます。

逆に人間が確認すべき点

Cursorは便利ですが、出てきたコードをそのまま信用しすぎるのは危険です。

動くコードが正しいとは限らない

今回のツールでも、実際に以下のような確認ポイントがありました。

・CSVの空白セルをどう扱うか
・ヘッダーなしCSVの場合にどうするか
・改行コード（\r\n と \n）の違いに対応できるか
・ダブルクォートで囲まれたカンマを処理できるか
・余計な空行を無視できるか

「動いた」だけでは不十分です。

自分が想定している入力パターンで、ちゃんと動くか確認する必要があります。

セキュリティや入力チェックは人間が見る

Cursorが生成するコードは、「まず動くこと」を優先している場合があります。

そのため、セキュリティ面は人間が確認した方がよいです。

特に注意したいのは、以下のような処理です。

innerHTML + ユーザー入力

ユーザーが入力した内容をそのままHTMLとして画面に出すと、XSSの原因になる可能性があります。

ローカルで自分だけが使うなら大きな問題になりにくいですが、Webに公開する場合は話が変わります。

公開するなら、textContent を使う、入力値をエスケープするなどの対策を確認した方が安全です。

仕様が曖昧だと余計な機能が増える

Cursorにふわっと依頼すると、便利そうな機能を追加してくれることがあります。

たとえば、

表っぽくしてください
使いやすくしてください

のように依頼すると、意図していない機能が追加される場合があります。

・列の並び替え
・ソート
・ファイルアップロード
・履歴保存
・デザイン切り替え

便利ではありますが、最初から機能が増えすぎると確認が大変になります。

最初はシンプルに作って、必要になったら足す方が安全です。

正直な評価

今回使ってみた感想を整理すると、こんな感じです。

【速くなったこと】
・初期コード作成　　　★★★★★
・エラー修正　　　　　★★★★☆
・UIたたき台　　　　　★★★★☆
・関数の説明　　　　　★★★★★

【変わらないこと】
・動作確認　　　　　　→ 人間がやる
・セキュリティ確認　　→ 人間がやる
・仕様を決める　　　　→ 人間がやる
・最終レビュー　　　　→ 人間がやる

Cursorは、コードを書く速度をかなり上げてくれます。

特に、最初のたたき台を作るスピードはかなり速いです。
小さなツールであれば、「まず動くもの」を作るまでの時間はかなり短くなります。

ただし、Cursorが代わりに全部判断してくれるわけではありません。

何を作るのか
どこまで対応するのか
そのコードで本当に安全なのか
実務で使って問題ないのか

こうした判断は、結局人間がやる必要があります。

実務で使うなら、こう考える

Cursorは、エンジニアの仕事を丸ごと奪うというより、手を動かす部分をかなり速くしてくれる道具だと感じました。

たとえば、以下のような作業にはかなり向いています。

・小さなWebツールのたたき台作成
・既存コードの修正案作成
・エラー原因の調査補助
・関数や処理内容の説明
・CSSやUIの調整
・READMEやコメントの作成

逆に、以下は人間側の仕事として残ります。

・要件を決める
・仕様の優先順位を決める
・セキュリティを確認する
・動作確認をする
・公開してよい品質か判断する

なので、Cursorは「全部任せる相手」ではなく、作業スピードを上げる相棒として使うのがよさそうです。

ChatGPTで確認してほしいポイント

この記事を参考にする場合は、実際に使う前に以下の点を確認してください。

① Cursorの現在のバージョンと
　最新機能に変更がないか

② Hobbyプランの無料枠や制限内容に
　変更がないか

③ navigator.clipboard.writeText の
　ブラウザ対応状況に変更がないか

④ CSVパースのライブラリ（PapaParseなど）を
　使った方がよいケースはないか

⑤ Cursor以外のAIエディタ（Windsurfなど）との
　現時点での比較

公式サイトはこちらです。

https://cursor.com

料金や機能は変更される可能性があるため、実際に使う前に公式サイトで確認するのがおすすめです。

まとめ

今回は、Cursorを使って、CSVをMarkdown表に変換するWebツールを作ってみました。

作ったものはシンプルですが、Cursorの便利さを試すにはちょうどよかったです。

特に便利だったのは、以下です。

・最初のコード作成が速い
・エラー修正の相談がしやすい
・コードの意味をその場で聞ける
・UIのたたき台を自然文で作れる

一方で、以下は人間が確認する必要があります。

・動作確認
・例外パターンの確認
・セキュリティ確認
・仕様の判断
・最終レビュー

Cursorを使うと、たしかに開発速度は上がります。

ただし、「速く書ける」ことと「正しいものができる」ことは別です。

AIに任せるところと、人間が見るところを分けて使う。
これが一番現実的だと思いました。

小さなツール作成から試すと、Cursorの便利さがかなり分かりやすいです。

免責事項

この記事は、筆者が実際に試した内容をもとに作成しています。
ただし、文章の一部にはAIによる補正・構成調整を加えています。

そのため、仕様、料金、手順、コードの正確性については、必ず公式情報や実際の環境で確認してください。

また、本記事を参考にしたことによって発生したトラブル、損害、料金発生、情報漏えい等について、筆者は責任を負いかねます。

実務で利用する場合は、社内ルールやセキュリティポリシーを確認したうえで、自己責任でご利用ください。

Smart IT & AI Hubの全記事はこちらにまとめています。
カテゴリ別に整理しているので、気になる記事がすぐ見つかります。

次の実験は、もう決まっている。

もし刺さったなら、スキだけでも押してくれると嬉しい。
飛び上がって、次の実験に全力を注ぐ。

また会いに来てくれるなら、フォローしておいてくれ。
次も、AIに無茶ぶりしてくる。

Smart IT & AI Hub｜AIという名の刃を、今日も抜く。