大東 信仁（ものくろ） 
WordPressの記事をMarkdownでコピーしたいなと思って、Claude Codeで「Article MD Copy」というプラグインを作りました。
特徴として、main タグの中だけのテキストデータを取得し、指定したIDやクラスは除外できて、使い勝手のいいMarkdownテキストで出力できます。
バイブコーディングでWordPressプラグインを作ったときに、途中でハマったポイントもあったので、その体験をお伝えします。
作りたかったもの
やりたかったことはシンプルです。
- WordPressの記事ページに「MDコピー」ボタンを表示
- ボタンを押すと、記事本文がMarkdown形式でクリップボードにコピーされる
- 管理者だけにボタンが見える
- 「あわせて読みたい」や広告ブロックなど、不要な要素は自動で除外
で、これをClaude Codeに伝えました。
実際の開発の流れ
v1.0 — まずは動くものを
最初の指示はこんな感じです。
「WordPressの記事ページで、記事をMarkdownとしてコピーできるボタンを表示するプラグインを作って」
あっ、これだけで動くプラグインができました。ドキドキしながらWordPressにインストールしてみると、ちゃんとボタンが表示されて、Markdownがコピーできる。
v1.1〜v1.4 — 機能追加と設定画面
「不要な要素を除外する設定画面も欲しい」と追加で依頼しました。
ここでハマりました。
設定画面は表示されるんですが、クラスやIDを入力して保存すると「未設定です」に戻ってしまう。何度やっても同じ。
「エラーをしっかり処理して、テストもして、完璧に動くようにして」とお願いしても、なかなか直らない。
v2.0 — ゼロベースで再設計
何度か修正を試みても設定が保存されない問題が解決しなかったので、思い切って「全体設計が間違っている可能性がある。ゼロベースで再設計して」と伝えました。
すると、Claude Codeが原因を特定してくれました。
根本原因は、JavaScriptに依存した設定保存の仕組みでした。 v1.x では、隠しinputにJSON形式でデータを持たせていたので、JSの読み込みに失敗すると空のデータが送信されて、設定がリセットされてしまう構造だったんです。
v2.0 では、textareaに1行1値で書く方式に変更。JavaScriptはtextareaを隠してタグ風UIを表示する「おまけ」的な役割に。JSが動かなくても、textareaがそのまま表示されるので、設定の保存は確実に動きます。
ほっ。これでようやく安定しました。
バイブコーディングで感じたこと
よかった点
- 開発スピードが圧倒的に速い — プラグインの初版は数分で完成
- WordPress固有のお作法（Settings API、nonceなど）を理解してくれる — セキュリティ面も最初からちゃんと対応
- テストも自動で書いて実行してくれる — v2.0では16個のサニタイズテストが全パス
気をつけたい点
- 設計レベルの問題はAIも見落とすことがある — 今回のJSON+隠しinput問題がまさにそれ
- 「動く」と「正しく動く」は違う — 実際にWordPressにインストールして操作確認は必須
- やり直しを恐れないことが大事 — v1.4まで粘るより、v2.0でゼロから作り直した方が結果的に速かった
完成したプラグインの機能
最終的に、Article MD Copy v2.0.0 はこんな感じに仕上がりました。
- 記事ページに「MD」コピーボタンを表示（管理者のみ）
- ワンクリックでMarkdown形式にコピー
- 「あわせて読みたい」「関連記事」等のセクションは自動除外
- 管理画面で除外したいID・クラスをタグUIで設定可能
- JSが無効でもtextareaで設定可能（プログレッシブエンハンスメント）
まとめ
バイブコーディングでWordPressプラグインを作る体験、想像以上にスムーズでした。
ただし、全部AIにお任せというわけにはいかなくて、設計の問題を見抜いて「ゼロからやり直して」と判断するのは、やっぱり人間の役割やなと。AIは指示された範囲では頑張ってくれますが、「そもそもの方向が違うかも」と気づくのは自分自身です。
バイブコーディングは、コードを書く負担を大幅に減らしてくれる強力なツール。でも、最終的な品質を決めるのは、使う人の判断力だと感じました。
WordPressプラグイン開発に興味がある方、バイブコーディング、ぜひお試しください。
