先日このブログでVibe Codingについてご紹介しました。
やっと先日Vibe Codingを講義してくれた講師が配信している動画で「入門編」を早速視聴してみました。
Vibe Codingのスキルをあげていく指標として7段階のレベルを定義して紹介してくれています。
Level1：1ページのWEBページを作成する。
Level2：Excelのマクロを作成する
から Level7はGithubを活用してAIエージェントを駆使するようなレベルになる模様。
もちろん初心者の私はLevel1からスタート。
WEBページは、HTML、CSS、Javascriptという言語をつかってソースコードを書くのですが、私は自分で自社のホームページをメンテナンスしているので、ある程度HTMLとCSSは扱えます。（Javascriptは扱えません^^;;）
ただ、とにかく時間がかかります。
かつて、自社ホームページをPCだけでなくスマホ対応（レスポンシブ）するだけでも四苦八苦して着手から実装完了まで1ヶ月くらいかかってしまったかも。
最近はメンテナンスをほとんどしていないこともあり、HTMLを扱うこと自体もしなくなってきているので、いまならもっと時間がかかることが予想されます。
なので、もしこのVibe Codingができるようになると、これからホームページのメンテナンスや新しい活用をやりやすくなるのでは、と期待できそうです。
講師の方もおっしゃっていましたが、「学習より実践」「考える前にまず行動」ということで、この手のことは先に実際に手を動かして、あ〜だこ〜だと試行錯誤していくことが習熟につながります。
なので、私もまずやってみることに。
ちょうどハウスルールを見直そうというきっかけがあったので、ハウスメイト向けのページを1枚作ってみることにしました。
使う生成AIは、有料会員登録しているChatGPT。
さっそく、ChatGPTに「以下のシェアハウスルールを住人閲覧用にHTMLにまとめてください」と打ち込んでみる。
すると、ChatGPT（このときのバージョンは5.2）はちょっと考えておもむろに、HTMLのコードを出力し始めました。
お〜〜、感動(^^)
そもそも、このCodeをタイプする時間より早い（笑）
2〜3分でできあがりました。
さっそくそれをコピーして、Macのテキストエディタに貼り付けて保存。クリックすると・・・
あれ・・・
HTMLのコードがそのまま表示される・・・
早速試練にぶつかる私（笑）
大事なのは、ここで考える・・・のですが、ChatGPTにきいてみました（笑）
するとMacのテキストエディタで保存すると、HTMLファイルと認識されない可能性があるため、Coding用のエディタを使ったほうがいい、というアドバイス。
自社のホームページのメンテナンス用にVisual Studio Code（VS Code）をインストールしていたので、そちらを使ってファイルを保存してみました。
そしてダブルクリックすると・・・お〜、できた(^^)
ふむふむ。確かにこれは早い。そしてタイポのようなミスがほとんどないので、正確性も高い。
さらに、プロンプトを投げてみます。
「イラストをつけて」
お、簡単なイラストが表示されました(^^)
このイラストをもう少しいじってみるのもいいのですが、そういう細かいところは後回しにして、いろいろと他の要素を盛り込むことをやってみます。
「カラーをMBAシェアハウスの雰囲気に合わせて」
なるほど、ちょっと雰囲気が変わったかな。
ChatGPTが「MBAシェアハウスのWebサイトがあるなら、そのURLやスクショを1枚貼ってくれれば、配色をそれにピタッと合わせた”完全版”に寄せます」といってきたので、早速URLを送ってみました。
「弊社のロゴ（濃いブルー）を基調にしたトーンだから」ということで、ブルー系に寄せた配色になってました。
ここで、1つのルールについて作ってもらったのですが、これまで適用してきたルールやマナー案件も同じページに載せてみることにしました。
プロンプトでは
・追加するルールやマナーの内容
・それぞれの項目にあったイラストを挿入
・MBAシェアハウスのカラーを踏襲
・日本語と米語の切り替えが簡単にできること
を記載して送ってみました。
英語版の原稿は、これもChatGPTのTranslaterという機能を使うと、かなり長い文章でも1〜2分で翻訳してくれるので、それをコピペ。
すると、それなりのページができました。
いやはや、この追加作業や翻訳作業だけでも、数年前ならとんでもない時間をかけていたことは容易に想像できるだけに、このスピード感は驚きです。
なお、ここまででざっくり2時間ちょっとくらいです（笑）
次にJavascriptを入れてみたくて「Javascriptを使ってちょっと動きをいれてみて」とプロンプトを送ってみました。
すると、「以下のCodeを〜〜の後に追加してください」とか「〇〇のところをこれで置き換えてください」という回答がやってきました。
なるほど、この段階になると、ちょっとHTMLをいじったことがある経験が役に立ちます。
その後は、「目次の追加」、「スマホ対応（レスポンシブ）」などを追加。
そしてさらに機能を追加しようとしたら、指示通りに置き換えをやっても機能しなくなりました。
何度も試行錯誤したのですが、新しいCodeに何かしらバグがあるらしいけど、そこにはChatGPTがたどり着けず、Codeの追加、置き換えによるアップデートは断念。
そこで、バグが出る前のCodeを添付して、追加したい機能を記載してプロンプトを投げ、一から作り直させてみたら、出力されたCodeはちゃんと機能しました。
この修正作業はわずか2分。
自分でバグの場所を探して、修正かけて、検証して、という時間を考えるととんでもなく早い（笑）
修正作業もChatGPTにやらせてしまう、というやり方もあるんだ、ということを学習(^^)
最後には調子に乗って、スペイン語への切り替え機能を追加することを要請してみました。
さすがに、この反映には8分ほど時間がかかりました。
しかも一部スペイン語の掲載場所が間違っている箇所が2〜3箇所ある、というバグ付き(^^)
まあ、この程度であれば私が自分でCodeを短時間で修正できるので、たいしたバグではないです。
この後表示について、微修正をChatGPTにやらせて完成。(^^)
今回のVibe Codingで
・複数のルールやマナー事項を盛り込んだ
・表示、非表示を自在に扱えるようにした
・カラーをMBAシェアハウス調にした
・イラストを挿入した
・目次をつけた
・日、英、スペインの3ヶ国語に対応した
・スマホ対応にした
という1ページのWebページをHTML、CSS、JavascriptでCodingすることができました。
所要時間としては4時間くらい。
以前レスポンシブ対応をしたころに同じことをやっていたら、1ヶ月以上かかっていたかもしれません。
まずやる気が続かないかも（笑）
まさにホームページ作成のプロを1人抱えているような環境ですね。
もちろん、大事なのは中身で、その中身は自分で設計する必要がありますが、作業を生成AIにやってもらう利便性をたっぷり味わうことができました。
こちらできあがったページ（スマホ版）
米国国旗のボタンを押して英語に切替えるとこんな感じ。
まずはVibe CodingのLevel1にはなれたかな(^^)
この日の夕飯は、また豆もやしが食べたくなって、豆もやしパスタ（笑）
鶏もも肉、じゃがいも、にんじん、玉ねぎが具材として入っています。味付けはしお、胡椒だけ。
味はいいんだけど刺激がほしくて、チリソースをかけまくって食べました^^;;
