最近のエンジニア界隈の動向
最近Xを見ているとすごいエンジニアの人たちが生成AI系のツールを駆使して開発をしまくっている。
まぁ、でも僕もGitHub Copilotをプライベートで契約しているし、Chat GPTも使っているしそんなに置いて行かれてるなんてことはないだろう。
そんなことなかった！
…そんなことありませんでした！
置いてかれていました！
私事ではありますが、4月より新しい会社に入社して、だいぶスタートアップで少人数（というかエンジニアは自分だけ）かつ生成AI周りを積極的に活用していく仕事をすることになりそうなので、本腰入れて生成AIのツールを駆使して開発をしてみるかとなったわけです。
そこで今世の中ではどんなツールがあってどんな使い方をしているのかをザッピングしてみたら、「あれれ？結構すごいことできちゃってるんじゃないの？」という気配を感じ、実際に触ってみたらとんでもないことになっていたので、その過程を書き記していこうと思います。
今回の実験
最近NFCのカードを買ったものの、雑にXのプロフィールへのリンクが書かれているだけだったので、それっぽい名刺がわりのサイトをなるべく生成AIのパワーに頼り切って作ってみました。
ちなみに今回の流れは以下の通りです。
- 生成AIとのチャットを通じて、作りたいものを言語化
- 上記の要素を備えたものを作ってもらうプロンプトを生成
- 上記のプロンプトをぶん投げてコーディングしてもらう
- 生成AIに指示を出して、気に入らない部分を修正
- 生成AIでホスティングまでやってもらう
使用した生成AIツール
今回はとりあえず気になっていた以下のツールを試してみました。
Claude
Chat GPTとそんなに変わらないんじゃないの？？と思って使っていなかったやつ。
今回のために登録して、主にどんなものを作るかの壁打ちとその制作依頼用のプロンプト生成に使用しました。
モデルはClaude 3.7 sonnetを使用。
Manus
1ヶ月くらい前に話題になっていたエージェント。
色々できるらしいが、今回はコーディングをしてもらいました。
これも今回のために登録。
即登録ではなく、ウェイティングリストみたいなやつに入れられたので、もしかしたら時間かかるかもと思いましたが、1分くらいで使えるようになりました。
正直これがやばすぎた。
Windsurf
こちらはコーディングエージェントを搭載したテキストエディタ。
いわゆるCursorみたいな感じですね。
細かい調整はこちらを使って行いました。
個人的にはWindsurfはターミナル操作のところで革命が起きました。
それでは作っていく
1. まずはどんな要素が必要になるかを考えてもらう
今回はNFCカードの飛び先のページを作りたかったので、Claudeに以下のプロンプトを投げました。
あなたはプロのWebディレクターです。
名刺の代わりとなる自己紹介サイトを作りたいです。
アクセス方法としては、NFCカードにURLを書き込んで、そこからスマホでアクセスしてもらうことを想定しています。
そのため、既存のWebサイトのようなデザインではなく、一目で自分がどんな人物なのかわかって、各種SNSに簡単に飛べるようになっているようなデザインにしたいです。
この場合、どのような要素を配置するのが良いでしょうか？
返答としては、ビジュアルインパクトがあって、スクロールをせずに情報が収まるようなもの的ないい感じの要件を提案してくれたので、そのままコーディングエージェントに投げる用のプロンプトに変換してもらいました。
プロンプトも割といいものが返ってきました。
最終的にS3にアップできればいいかと思ったので、その制約だけ追加してプロンプトを改良してもらい、Claudeはここでお役御免となります。
2. Manusにコーディングしてもらう
次はManusにプロンプトを投げてコーディングしてもらいます。
これがとっても未来的な動きをするのですが、プロンプトでの依頼に対して一つ一つ考えて行動するような感じでタスクを次々と実行していきます。
静止画なのでわかりにくいのですが、こんな感じです。
コマンドを実行してディレクトリやファイルを作ったりしています。
画像に写ってないですがローカルサーバを起動してテストみたいなこともしてそうなメッセージが出ていました。
そして、このManusの作業は完了までに結構な時間（数分〜十数分）がかかるので、この間に昼食をとります。
腹を満たして戻ってきたらこのような感じで成果物がダウンロードできるようになっていました。
複数ファイルできている。
あくまでテンプレートを作ってもらっただけなので、この修正は手元でやっていきます。
そのためのTodoが書かれたドキュメントも生成されており、おもてなしの精神がハンパないです。
ちなみに生成されたファイルをそのまま開いたら、こんな感じになっていました。
ある程度形になっていたのですが、QRコードだけどうしたんでしょうね。
他にも変な場所で改行されていたり、アイコンが1個だけ下に落ちていたり、アイコンとテキストの横のラインが微妙に揃っていなかったりと気になる部分はちょくちょくあるものの、ちょっと修正すれば使い物になりそうです。
3. Windsurfで修正をしていく
続いてはWindsurfを使って気に入らないところを修正していきます。
WindsurfはVSCodeからフォークして作られたエディタなので、最初に開いた時にVSCodeの設定をインポートするか聞かれます。
とりあえずYesにするとこれまで使ってた拡張機能が最初からインストールされており、vscode vimを入れていたのでVimのキーバイドも使うことができ、移行や新しい学習コストがかからない非常に優秀なツールだなと感じました。
見た目はこんな感じで見慣れたモダンなエディタです。
右側のペインにチャット欄が出てくるので、基本的にはそこで自然言語を使って指示を出します。
するとコード上に変更差分の提案が表示されるので、それを使う場合は受け入れ、ちょっと微妙な提案だった場合は拒否していきます。
差分はGitの変更差分のように表示されるので、エンジニアであれば直感的にわかるようなものになっていました。
ちなみに今回はチャット欄で以下のような指示を出していきました。
まずはスマホで開いてるんだからQRコードいらないし見た目的にも大変なことになっているからぶち消します。
他にもいらないSNSはぶち消します。
さらにポートフォリオサイトもないのでぶち消します。
スキルもフロント得意そうな感じになっているので変更します。
そして、名前や連絡先、SNSのリンク先などダミーデータになっているものを正しいものに差し替えていきます。
最終的にほぼ指示だけでどうにかなったのですが、Font AwesomeのXのアイコンだけどうしても辿り着けなかったので、仕方なくドキュメントで調べて修正しました。
自分で行った修正も差分みたいな感じの表示になるので、そこだけは使いにくいなぁと感じましたが、指示出しだけでコードがどんどん修正されていくのは快感でした。
見た目がOKになったらあとはデプロイです。
4. Windsurfでデプロイまでやっていく
Windsurfはコードの書き換えだけでなく、ターミナル操作まで実行してくれます。
やりたいことを書いたらコマンドの提案がされて、それを受け入れるとコマンドが実行されます。
しかもすごいのが、エラーが出た時に、そのエラーが何でダメだったかを考えて対策まで提案してくれます。
今回だったらAWS CLIを使ってS3にプッシュしていく作業をやったわけですが、awsコマンドが使えるかを試した後に、その結果に応じてインストールまでやるみたいなことをしてくれます。
認証情報系を直接Windsurfから使うのはちょっと気になったので、IAMで今回用の最小権限ユーザーを作ってターミナルから設定は行いましたが、S3にバケットを作ったりアップしたりする部分は完全に自動でやることができました。（結局テキストで残ってるから気休めでしかないような気もするが）
そして無事アップロードが完了しました。
HTTPSも対応したかったのでそれも指示を出したところ、CloudFrontを使うのはコンソールの方からやったほうが簡単ですと言われて、手順が出てきたので、それ通りに設定を行う。
そんなステップを踏んで完成したのがこちらのページです。
デジタル名刺｜Kazunori Matsushima
どんな要素のものを作るか考えるところからも込みで所要時間は2.5hだったので、革命的に工数が減っていると言わざるを得ないですね。
多分、自力でやろうとしたらどんな要素を配置するかを決めるのに数十分かかり、デザインで挫折して終わるので革命が起きたとしか思えません。
まだバックエンドが絡んでくるようなシステムを作るのはやっていませんが、これらを使えばLPとかも量産できるでしょうから、とんでもないPDCAとか回せそうな気配がします。
正直これまでは自分で何かを作ろうとすると、必ずデザインとかフロントの部分が大変すぎて心が折れていたので、これらのツールを活用したら自分一人で結構色々なものが作れそうに感じました。
そして同時にエンジニアとしてこれまでの延長線上で仕事をしていたら、あっという間にAIよりしょぼいただのおじさんになってしまいそうな予感も感じたので、キャッチアップし続けてこの勢力図の中でどんな動きをしたら価値を出せるのだろうかということを考えていかなければと思わされました。
各種ツールを使ってみた所感
最後に各種ツールの所感についてもまとめていこうと思います。
Claude
こちらは使った役割が大きくなかったのでChat GPTと比べて何が良かったとか悪かったとかは全く感じなかったです。
何かがわかるまで並行で使ってみようと思います。
Manus
これがやばすぎました。
まず、依頼に対してAIエージェントが必要なタスクを洗い出してそれをどんどん実行していくという超未来的なUIが痺れます。
待っているだけでタスクが終わるのですが、抽象的なタスクをこなすことができるため、これまでのシェルスクリプトを使った自動化とはわけが違うように感じました。
メンテナンスコストもかからないし、作成にも時間がかからないし、一つのツールの存在だけで色々な幅の問題解決ができます。
もちろん従来の自動化に分がある作業もあるので使い分けは必要だと思うのですが。
ちなみに今回こそQRコードがバカデカく表示されるみたいなわけのわからんことが起きていましたが、他のパターンで試したときは一発でほぼ問題ない見た目のものが生成されたりもしました。
Windsurf
新しい開発体験で楽しかったです。
ついつい自分でコードを書きそうになるところを我慢してプロンプトで操作をしていました。
自分で直したほうが早いというシーンもありましたが、不要箇所の削除などはHTMLだけでなくCSSも漏れなくやってくれるので、メンテナンスでも使えるのではと思いました。
一方で、普通にコードを書こうとした時はGitHub Copilotくらいの控えめな感じのほうが使いやすいと感じたのと、一度受け入れしてブラウザで確認してから問題あった時に戻すみたいなことがやりにくいと感じました。
現段階の感想としてはコーディングは自分でやったほうが早いことが多いかもという感じです。
しかし、ターミナル操作の自動化の部分は革命的でした。
大体のコマンドなんて正確には覚えていないので、都度調べて実行すると思うのですが、その辺が調べなくてもほぼ間違いなく提案されるので、ここでの作業効率は爆速になりました。
ターミナル操作のためだけにWindsurf立ち上げるのも全然ありだと思います。
ただターミナル操作の場合、結構深いところまでいじれたりすると思うので、これから実行しようとしていることがとんでもないことをしようとしているかどうかを判断するくらいの知識を持っている必要があるとも思います。
総括
AIすごかった。
AIたのしかった。