HTMXでWordPressサイトを強化する方法（複雑なフレームワーク不要）

コーディングに向いている言語は数多くありますが、ウェブ開発（特にWordPress）で使用されている信頼性に優れた言語は一握りです。

動的でインタラクティブなサイトに対するユーザーの期待は依然として高い一方で、JavaScriptはプラットフォームとしてまだ成熟しきれていないのが現状です。そんな隙間を埋めてくれるのがフレームワークの存在ですが、複雑なものも多く、かえって開発の妨げになることも。そこで利用したいのがHTMXです。HTMXは使いやすく軽量なライブラリで、最新のウェブ体験を簡単に構築することができます。

今回は、HTMXをWordPress開発のワークフローに統合する方法、HTMXを使って動的なコンテンツやインタラクティブ性を構築する方法をご紹介していきます。

まずはHTMXの概要、人気の理由、WordPressとの関連性について見ていきます。

HTMXとは

一言で表すなら、HTMXはVanilla JSでもフレームワークでもない、標準のHyper Text Markup Language（HTML）を拡張するJavaScriptライブラリです。HTMXを使用することで、以下のような他の技術も活用できます。

• 非同期JavaScriptとXML（AJAX）：AJAXを使ってサーバーへの「非同期」リクエストを実行。これにより、ページ全体を再読み込みせずに部分的にページを更新できる。
• WebSocket：WebSocket接続を確立し、ブラウザとサーバー間のリアルタイムの双方向通信を可能にする。
• Server-Sent Events（SSE）：サーバーからブラウザにデータを反映し、HTMXでリアルタイムにページを更新できる。
• CSSトランジション（transition）：CSSトランジションと統合し、スムーズでアニメーションのような更新をサイトに実装できる。

HTMXの中核は、動的でインタラクティブなウェブアプリケーションの構築方法の簡素化にあり、HTML要素からGET、POST、PUT、PATCH、DELETEのHTTPリクエストを作成するのが主な機能です。つまり、モバイルアプリのようにスムーズで部分的なページ更新を処理することができます。全体として、膨大なJavaScriptコードを必要とせずに動的なウェブ体験を作成するのに役立つ強力なソリューションです。

HTMXが注目されている理由

HTMXは最近になって特に注目されるようになり、その検索数は過去5年で爆発的に増加しています。

この人気の急上昇には、SNSや開発者フォーラムでの評価はもちろん、以下のような理由があります。

• シンプルさ：使い慣れたHTML構文を使って動的でインタラクティブなウェブアプリを構築できるため、実装が非常に簡単。一般的なJavaScriptフレームワークのような複雑さがほぼない。
• パフォーマンス：必要なJavaScriptの量を最小限に抑えることで、他のフレームワークよりも高速な読み込みと優れたパフォーマンスを実現する（特にモバイル端末）。
• サーバーサイドレンダリング：機能セットに組み込まれているため、初期ページの読み込み時間や検索エンジン最適化（SEO）の改善に役立つ。
• プログレッシブエンハンスメント：JavaScriptを無効にしている場合にも機能を壊すことなく、サイトにインタラクティブ性を実現する戦略。HTMXはこの原則に基づいて動作するため、アクセシビリティにも利点がある。

さらに、いくつかの大規模なフレームワークとは異なり、HTMXでは複雑なビルドプロセスやツールチェーンが不要です。習得しやすいという点も相まって、ライブラリを簡単にプロジェクトに統合することができます。

HTMXはこのような理由から注目されており、徐々に採用され始めています。インタラクティブなウェブ体験を構築するための使いやすいソリューションをお探しなら、利用しない手はありません。

JavaScriptとWordPressのアーキテクチャ

State of the Word 2015でのMatt Mullenweg氏の発言「Learn JavaScript deeply.（JavaScriptを深く学ぼう）」をきっかけに、WordPressにおけるJavaScriptの導入は大きく加速しました。

WordPress開発では、まずサイトにおけるインタラクティブで動的なコンポーネントの必要性を探ることが一般的な進め方で、WordPressのJavaScriptフレームワークにはjQueryを利用するのが通例でした。ハーバード大学のウェブサイトHarvard Gazetteも、jQuery上に構築されています。

このため、WordPressはデフォルトでjQueryを読み込むように設計されており、多くのコア機能、プラグイン、テーマがこれを活用しており、全体として一貫性があり、多くのユーザーや開発者の支持を得ています。

しかし、ウェブ開発が進化するにつれ、WordPressのJavaScriptに対するアプローチも変化しています。たとえば、ブロックエディター（Gutenberg）の導入に伴い、特にWordPress管理画面でユーザーインターフェースを構築する際にはReactフレームワークを使用する方向へとシフトしました。

WordPressにおける現在のJavaScript実装の利点と欠点

このようにコアコードでサポートされているフレームワークが混在しているWordPressですが、これには利点と欠点の両方があります。利点は以下が挙げられます。

• ReactとjQueryのどちらとも互換性がある。前者は強力な人気フレームワーク、後者はWordPressで長年利用されている。
• ReactとjQueryのどちらも人気が高く、多くの開発者が精通している。学習やトラブルシューティングに役立つリソースも豊富。
• WordPressは、wp_ajaxを通じてAJAXの内蔵サポートを提供している。

その一方で、以下のような欠点も。

• jQueryに依存するとサイトパフォーマンスが低下し、アプリによってはフレームワークが全く必要ない場合もある。
• 互換性やセキュリティ上の理由から、JavaScriptの最新機能のすべてがWordPressに実装されているわけではなく、何か特別なものを構築する際に厄介になる可能性がある。
• WordPressの領域（ブロックやサイトエディターなど）にReactが追加されたことで、WordPressの習得がやや複雑になっている。

WordPressの現在のJavaScriptアーキテクチャは、推奨フレームワークの開発知識を持っている場合、あるいは学習する時間が十分に取れる場合に適しています。そうでなければ、一般的なフレームワークの複雑さを回避しながら、フロントエンドで最新のインタラクティブ体験を提供できるソリューションが必要になります。そこで出番となるのがHTMXです。

WordPress開発にHTMXが適している理由

HTMXはWordPress開発と相性が良く、jQueryのシンプルさとパフォーマンスの高いReactのいいとこ取りをすることができます。

すでに先に触れていますが、以下簡単にまとめています。

• HTMXはjQueryやReactに比べて軽量であり、パフォーマンスに優れている。
• 多くのWordPress開発者は、JavaScriptよりもHTMLやPHPに詳しく、HTMXはマークアップ言語のように扱えるため使用が容易。
• PHPとHTMXは、サーバーサイドレンダリングのおかげで相性も良く、パフォーマンスにも良い影響を与える。
• 比較的新しいライブラリではあるが統合も簡単であるため、ワークフローの効率化に役立つ。

WordPress開発では、サイトの新機能のプロトタイプを簡単に構築できる点も見逃せません。既存のHTML内でコードを書けるため、複雑な機能を素早く構築することができます。また必要に応じて、ReactコンポーネントやちょっとしたjQueryを追加する柔軟性もあります。

HTMXのプログレッシブエンハンスメントの原則も大きな利点です。アクセシビリティはデザイン戦略の中心であり、ブラウザでJavaScriptを無効にしているユーザーにも配慮しながら、インタラクティブ性を構築することができます。

そして、独自の（または特別な）サーバーサイドの設定が不要な点もHTMXの魅力です。Kinstaを含むすべてのホスティングサービスで、HTMXマークアップを使用することができます。

パフォーマンスにこだわるKinstaのホスティングサービスでは、HTMXを使用するサイトも高速で動作します。結果としてSEO指標、アクセス数、開発時間、トラブルシューティングのワークフロー、および開発チェーン全体が改善されます。

HTMXの一般的な使用例

HTMXは、厳密にはJavaScriptフレームワークの代替になるわけではなく、必要時に負荷を軽減するため、すでに導入しているものと併用するのが最も効果的です。

言い換えれば、jQueryやReactが適切でない特定のタスクにHTMXを利用することをおすすめします。WordPressへの実装方法をご紹介する前に、WordPress開発に役立つ3つの一般的なシナリオを見てみましょう。

ページの部分的な読み込み

HTMXの主な用途の一つは、手間をかけずにページを部分的に更新すること。これは特に迅速なモックアップやプロトタイプの作成において重要です。

例えば、サイトにリアルタイム検索機能を実装することができます。

HTMXのサンプルライブラリでは、ページ内の他のコンテンツ領域でリアルタイム更新を行うための方法論にも触れられています。この例では、利用可能な連絡先のテーブルを持つお問い合わせフォームを使用しており、ユーザーが新規追加を送信すると更新されます。HTMXには、これを実現する洗練された方法が多数あります。

<div id="table-and-form">
    <h2>お問い合わせ</h2>
    <table class="table">
      <thead>
        <tr>
          <th>名前</th>
          <th>メールアドレス</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="contacts-table">

        ...

      </tbody>
    </table>

    <h2>連絡先を追加する</h2>

    <form hx-post="/contacts" hx-target="#table-and-form">
      <label>
        名前
            <input name="name" type="text">  
      </label>

      <label>
        メールアドレス
            <input name="email" type="email">  
      </label>
    </form>
</div>

上のフォームでは、hx-postとhx-target属性を使用して送信先を拡張します。また、HTMXの属性を使用することで、エラーやバリデーションの試行後にフォーム入力項目を保持することも可能です。

<input form="binaryForm" type="file" name="binaryFile">

<form method="POST" id="binaryForm" enctype="multipart/form-data" hx-swap="outerHTML" hx-target="#binaryForm">
    <button type="submit">送信</button>
</form>

上では、バイナリファイルの入力を主フォーム要素の外に置き、hx-swapとhx-target属性を使用します。

動的な読み込み

HTMXの動的なリフレッシュと読み込みのアプローチは、より一般的なタスクにも有用です。たとえば無限スクロールなど。

<tr hx-get="/contacts/?page=2"
    hx-trigger="revealed"
    hx-swap="afterend">
  <td>山田　太郎</td>
  <td>[email protected]</td>
  <td>55F49448C0</td>
</tr>

hx-swap属性はhx-trigger属性の「リスナー」として機能し、ユーザーがリストの最後に到達すると、HTMXは2ページ目の連絡先を無限に読み込みます。

同じアプローチを遅延読み込みにも適用できます。

この場合も、hx-getとhx-trigger属性を使用してhtmx-settlingの遷移（transition）を開始し、画面上の要素が徐々に表示されるフェードイン効果を使ってグラフを読み込みます。

データ表示

HTMXは、インタラクティブあるいは動的な要素を用いて画面上に情報を表示するのにも長けています。

例えば、値選択のようなすべてのコンテンツフィルタリングの種類を実装することができます。例えば、1つのリストの選択肢が別のリストの選択肢に基づいて自動更新されるフィルタリング機能なども実現可能です。

モーダルダイアログやインターフェースのタブも同様に簡単にセットアップできます。以下は、HTMXがBootstrapのような他のライブラリやフレームワークとともに動作する例です。

この柔軟性はタブの実装にも及びます。これにはVanilla JSとHTMXを組み合わせるか、Hypertext As The Engine Of Application State（HATEOAS）の原則を使用します。

HTMXのコアをサーバーサイドに置き、フロントエンドのサイト要素にHTMXを使用する方法は他にも多数あります。次のセクションで、WordPressにHTMXを導入し、アイデアや目標を形にする方法を見ていきます。

HTMXをWordPressに統合する方法

HTMXをWordPressサイトに追加するのは非常に簡単です。以下、3つのステップでご紹介します。WordPressの機能を開発するための全工程とコードは割愛し、重要なポイントのみを挙げていきます。

WordPress開発の経験をお持ちであれば、多くのステップ（特に最初のステップ）に馴染みがあるはずです。

1. PHPコード内でHTMXをエンキューする

他の追加スクリプトと同様に、テーマやプラグインのコードにHTMXライブラリを含める必要があります。

wp_enqueue_script('htmx-script', 'https://unpkg.com/[email protected]/dist/htmx.min.js', array(), '2.0.0', true);

基本的には、（ブロックエディターを使用している場合は）このエンキューをWordPressのブロックもエンキューして登録する関数でラップするのが賢明です。

HTMXをエンキューする最後のステップとして、add_actionを使って関数全体を呼び出します。AJAXリクエストを処理する際、後でフックとフィルターを使用することになります。

2. WordPressテンプレートファイルにHTMX要素を追加する

この例から、HTMXがAJAXリクエストを処理しトリガーするために、HTML内に適切なマークアップが必要なことがわかるはず。このライブラリは、典型的なHTTPリクエスト属性を使用し、GET、POST、PUSH、PATCH、DELETE、hx-という接頭辞をつけて独自の属性を構成します。

hx-post

なお、WordPressのAJAXリクエストはadmin-ajax.phpエンドポイントを使用します。HTMXで作成する要素は、AJAXリクエストを作成し、それをターゲット要素に送信して潜在的にトリガーを処理するのた通例です。

hx-target属性は、別のページや特定のdivなど、リクエストの結果がどこに表示されるかを指定します。HTMLのアンカーリンク（aタグ）のようなものです。

<input type="search"
        name="search" placeholder="検索中..."
        hx-post="<?php echo admin_url('admin-ajax.php'); ?>?action=live_search"
        hx-target="#search-results"
        …

HTMXは「自然」または「不自然」でアクションを定義します。例えば、submitがフォームをトリガーするのは「自然な」要素のイベントです。「不自然な」要素のイベントには、hx-trigger属性を使用します。これらのトリガーは、HTMXの中でも複雑な部分ですが、理解するのは比較的簡単です。

例えば、入力フィールドを監視するためにトリガーを使用することができます。

…
hx-post="<?php echo admin_url('admin-ajax.php'); ?>?action=live_search"
hx-target="#search-results"
hx-trigger="input changed delay:500ms, search"
hx-indicator=".htmx-indicator">
…

入力フィールド内に変更を加えると、ページ上の他の場所が更新されます。また別の例として、画面の一部へのカーソル入力のような、一般的でないアクションに基づいて、1回だけイベントをトリガーしたい場合もあるかもしれません。

<div hx-post="/mouse_entered" hx-trigger="mouseenter once">
    [ここにマウスを移動]
</div>

このような場合、ポップアップやモーダルボックスのようなアプリケーションを作成することになるかもしれませんが、まずはAJAXリクエストの処理が必要です。

3. AJAXリクエストを処理する

最後に、サーバーサイドでAJAXリクエストを処理しなければなりません。WordPressでは、これをすべて別のファイルに保存するのが得策です。ファイル名は、「ajax-functions.php」のような説明的な名前でOKです。

このステップではPHPの知識が必要になります。AJAXリクエストの処理はプロジェクト固有の方法で実装することになり、テンプレートファイルで指定した属性をサーバーサイドの処理に関連づける部分になります。

もちろん、HTMX、Vanilla JS、またはその他の方法でコードを書く場合も同様です。以下は見え方の例です。

function my_search_action() {
    $search_term = sanitize_text_field( $_POST['search'] );

    $args = array(
        's' => $search_term,
        'post_type' => 'post',
        'posts_per_page' => 5
    );

    $query = new WP_Query( $args );

    if ( $query->have_posts() ) :
        while ( $query->have_posts() ) : $query->the_post();
            echo '<h2>' . get_the_title() . '</h2>';
            echo '<p>' . get_the_excerpt() . '</p>';
        endwhile;
    else:
        echo '結果は見つかりませんでした';
    endif;

    wp_reset_postdata();

    wp_die();
}

プロジェクトによっては、上記コードと全く異なったり、無関係であったりする可能性もあります。独自のAJAXリクエストハンドラや関数の作成には、ブロックテンプレートの構築や、PHPを使用したプラグインの拡張などに使用するのと同じ知識が役立ちます。

WordPressでHTMXを使用する際のヒント

HTMXの使用は、WordPressで動的コンテンツを非常に簡単に実装することができますが、それでも慎重な管理と配慮が必要です。また、開発経験を向上させる方法もいくつかあります。

まずはHTMXの「成熟度」については、HTMXは比較的新しいライブラリであるため、jQueryほど統合機能に優れていません。

HTMXには有用なドキュメントがあるものの、ライブラリとWordPressの併用に関するリソースは少ないため、自分である程度実践しながら探っていく必要があります。

現状のヒントとしては、プラグインに機能を組み込むことです。これにより、バグやその他の統合エラーをチェックする間、構造化されて管理が容易になります。

WordPressに関連して、admin-ajax.phpファイルがエコシステムの他の部分とどのように連動しているかを理解しておきましょう。

HTMXはパフォーマンスに優れていますが、AJAXの使用量がサイトの読み込み速度やSEOに悪影響を与えることがないかを確認してください。また、ワークフローの一環としてリクエストのデバッグを行うことも大切で、ブラウザの開発者ツール内のXMLHttpRequest（XHR）指標は特に重要です。

上のスクリーンショットは、リクエストとレスポンスの記録で、AJAXリクエストやAPI（アプリケーションプログラミングインターフェース）呼び出しのデバッグに使用します。HTMXが未だWordPressと緊密に統合されていない現状を考慮すると、他のJavaScriptフレームワークを使用する場合よりもデバッグが重要になります。

まとめ

複雑なJavaScriptフレームワークに煩わされることなく、動的でインタラクティブなサイト要素を作成したいなら、HTMXの使用を検討してみてください。HTMXはHTML内でビルドすることができ、jQueryやReactに代わるシンプルなソリューションです。

しかし、HTMXはすべてのタスクに適しているというわけではありません。他のフレームワークを使用しながら、サイトのインタラクティブ要素のプロトタイプの作成にHTMXを取り入れるというのが効果的な使い方です。

HTMXとWordPressの併用について、ご意見がありましたら以下のコメント欄でお聞かせください。