はじめてのブログ執筆に最適！Cursorエディタでステップアップ
はじめに
エンジニアの本質 とはなんぞや？
私は 技術の継承 だと思っています。近年生成AIをはじめとした素晴らしい技術に触れることができていますが、これも技術を脈絡と後世に譲り渡してきた先人たちの努力あってこそのものと思っています。
その継承を後世につなぐという観点でもエンジニアのアウトプットはとても大切なものと思い、最近技術ブログ執筆に取り組み始めました。
今回は快適なブログ執筆環境としてCursorエディタを紹介します。
ブログ執筆初心者の私がCursorエディタを用いることで、はじての技術ブログ投稿でどれだけ助かられたかをCursorの紹介を交えてお伝えします。
私と同様に、技術ブログ執筆にチャレンジする人のハードルをほんの少しでも下げられればと思い投稿します。
この記事で解説する内容
- Cursorエディタの概要、機能
- 初心者ブロガーのCursorエディタ活用術
Cursorエディタの概要
CursorエディタとはAnysphere社により開発されている生成AI内蔵のエディターです。
Anysphere社はCursorにより生成AIとのペアプログラミングを実現し、世界が見たこともないようなコーディング体験を目指しています。「コーディングそのものが 溶け出してしまう かも？」らしいです。
世間での注目度も高くOpenAI社から800万ドルもの資金を調達したことでも注目を浴びました。
Cursorエディタの特徴
Cursorエディタの特徴はなんといっても生成AIとエディタのシームレスな統合体験です。
従来の会話型AIプログラミングの難点
chatGPTなどブラウザベースの会話型AIによるプログラミング体験では
- 生成されたコードをコピペしてエディタに貼り付けるという手間が必要
- コードが長いときは途中部分が省略されているため全体コピーにも気を遣う必要がある
- 生成済みのコードをさらに修正する時には入力として現在のコードの添付も必要
- 出力されたコードと入力したコードの差分もわかりづらい
と使い勝手の悪い問題も多くありました。
Cursorエディタではこのような点が解消されています。
Cursorエディタの主な機能
Cursorエディタの主な機能を紹介します。
エディター上で直接コード指示と生成が可能
下記のようにエディタ上でプロンプト入力のウィンドウを開くことができ、実行するとコードの候補が表示されます。
Cursorでコード生成
「Accept」ボタンを押すとコードが確定され、気に入らなければ追加の指示を出すこともできます。
記載済みのコードに対しても部分的な修正指示が可能
記載済みのコードに対してもピンポイントで修正指示を出せます。修正内容は下記のように差分をわかりやすく表示してくれます。
Cursorでコード修正
別画面のチャットでは、デフォルトで現在のコードの中身を理解している
わざわざコードの中身を連携する必要はありません。
Cursorチャット
と、快適なコーディングをおこなうことができます。
また、ブログ執筆では恩恵が少ないため詳細割愛しますが、
- 開いているファイルだけではなくコードスペース全体に対してのチャットができる
- URL連携により最新のライブラリの内容も踏まえたチャットができる
- ワンボタンで推奨されるデバッグエラーの修正を試してくれる
など、多くの機能があります。
Cursorエディタの移行便利ポイント
また、Cursorエディタには他エディタからの移行時に嬉しいポイントもあります。
ポイント① VS Codeとの互換性が高い
CursorはVS CodeをフォークしているためVS Codeと操作感が同じです。
また、GitHub CopilotなどVS Codeで使い慣れた拡張機能もそのまま利用可能です。Cursor導入時にはVS Codeからの設定引継ぎが提案されます。
ポイント② OpenAI APIやAzure OpenAIを使える
Cursorではデフォルトでは何も設定せずとも各プランごとに決められた回数のGPT3.5,GPT4を用いたコーディングができます。
しかし、設定をすれば自身で所有しているOpenAI API KeyやAzure OpenAI Keyを利用してコーディングできます。
これを使えばCursorはFreeプランのままでも回数制限なしに利用できます。
- 他でOpenAI APIを利用中で料金を一元管理したい方
- 使用する頻度にムラがあるため従量課金にしたい方
- 企業利用なのでAzureOpenAIを使いたい方
など、柔軟な用途に対応できます。私もOpenAI APIで利用しています。
Cursorエディタの不便な点
あまりないですが1点だけ。それは異なる端末での設定共有ができないことです。
VS Codeではマイクロソフトアカウント連携することで設定を共有できましたが、Cursorはできないため少しだけ不便に感じます。
初心者のブログ執筆活用術
いよいよCursorでのブログ執筆です。
今回私は下記のような使い方をしました。
章立ての作成
自分が書きたいポイントだけ書いて読む人にわかりやすい章立てを考えてです。それっぽい章立てを考えてくれます。「ブログの型」が決まってない初心者としてはとても助かりました。
技術用語の説明の補助
これはお決まりですね。出力の文字数だけ伝えればOKなので簡単です。ただし、内容の精査は忘れないようにしましょう。
ブログタイトル案の作成
ブログタイトルを考えてもらいます。これは自分の書いているブログ（ファイル）の中身を理解しているチャット欄が活躍します。
とくにSEO対策を考慮してで初心者でもそれっぽいブログタイトルを考えられることがたすかりました。
想定「まさかりコメント」を考えてもらう
初心者の恐怖の象徴「まさかり」。
この対策として異なる5人の立場でこのブログに対して批判的なコメントを考えてくださいと依頼します。
「まさかりは過度に恐れなくてもいい」と経験者達は言いますが、対策することで若干気持ちが楽になります。ここでもファイル内容を理解しているチャット欄が便利でした。
ブログ執筆活用の所感
このようにCursorでのブログ執筆は初心者ブロガーにとって大きな力となりました。
なんとなく、「ブログ上級者になると物足りない部分もでてくるのかな？」と思いましたが、少なくとも初心者目線では助けられることが多かったです。
AIに依頼する内容についてはまだまだ改善の余地があります。今後、利用しながらさらにノウハウを蓄積したいと思います。
唯一気になるとすれば、GitHub Copilotのように続きを自動でレコメンドする機能があればもっと便利なのにと思いました。
ただプレビュー機能ですが、CursorのCopilot++機能を使えばできそうです。私はOpenAI APIで利用中のため、CursorはFreeプランでありGitHub Copilotの契約と変わらないため試していませんが、PRO以上を利用している人には有望かと思います。
さいごに
Cursorエディタの紹介、ブログ執筆での活用方法いかがでしたでしょうか。
冒頭で書きましたように私はエンジニアは日常的にアウトプットをしていくべきと強く思っています。（始めたばかりの身で言うのは大変恐縮ですが。）この記事が一人でも多くの初心者ブロガーの助けになれば嬉しいです。
以上、ありがとうございました。
Discussion