Alpine.js は、Vue.jsによく似たコードの書き方で、より簡単にリアクティブなサイトが構築できるJSフレームワークです。
今回は、x-cloak ディレクティブについての記事です。
x-cloak ディレクティブ
Alpine.js 日本語ドキュメントの x-cloak の説明欄には、
Alpine の初期化時に、要素から
x-cloak属性が削除されます。これは、事前に初期化された DOM を隠すのに役立ちます。
と、あります。
む、むずかしい…。
つまり、htmlタグ内に x-cloak 属性を付けておけば（ <div x-data="{}" x-cloak></div> ←こんな感じ ）、Alpineの初期化時に x-cloak 属性を取り消してくれるそうです … これ実際に実装してみないと、イメージわかないっすな (;・∀・)
実際に、コードを書いてみます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[x-cloak] {
color: red;
font-size: 3rem;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="{ foo : 'foo' }" x-cloak>
<p>x-cloakをつかってみよう！</p>
</div>
</body>
</html>
上記の「例１」をブラウザで表示してみると、ブラウザで開いた瞬間は、headタグ内のstyleによって、x-cloak 属性がある div タグにスタイルが適応されます（文字が赤く、大きな文字が表示されます）。
しかし、その後 Alpine.js の初期化時に <div x-data="{ foo : 'foo' }" x-cloak> の x-cloak 部分が削除されるために、styleタグ内で定義されている[x-coak] 部分が適応されなくなります。
x-cloak の使いどころ
この、x-cloak が役立つのはドロップダウンやモーダルを実装するときです。下の例をご覧ください。下記のCodePenでは、x-cloak を使用しないでドロップダウンを実装したケースです。
See the Pen abmrmwM by Masahiro (@masahiro111) on CodePen.
上記CodePenのページを別タブで開いて、一度更新してみると、更新した瞬間にドロップダウンの内容である**「ボタンもしくは、ボタンの外をクリックすると閉じます」という文字列が見えてしまうのが確認できますでしょうか？
これは、Alpine.js が初期化することによって、ulタグ部分が非表示になるので（ ul タグの x-show で open の値が false になったら非表示）、Alpine.jsが初期化するまで ul タグ内が見えてしまう** ためです。
では、ブラウザで開いた瞬間にドロップダウン内の情報を見せないままにするためにどうするかというと、ここで x-cloak を使用します。
See the Pen xxENEzv by Masahiro (@masahiro111) on CodePen.
このようにすると、ページ開いた瞬間でも、ドロップダウンの内容が非表示のままで良い感じになります。