Hotwireとは？HTMLに書き足すだけでページが動く

「Hotwire」が注目されています。JavaScriptなしでもWebサイトを動的に書き換えることができる技術。どんな場面で役立っているのでしょうか？Webに関わる方は必読の解説です。

ページ内を動的に書き換えるAjaxの動作

Webページ間をリンクのクリックで移動するようなページを作成するのは簡単ですが、リンクで移動するのではなくページ内の一部の要素だけを書き換えたいことがありますよね。

例として、次のような動作をするWebアプリを作ることを考えてみましょう。

■ボタンの動作にあわせて一部書き換わるサイト

これは、地方を選択するボタンを押したときに、その地方に該当する都道府県をリストにセットするものです。

このような動作は、一般的にはJavaScriptを使ったAjaxという手法で実現されます。

上記のような処理であれば、それほど難しいプログラムではないので、プログラミングの基礎知識があれば、JavaScriptを少し勉強するだけで実現できるかもしれません。

しかし、プログラミングの知識がないと、その勉強には時間がかかることが想定されます。実現したいのはHTMLの一部を書き換えるだけなのに、JavaScriptの知識が求められてしまうのです。

これをHTMLの知識だけで実現する方法がいろいろ考えられてきました。

Hotwireで簡単に実現する

Hotwireは「HTML Over The Wire」の略で、JavaScriptのプログラムを書くことなくAjax的な動作を実現する技術を指します。

Hotwireを実現するライブラリとして、「Laravel Liveware」や「htmx」などがあります。

Laravel LivewireはPHPのWebアプリケーションフレームワークであるLaravelの一部です。Laravel 7.xから導入され、Laravelで作成したWebアプリにおいてHotwireを簡単に実現できます。

実際にHotwireのコードをみてみる

ここではLaravelなどのフレームワークを使わずに、HTMLだけで簡単にHotwireを実現できるhtmxを使って、上記で紹介したサンプルプログラムを作成します。

まずは枠となるHTMLファイルを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>都道府県選択</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
</head>
<body>
    <main class="container">
        <div class="grid">
            <button>北海道</button>
            <button>東北</button>
            <button>関東</button>
            <button>中部</button>
            <button>近畿</button>
            <button>中国</button>
            <button>四国</button>
            <button>九州沖縄</button>
        </div>

        <select id="prefecture">
        </select>
    </main>
</body>
</html>

ここではPico.cssというCSSフレームワークを読み込んでいますが、その他は一般的なHTMLで、特に難しいところはないでしょう。

そして、このページでhtmxを使うには、HTMLの最後に次の1行を追加します。

<script src="https://unpkg.com/htmx.org@1.9.6"></script>

そして、それぞれのボタンを次の赤字のように変更します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
</head>
<body>
    <main class="container">
        <div class="grid">
            <button hx-get="area1.html" hx-trigger="click" hx-target="#prefecture">北海道</button>
            <button hx-get="area2.html" hx-trigger="click" hx-target="#prefecture">東北</button>
            <button hx-get="area3.html" hx-trigger="click" hx-target="#prefecture">関東</button>
            <button hx-get="area4.html" hx-trigger="click" hx-target="#prefecture">中部</button>
            <button hx-get="area5.html" hx-trigger="click" hx-target="#prefecture">近畿</button>
            <button hx-get="area6.html" hx-trigger="click" hx-target="#prefecture">中国</button>
            <button hx-get="area7.html" hx-trigger="click" hx-target="#prefecture">四国</button>
            <button hx-get="area8.html" hx-trigger="click" hx-target="#prefecture">九州沖縄</button>
        </div>

        <select id="prefecture">
        </select>
    </main>
    <script src="https://unpkg.com/htmx.org@1.9.6"></script>
</body>
</html>

そして、それぞれのボタンを押したときに読み込むリストのHTMLファイルを作成します。たとえば、関東に該当する「area3.html」は次のとおりです。

<option value="8">茨城県</option>
<option value="9">栃木県</option>
<option value="10">群馬県</option>
<option value="11">埼玉県</option>
<option value="12">千葉県</option>
<option value="13">東京都</option>
<option value="14">神奈川県</option>

これもただのHTMLファイルなので特に難しくありません。このようなファイルをそれぞれの地方について用意して、Webサーバーに配置するだけです。

これだけで、今回のようなWebページの一部を書き換えるような動作をするWebページを作成できました。作成したのはHTMLファイルだけで、JavaScriptのコードは一切書いていません。

＊実際に試すには、HTTPの接続が必要です。レンタルサーバーを使うか、ローカルでWebサーバーを動かすなどの環境を用意してください。

コードの解説

上記の赤字部分で追加したのは、HTMLタグの属性です。たとえば、関東のボタンに追加した次の属性を一つずつ見てみましょう。

hx-get="area3.html" hx-trigger="click" hx-target="#prefecture"

「hx-get」という属性は、HTTPのGETを使って「area3.html」というページを取得することを意味しています。
「hx-trigger」という属性に「click」という値を指定しているため、クリックしたときに動作します。
「hx-target」という属性で、書き換える要素を指定しています。

つまり、この3つの指定により、このボタンを押したときに、「area3.html」というHTMLファイルを取得し、「prefecture」というIDの要素を書き換える、というものです。

他にも、さまざまな指定ができますので、htmxの公式サイトを参照してください。

Hotwireのメリットとデメリット

このように、Hotwireを使うと、HTMLのソースコードを書くだけでAjax的な動作を実現できます。このため、プログラミングの知識がなくても、動的なWebサイトを簡単に作成できるのはメリットです。

一方で、ちょっとしたプログラムであれば、JavaScriptで記述した方が無駄もなく、きめ細かな動作を実現できます。サーバーへの負荷も小さくなることが多いものです。また、国内での利用が少ないため、日本語で読める解説資料が少ないというデメリットもあります。

このため、多くの利用者が使うような本格的なシステムでは負荷を考えると選びにくいものですし、学び始めのハードルは少し高いかもしれません。

しかし、ちょっとしたシステムでAjax的な動作を実現したい場合にはHotwireを使う方が不具合を作り込むリスクも少なく、考えることが少なくて済みます。ぜひ試してみてください。

【筆者】増井敏克さん
増井技術士事務所代表。技術士（情報工学部門）。情報処理技術者試験にも多数合格。ビジネス数学検定1級。「ビジネス」×「数学」×「IT」を組み合わせ、コンピュータを「正しく」「効率よく」使うためのスキルアップ支援や、各種ソフトウェアの開発、データ分析などを行う。著書に『Pythonではじめるアルゴリズム入門』『図解まるわかりプログラミングのしくみ』『「技術書」の読書術達人が教える選び方・読み方・情報発信&共有のコツとテクニック』（以上、翔泳社）、最新刊の『Obsidianで“育てる”最強ノート術』（技術評論社）がある。

▼これまでのサクッとわかるITトレンド
・Pythonはなぜこれほど人気なのか
・大人も自由研究！IoTでプログラミングを体験しよう
・サイバー攻撃に備えている？その対策は本当に有効ですか
・Javaで開発するプログラマに将来性はあるのか
・ITエンジニアはWeb3とどう向き合えばいいのか
・RPAとプログラマーの役割はどう分担されるのか
・ITエンジニアのための“効率の良い”数学の学び方
・プログラマならではの「ChatGPT」の使い方
・新年度は「Obsidian」で新しいノートを作ろう
・DXへのITエンジニアの現実的な取り組み方とは
・プログラマーのスキルアップとして競プロ（競技プログラミング）に挑戦！
・プログラミング的思考はiPhone１台でも学べる時代！
・「パスキー」とは？話題のログイン方法を解説
・Copilotとは？コーディングを支援するAIを解説
・SBOMを作成する企業が増加。そのワケを解説
・Officeスクリプトとは？Microsoftの自動化ツールを解説
・WebP（ウェッピー）とは？次世代画像ファイル形式を解説