WordCamp Kansai 2025 LT スライド

WordCamp Kansai 2025 LTのスライドです。

Transcript

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