4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【非エンジニアの挑戦】CursorとのペアプロでWebアプリを作成する話

Last updated at Posted at 2025-12-18

はじめに

こんにちは。Qiita社でコンテンツマーケティングやSEOを担当しているWEBマーケターです。

私自身のレベルはこんな感じ↓

  • 自分でコードを書けない非エンジニア
  • もっとも愛用している生成AIはGemini(個人でも有料プラン契約)
  • 業務効率のため、GeminiにPythonのコードを書いてもらってVSCodeで実行している(Pythonってすごい!と毎回感動)

先日社内で『Cursorを使ってみよう』という宿題が出ました。

Cursorの存在は知ってたものの何ができるか一切知らず、Geminiで大満足していた私。
よい機会なので、Cursorと共にちょっとしたツール作成にチャレンジしてみます!

※タイトルにぺアプロと書きましたが、Cursorが優秀すぎて一瞬で終わってしまった記録です。

本記事で作成するツールは、Cursorの体験を目的としています。スクレイピング機能を含みますが、これはあくまで「題材」として選定したものであり、本ツールの実運用や、特定のWebサイトへの使用を推奨するものではありません。

今回作るモノ:記事の「バランス」を可視化するワードクラウド

コンテンツマーケティング担当として、常によいコンテンツ作りを心掛けています。

しかし、熱が入れば入るほど、「伝えたいこと」と「伝わっていること」のバランスが見えなくなりがちです。読み手のことを第一に想っていますが、知らないうちに読み手を置いてけぼりにしているのでは…と不安になることも。

そこで、 記事のトピックバランス(=構成要素の重み)を直感的に把握できる「ワードクラウド」 を作ってみようと考えました。

STEP1:準備

社内勉強会で教えてもらった通り、まずはプロジェクトを作成します。

1. ローカルに専用フォルダを新規作成
2. Cursorでそのフォルダを開く

image.png

STEP2:Cursorに丸投げ

考えたところで何も分からないので、早速「こういうツールが欲しい」とすべてをCursorに丸投げです。

とりあえずAgentsモード(?)で以下プロンプトを渡してみます。
image.png

プロンプト
Pythonで、ローカル環境(ブラウザ)で動作するWebアプリを作りたいです。
具体的には、以下の挙動をするSEO分析ツールです。

- URLを入力すると本文を自動で抽出する
    - うまく抽出できない場合を考慮し、本文テキストを手動入力(コピペ)できるハイブリッド型にしたい
    - つまり、URL入力モードとテキスト入力モードの両方を用意する
- 抽出した本文を形態素解析する
- 解析結果からワードクラウド(画像)を生成する

初心者でも環境構築で躓かず、商用利用も可能な、ライセンス的に安全なライブラリ構成でコードの作成をお願いします。

STEP3:3つのファイルが生成される

AIはすごいですね。
こんなプロンプトでも仕事をしてくれたようで、3つのファイルが生成されました。

指示してから、たった2分30秒しか経ってないのに!
(むずかしいこと考えずに丸投げして良かったと心底思いました)

  • app.py
  • README.md
  • requirements.txt

コードだけが生成されると思ってたのですが、セットアップ手順・起動方法・使い方をまとめた「README.md」まで作ってくれています。やさしい。

STEP4:セットアップ(仮想環境、依存インストール、フォント設置)

ではREADME.mdを見ながら、セットアップをしてみます。

多分、VSCodeにもあったターミナルってところでやればいいはず…
New Terminalをクリックしたら、それっぽいのが出てきました。
image.png

ここで手を動かしたのは実質2~3分ですが、最後の最後でやたら待機時間が長く不安になってきました。

pip installに15分以上かかってる…こんなもの?

心配でそわそわしていたら、「Ask」というモードを発見しました。
これならコードが勝手に書き変わることなく話せそうだと思い、恐る恐る質問すると…

image.png

ちゃんと回答だけしてくれました!(質問文少し変ですが…)

image.png

「そのまま待つのが正解」という言葉を信じて待ち続けること約30分…
無事セットアップ完了!

※あとから知りましたが、モードに関するドキュメントがありました。

STEP5:Python実行

いよいよPython実行です。
WEBアプリ自体作成したのが初めてなので、どんな感じになるのか楽しみです。

streamlit run app.py

実行から2秒ほどで「Welcome to Streamlit!」というメッセージが。

image.png

どうやら、Streamlitというライブラリ(WEBアプリ化に必要)を初めて使う時に、1回だけ出る「ニュースレターを受け取りますか?」という確認メッセージらしいです。
今回は不要なので、Email欄は空白のままEnterキーをたたきます。

STEP6:ワードクラウド完成!

Streamlitの初回メッセージを無視してEnterを押したら、http://localhost:8501/というURLでブラウザが立ち上がり、無事WEBアプリが完成しました!

image.png

えっ、すごい。
挙動確認する前ですが、ぽいものを作れて感動です。

試しに、弊社の「Markdown記法 チートシート|Qiita」の記事を分析してみます。
ちゃんとURLから本文を取得してくれて、取得テキストから不要な記述を手動で消すこともできました。理想的な仕様!

image.png

形態素解析・ワードクラウド生成も完璧です!

image.png

Cursorを使ってみた感想

今回のSEO分析ツール作成、かかった時間はこんな感じです。

  • 手作業の時間
    • プロンプトを作ってCursorに投げる:2~3分
    • セットアップする:2~3分
  • Cursorががんばる時間
    • プロンプトの処理:2分30秒
    • セットアップ:30分(初回だから)
    • Python実行:5秒

今回は「ターミナルどこや…」とかそういう時間は別途かかりましたが、基本操作を知っていれば数十分でツールが作れるということですね。

実際触ってみて、Cursorの「コードエディタ+AI」は思った以上に最強でした。

  • 書いてもらったPythonをそのまま実行できる
  • Askモードなら、コードの書き換えが起きない状態で質問できる

また、いままでやっていた"Gemini⇔VSCodeの行き来"がなくなるのも大きいです。
私のプロンプトがまずいのか、Geminiで作ったコードは大抵1回では動いてくれず、実行(VSCode)⇔修正(Gemini)を繰り返すことが多く…。

しかも今回Cursorに作ってもらったコードは、1発で成功しました。

Cursorには、プロジェクト(フォルダ)全体をコンテキストとして認識できるという特徴もあるそうなので、この辺りもいろいろ体験してみたいと思います。

4
1
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
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?