Cursorを用いたWebページ制作と実装

最終編集日: 2024-06-25
メイン画像1
サムネイル1サムネイル2

AIコーディングアシスタント「Cursor」を活用して本Webページを作成、GitHubとNetlifyでデプロイしました。
ReactもNode.jsもまだほとんど理解しておりませんが、ほぼAIアシスタントへの仕様指示のみでここまでの実装にこぎつけました。
以下が大まかなステップです

  • Cursorをインストール (お好みで月額20$のプランにも加入)
  • Cursor内部のAI Paneで要求するページの基本設計を伝える
  • 要求された必要なものを追加でインストール (今回はNode.js)
  • 細かな指示を出しつつコードを生成させ、ローカルで納得いくまでページをシェイプアップ (ローカルで状態を確認する方法などもアシスタントに聞いて教えてもらう)
  • GitHubに登録
  • ホスティングサービス (今回はNetlify) に登録、ついでにNetlifyとGitHubも連携
  • GitHubでサイト用のレポジトリを作成
  • AIの指示に従ってWindows PowerShellでコマンドを実行、GitHubのレポジトリにwebページのデータをアップロード
  • NetlifyからGitHubのレポジトリを指定してデプロイ

これからコード内容の解読に入りますが、AIアシスタントの力を借りればコード理解0でもここまで行けるというのはかなりの驚きでした。
またスマホ表示への対応なども簡単な指示で快適に行えました。
個人サイトを作るだけならWixなどのノーコードサイトビルダーでも十分ですが、コード学習などと並行して行いたい人やより細かな設定をいじりたい人にはおすすめの方法です。