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 との対話を続けます。
おお！
この修正内容であれば、いけてるのでは！？
いけました！！嬉しい！！
なんか、新人に答えを教えずに見守ってたら、自力でできて一緒に喜んだ時の感覚と全く同じ！
よし、もう今日は飲みに行くか！
結論
めちゃくちゃ便利です。
若干私の意地が入っていましたが、本当に最初から最後までソースを書くことはありませんでした。
参考にしたサイト
お世話になりました。感謝。
最後まで読んでいただきありがとうございました。
たまには技術触ってみた系の記事が書きたかったので大満足です。
Discussion