Share
Embed
Slide 1
Slide 1 text
LT:WordPressテーマ
のテスト可能設計 —
発表者
明石荘作 ITエンジニア/行政書士
Slide 2
Slide 2 text
自己紹介
明石荘作 x:cheekydigit
ITエンジニアしつつ行政書士やっています
● Vue,React などのモダンフロントエンド
● Laravel,Node.jsなどのバックエンド
● その他Webシステム開発
● 業務システム開発
● 技術的観点からの法務支援
○ スコレーデジタル行政書士事務所
Slide 3
Slide 3 text
自動テストとは ?超簡単に
● あらかじめ定められた手順によってコンピュータが自動に関数などの動きを確かめて
くれる
->「データA を渡せば必ずBが帰ってくる」ことを確かめるテスト
● つまり、同じデータAを渡した時に、DBや設定によってBだったり、B’が帰ってくるよう
な項目はそのままでは自動テストできない。
(例) 現在日付を取得する関数、「ニュース」に含まれる記事を取得するなど
つまり、function.phpに書くような関数はそのままでは、ほぼ自動テスト不可能
Slide 4
Slide 4 text
なぜテスト可能設計か？
1. コード変更して、予期せぬところに影響があっても、テストがすぐ異常を教えてくれる
ので、安心して直せる。(実は副次効果)
2. テストをするために役割を分けて設計することで、コードがシンプルになり、理解する
のが速くなる。(入力と出力が明確化し、プレーンなPHPに主なコードを集約できる)
3. 同じコードをブロック・テンプレ・ショートコードなど複数のWordPress機能で再利用が
可能(例:クラシックテンプレ->ブロックへの段階的な移行ができる、今後の新フォー
マットにも対応できる)
Slide 5
Slide 5 text
今回のターゲット
こんな感じのニュース一覧を何件かカード形式で表示するテンプレートパーツを考えます
Slide 6
Slide 6 text
どう「分ける」か？
WordPress固有の機能に依存しないように、プレーン PHPを作り、そこに値を渡す設計にするのが基本
戦略。
ニュース一覧テンプレート
ファイル
ニュースカード
(1件データ取得-整形)
ニュースカード
(表示のみ)
表示一覧データ
取得
一覧表示
データ1件取得、
データ整形
表示(HTML整形)
何もしない
WP機能の壁 WPデータの壁
プレーンPHP
Slide 7
Slide 7 text
ディレクトリ構成
your-theme/
├─ inc/
│ ├─ news_presenters.php #ピュアPHPでHTMLに整形する（テスト対象）
│ └─ news-card.php # HTMLデータを注入する(データ取得関数WP依存)
├─ template-parts/
│ └─ news-list.php # WPのテンプレートそのもの
└─ tests/
└─ NewsPresentersTest.php
Slide 8
Slide 8 text
表示に関する処理をプレーン PHPに切り出す
news_presenters.php
入力:表示するための値を配列にする (全て文字列の配列)
出力:記事カード1枚分のHTML文字列を返す
/** ニュースカード1枚分のHTML生成（プレーンPHP） */
function build_news_card(array $data): string {
$title = h($data['title'] ?? '');
// 略
return <<
{$title}
//略 HTML; }Slide 9
Slide 9 text
news_presenters.php(プレーンPHP)のテストコード
'','permalink'=>'https://ex.com/p','date_iso'=>'2025-09-12',
// 省略
]);
// データの有無で表示項目が変わるかのテストなど
$this->assertStringContainsString('news-card', $html);
$this->assertStringContainsString('
Slide 10
Slide 10 text
入力:記事id 処理: 記事IDを元にデータを取得して、表示の PHPに渡す news-list.php
WordPressから集めた値をまとめてプレーン PHPに渡す処理
get_the_title($post_id),
'date_iso' => get_the_date('Y-m-d', $post_id),
// 省略
]);
echo wp_kses_post($html); // 出力直前だけエスケープ
}
Slide 11
Slide 11 text
処理: 対象のカードを出力する
カードを一覧表示するテンプレート
'news',
(中略)
]);
if ($q->have_posts()):
echo '
';
while ($q->have_posts()): $q->the_post();
NewsTags\news_card(); // 値を集めて渡すだけ
endwhile;
echo '
';
wp_reset_postdata();
else:
echo 'ニュースはありません。
'; endif;Slide 12
Slide 12 text
テスト可能設計 (関心の分離 )の使い所
1. クラシックテーマからブロックテーマへの移行を安全に行いたい
時
a. 後方互換性も確保できそう
2. WordPressのバージョンアップ対応
3. ロケールで表示形式が違う。それぞれで確認したい時
など
プロンプトに「関心の分離」「単体テスト」と入れれ
ば、LLMがいろいろ提案してくれます !
Slide 13
Slide 13 text
ありがとうございました！