🔥

[2023年6月版]Astro.js 小ネタ集その3 Alpine.jsでコンポーネント作成

2023/06/09に公開

個人開発

Alpine.js

Astro

tech

前回に引き続きAstro.jsでの小ネタを紹介していきます。

1. Alpine.js でコンポーネント作成

自分のブログサイトはブログ記事がメインのためあんまりガッツリと"機能"を作りこむ予定はありません。
そのためできるだけ薄くてイージーな、モリモリのフレームワークよりは軽めのライブラリのようなUI用の軽量フレームワークを探していました。
そこで、Astro.jsでサポートされているUIフレームワークで一番軽めな Alpine.js を使ってみました。

ちなみに Astro.js のプラグイン集？から連携可能なフレームワークが検索可能です。

で、alpine.js 連携のガイドは以下です。

1-1. セットアップ

セットアップは非常に簡単です。(Astro.jsは他のフレームワークもセットアップが劇的に簡単ですが…というかReactなんか普通にサイトのセットアップするよりAstro.jsでサイト設定してコンポーネントでReact使ったほうが楽なんじゃない？)

以下のコマンドでサクッと追加します。

shell

$ npx astro add alpinejs

で、このコマンドで astro.config.mjs に設定を追加してくれるので、セットアップは以上です！！

ちなみに…

astro.config.mjs

...
export default defineConfig({
  ...
  integrations: [
    tailwind(),
    sitemap(),
    alpinejs()
  ],
  ...

});

みたいな感じで設定を追加してくれます。いや、これで設定は終了で、あとは使うだけです。

1-2. コンポーネントの作成

自分のブログサイトではスマホ用の記事の目次の表示切替にAlpine.jsを使ってます。

以下のような感じです。

<aside x-data="{ open: false }">
    <div class="w-full flex flex-row justify-end my-auto px-6 py-3 gap-2">
        <div class="text-sm my-auto font-bold text-gray-400">
            <button @click="open = true">目次</button>
            <span class="open_area cursor-pointer" x-show="!open" @click="open = true">▽</span>
            <span class="close_area cursor-pointer" x-show="open" @click="open = false">△</span>
        </div>
        <TwShare entry={entry} url={url} />
    </div>
    <div x-show="open" class="float-menu" @click.outside="open = false">
        <Toc headings={headings} />
    </div>
</aside>

とくに import などせずともいきなり Alpine.js の属性が利用可能です。

x-data で表示切替用のフラグを初期化します。
@click="open = true" でクリックしたらフラグを true にする、の設定。
@click="open = false" はその逆。
x-show="open" でフラグに従って表示・非表示の切り替え。
@click.outside="open = false" でその領域外をクリックしたら、フラグを false にする、の設定。

これだけですがやりたいことは120%実現できているので大満足です。
とくに、@click.outside ってすごくない？○○であるの設定は普通ですが、○○じゃないの設定ってなかなか大変なんすよ。
領域外のイベントを設定できるのスゴイです。

ミニマルなセットアップでミニマルに実装できる。。。
今のところほしかったのは Alpine.js です。

本日はここまでといたします。
引き続きよろしくお願いいたします。

1. Alpine.js でコンポーネント作成

1-1. セットアップ

1-2. コンポーネントの作成

Discussion