WordCamp Kansai 2025 LT スライド

LT:WordPressテーマのテスト可能設計 — 発表者明石荘作　ITエンジニア/行政書士

自己紹介明石荘作 x:cheekydigit ITエンジニアしつつ行政書士やっています • Vue,React などのモダンフロントエンド • Laravel,Node.jsなどのバックエンド •
その他Webシステム開発 • 業務システム開発 • 技術的観点からの法務支援 ◦ スコレーデジタル行政書士事務所

自動テストとは ?超簡単に • あらかじめ定められた手順によってコンピュータが自動に関数などの動きを確かめてくれる ->「データA を渡せば必ずBが帰ってくる」ことを確かめるテスト • つまり、同じデータAを渡した時に、DBや設定によってBだったり、B’が帰ってくるような項目はそのままでは自動テストできない。
(例) 現在日付を取得する関数、「ニュース」に含まれる記事を取得するなどつまり、function.phpに書くような関数はそのままでは、ほぼ自動テスト不可能

なぜテスト可能設計か？ 1. コード変更して、予期せぬところに影響があっても、テストがすぐ異常を教えてくれるので、安心して直せる。(実は副次効果) 2. テストをするために役割を分けて設計することで、コードがシンプルになり、理解するのが速くなる。(入力と出力が明確化し、プレーンなPHPに主なコードを集約できる) 3. 同じコードをブロック・テンプレ・ショートコードなど複数のWordPress機能で再利用が可能(例:クラシックテンプレ->ブロックへの段階的な移行ができる、今後の新フォー
マットにも対応できる)

今回のターゲットこんな感じのニュース一覧を何件かカード形式で表示するテンプレートパーツを考えます <?php // ニュース一覧テンプレートパーツを読み込み get_template_part( 'template-parts/news/news', 'list' ); ?>

どう「分ける」か？ WordPress固有の機能に依存しないように、プレーン PHPを作り、そこに値を渡す設計にするのが基本戦略。ニュース一覧テンプレートファイルニュースカード (1件データ取得-整形) ニュースカード (表示のみ)
表示一覧データ取得一覧表示データ1件取得、データ整形表示(HTML整形) 何もしない WP機能の壁 WPデータの壁プレーンPHP

ディレクトリ構成 your-theme/ ├─ inc/ │ ├─ news_presenters.php #ピュアPHPでHTMLに整形する（テスト対象） │ └─
news-card.php # HTMLデータを注入する(データ取得関数WP依存) ├─ template-parts/ │ └─ news-list.php # WPのテンプレートそのもの └─ tests/ └─ NewsPresentersTest.php

表示に関する処理をプレーン PHPに切り出す news_presenters.php 入力:表示するための値を配列にする (全て文字列の配列) 出力:記事カード1枚分のHTML文字列を返す /** ニュースカード1枚分のHTML生成（プレーンPHP） */ function
build_news_card(array $data): string { $title = h($data['title'] ?? ''); // 略 return <<<HTML <div class="card__body"> <h3 class="card__title" itemprop="headline">{$title}</a></h3> //略 </div> HTML; }

news_presenters.php(プレーンPHP)のテストコード <?php use PHPUnit\Framework\TestCase; use MyTheme\NewsPresenters as P; require_once __DIR__.'/../your-theme/inc/news_presenters.php';
class NewsPresentersTest extends TestCase { public function test_build_news_card_contains_core_parts() { $html = P\build_news_card([ 'title'=>'','permalink'=>'https://ex.com/p','date_iso'=>'2025-09-12', // 省略 ]); // データの有無で表示項目が変わるかのテストなど $this->assertStringContainsString('news-card', $html); $this->assertStringContainsString('<img', $html); } }

入力:記事id　処理: 記事IDを元にデータを取得して、表示の PHPに渡す news-list.php WordPressから集めた値をまとめてプレーン PHPに渡す処理 <?php namespace MyTheme\NewsTags; require_once
__DIR__.'/news_presenters.php'; use MyTheme\NewsPresenters as P; /** post_idを元にWPから値を集める。HTMLにするのは全部ヘルパーへ委譲 */ function news_card($post_id = null): void { $content = get_post_ﬁeld('post_content', $post_id) ?: ''; // 省略　 $html = P\build_news_card([ 'title' => get_the_title($post_id), 'date_iso' => get_the_date('Y-m-d', $post_id), // 省略 ]); echo wp_kses_post($html); // 出力直前だけエスケープ }

処理: 対象のカードを出力するカードを一覧表示するテンプレート <?php use MyTheme\NewsTags; // カードを出したい投稿を絞り込む $q =
new WP_Query([ 'category_name' => 'news', (中略) ]); if ($q->have_posts()): echo '<div class="news-list">'; while ($q->have_posts()): $q->the_post(); NewsTags\news_card(); // 値を集めて渡すだけ endwhile; echo '</div>'; wp_reset_postdata(); else: echo '<p>ニュースはありません。</p>'; endif;

テスト可能設計 (関心の分離 )の使い所 1. クラシックテーマからブロックテーマへの移行を安全に行いたい時 a. 後方互換性も確保できそう 2. WordPressのバージョンアップ対応
3. ロケールで表示形式が違う。それぞれで確認したい時などプロンプトに「関心の分離」「単体テスト」と入れれば、LLMがいろいろ提案してくれます !

ありがとうございました！

WordCamp Kansai 2025 LT スライド

WordCamp Kansai 2025 LT スライド

あかし

Featured

Transcript

LT:WordPressテーマのテスト可能設計 — 発表者明石荘作　ITエンジニア/行政書士

自己紹介明石荘作 x:cheekydigit ITエンジニアしつつ行政書士やっています • Vue,React などのモダンフロントエンド • Laravel,Node.jsなどのバックエンド •

今回のターゲットこんな感じのニュース一覧を何件かカード形式で表示するテンプレートパーツを考えます <?php // ニュース一覧テンプレートパーツを読み込み get_template_part( 'template-parts/news/news', 'list' ); ?>

ディレクトリ構成 your-theme/ ├─ inc/ │ ├─ news_presenters.php #ピュアPHPでHTMLに整形する（テスト対象） │ └─

表示に関する処理をプレーン PHPに切り出す news_presenters.php 入力:表示するための値を配列にする (全て文字列の配列) 出力:記事カード1枚分のHTML文字列を返す /** ニュースカード1枚分のHTML生成（プレーンPHP） */ function

news_presenters.php(プレーンPHP)のテストコード <?php use PHPUnit\Framework\TestCase; use MyTheme\NewsPresenters as P; require_once DIR.'/../your-theme/inc/news_presenters.php';

入力:記事id　処理: 記事IDを元にデータを取得して、表示の PHPに渡す news-list.php WordPressから集めた値をまとめてプレーン PHPに渡す処理 <?php namespace MyTheme\NewsTags; require_once

処理: 対象のカードを出力するカードを一覧表示するテンプレート <?php use MyTheme\NewsTags; // カードを出したい投稿を絞り込む $q =

テスト可能設計 (関心の分離 )の使い所 1. クラシックテーマからブロックテーマへの移行を安全に行いたい時 a. 後方互換性も確保できそう 2. WordPressのバージョンアップ対応

ありがとうございました！