chicog.me

2022年1月23日
2022年1月23日

JQueryを使うよりも簡単にDOMの表示制御や、classの付け替えを行いたい時はAlpine.jsがおすすめです!

Alipne.jsとは?

Alpine.jsは、Vue.jsや、React.jsの様なJavaScriptフレームワークの様に多機能ではないのですが、 JavaScriptを書かずに簡単なDOM操作や、classの付け替えが行えます。
また、リアクティブな一面も持っているためVue.jsやReact.jsのように状態に合わせたDOMの維持をしてくれます。
Vue.js、React.jsなどのJavaScriptフレームワークを利用したことのない人でも簡単に使えることができますので、 それらのフレームワークの入門としてお試しいただくのも良いかと思います!

LPなどの1枚物などを作成する時は、JQueryや、素のJavaScriptを書くよりもAlpine.jsを使った方が、簡単で明瞭なコードを書くことができます。
公式はこちら

早速使って見ましょう!

実行準備

適当なHTMLをご用意いただき、Alpine.jsを読み込ませてください。

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

これだけで準備完了です...!

例えば、DOMの表示/非表示制御

<div x-data="{ open: false }">
    <button @click="open = true">開く</button>
    <div x-show="open">
        中身
    </div>
</div>

まず、<div x-data="{ open: false }">とすることによりopenはリアクティブなプロパティとなります。
<button @click="open = true">Open</button>は、ボタンをクリックすることによりopenの値をtrueに変更します。
<div x-show="open">で、openの値を常に監視し、trueになったタイミングで表示します。
これらを1枚のHTMLの中で全て行えるので、最初使った時は感動しました。

これをJQueryで書くと

<div>
    <button class="open">開く</button>
    <div class="content" style="display:none;">
        中身
    </div>
</div>
$(function() {
    $('.open').click(function() {
        $('.content').show();
    });
});

このくらいであればJQuery.jsで書いても大してコード量に違いはないですし、処理が複雑でもないです。 ただ、JQueryをリアクティブにしようと思うと非常に大変なので、とある状態を見て一気に変更を加えたい場合などはAlpine.jsに軍配が上がるかと思います。

私自身JQueryを今まで使い続けて来ましたが、Alpine.jsで実装出来るものは全てAlpine.jsに置き換えています。 それくらい分かりやすいし、スコープもはっきりしているのでとても使い勝手が良いです。

興味を持たれた方は、ぜひAlpine.js試してみてください!10分くらいでちょっとした感動を得ることができると思います!