Alpine.jsのx-cloakって何？

AIが書いたコードを元にプログラミング力を高めていくコーナーです。今回は、「Alphine.jsのx-cloakって何？」を調べました。

Alpine.jsのx-cloakは、ちらつきを防ぐための機能です。HTMLをJavaScriptで修飾する場合、JavaScript側のコードが初期化される前に、素のHTMLが一瞬見えてしまうことがあります。それがFOUCと呼ばれます。これを防ぐために、 x-cloak が存在します。

公式：https://alpinejs.dev/directives/cloak

仕組みとしては、x-cloakが付いた要素をAlpineが初期化完了するまで非表示にします。そして、初期化が終わると自動的にx-cloak属性が除去されて要素が表示されます。

使い方は公式ドキュメントに書いてある通りですが、CSSに以下を追加し、その上で、HTML側に指定します。

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

<div x-data="{ open: false }" x-cloak>
  <span x-show="open">この内容は最初は非表示</span>
</div>

x-cloakがないと、ページ読み込み時にAlpineのJavaScriptが実行される前に、一瞬だけ、x-show="open"などで本来隠れるはずの要素がちらっと見えてしまいます。
x-show、x-if、x-forなどで動的に表示制御している要素に付けておくと良いようです。