コンテンツにスキップ
非エンジニアのためのVibeCoding入門

必要なもの

この章でわかること: VibeCodingでプロトタイプを作って公開するまでに、何を揃えれば よいか。まず「買い物リスト」を把握し、次のページで順に用意します。

揃えるもの一覧

Section titled “揃えるもの一覧”
必要なもの役割区分・費用
パソコン作業するパソコンMac または Windows
Node(ノード)Next.jsを動かす「エンジン」無料アプリ
Git(ギット)変更履歴の管理。Claude Code が内部で使う必須ツール無料(OSごとの方法で導入。次ページ)
Claude Code デスクトップ版AIに指示してコードを作ってもらう相棒アプリ(有料プランが必要)
GitHub アカウントコードの保管庫 兼 公開スイッチ無料で開始できる
Vercel アカウントプロトタイプの公開先(ホスティング)無料で開始できる

それぞれ何のため?

Section titled “それぞれ何のため?”
  • Node: Next.js は Node という土台の上で動きます。プロトタイプを自分のパソコンで 「とりあえず動かして確認する」ために必要です。車のエンジンのようなもの。
  • Git: 変更履歴を管理する道具(Git とは)。Claude Code はこれを 内部で使うため、入っていないと動きません。OS ごとの方法で簡単に入ります(次ページ)。
  • Claude Code デスクトップ版: ターミナル(黒い画面)が苦手でも使える、GUIの AI開発アプリです。このサイトではCLIではなくデスクトップ版を基本にします。
  • GitHub: 作ったものを保管し、変更を送ると公開サイトが更新される仕組みです。
  • Vercel: 作ったプロトタイプをネットに公開する場所。Next.jsと相性が良く、 GitHubと繋ぐだけで公開できます。

なぜ大事か

Section titled “なぜ大事か”

道具が何のためにあるかを分かっていると、トラブル時に「どこの話か」を切り分け られます。「動かない」のがNode(エンジン)の話か、公開(Vercel)の話か—— この地図があるだけで、AIへの相談も的確になります。

参考リンク(情報ソース)

Section titled “参考リンク(情報ソース)”