yuheijotaki.com

swup/astroを試してみた

目次

はじめに

Astroのインテグレーションとして提供されている swupを本サイトで試してみたので雑感

導入

@swup/astro のパッケージをインストールして astro.config.*integrations: [swup()] とする。
デフォルトでは <main> タグを対象としてフェードイン/アウトのアニメーションが適用される。
今回は <main><footer> に適用してみた。

オプション

今回の適用内容:
https://github.com/yuheijotaki/yuheijotaki.com/commit/88f60bccfd4690da5563c8fdb0e6f576f7dbe308

設定

2つのみ抜粋

theme

デフォルトでは 'fade' だがCSSアニメーションで指定する場合は false とする。

accessibility

true (デフォルト)でトランジション対象のセレクタ(の一番上の要素?)に遷移ごとに tabindex="-1" が付与される。
また遷移ごとに下記のようなライブリージョンが挿入される。

<span id="live-region-xxxxx" aria-live="polite" role="status" style="xxxxx">
  Navigated to: このウェブサイトについて
</span>

トップページ遷移時にロゴにフォーカス移動するのがいいなど、そのような調整は個別に対応が必要そう。

その他

ページ内遷移だがトランジションさせたくない場合はリンクや親要素に属性 data-no-swup を付与する。

<a href="/feed.xml" data-no-swup>RSSフィード</a>

雑感

案件レベルだといろいろな発見がありそうだが現状での感想

  • 基本的には使えそうと思った。フォームとの連携だとか複雑なものは分からない
  • プリロードが効くためアニメーションなしにしてもページの表示が速くなった体感はあり
  • Lighthouse、axeのスコアには影響なかった
  • data-no-swup 然り、swupオリジナルのオプションもいろいろ見たらもっといろいろできそう
  • swupが悪いわけではないが、根本的な基盤みたいなところで癖あることを1つ追加する感じなのでやっていくうちに辛いこともあるかもしれない

参考資料