※この記事は、個人技術ブログ CodeArchPedia.com の技術メモ（要約）です。
Alpine.jsでフォームを実装していると、送信するたびにページがリロードしてしまい、ユーザー体験が大きく損なわれる問題に遭遇した。特にカート追加のような即座にフィードバックが欲しい場面で、この挙動は致命的だ。
何が起きたか（課題）
標準のevent.preventDefault()を使っても根本的な解決に至らなかった。リロードは止まってもデータ送信自体が失敗するか、処理が途中で中断するケースがあった。
- フォーム送信時にブラウザがネイティブなリクエストを発行し、ページがリロードされる。
-
event.preventDefault()だけではデータ送信処理（AJAX）の代替が提供されない。 - Alpine.jsのイベントリスナーの登録順序によっては、デフォルト動作の停止が意図せず機能しない場合がある。
どう解決したか（概要）
この問題は、Alpine.jsのディレクティブとFetch APIを組み合わせることでエレガントに解決した。フォームの送信イベントをフックし、ページ遷移を発生させずに非同期でデータを送信するアプローチを採用した。
- フォーム要素に
@submit.prevent="submitForm"を適用し、ブラウザのデフォルト動作を宣言的に停止させる。 - Alpine.jsコンポーネント内の
submitFormメソッド内で、FormDataオブジェクトを作成する。 -
fetch関数を用いて、POSTリクエストを非同期でAPIエンドポイントへ送信する。 - 通信成功後、
showSuccessMessageのような状態フラグを操作し、ページリロードなしで成功モーダルなどを表示する。
これは、リロードを止める（.prevent）と、代替処理（fetch）をセットで実装する鉄則に基づいている。
効果（Before/After）
ページリロードが完全に排除され、UXが劇的に向上した。Fetch APIと状態管理を組み合わせることで、非同期処理がUIに即座に反映されるようになった。
- Before: フォーム送信ごとに数秒間の画面ブランク（リロード）が発生。
- After: データ送信がバックグラウンドで処理され、即座に成功モーダルが表示されるなど、シームレスな操作感を実現。
今回の実装により、特にインタラクティブ性が求められる機能でのユーザー体験の向上が確認できた。
🚀 詳細な設定とコードはこちら
具体的なWAFのルール設定や、より詳細なログ解析データは元のブログで公開しています。