帰宅後の数時間でWebアプリ開発!?JTC生保の情シス担当が体験したcursorの魔法

こんにちは、JTC生保の情報システム担当者です。
創業100年を超える会社に勤め、2024/4月に情シスに異動。新商品開発や次期基幹システムの開発の担当として奮闘中です。

そんな私が、ある日の帰宅後の数時間で体験した「cursorの魔法」についてお話ししたいと思います。プログラミングの知識がほとんどなかった私が、わずか数時間でWebアプリ開発に挑戦し、そして成功を収めたのです。最新のテクノロジーを追いかけながら、一周遅れぐらいのペースで情報発信するのが私のスタイル。今回は、その中でも印象的だったcursorとの出会いについて掲載します。

プログラミング初心者の方や、新しいツールに興味がある方、そして限られた時間で効率的に学びたいと考えている方にとって、きっと参考になるはずです。私の体験を通して、cursorの魅力と可能性を感じていただければ幸いです。

Cursor - The AI-first Code Editor

きっかけは、あきらパパさんがX（ツイッター）で紹介していた記事です。

cursor初回の方に良さげです

ChatGPT✖️VSCodeのAI搭載エディター「Cursor」のわかりやすい使い方
　　URL: https://t.co/XfubtEcSW8

またAI・IT情報でいいのあったらシェアします〜👍

— あきらパパ【生成AI活用エンジニア&３児のパパ】 (@akira_papa_IT) May 3, 2024

リンク先の記事を読んで作業を開始！
webアプリ作るまでは寝る準備もしながら約1.5時間。
リンク先の記事は2023/11に掲載されたので、半年が変わった機能があるのでその点を中心にまとめていく。

ダウンロードしてcursorを起動してみた！
トップ画面を開くと写真のとおり。

右にチャット欄があるので、「ここでチャットするんだよね？」と質問するとGPT4がそうだよ！と回答してくれました。
ちょっと回答にもっさり感があるけど、無料なので贅沢言わないように🤣（cursorには有料プランもあるのでそちらは回答が早そう）

参考記事にあったチャット欄に“+attach“がない。
UIが変わってる部分なのね。
@mentionと同じ動作っぽいので問題ないと思う！
次進めましょう。

後は記事を参考にポチポチすると操作の基本は学べました。ありがとうございます😭
あくまで基本なので、もっとできる事はまだまだありそう。また紹介できればと思います。
今日はwebアプリ作るなので次に進みます。

【大問題発生】
参考サイトにあった「New AI Project」がない。選択できない、片っ端から見たけどない。。
無料だから！？
・・・。
どうやら、2024/4末に機能変更が入って一時停止しているようです。

困った、ただ今回はシンプルwebアプリなので大した問題じゃないなと思って先にコードを書いてもらう事にしました！

チャット欄に「おみくじを引くホームページを作りたいです。プログラムコードを書いてください」と入力！
→→→
３つのプログラムを書いてくれました。
index.htmlとstyles.cssとscript.jsです。

さっきのNew AI Projectは勝手にファイルまで作ってくれるんだろうなぁ。
どこに何を作ればいいかよく分からなかったので
とりあえず聞く🤣
「フォルダ体系はどうしたらいいですか？」
→→→
教えてくれました！
ファイルだけ自分でハンドで作成。（ファイル名はコピペで作りましょう。歯磨きしながら人差し指で作業してたら、scriptの綴り間違えてなかなかアプリがうまく動作しませんでした💦）

後は、index.htmlをダブルクリック！！
【おみくじを引く】をおすと、運勢が返ってくるwebアプリが出来ましたぁ！

我々JTCは
質問すると🙋
「自分で調べたんか！？調べてからこい」
分からず進めると
「勝手に進めるなよ💢」
と言われるますよね。
GPTは優しく教えてくれるので、相談しにくい環境の人にはこのcursorはぴったりですね！
表面的な機能を平日帰宅後に触っただけなので、我々が使えそうな機能があればご紹介したいと思います！