Alpine.jsでページ読み込み時に非表示要素が一瞬見えてしまう「blip」を防止する方法

こんにちは。エキサイトでデザイナーをしている齋藤です。

今回はAlpine.jsを使用している環境下で、ページ読み込み時に隠している要素が一瞬表示されてしまう「blip」という現象を防止する方法をご紹介します。

blipとは

冒頭、Alpine.jsにおけるblipとはなにかを整理します。

例えば以下の場合、pタグにはx-showディレクティブによって、isOpenがtrueになると表示されるという条件が設けられています。

したがって、ページ読み込み時には表示されないことが期待されます。

<div x-data="{ isOpen: false }">
  <button @click="isOpen = true">クリック</button>
  <p x-show="isOpen">ボタンをクリックしたら表示される文字</p>
</div>

しかし、ページが読み込まれた後、Alpine.jsの読み込みが完了する前の一瞬、初期化されていないテンプレートが表示されてしまうことがあります。

これを「blip」と呼びます。

blipは、ページ読み込み時には隠れているべき要素にx-cloakディレクティブを付与することで防止できます。

先の例ですと、ページ読み込み時には隠れているべき要素はpタグですので、以下のようにx-cloakを付与します。

<p x-cloak x-show="isOpen">ボタンをクリックしたら表示される文字</p>

ただし、これだけでは機能しません。必ず、CSSに以下のスタイルの追加が必要です。

[x-cloak] { display: none !important; }

これによって、x-cloakが付与された要素はAlpine.jsの読み込みが完了するまでdisplay: none;が適用され、blipの発生を防ぎます。

今回はAlpine.jsを使用している環境下で、ページ読み込み時に隠している要素が一瞬表示されてしまう「blip」という現象を防止する方法をご紹介しました。

Alpine.jsを使用されている方の一助となれば幸いです。

ご精読ありがとうございました。