みなさんこんにちは！　
エンジニアの奥井です。

AI、AIと騒がれている昨今、その波は我々Web業界にも押し寄せてきております。
私も一介のWebエンジニアとしてAIの実力を見てみたい！　
そこで今回はAIによるコーディング補助ツールで一番有名とも言えるCursorというソフトでその実力を見てみようと思います！　

Cursorとは？

その前にCursorについて簡単な説明を。CursorはあのVisual Studio Codeの代替エディタとして開発されました。VSCodeにAI機能を組み込んだ、というイメージで問題ありません。
実際、今までVSCodeで開発していた自分も、特に障壁なく乗り換えることができました。
ざっとできることで言うと、エディタ画面でChatGPTのようにAIに色々聞けたり、この後ユーザーがどのような入力をしたいのか先回りで予測して補完するか聞いてくれたり、エラーが出ていたら直すよう助言してくれたりします。

まずはパーツ単位で任せてみよう！　

それではまずCursorにパーツ単位のコーディングを任せてみましょう。
実際のCursorの画面をごらんください。

例としてこのネクストページブログの一覧ページのコードをダウンロードしてきたものです。
左がファイルの一覧（検索もできます）、真ん中が実際のコーディング画面、右がAIに質問するための画面です。早速、記事へのリンクボタンの別パターンパーツを作ってみましょう。

実際にAIに言ってみます。すると…

このように追加するかどうか聞いてくれます！　
ChatGPTと違ってコーディングする画面で直接聞けるのは便利ですね。

色を反転させたボタンができました！　ちゃんと反転していますね。

もうページ単位で任せてみよう！　

パーツ単位でできることはわかりました。ではいっそのことページ単位で任せてみましょう。

完全に空っぽのコードです。「一般的なHTML構造のコードを書いてもらえますか？」という曖昧な入力をしました。

ちゃんとした構造になっていますね！　さらにCSSを追加するようにして、フォントサイズと全体の色を指定してみると…

しっかりとしたサイトになりました！　
おそろしやAIの実力…

やっぱりAIはすごかった

ついにAIはページをひとりでに作ってしまう所まで来てしまったようです。
まだまだ人間ができる領域もあるとは思いますが、AIに完全に抜かされてしまうその時まで、AIをうまく使いながらエンジニアとして頑張っていたいですね。

それではまたお会いしましょう！