CursorのAI機能に頼り切って電卓を作ってみました

この記事は BABY JOB Advent Calendar 2023 の 11 日目の記事です。

TL;DR

話題に乗っかり、 AI に全部お任せで電卓を作りました。
私はソースを一切書いていません。
これがノーコードか。（違う）

Cursorとは

生成 AI 機能を搭載しているテキストエディタです。
VSCode をベースに作られているため、 VSCode を利用している方であればとにかく入りやすいです。
公式：https://cursor.sh/

料金プランによって使える機能や性能が違うようですが、今回はとりあえず無料プランを使わせていただきました。

成果物

出来上がったものはこちらです。
可もなく不可もなく、普通に四則演算なら問題なくできる電卓となりました。

実際の作業

1. プロジェクト作成

AI プロジェクト作成を選択します。
もはやただのプロジェクトではなく、 AI プロジェクトなのか。

作成するプロジェクトの概要を記載します。
今回はシンプルに電卓 (calculator) と記載しました。

作成する AI プロジェクトの情報を記入します。
作業ディレクトリはデフォルトのまま、名前は適当につけました。

出来上がったHTMLはこんな感じでした。
ボタンの配置。。笑

ボタンの位置はめちゃくちゃですが、これでも計算はできます。
出力結果をクリアする機能がないので、再読み込みすればなんとか使えます。
プロジェクト作っただけでここまでできるとは。。

2. レイアウトの微修正

AI にお願いしてソースを修正していきます。

修正が必要そうなソースを選択してショートカットキー [ Command + k ] を実行。

「計算機らしくボタンのレイアウトを調整してください。」と依頼してみました。

！？
もう文句ない見た目に。。。

Accept ボタンを押下して AI の提案を取り込みました。
優秀すぎる。。

3. 機能追加

もうこれで終わっても全然良かったのですが、こだわってクリアボタンを追加してみます。

改めてボタンを実装しているソースを選択し、「クリアボタンを追加してください。ボタンを押下すると、inputエリアの値を削除してくれるような挙動を想定しています。」と依頼してみました。

ちょっと注文増やしてみたけど、サクッと作ってくれるなー。と感動していましたが、
クリアボタンを押すと「C」と入力されてしまうバグが発生しました。
このままではクリアしても「C」が邪魔で次の計算ができません。

チャット機能で問題を報告することにしました。
右側のチャット欄で「Cボタンを押下すると、inputエリアの式は確かにクリアされるのですが、なぜか「C」が入力されてしまいます。」と入力してみました。

ソースに入れ込んでみます。
提示されたソースの右上にある「Apply to Current File」ボタンを押下しました。

提案内容の 1 行がソースに反映されました。

が、ダメでした。

正直、「48 行目に入っちゃうのが原因だろうなー」とは薄々思ってましたが、もうちょっとなので我慢して AI との対話を続けます。

おお！
この修正内容であれば、いけてるのでは！？

いけました！！嬉しい！！
なんか、新人に答えを教えずに見守ってたら、自力でできて一緒に喜んだ時の感覚と全く同じ！
よし、もう今日は飲みに行くか！

結論

めちゃくちゃ便利です。
若干私の意地が入っていましたが、本当に最初から最後までソースを書くことはありませんでした。

参考にしたサイト

お世話になりました。感謝。
https://chatgpt-lab.com/n/n4ee439fcb692

最後まで読んでいただきありがとうございました。
たまには技術触ってみた系の記事が書きたかったので大満足です。