1
2

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チュートリアルをやってみた

Posted at

立ち上げ・設定

image.png
Sign UpからGitHubでログイン
image.png
image.png
む...遷移しない
こんどはLog Inから進んでみたら入れた
image.png
Import from VS Codeで進む
image.png
Import
image.png
お好みでContinue
image.png
このページはただContinueでいいのかな
image.png
Privacy ModeContinue
image.png
Language for AIJapaneseに設定
image.png
日本語設定を求めてProfilesに行ってみたけど、言語設定はなさそう
image.png
ここから先は特にウィザードが出たりするわけではなかったので、以下のガイドに従って進める

日本語インターフェースの設定

Cmd+Shift+Pからlanguageと入力し、Configure Display Languageを選択
image.png
日本語を選択
image.png

あれ...
Cursorを再起動してみる。
日本語表記になっていなさそうだったので、再度日本語に設定した
image.png
おっ
image.png
初期画面には日本語要素がないけど、ステータスが日本語表記になっているのを見た...!

チュートリアルに沿って動かしてみる

「話す」で小さな製品を作る

Ctrl+iでAIチャットボックスを開く
image.png

以下を入力

PCウェブサイトを作成してください。機能は以下の通りです:
1. 画像をアップロードできる入口があり、複数の画像をアップロードできる
2. 結合ボタンがあり、クリックするとアップロードした画像を1つに結合して表示し、結合した画像をダウンロードできる

image.png
リポジトリもない状態でお願いしようとしたらさすがに実行できないようだった。
GitHubでリポジトリを作って、クローンする
image.png
改めて、指示を入力する

出来上がった:

image.png

動作確認1

失敗した。

改修1

image.png
ログの該当部分を選択してAdd to Chatし、そのままSendしたら修正してくれた様子。
image.png
Accept allしてみる。
サーバーが落ちてしまったので、ターミナルで再度node server.jsを実行する。

動作確認2

同じエラーで失敗。

...

ブランチ切ってコミットしよう。それってお願いできるのかな。
image.png
できた。
image.png

コミットOK

image.png

改修2

エラーメッセージを送っただけでは改修に失敗したので、プロンプトを入れてみる。
image.png

動作確認3

動いた🎉 疲れた...

PRを作ることができるかどうか?

image.png
タイトルと説明を生成してくれたので、便利は便利。GitHub CLIを使ってPR生成まで完結できそうな気もするな🤔

GitHub CLIを使ったらPRを作るところまでやれる?って聞いてみたら、GitHubの存在確認から、homeblewによるインストールから、PRの作成まで全部やってくれた!
image.png

惜しい...!

image.png

できた!けど、既存のPRをクローズして新しいPRを作成しているところがちょっと引っかかるな。

レビューしてもらってみたい

image.png
いきなりApproveしようとしたのでびっくりした...
ステップバイステップで考えるのが苦手なの忘れていた。
その後、じっくりレビューする、というよりは、私が指摘した観点で修正してくれた。
image.png

すごいと思ったところ

観点を伝えれば、私が技術スタックとして持っていない部分をケアしてくれていそうなのがとても助かる。

動作確認はできないらしい

image.png

テストはかける

書いてくれたけど、通りはしない。修正しても、テストが通ることを確認しない。
テストが通ることを確認してからコミットを作成してほしいってお願いしたら、その通り動いてくれるようになった。

どつぼにハマりがち

サイクルを回していくと、同じ問題を何度も対応している様子が見られた。
一向にCIが通るようにならない...
Cursorのクレジット消費ってどこで確認できるのかな🤔

本当に、全く通らない。

しまいには全部落ちるようになってしまった...

プロンプトでCI的に確認するようにしてみた

image.png

だめだ...テストを通せない。

GitHub ActionsでCIが回るように設定できる

image.png

ルール設定

そういえばルールを設定できるって聞いたような。

参考になりそうなキーワード

Usage

image.png
どつぼに入ったものを頑張ろうとすると1日でこうなる。

学び

  • ルール設定は大事
  • テストを通すのは苦手
  • 広い視点でテスト項目を作成してくれるので、サポート的に使う分には便利
1
2
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
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?