htmx 逆引きレシピ
htmxでログインを作るには？

使用するhtmx属性

• hx-post：ログイン情報をPOSTして、結果のHTMLを差し替える
• hx-target：結果を表示する先の要素（CSSセレクタ）を指定（例：#LOGIN_RESULT）
• hx-swap：差し替え方を指定（例：innerHTML）
• hx-indicator：通信中表示（ローディング）を出す要素を指定
• hx-disabled-elt：通信中だけボタン等を disabled にして連打を防止

利用シーン

• 会員ページ/管理画面に入る前の本人確認
• 未ログイン時はログインへ誘導し、ログイン後は元の画面へ戻す

htmxでログインを作る

ログインは「フォーム送信」なので、基本は hx-post でサーバに投げます。 返ってきた結果（エラー/成功メッセージ）を、hx-target で指定した場所に差し替えればOKです。

• 失敗時：フォームの上（または下）に、エラーHTMLだけを返して表示する。
• 成功時：セッションを確立し、HX-Redirect でダッシュボード等へ遷移する。

これだけで「画面全体を再読み込みしないログイン体験」が作れます。

HTML

<div class="DEMO">
<?php

	// CSRFトークンが無ければ作る
	if (empty($_SESSION['csrf'])) {

		// 乱数からCSRFトークンを生成する
		$_SESSION['csrf'] = bin2hex(random_bytes(32));

	}

	// テンプレートに渡すCSRFトークンを取り出す
	$csrf = (string)$_SESSION['csrf'];

?>

	<!-- 見出し -->
	<h2>htmxでログイン（デモ）</h2>

	<!-- 結果表示領域（エラー/成功メッセージ） -->
	<div id="LOGIN_RESULT" class="FORM-RESULT" aria-live="polite"></div>

	<!-- フォーム本体 -->
	<form
		id="LOGIN_FORM"
		class="FORM"
		method="post"
		action="/htmx/chap1-screen/login/"

		hx-post="/htmx/demo/_login.php"
		hx-target="#LOGIN_RESULT"
		hx-swap="innerHTML"
		hx-indicator="#LOGIN_LOADING"
		hx-disabled-elt="#LOGIN_SUBMIT"
	>

		<!-- ログインID -->
		<label>
			ログインID
			<input type="text" name="login_id" autocomplete="username" required>
		</label>

		<!-- パスワード -->
		<label>
			パスワード
			<input type="password" name="password" autocomplete="current-password" required>
		</label>

		<!-- CSRFトークン -->
		<input type="hidden" name="csrf" value="<?= htmlspecialchars($csrf, ENT_QUOTES, 'UTF-8') ?>">

		<!-- 送信ボタン -->
		<button id="LOGIN_SUBMIT" type="submit" class="BTN">
			ログイン
		</button>

		<!-- ローディング表示 -->
		<span id="LOGIN_LOADING" class="LOADING" aria-live="polite"></span>

	</form>

	<!-- デモ用の固定アカウント表示 -->
	<p>
		デモID：<strong>demodemo</strong><br>
		デモPW：<strong>XLAnaKFCKFV3</strong>
	</p>

</div>

PHP

<?php
// 厳格モードを有効化する
declare(strict_types=1);

// セッションを開始する
session_start();

// htmxリクエストかどうかを判定する関数
function isHtmx(): bool {

	// HX-Requestヘッダがtrueかどうかを見る
	return isset($_SERVER['HTTP_HX_REQUEST']) && $_SERVER['HTTP_HX_REQUEST'] === 'true';

}

// OK用のHTML断片を作る関数
function htmlResultOk(string $title, string $detail = ''): string {

	// 詳細があればdivで足す
	$detailHtml = $detail !== '' ? '<div>' . htmlspecialchars($detail, ENT_QUOTES, 'UTF-8') . '</div>' : '';

	// OK用の箱を返す
	return '<div class="FORM-RESULT is-ok"><strong>' . htmlspecialchars($title, ENT_QUOTES, 'UTF-8') . '</strong>' . $detailHtml . '</div>';

}

// NG用のHTML断片を作る関数
function htmlResultNg(string $title, array $errors = []): string {

	// リスト用のHTMLを初期化する
	$list = '';

	// エラーがあれば<ul>を作る
	if (!empty($errors)) {

		// ul開始
		$list .= '<ul>';

		// エラーを1行ずつliにする
		foreach ($errors as $e) {

			// li追加
			$list .= '<li>' . htmlspecialchars($e, ENT_QUOTES, 'UTF-8') . '</li>';

		}

		// ul終了
		$list .= '</ul>';

	}

	// NG用の箱を返す
	return '<div class="FORM-RESULT is-ng"><strong>' . htmlspecialchars($title, ENT_QUOTES, 'UTF-8') . '</strong>' . $list . '</div>';

}

// ログインIDを取り出す
$loginId = trim((string)($_POST['login_id'] ?? ''));

// パスワードを取り出す
$password = (string)($_POST['password'] ?? '');

// CSRFトークンを取り出す
$csrf = (string)($_POST['csrf'] ?? '');

// CSRFトークンが一致するか確認する
if (!isset($_SESSION['csrf']) || !hash_equals((string)$_SESSION['csrf'], $csrf)) {

	// 403を返す
	http_response_code(200);

	// htmxなら断片、通常ならテキスト
	echo isHtmx() ? htmlResultNg('不正なリクエストです。', ['ページを再読み込みして、もう一度お試しください。']) : 'Forbidden';

	// 終了する
	exit;

}

// 入力エラー配列を用意する
$errors = [];

// ログインIDが空ならエラー
if ($loginId === '') $errors[] = 'ログインIDを入力してください。';

// パスワードが空ならエラー
if ($password === '') $errors[] = 'パスワードを入力してください。';

// 入力エラーがあれば返す
if ($errors) {

	// 422を返す
	http_response_code(200);

	// htmxなら断片、通常ならテキスト
	echo isHtmx() ? htmlResultNg('入力内容を確認してください。', $errors) : 'Bad Request';

	// 終了する
	exit;

}

// ===== デモ用：固定ID/Password（ここだけで認証） =====
// デモ用の正しいログインIDを定義する
$validLoginId = 'demodemo';

// デモ用の正しいパスワードを定義する
$validPassword = 'XLAnaKFCKFV3';

// 認証結果を判定する
$ok = ($loginId === $validLoginId) && ($password === $validPassword);

// 認証に失敗したら返す
if (!$ok) {

	// 401を返す
	http_response_code(200);

	// 失敗メッセージを返す（ユーザ存在有無はぼかす）
	echo isHtmx() ? htmlResultNg('ログインに失敗しました。', ['ログインIDまたはパスワードが違います。']) : 'Unauthorized';

	// 終了する
	exit;

}

// ログイン成功時にセッションIDを再生成する（固定化対策）
session_regenerate_id(true);

// ログイン済みフラグを立てる
$_SESSION['is_login'] = true;

// ログインIDを保存する
$_SESSION['login_id'] = $loginId;

// リダイレクト先を決める
$redirectTo = '/htmx/demo/_login_after.php';

// htmxの場合の処理
if (isHtmx()) {

	// htmx用のリダイレクトヘッダを返す
	header('HX-Redirect: ' . $redirectTo);

	// ついでにメッセージも返す（表示される前に遷移することが多い）
	echo htmlResultOk('ログインしました。', 'ダッシュボードへ移動します。');

	// 終了する
	exit;

}

// 通常POSTの場合は303で遷移する
header('Location: ' . $redirectTo, true, 303);

// 終了する
exit;


// ===== 参考：DB認証版（コメントアウト） =====
/*
try {
	$pdo = new PDO(
		'mysql:host=localhost;dbname=app;charset=utf8mb4',
		'dbuser',
		'dbpass',
		[
			PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
			PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
		]
	);

	$stmt = $pdo->prepare('SELECT id, password_hash FROM users WHERE login_id = :login_id LIMIT 1');
	$stmt->execute([':login_id' => $loginId]);
	$user = $stmt->fetch();

	$ok = $user && password_verify($password, (string)$user['password_hash']);

	if (!$ok) {
		http_response_code(401);
		echo isHtmx()
			? htmlResultNg('ログインに失敗しました。', ['ログインIDまたはパスワードが違います。'])
			: 'Unauthorized';
		exit;
	}

	session_regenerate_id(true);
	$_SESSION['is_login'] = true;
	$_SESSION['uid'] = (int)$user['id'];

	$redirectTo = '/dashboard/';

	if (isHtmx()) {
		header('HX-Redirect: ' . $redirectTo);
		echo htmlResultOk('ログインしました。', 'ダッシュボードへ移動します。');
		exit;
	}

	header('Location: ' . $redirectTo, true, 303);
	exit;

} catch (Throwable $e) {
	http_response_code(500);
	echo isHtmx()
		? htmlResultNg('サーバエラーです。', ['時間をおいて再度お試しください。'])
		: 'Server Error';
	exit;
}
*/

デモ

解説

参考リンク

• htmx（公式サイト）
• htmx Docs（公式ドキュメント）
• htmx Reference（公式リファレンス）
• もうjsなんていらない！世界で流行っているHTMXについてまとめてみた（Qiita）