【AI×Cursor】ビジネスパーソンのためのコーディング革命！

プログラミングの常識が、今覆されようとしています。AI搭載の最新コードエディタ「Cursor」が、ビジネスの世界に革命を起こそうとしているのです。コーディング経験不要で、AIがあなたの「右腕」となり、アイデアを形にします。マーケティングからウェブサイト作成まで、新時代のビジネススキルを、一緒に学んでみませんか？

テツメモ｜tetumemo

2024/07/01

リンク

今日は、プログラミングの世界に革命を起こしつつある新しいツール、「Cursor」についてご紹介します。

💡Cursor

「でも、私はプログラマーじゃないし...」そう思った方、心配いりません。

私もプログラマーではありませんし、思いっきりビジネスサイドの人間です。

今回は、私のように特にプログラミングの経験がない方々にも、テクノロジーの最前線で何が起きているのかを知っていただくために書いています。

まず、「Cursor」とは何でしょうか？

簡単に言えば、AIの力を借りてコードを書くためのソフトウェアです。もう少し詳しく説明すると、「コードエディタ」と呼ばれるツールの一種で、プログラマーが使う特別な「メモ帳」のようなものです。

正確に言うと、「コードエディタ」はプログラマーが使う特別な「メモ帳」でした。

今は、その敷居が下がり、AIの力を借りることができることで、「コードエディタ」を誰でも、簡単に、ビジネスサイドの人間でも使えるようになります。

では、なぜ「コードエディタ」を使えるようになると良いのか？

テツメモ｜tetumemo

2024-09-16

PowerPoint地獄からの解放！Marp×Cursor×Claudeで実現する爆速スライド革命

テツメモ｜tetumemo

2024-08-05

驚異の生産性革命！Claude MCPとNotionで実現するビジネス効率化の新時代

テツメモ｜tetumemo

2024-12-09

1.ビジネスサイドの人間がCursorのようなコードエディタを使うべき理由10選

私の実体験も交えながら、リスト形式で整理しました。

迅速なプロトタイピングと実現可能性の把握
- AIの支援を受けながら、アイデアを素早く形にできる
- 技術的な実現可能性をリアルタイムで確認できる
技術への理解度向上
- プログラミングの基礎を理解することで、技術的な制約や可能性をより深く把握できる
- エンジニアとのコミュニケーションがより円滑になる
創造性の拡大
- 技術的な知識が増えることで、新しいビジネスアイデアや解決策を生み出しやすくなる
- 「できない」と思っていたことが「できる」に変わる可能性が広がる
意思決定の質の向上
- 技術的な側面を考慮した、より現実的で実行可能な戦略立案ができる
- プロジェクトの見積もりや期間の理解が深まり、より適切な判断ができる
自立性と効率性の向上
- 簡単な修正や更新を自身で行えるようになり、開発プロセスが効率化される
- エンジニアリングリソースへの依存度が減少し、迅速な対応が可能になる
イノベーションの促進
- 技術とビジネスの両方の視点を持つことで、革新的なソリューションを考案しやすくなる
- 新技術の可能性をビジネス面から評価し、早期に採用する判断ができる
コスト削減
- 外部委託せずに自社で簡単なウェブサイトやアプリケーションを作成・管理できる
- プロトタイプ段階でのコストを大幅に削減できる
継続的学習と適応力の向上
- 急速に進化するデジタル環境に対する適応力が高まる
- 技術トレンドへの理解が深まり、市場の変化に敏感になる
クロスファンクショナルな協力の促進
- 技術部門とビジネス部門の橋渡し役となり、組織全体の連携を強化できる
- プロジェクト全体の視野が広がり、より効果的なリーダーシップを発揮できる
個人のキャリア発展
- テクノロジースキルを持つビジネスプロフェッショナルとして、市場価値が向上する
- 将来的なデジタルトランスフォーメーションリーダーとしての素質を養える

これらの理由からビジネスサイドの人間がCursorのようなコードエディタを使いこなすことは、個人のスキルアップだけでなく、組織全体の競争力向上にも大きく貢献すると言えます。

2.Cursorと一般的なテキストエディタとの違いは？

ここで、一般的なメモ帳などのテキストエディタとCursorの違いについて見ていきましょう。

「一般的」と言われるコードエディタで有名なのは、Microsoftが無償提供しているVisual Studio Code（VSCode）というソフトです。
※Visual Studio Code（VSCode）

💡Cursor

とても賢い「予測入力」機能：

普通のメモ帳では、あなたが入力する内容をそのまま受け取るだけです。一方、Cursorは、あなたが何を書こうとしているのかを「予測」し、適切な候補を提案してくれます。まるで、あなたの頭の中を読み取るかのようです。

リアルタイムエラーチェック：

通常のテキストエディタでは、文法ミスや誤字脱字を見つけるのは全てユーザーの仕事です。しかし、Cursorは入力と同時にコードをチェックし、問題があればすぐに教えてくれます。赤ペンを持った先生が常に隣にいるようなものですね。

インテリジェントな補完機能

一般的なエディタは、あなたが何を書いているのか理解しません。Cursorは、あなたが書いているプログラムの文脈を理解し、その状況に応じたアドバイスや提案をしてくれます。

AI駆動の問題解決：

通常のエディタでは、問題が発生したら自分で解決策を探す必要があります。Cursorは、AIを使って問題の原因を分析し、解決策を提案してくれます。まるで、経験豊富なプログラマーが24時間体制であなたをサポートしているようなものです。

学習と成長：

普通のエディタは、使えば使うほど慣れていくだけです。一方、Cursorは使えば使うほどあなたのコーディングスタイルを学習し、より適切な提案ができるようになります。つまり、あなたと一緒に成長していくツールなのです。

Cursorが生まれた背景には、プログラミングの世界でAIの活用が急速に進んでいることがあります。私たちの生活のあらゆる場面で使われているコンピュータープログラム。スマートフォンのアプリ、オンラインショッピングサイト、銀行のATM、さらには車や家電製品まで、全てがプログラムで動いています。そのため、より早く、より良いプログラムを作ることへの需要が高まっているのです。

Cursorは、そんな需要に応えるツールです。AIの力を借りることで、プログラマーはより創造的な仕事に集中できます。また、プログラミングを学び始めたばかりの人にとっても、Cursorは心強い味方になるでしょう。

そして繰り返しになりますが、ビジネスサイドの人間が学べば個人のスキルアップだけでなく、組織全体の競争力向上にも大きく貢献することもできます。

このニュースレターでは、Cursorの主な特徴や、それがどのようにプログラミングの未来を変えようとしているのかを、できるだけ分かりやすく説明していきます。プログラミングの専門家でなくても、テクノロジーの最新トレンドを知ることは、今の時代を生きる上で大切です。Cursorを通じて、AIとプログラミングの融合がもたらす可能性を、一緒に探っていきましょう。

次の章では、Cursorの無料版で利用できる主な特徴について、より詳しく見ていきます。AIがどのようにしてコーディングをサポートするのか、その驚くべき能力に、ワクワクするはずです。

3.Cursorの主な特徴と導入（無料版）

Cursorの魅力は、その豊富な機能にあります。しかも、その多くが無料版で利用できるのです。ここでは、Cursorの主な特徴を、非エンジニアの方にも分かりやすく説明していきます。

3.1 直感的なインターフェース

Cursorを初めて開いたとき、そのスタイリッシュで使いやすいデザインに驚くかもしれません。プログラミングの経験がない方でも、違和感なく使い始められるよう設計されているのです。

画面は大きく分けて3つの部分から構成されています。

左側：ファイルやフォルダの一覧が表示されます。まるで、あなたのパソコン上のファイルを見ているような感覚です。
中央：実際にコードを書く編集エリアです。ここが、あなたの創造力を形にする場所です。
右側：補助的な情報や設定画面が表示されます。ここでAIの力を借りたり、コードの詳細情報を確認したりします。

この構成は、多くの現代的なアプリケーションと似ているので、直感的に操作できるでしょう。例えば、Wordのような文書作成ソフトを使ったことがある方なら、すぐに馴染めるはずです。

また、Cursorの見た目は自由にカスタマイズできます。背景色や文字の色、大きさなどを自分好みに変更できるので、長時間作業しても目が疲れにくくなります。プログラマーの中には、黒背景に明るい色の文字を使う「ダークモード」を好む人も多いのですが、Cursorではそういった設定も簡単にできます。

さらに、キーボードショートカットを多用することで、マウスを使わずに素早く操作できるのも特徴です。これは、慣れてくると作業効率が大幅に向上する要因になります。

例えば、一般的にWindowsなどでも共通している「Ctrl+S」でファイルを保存したり、「Ctrl+F」で検索したりできるのは、多くの方がご存じでしょう。Cursorでは、それに加えてAI機能を呼び出すショートカットなども用意されています。

3.2 AI支援機能

Cursorの最大の特徴は、AIによる強力な支援機能です。これは、まるで賢い先輩プログラマーが隣で教えてくれているような感覚を味わえる機能です。

コード補完：

皆さんがスマートフォンで文章を入力するとき、次の単語を予測して表示してくれる機能を使ったことがあるでしょう。Cursorのコード補完は、それと似たような機能ですが、はるかに高度です。

プログラミングでは、決まりきった書き方や、よく使うコードの断片があります。Cursorは、あなたが今書こうとしているコードを予測し、それを提案してくれます。例えば、CSSの調整で`wi`と入力し始めただけで、デザイン候補を提案してくれます。

#mindmap {
  display block;
  width 100vw;
  height 100vh;
  wi
}

これにより、入力の手間が大幅に減り、ミスも防げます。初心者の方にとっては、正しい書き方を学ぶ良い機会にもなりますね。

エラー検出：

プログラミングでは、ちょっとした入力ミスが大きな問題を引き起こすことがあります。例えば、括弧の閉じ忘れや、セミコロンの付け忘れなどです。Cursorは、あなたが入力しているそばから、このようなミスを見つけ出し、波線で示してくれます。

print("Hello, World"  # 閉じ括弧が抜けている

このような場合、Cursorは波線でエラーを示し、その上にマウスを置くと、エラーの内容と修正方法を提案してくれます。まるで、優しい先生が隣で見守ってくれているようですね。

これらのAI支援機能は、特にプログラミング初心者にとって心強い味方となります。経験豊富なプログラマーでも、単純なミスは避けられません。Cursorは、そういったミスを減らし、本質的な問題解決に集中できる環境を提供してくれるのです。

3.3 多言語サポートとわかりやすい色分け

プログラミング言語は、実はたくさんの種類があります。Webサイトを作るためのHTML、JavaScript、データ分析によく使われるPython、スマートフォンアプリを作るためのSwiftやKotlinなど、用途によって使い分けられています。

Cursorの素晴らしい点は、これらの多様なプログラミング言語に対応していることです。しかも、言語ごとの特徴を理解し、それぞれに適した支援を提供してくれます。

例えば、Pythonでコードを書いている場合、Pythonの文法に沿ったコード補完や、Pythonに特有のエラーを検出してくれます。JavaScriptに切り替えれば、今度はJavaScriptの作法に合わせた支援を受けられるのです。

さらに、Cursorは「シンタックスハイライト」という機能も提供しています。これは、コードの種類によって色分けして表示する機能です。例えば、コメント（プログラマーが書く説明文）は緑色、文字列は赤色、キーワードは青色というように色分けされます。これにより、コードの構造が視覚的に理解しやすくなり、長いコードでも迷子になりにくくなります。

3.4 Cursorの導入

📑Cursorのインストール

Cursorは、AIを搭載した次世代のコードエディタです。Wordのような文書作成ソフトをイメージしていただければ分かりやすいでしょう。

a. Cursorのダウンロード:

ウェブブラウザで「Cursor」https://www.cursor.com/にアクセスします。
「Download」または「ダウンロード」ボタンをクリックします。

b. インストール:

ダウンロードしたファイルをダブルクリックします。
画面の指示に従ってインストールを完了します。

c. 起動:

インストールが完了したら、デスクトップまたはスタートメニューからCursorを起動します。

注意点: インストール中に「不明な開発元」という警告が出る場合がありますが、公式サイトからダウンロードしている限り安全です。

d. 拡張機能の追加:

インストールが完了したら、拡張機能のLive Previewを導入します。これでエディタ上でサイトのプレビューができます。

※詳しくはこちらを参考

導入から、日本語化までスムーズに進められます　👇️

💡Cursorエディタをインストールしよう！

💡VSCodeの拡張機能 Live Preview 使うとVSCodeでサイトのプレビュー画面も見れて便利

3.4 Gemini 1.5 Flash 無料API連携

CursorはAIの使います。GPT-4oやClaude 3.5 Sonnet、Gemini 1.5 Flashなど様々な種類のモデルを選択することが可能です。

一方で、これらのAIを使うためにはAPIという機能で連携し、モデルによっては使用する量によって利用料がかかります。

そこでオススメしたいのが、「Gemini 1.5 Flash」です。

これはGoogleが記事執筆時点で無償提供しているAIのモデルです。

💡Google AI Studio

sangmin.eth | Dify Ambassador

@gijigae

CursorにGemini 1.5 Flashが追加されている🎉！設定画面にGoogle API Keyの入力箇所が追加され、APIキーを入れるとすぐ使える。Gemini 1.5 FlashはCursorのロングコンテキストにも対応しているので大変嬉しい。しかも、1日1500回までは無料👏！ pic.twitter.com/INdhkfZruf
— sangmin.eth | Dify Ambassador (@gijigae) May 28, 2024

Gemini 1.5 Flashは、「早い・安い・使える」がピッタリのモデルですが、特に「早さ」はどこよりも突き抜けています。簡単なコード修正なら十分使える優秀なモデルです。

性能はこちらの記事で詳しく解説しています。

【衝撃】本1冊、動画1時間、音声約10時間を丸投げできるGemini 1.5 Flash＆Proがビジネスに効くワケ！

テツメモ｜tetumemo

2024-05-20

Cursorでは、Google製の最新AI言語モデル「Gemini 1.5 Flash」とのAPI連携可能です。これは、非常にパワフルなAIモデルで、コードの生成や解析において十分な性能を発揮します。

Gemini 1.5 Flashは、膨大な量のコードやプログラミングに関する情報を学習しています。そのため、人間の言葉で「ログイン機能を作りたい」と伝えるだけで、それに必要なコードの骨格を提案してくれたり、既存のコードを解析して改善点を指摘したりできるのです。

📑APIの取得方法

Gemini 1.5 Flash APIを使用するには、まずGoogle AI Studioにアクセスし、APIキーを取得する必要があります。以下に、その手順を説明します。

Google AI Studioにアクセスします。
アクセス後、左上の「Get API Key」をクリックします。
「APIキーを作成」をクリックします。
API キーをまだ作成していない場合は、新しいプロジェクトで API キーを作成します
新しいプロジェクトを作成します（画面上部のプロジェクト選択ドロップダウンから「新しいプロジェクト」を選択）。
新しいAPIキーが作成されます。
作成されたAPIキーをコピーし、安全な場所に保存します。

📑CursorでのAPI設定方法

APIキーを取得したら、次はCursorでこのAPIを使用できるように設定します：

Cursorを起動し、左下の歯車アイコンをクリックして設定を開きます。
左側のメニューから「Models」を選択します。
下にスクロールし、「Google API Key」欄に、先ほど取得したAPIキーを貼り付けます。
「Verify」ボタンをクリックして設定を保存します。
最後に「Model Names」の項目でGemini 1.5 FlashをONにします。

これで、CursorでGemini 1.5 Flash APIを使用する準備が整いました！

📑AIチャット利用時の設定

モデルをGemini 1.5 Flashに変更しておくことで、無料でAIに質問することができます。1日1,500回までリクエスト可能です。

📑Gemini 1.5 Flash APIの意義

この機能により、プログラミングの初心者でも、自分のアイデアを形にする第一歩を踏み出しやすくなります。また、経験豊富なプログラマーにとっても、新しい技術や最適なコーディング方法の学習を加速させる強力なツールとなるでしょう。

Gemini 1.5 Flash APIが無料で利用できるということは、高度なAI技術の恩恵を、誰もが気軽に受けられるということです。これは、プログラミングの世界をより開かれたものにし、イノベーションを加速させる可能性を秘めています。

Cursorと Gemini 1.5 Flash APIを組み合わせることで、プログラミングの学習曲線が大幅に緩やかになり、より多くの人々がソフトウェア開発の世界に参入できるようになるはずです。

以上が、Cursorの無料版で利用できる主な特徴です。次の章では、これらの機能を活用した簡単なプロジェクト例を見ていきます。Cursorがどのようにしてプログラミングの過程を助けてくれるのか、具体的なイメージが湧いてくることでしょう。

4. Cursorを使った簡単なプロジェクト例

これまでCursorの特徴について説明してきましたが、実際にどのように使うのか、具体的なイメージが湧きにくいかもしれません。そこで、この章では簡単な名刺をHTML/CSSで作成しながら、Cursorの機能を実践的に紹介していきます。このプロジェクトは、プログラミング経験のないビジネスパーソンでも簡単に取り組めるものです。

4.1 プロジェクトの概要｜シンプルでスタイリッシュな名刺のWebページ

今回作成するのは、シンプルでスタイリッシュな名刺のWebページです。このプロジェクトを通じて、以下のCursorの機能を体験します：

1. AIによるコード生成

2. HTMLとCSSの基本構造の理解

3. コード補完とエラー検出

4. Gemini 1.5 Flash APIの活用

4.2 プロジェクトの準備

まず、管理用のフォルダを作成しておきましょう。

左側のファイルエクスプローラーで右クリックし、「新しいフォルダ」を選択します。フォルダ名は「test」としておきます。

次に同じように左側のファイルエクスプローラーで右クリックし、「新しいファイル」を選択します。ファイル名を「business_card.html」とします。

4.3 AIを使ったHTMLの基本構造の生成

では、名刺のHTMLの基本構造をAIに生成してもらいましょう。エディタ上で右クリックし、「Add Symbol to New Chat」を選択します。以下のようにAIに指示します：

シンプルな名刺のためのHTML構造を作成してください。名前、役職、会社名、メールアドレス、電話番号を含めてください。

すると、AIは以下のようなコードを生成するでしょう：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ビジネス名刺</title>
    <style>
        /* ここにCSSを追加します */
    </style>
</head>
<body>
    <div class="business-card">
        <h1>山田 太郎</h1>
        <p class="title">マーケティング・マネージャー</p>
        <p class="company">株式会社ABCコーポレーション</p>
        <p class="email">[email protected]</p>
        <p class="phone">03-1234-5678</p>
    </div>
</body>
</html>

プレビューして見ると、ちょっと味気ない仕上がりですね。

これをCSSで調整していきましょう。

4.4 CSSスタイルの追加

次に、名刺をスタイリッシュに見せるためのCSSを追加しましょう。AIに以下のように指示します：

名刺のデザインをスタイリッシュにするためのCSSを追加してください。中央揃え、適切な余白、フォントスタイルを考慮してください。

AIは以下のようなCSSを提案されます：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>名刺</title>
    <style>
        body {
            font-family sans-serif;
            margin 0;
            padding 0;
            display flex;
            justify-content center;
            align-items center;
            min-height 100vh;
            background-color #f5f5f5;
        }

        .card {
            width 350px;
            padding 30px;
            border-radius 10px;
            background-color #fff;
            box-shadow 0 2px 5px rgba(0, 0, 0, 0.1);
            text-align center;
        }

        .name {
            font-size 24px;
            font-weight bold;
            margin-bottom 15px;
            color #333;
        }

        .title {
            font-size 18px;
            margin-bottom 10px;
            color #555;
        }

        .company {
            font-size 16px;
            margin-bottom 20px;
            color #777;
        }

        .contact {
            font-size 14px;
            color #999;
        }

        .contact a {
            color #007bff;
            text-decoration none;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="name">山田 太郎</div>
        <div class="title">ソフトウェアエンジニア</div>
        <div class="company">株式会社サンプル</div>
        <div class="contact">
            <a href="mailto:[email protected]">[email protected]</a>
            <br>
            電話番号 03-1234-5678
        </div>
    </div>
</body>
</html>

このCSSをHTMLファイルの`<style>`タグ内に貼り付けます。今回はCursorがCSSも含めてすべてコードを書き換えてくれましたので、丸ごとコピペでOKです。

Cursorのインテリジェントなコード補完機能により、CSSプロパティやカラーコードの入力が容易になります。

4.5 プレビューと調整

Cursorでは、拡張機能のLive Previewを使うことでエディタ上で確認できます。

💡VSCodeの拡張機能 Live Preview 使うとVSCodeでサイトのプレビュー画面も見れて便利

名刺のデザインを確認し、必要に応じて調整を加えましょう。例えば、背景色を変更したい場合は、AIチャットで聞いてみましょう：

背景色を変更するには？

■回答

.card クラスの background-color プロパティを変更することで、名刺の背景色を変更できます。

コードの知識がなくても、「やりたいこと」を聞くことで、Cursorが的確に教えてくれました。

4.7 最終的なコード

最初のデザインと見比べると雲泥の差ですね。

エラーがないことを確認し、最終的なコードは以下のようになります：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>名刺</title>
    <style>
        body {
            font-family sans-serif;
            margin 0;
            padding 0;
            display flex;
            justify-content center;
            align-items center;
            min-height 100vh;
            background-color #f5f5f5;
        }

        .card {
            width 350px;
            padding 30px;
            border-radius 10px;
            background-color #d6eff4;
            box-shadow 0 2px 5px rgba(0, 0, 0, 0.1);
            text-align center;
        }

        .name {
            font-size 24px;
            font-weight bold;
            margin-bottom 15px;
            color #333;
        }

        .title {
            font-size 18px;
            margin-bottom 10px;
            color #555;
        }

        .company {
            font-size 16px;
            margin-bottom 20px;
            color #777;
        }

        .contact {
            font-size 14px;
            color #999;
        }

        .contact a {
            color #007bff;
            text-decoration none;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="name">山田 太郎</div>
        <div class="title">ソフトウェアエンジニア</div>
        <div class="company">株式会社サンプル</div>
        <div class="contact">
            <a href="mailto:[email protected]">[email protected]</a>
            <br>
            電話番号: 03-1234-5678
        </div>
    </div>
</body>
</html>

4.8 まとめ

このプロジェクトを通じて、Cursorの主要な機能を体験しました：

AIによるコード生成：HTMLの基本構造とCSSのスタイルを素早く作成
コード補完：HTMLタグやCSSプロパティの入力を支援
エラー検出：文法エラーを即座に指摘
Gemini 1.5 Flash API：デザインの改善やレスポンシブ対応などの質問に詳細な回答を提供

Cursorを使用することで、プログラミングの初心者でも、短時間でプロフェッショナルな見た目のWebページを作成できることがおわかりいただけたでしょう。AIのサポートにより、HTMLとCSSの学習過程がよりスムーズになり、ビジネスパーソンでも簡単にWeb制作の基礎を理解できます。

ここまでで「Cursorを活用したAIの力の基本的な使い方」を説明しました。

学習内容を復習し、トライ・アンド・エラーを繰り返すことでCursor×AIの使いやすさが浸透し、さらなるチャレンジをしたくなると思います。

さて、この先はもう一歩踏み込んでCursorを使いこなしていきましょう。

具体的にはCursorとAIで作るマーケティングプロンプト集ウェブページの制作です。

たたき台をClaude 3.5 Sonnetで作成し、そのコードをCursorに貼り付けて微調整をしながら作り上げていく作業をすべて公開します。

ぜひCursorの基本的な使い方に慣れてきたはチャレンジしてみてください。

ここから先は有料コンテンツです

この続き：5468文字 / 画像16枚

ご購入はこちらから