実務で破綻しないためのbaserCMSとAIの付き合い方

こんにちは、エンジニアの坂口です。

近年、AIに自然言語で指示を出してコードを書き上げる「バイブコーディング(Vibe Coding)」という開発スタイルが話題になっていますね。

プロトタイプを爆速で作るには非常に強力な手法ですが、いざこれを実務のWebサイト制作(特にCMS構築)にそのまま持ち込もうとすると、多くのエンジニアが「本当に大丈夫か?」と足踏みをしてしまうのではないでしょうか。

特に、baserCMSのようなCakePHPをベースとしたオープンソースのシステムでは、AIが生成したコードが破綻したときのダメージが大きくなりがちです。

 

 

 

1. なぜバイブコーディングだけでは実務で破綻するのか?

AI(Cursor、ChatGPT、Claude、Geminiなどなど)は非常に優秀ですが、設計から実装までノリで完全に丸投げ指示してしまうと、実務においては以下のような深刻な問題(技術負債)が発生しがちです。

  • 場当たり的なデータベース設計
    命名規則やデータ型がバラバラになり、後からの変更やデータ移行が困難になってしまいます。
    本来は数値型にするべき項目が、別の場所ではテキスト型になっていた、など。
     
  • コンポーネントのスパゲティ化
    共通化すべきパーツ(baserCMSのHelperとかElementsなど)がすべて別々の独立したコードとして生成され、修正が困難な状態になります。
    例えば、似たような処理があっちもこっちもできてしまって、修正しても治っていないみたいなことが発生しがちです。
     
  • バージョン混同(ハルシネーション)
    過去バージョンとの作法が混ざったり、動かない、あるいはセキュリティ上リスクのあるコードが出力されたりします。
    ひどい場合は、そもそもの言語の文法間違いのままの場合も多々あります。(最近はだいぶましになってきたけどまだまだある)
     

これらは、AIが「全体のアーキテクチャや、将来の運用・保守・拡張性」を自発的に考慮してコードを書いているわけではなく、その場のプロンプトに対して「もっともらしいコード」を出力しているに過ぎないからだと思います。

 

2. 人間が設計し、AIが組む

実務で破綻させないための鉄則は、

「設計・ルール決めは人間が握り、コードを書く作業をAIに委ねる」

という明確な役割分担ではないかと思います。

 

 

 

① 人間が徹底してやるべき領域(設計)

AIにコードを書かせる前に、人間(エンジニアやディレクター)が定義し、マークダウンなどでテキスト化しておきます。

  • URL・コンテンツ構造の設計
    どのページをどのコンテンツ(固定ページ、ブログ、カスタムコンテンツ)で管理・ルーティングするか。
     
  • データ構造やプラグイン、カスタムフィールドなどの定義
    フィールド名(キャメルケース/スネークケースの統一)とか、データ型(テキスト、画像、ループ)、必須入力などのルール化。
     
  • コンポーネント(フォルダ構造)の分割設計
    どこをLayoutsとして、どこをElementsとして切り出すかの切り分け。

 

 

 

② AIに任せる領域(実装)

人間が作った設計図を正しいコンテキストとともにインプットした上で、実際のコーディングをAIに書かせます。

例えば

  • 設計に基づいたHTML/CSSのマークアップと、baserCMS用テンプレート(PHP)への落とし込み。
  • プラグインやHelperなどの複雑な業務ルール・条件分岐などのコードやSQLの組み立て。
  • baserCMS5のWeb APIを叩いてフロントエンド側にデータを非同期表示する処理の実装(JavaScript / Vue.js / React等)。

などなど。

 

 

 

③ 人間が品質を担保する領域(レビュー・調整)

AIが書き上げたコードは、一見完璧に見えても「実務」という土俵ではそのまま通せないことが多々あります。
最後に人間が「品質の番人」として、以下のようなポイントをチェックする必要があると思います。

  • セキュリティ・作法のチェック
    出力されたコードが、ちゃんとエスケープ処理されているか、baserCMSの作法として独自関数を使うべきところが、素のPHPになっていないか、といった安全性などを確認します。
     
  • UI・アクセシビリティの微調整
    AIは「動くコード」は得意ですが、絶妙な余白感や、キーボード操作時の挙動といったUI/UXの部分はまだ人間の方が得意だったりします。
    ブラウザで実際に動かしながら、操作感を整えていく作業ですね。
     
  • メンテナンス性の確認
    後から別のエンジニアが見たときに「これ、何してるコード?」とならないよう、適度にコメントを足したり、複雑すぎるロジックを整理したりします。
    長期運用するサイトだからこそ、このひと手間が後で効いてくるのではないかと思います。

 

 

 

3. おわりに:AI時代だからこそ、人間の「設計力」が試される

最近、現場やコミュニティなんかでも「AIがこう言ったから〇〇にしました」とか、コードの意味を尋ねたときに「AIが出力したのでそのまま使いました」みたいな話をちょいちょい耳にすることがあります。

でも、これってちょっと危ないですよね。

言われた通りに動かすだけ、出力されたものをブラックボックスのまま使うだけになってしまうと、エンジニアとしての価値というか、そもそもの存在価値が失われてしまうのではないかと思います。

また「AIがコードを書くなら、もうエンジニアは不要になるのではないか?」という意見もありますが、実務の現場においてはむしろ真逆だと思います。

 

 

 

AIという超強力なツールを安全に使いこなすためには、
「正しいロードマップを描き、正確な構造を指示できる、人間の高い設計力とbaserCMSなどのアーキテクチャの理解」
が、これまで以上に重要になるのではないかと思います。

AIを盲信して丸投げするのではなく、人間が「監督・設計者」となり、AIを「優秀なプログラマ」として割り切って付き合う。

このようなルールこそが、これからのWeb制作・CMS開発において、実務を破綻させずに進化させる最大のコツではないかと思います。

「AIに丸投げでOKなんだからエンジニアの存在価値は…」とならないように、
設計の基本はしっかり押さえつつAIを上手に頼って、もっと楽に、もっと速くいいサイトを作っていきたいですね。

AIを活用して最速開発を!

 

  • このエントリーをはてなブックマークに追加

AUTHOR

坂口 昌己

坂口 昌己 シニアエンジニア

PHPとかCakePHPとかで色々作ってます。
今はbaserCMSとかEC-CUBEとかやってます!

こんな記事も書いています