こんにちは、もとよしです。
僕は、プログラミングのことをミリしら(1mmも知らない)な40代のおじさんです。
AIツールはほぼ毎日触れるのですが、最近このWindsurfというものを知りました。このWindsurf、なんかめちゃくちゃすごそうです!
2025年5月24日に早速インストールしてみました。
しかし、操作方法が全然わからない・・。今の僕は、まだこいつの力の1%も引き出せていない笑
でも、最初は誰でもなんでもそんなもん、だと思いますので、まずは色々触りながら、勉強していきます。使い方が間違っているところもあるかも知れませんが、勉強の記録としてこの記事を残します。
今回は、
・(Windsurfの前に)バイブコーディングを知る!
・Windsurfとは!?
・実際に使ってみた!
の3点でお届けします。
(Windsurfの前に)バイブコーディングを知る!
AI(人工知能)が急速に進化する現代、ホワイトカラーやエンジニアの仕事も大きく変わろうとしているのは、すでによく言われていることですよね。AIを活用できないホワイトカラー職は、今後、仕事がなくなってしまう可能性すら指摘されています。怖いですね・・。
そんな中、注目されているのが「バイブコーディング(Vibe Coding)」です。
バイブコーディングとは、AIに「こんな感じのアプリがほしい」「この部分をこうしてほしい」といったざっくりした指示(プロンプト)を伝えるだけで、AIが自動的にコードを生成・修正してくれる新しい開発手法です。

Vibe=雰囲気
Coding=プログラミング作業
要は、雰囲気でプログラミングができてしまう、というチートです。
これにより、プログラミング初心者でも手軽にアプリやWebサービスを作ることができたりするんです。

余談ですが、vibeに「震える」という意味はもともとありません。vibeとは、音楽や雰囲気・ノリを意味する言葉。震えるは、shake や trembleです。
Windsurfとは!?
Windsurfは、この「バイブコーディング」ができる、AIの開発ツールです。
詳しくは、次世代AI統合開発環境(IDE)というそうですが、筆者も詳しくは知りません笑。使うだけなので、知らなくて大丈夫です!
簡単にいうと、AIがプログラミングをサポートしてくれるパソコン用のアプリ(ソフトウェア)です。
「こんなアプリがほしい」「このバグを直して」など、日本語でAIに指示するだけでコードを自動で作ったり直したりしてくれます。
僕のようなプログラミング初心者でも、自然な言葉でAIとやりとりしながら簡単にアプリやWebサービスを作ることができます。
なお、Windsurfはパソコンにインストールして使うもので、ブラウザで使うことはできません。
Windsurfの料金プランとクレジット
Windsurfは無料でも使えますが、課金することでグレードアップすることができます。AIツールでは、よくある話ですね。
料金プランをまとめるとこうです↓
プラン名 | 月額料金 | クレジット(AIへの指示回数) | アプリデプロイ(アプリ公開)回数 | プレビュー |
---|---|---|---|---|
Free(無料) | 無料 | 25回/月 | 1回/日 | 無制限 |
Pro | $15 | 500回/月 | 5回/日 | 無制限 |
Pro Ultimate | $60 | 無制限 | 無制限※ | 無制限 |
Teams | $35/ユーザー | 300回/ユーザー/月 | 5回/日 | 無制限 |
Teams Ultimate | $90/ユーザー | 無制限 | 無制限※ | 無制限 |
※プラン内容は時期によって変更される場合があります。最新情報は公式サイトでご確認ください。
・クレジット:AIに指示を出すたび(チャットやエージェントへのメッセージ)に1回消費します。
・アプリデプロイ:作ったアプリをネット上に公開できる回数です。
・プレビュー:アプリを自分のパソコン上で試すのは何度でもOKです。
ちなみに、僕はFreeプラン。でも、100クレジット付いていました。「12日間のトライアル」という表示もあるので、この期間は100クレジット付与されているのかも知れません。後で調べてみます。





今後、ガンガン使えるようになりたいので、そのうち月15ドルのProにすると思います。
Windsurfの使い方
Windsurfのインストール、ログインが完了している前提のお話です。
インストールとログインがまだでしたら、こちらを参考にしてください。
Windsurfのインストール方法


で、実際に以下の手順でWindsurfを触ってみました。
⓪下準備(後でもOK)
Windsurfの画面は、全て英語です。ただ、少しでも日本語にしたい、という場合は、日本語に表示変換も可能です。
日本語にしたい場合は、以下の記事を参考にしてください。


また、Windsurfのトップ画面には、以下の選択肢があります。
Getting started with Windsurf
○ Code with Cascade
○ Open Command Palette




この画面は、Windsurfの初期利用者向けに主要な機能(CascadeによるAIコーディングやコマンドパレットの利用)を案内しているものです。
どちらかを選ぶことで、その機能の利用がスムーズに始められます。



後からいつでも利用可能です。
code with Cascade
Cascade(カスケード)はWindsurfのAIエージェント機能で、プロジェクト全体を理解しながら複数ファイルにまたがる編集や自動テスト、バグ修正などを自律的に行うことができます。
code with Cascadeを選ぶと、AIが能動的にコード生成や修正、テスト、デバッグなどを行い、開発者の作業をサポートしてくれます。
たとえば、「新機能を追加して」「バグを直して」などと指示を出すと、AIが自動で必要なコード変更やテストを実行してくれます。
Open Command Palette
Command Palette(コマンドパレット)は、コマンドや機能を素早く検索・実行できるショートカットメニューです。
Open Command Paletteを選ぶと、キーボードやマウスでさまざまな操作(ファイル検索、設定変更、拡張機能の起動など)を素早く実行できます。
たとえば「Ctrl + Shift + P」キー(Macなら「Cmd + Shift + P」)を押すと、いつでもコマンドパレットを開くことができます。
初心者の筆者は、code with Cascade
まとめると、
code with Cascade:AIエージェントによる自動編集・テスト・デバッグなど高度な支援を受けたいときに使う
Open Command Palette:コマンドや機能を素早く呼び出したいときに使う
code with Cascade(AIエージェント機能)は、AIが自動でコード生成や修正、バグ対応、必要なツールのインストールまでサポートしてくれるため、プログラミングの知識が少なくても安心して開発を進められるそうです。
初心者の僕は、code with Cascadeを選択しました。
①プロジェクトやファイルを開く
「ファイル」→「新しいプロジェクト」や「フォルダを開く」を選び、作業したいプロジェクトやファイルを開きます。


僕は適当に、デスクトップに「Windsurf」というフォルダを作りました。


これでフォルダが開けました。


②AIとチャットでやりとりする
画面右側のチャット画面で「こんなアプリを作りたい」など、日本語でやりたいことを入力します。
AIが自動でコードを生成・修正してくれます。


あまりいい例を思いつかなかったのですが、例えば、
縦スクロールのシューティングゲームを作って
と命令しました。


すると、勝手にAIが作成を進めてくれます。


専門的なことはともかく、何やら完成したようです。


命令を出してから完成まで、1分程度でした!
③生成したコードを実行する
プログラムを実行してみます。
ちなみに、プログラムはローカルサーバーで実行します。



WindsurfのFreeプランだと、1日1回、作ったアプリをネット公開できるみたいです。
それ以外は、自分のローカルサーバーで起動です。
こんなのが出来ました↓
1980年代であれば革新的なゲーム!かも?
④必要に応じて、追加修正の指示をする
必要に応じて指示を加えることができます。
さっきのはあまりに横移動が遅すぎたので、機動力を上げてもらいましょう。


その結果↓
ここからも修正指示を出しまくっているうちに、ゲームはバグりました笑。僕の指示だしが適当すぎたのかも知れません。



他のAIツールと同様に、指示の仕方次第で、正確性は変わってくるのだと思います。
振り返り
今回作成がうまくいかなかったのは、使用しているAIモデルも影響しているのかも知れないです。



AIモデルとは、GTP-4oとか、Gemini2.5Pro、Claude3.7Sonnetなど。モデルによって、推論が得意とか文章が得意とか、得手不得手があります。
ちなみに僕が使ったモデルは、クレジットを消費しない「SWE-1-lite」というもの。デフォルトでこれになっていました。モデルの変更は、Windsurf画面右下で出来ます。


ちなみに、「テトリス作って」と依頼すると、さらりと作ってくれました。
今回は、まず触ってみるということが目的でしたので、ここまでです。
今後自分の副業に必要そうなモノをどんどん開発していきたいと思います。
ここまで読んでいただき、ありがとうございました!
コメント