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つ追加する感じなのでやっていくうちに辛いこともあるかもしれない