Anthropic Claudeその他⭐ リポ 0品質スコア 50/100

barba-js

Name: barba-js
Author: freshtechbro

Webサイトのページ間に流れるようなスムーズなトランジションを実装するためのライブラリです。ページ遷移の追加、SPAライクな体験の構築、アニメーション付きルート切り替えの実装時に使用してください。Barba.js、ページトランジション、ビュー管理、トランジションフック、GSAPとの統合など、スムーズなページナビゲーションに関するタスクで動作します。

description の原文を見る

Page transitions library for creating fluid, smooth transitions between website pages. Use this skill when implementing page transitions, creating SPA-like experiences, adding animated route changes, or building websites with smooth navigation. Triggers on tasks involving Barba.js, page transitions, routing, view management, transition hooks, GSAP integration, or smooth page navigation. Works with gsap-scrolltrigger for transition animations.

SKILL.md 本文

Barba.js

Webサイトのページ間に流動的でスムーズなトランジションを作成するための現代的なページトランジションライブラリ。Barba.jsはナビゲーションをハイジャックしフルページリロードなしでトランジションを管理することで、マルチページWebサイトをシングルページアプリケーション(SPA)のように感じさせます。

概要

Barba.jsは軽量(ミニファイ・圧縮時7kb)のJavaScriptライブラリで、ページ間のナビゲーションをインターセプトし、AJAXで新しいコンテンツを取得し、古いコンテナと新しいコンテナの間をスムーズにトランジションさせます。ページロード遅延とHTTPリクエストを削減しながら、従来のマルチページアーキテクチャの利点を維持します。

主な機能:

フルリロードなしのスムーズなページトランジション
トランジション段階を正確に制御するライフサイクルフック
ページ固有の動作のためのビューベースロジック
@barba/routerプラグイン搭載ルーティング
拡張可能なプラグインシステム
小さなフットプリントと高いパフォーマンス
フレームワーク非依存(バニラJS、GSAP、anime.jsなど対応)

コア概念

1. Wrapper、Container、Namespace

Barba.jsはトランジション管理に特定のDOM構造を使用します:

HTML構造:

<body data-barba="wrapper">
  <!-- 静的要素(ヘッダー、ナビ)はcontainer外に配置 -->
  <header>
    <nav>
      <a href="/">Home</a>
      <a href="/about">About</a>
    </nav>
  </header>

  <!-- 動的コンテンツはcontainerに配置 -->
  <main data-barba="container" data-barba-namespace="home">
    <!-- ナビゲーション時にこのコンテンツが変更される -->
    <h1>Home Page</h1>
    <p>Content that will transition out...</p>
  </main>

  <!-- 静的フッターはcontainer外に配置 -->
  <footer>© 2025</footer>
</body>

3つの主要要素:

Wrapper (data-barba="wrapper")
- 最外部コンテナ
- wrapper内でcontainer外のすべての要素は永続的に保持される
- 変更されないヘッダー、ナビゲーション、フッターに最適
Container (data-barba="container")
- ナビゲーション時に更新される動的コンテンツ領域
- トランジション中にこのセクションのみが置き換わる
- すべてのページに存在する必要がある
Namespace (data-barba-namespace="home")
- 各ページタイプの一意識別子
- トランジションルールとビューロジックで使用される
- 例: "home"、"about"、"product"、"blog-post"

2. トランジションライフサイクル

Barba.jsは各ナビゲーションの正確なライフサイクルに従います:

デフォルト非同期フロー:

ユーザーがリンクをクリック
Barbaがナビゲーションをインターセプト
次のページをプリフェッチ(AJAX経由)
新しいコンテンツをキャッシュ
leaveフック - 現在のページをアニメーション出
leaveアニメーション完了を待つ
古いコンテナを削除、新しいコンテナを挿入
enterフック - 新しいページをアニメーション入
enterアニメーション完了を待つ
ブラウザ履歴を更新

同期フロー (sync: trueの場合):

ユーザーがリンクをクリック
Barbaがナビゲーションをインターセプト
次のページをプリフェッチ
新しいページのロードを待つ
leaveとenterフックが同時に実行 (クロスフェード効果)
コンテナを入れ替え
ブラウザ履歴を更新

3. フック

Barbaはトランジションを制御するための11のライフサイクルフックを提供します:

フック実行順序:

初期ページロード:
  beforeOnce → once → afterOnce

すべてのナビゲーション:
  before → beforeLeave → leave → afterLeave →
  beforeEnter → enter → afterEnter → after

フックタイプ:

グローバルフック: すべてのトランジションで実行 (barba.hooks.before())
トランジションフック: 特定のトランジションオブジェクト内で定義
ビューフック: ページ固有のロジック用のビューオブジェクト内で定義

一般的なフック用途:

beforeLeave - スクロール位置をリセット、アニメーション準備
leave - 現在のページをアニメーション出
afterLeave - 古いページをクリーンアップ
beforeEnter - 新しいページを準備(要素を非表示、初期状態設定)
enter - 新しいページをアニメーション入
afterEnter - ページスクリプト初期化、アナリティクストラッキング

4. ビュー

ビューはnamespaceに基づいて実行されるページ固有のロジックコンテナです:

barba.init({
  views: [{
    namespace: 'home',
    beforeEnter() {
      // ホームページ固有の設定
      console.log('Entering home page');
    },
    afterEnter() {
      // ホームページ機能を初期化
      initHomeSlider();
    }
  }, {
    namespace: 'product',
    beforeEnter() {
      console.log('Entering product page');
    },
    afterEnter() {
      initProductGallery();
    }
  }]
});

一般的なパターン

1. 基本的なセットアップ

インストール:

npm install --save-dev @barba/core
# または
yarn add @barba/core --dev

最小限の構成:

import barba from '@barba/core';

barba.init({
  transitions: [{
    name: 'default',
    leave({ current }) {
      // 現在のページをフェードアウト
      return gsap.to(current.container, {
        opacity: 0,
        duration: 0.5
      });
    },
    enter({ next }) {
      // 新しいページをフェードイン
      return gsap.from(next.container, {
        opacity: 0,
        duration: 0.5
      });
    }
  }]
});

2. フェードトランジション(非同期)

クラシックなフェードアウト、フェードイントランジション:

import barba from '@barba/core';
import gsap from 'gsap';

barba.init({
  transitions: [{
    name: 'fade',
    async leave({ current }) {
      await gsap.to(current.container, {
        opacity: 0,
        duration: 0.5,
        ease: 'power2.inOut'
      });
    },
    async enter({ next }) {
      // 最初は非表示
      gsap.set(next.container, { opacity: 0 });

      // フェードイン
      await gsap.to(next.container, {
        opacity: 1,
        duration: 0.5,
        ease: 'power2.inOut'
      });
    }
  }]
});

3. クロスフェードトランジション(同期)

ページ間の同時フェード:

barba.init({
  transitions: [{
    name: 'crossfade',
    sync: true, // 同期モードを有効化
    leave({ current }) {
      return gsap.to(current.container, {
        opacity: 0,
        duration: 0.8,
        ease: 'power2.inOut'
      });
    },
    enter({ next }) {
      return gsap.from(next.container, {
        opacity: 0,
        duration: 0.8,
        ease: 'power2.inOut'
      });
    }
  }]
});

4. オーバーラップを伴うスライドトランジション

古いページをスライドアウト、新しいページをスライドインしてオーバーラップ:

barba.init({
  transitions: [{
    name: 'slide',
    sync: true,
    leave({ current }) {
      return gsap.to(current.container, {
        x: '-100%',
        duration: 0.7,
        ease: 'power3.inOut'
      });
    },
    enter({ next }) {
      // 右外側から開始
      gsap.set(next.container, { x: '100%' });

      // 右からスライドイン
      return gsap.to(next.container, {
        x: '0%',
        duration: 0.7,
        ease: 'power3.inOut'
      });
    }
  }]
});

5. トランジションルール(条件付きトランジション)

ナビゲーションコンテキストに基づいて異なるトランジションを定義:

barba.init({
  transitions: [
    // ホームから任意のページへ: フェード
    {
      name: 'from-home-fade',
      from: { namespace: 'home' },
      leave({ current }) {
        return gsap.to(current.container, {
          opacity: 0,
          duration: 0.5
        });
      },
      enter({ next }) {
        return gsap.from(next.container, {
          opacity: 0,
          duration: 0.5
        });
      }
    },
    // プロダクトからプロダクトへ: 左スライド
    {
      name: 'product-to-product',
      from: { namespace: 'product' },
      to: { namespace: 'product' },
      leave({ current }) {
        return gsap.to(current.container, {
          x: '-100%',
          duration: 0.6
        });
      },
      enter({ next }) {
        gsap.set(next.container, { x: '100%' });
        return gsap.to(next.container, {
          x: '0%',
          duration: 0.6
        });
      }
    },
    // デフォルトフォールバック
    {
      name: 'default',
      leave({ current }) {
        return gsap.to(current.container, {
          opacity: 0,
          duration: 0.3
        });
      },
      enter({ next }) {
        return gsap.from(next.container, {
          opacity: 0,
          duration: 0.3
        });
      }
    }
  ]
});

6. ルートベースのトランジションのためのRouterプラグイン

@barba/routerを使用してルート固有のトランジション:

インストール:

npm install --save-dev @barba/router

使用方法:

import barba from '@barba/core';
import barbaPrefetch from '@barba/prefetch';
import barbaRouter from '@barba/router';

// ルートを定義
barbaRouter.init({
  routes: [
    { path: '/', name: 'home' },
    { path: '/about', name: 'about' },
    { path: '/products/:id', name: 'product' }, // 動的セグメント
    { path: '/blog/:category/:slug', name: 'blog-post' }
  ]
});

barba.use(barbaRouter);
barba.use(barbaPrefetch); // オプション: ホバーでプリフェッチ

barba.init({
  transitions: [{
    name: 'product-transition',
    to: { route: 'product' }, // ルート名でトリガー
    leave({ current }) {
      return gsap.to(current.container, {
        scale: 0.95,
        opacity: 0,
        duration: 0.5
      });
    },
    enter({ next }) {
      return gsap.from(next.container, {
        scale: 1.05,
        opacity: 0,
        duration: 0.5
      });
    }
  }]
});

7. ローディングインジケータ

ページ取得中にローディング状態を表示:

barba.init({
  transitions: [{
    async leave({ current }) {
      // ローダーを表示
      const loader = document.querySelector('.loader');
      gsap.set(loader, { display: 'flex', opacity: 0 });
      gsap.to(loader, { opacity: 1, duration: 0.3 });

      // ページをフェードアウト
      await gsap.to(current.container, {
        opacity: 0,
        duration: 0.5
      });
    },
    async enter({ next }) {
      // ローダーを非表示
      const loader = document.querySelector('.loader');
      await gsap.to(loader, { opacity: 0, duration: 0.3 });
      gsap.set(loader, { display: 'none' });

      // ページをフェードイン
      await gsap.from(next.container, {
        opacity: 0,
        duration: 0.5
      });
    }
  }]
});

統合パターン

GSAP統合

Barba.jsはアニメーション用GSAPとシームレスに連携:

タイムラインベースのトランジション:

import barba from '@barba/core';
import gsap from 'gsap';

barba.init({
  transitions: [{
    async leave({ current }) {
      const tl = gsap.timeline();

      tl.to(current.container.querySelector('h1'), {
        y: -50,
        opacity: 0,
        duration: 0.3
      })
      .to(current.container.querySelector('.content'), {
        y: -30,
        opacity: 0,
        duration: 0.3
      }, '-=0.2')
      .to(current.container, {
        opacity: 0,
        duration: 0.2
      });

      await tl.play();
    },
    async enter({ next }) {
      const tl = gsap.timeline();

      // 初期状態を設定
      gsap.set(next.container, { opacity: 0 });
      gsap.set(next.container.querySelector('h1'), { y: 50, opacity: 0 });
      gsap.set(next.container.querySelector('.content'), { y: 30, opacity: 0 });

      tl.to(next.container, {
        opacity: 1,
        duration: 0.2
      })
      .to(next.container.querySelector('h1'), {
        y: 0,
        opacity: 1,
        duration: 0.5,
        ease: 'power3.out'
      })
      .to(next.container.querySelector('.content'), {
        y: 0,
        opacity: 1,
        duration: 0.5,
        ease: 'power3.out'
      }, '-=0.3');

      await tl.play();
    }
  }]
});

gsap-scrolltriggerスキルを参照して、高度なGSAP統合パターンの詳細をご覧ください。

ビュー固有の初期化

ページごとにライブラリやスクリプトを初期化:

barba.init({
  views: [
    {
      namespace: 'home',
      afterEnter() {
        // ホームページ機能を初期化
        initHomepageSlider();
        initParallaxEffects();
      },
      beforeLeave() {
        // クリーンアップ
        destroyHomepageSlider();
      }
    },
    {
      namespace: 'gallery',
      afterEnter() {
        initLightbox();
        initMasonry();
      },
      beforeLeave() {
        destroyLightbox();
      }
    }
  ]
});

アナリティクストラッキング

ナビゲーション時のページビューをトラッキング:

barba.hooks.after(() => {
  // Google Analytics
  if (typeof gtag !== 'undefined') {
    gtag('config', 'GA_MEASUREMENT_ID', {
      page_path: window.location.pathname
    });
  }

  // またはデータレイヤーを使用
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'pageview',
    page: window.location.pathname
  });
});

サードパーティスクリプト再初期化

ページトランジション後にスクリプトを再実行:

barba.hooks.after(() => {
  // サードパーティウィジェットを再初期化
  if (typeof twttr !== 'undefined') {
    twttr.widgets.load(); // Twitterウィジェット
  }

  if (typeof FB !== 'undefined') {
    FB.XFBML.parse(); // Facebookウィジェット
  }

  // 構文ハイライトを再実行
  if (typeof Prism !== 'undefined') {
    Prism.highlightAll();
  }
});

パフォーマンス最適化

1. プリフェッチング

@barba/prefetchを使用してホバー時にページを読み込み:

npm install --save-dev @barba/prefetch

import barba from '@barba/core';
import barbaPrefetch from '@barba/prefetch';

barba.use(barbaPrefetch);

barba.init({
  // デフォルトではリンクホバーでプリフェッチが発生
  prefetch: {
    root: null, // すべてのリンクを監視
    timeout: 3000 // キャッシュタイムアウト(ミリ秒)
  }
});

2. レイアウトシフトの防止

コンテナにmin-heightを設定してコンテンツジャンプを防止:

[data-barba="container"] {
  min-height: 100vh;
  /* またはビューポート高さからヘッダー/フッターを差し引く */
  min-height: calc(100vh - 80px - 60px);
}

3. アニメーション最適化

GPU高速化プロパティを使用:

// ✅ 良好 - GPU高速化
gsap.to(element, {
  opacity: 0,
  x: -100,
  scale: 0.9,
  rotation: 45
});

// ❌ 避ける - リフロー/リペイントを引き起こす
gsap.to(element, {
  width: '50%',
  height: '300px',
  top: '100px'
});

4. イベントリスナーをクリーンアップ

beforeLeaveまたはビューフックでリスナーを削除:

barba.init({
  views: [{
    namespace: 'home',
    afterEnter() {
      // リスナーを追加
      this.clickHandler = () => console.log('clicked');
      document.querySelector('.btn').addEventListener('click', this.clickHandler);
    },
    beforeLeave() {
      // リスナーを削除
      document.querySelector('.btn').removeEventListener('click', this.clickHandler);
    }
  }]
});

5. 画像のレイジーロード

トランジション完了後に画像読み込みを遅延:

barba.init({
  transitions: [{
    async enter({ next }) {
      // 最初にトランジションを完了
      await gsap.from(next.container, {
        opacity: 0,
        duration: 0.5
      });

      // その後、画像を読み込み
      const images = next.container.querySelectorAll('img[data-src]');
      images.forEach(img => {
        img.src = img.dataset.src;
        img.removeAttribute('data-src');
      });
    }
  }]
});

よくある落とし穴

1. Promiseの返却を忘れる

問題: アニメーションが開始されても待機されずにトランジションが即座に完了する。

解決策: 常にPromiseを返すか、async/awaitを使用:

// ❌ 間違い - アニメーションは開始されるが待機されない
leave({ current }) {
  gsap.to(current.container, { opacity: 0, duration: 0.5 });
}

// ✅ 正解 - Promiseを返す
leave({ current }) {
  return gsap.to(current.container, { opacity: 0, duration: 0.5 });
}

// ✅ また正解 - async/await
async leave({ current }) {
  await gsap.to(current.container, { opacity: 0, duration: 0.5 });
}

2. デフォルトリンク動作を防止しない

問題: 一部のリンクがフルページリロードを引き起こす。

解決策: Barbaは内部リンクで自動的にデフォルトを防止しますが、外部リンクを除外する必要がある場合があります:

barba.init({
  prevent: ({ href }) => {
    // 外部リンクを許可
    if (href.indexOf('http') > -1 && href.indexOf(window.location.host) === -1) {
      return true;
    }
    return false;
  }
});

3. ページ間のCSSコンフリクト

問題: 古いページのCSSがトランジション中に新しいページのレイアウトに影響する。

解決策: namespace固有のCSSを使用するか、スタイルをリセット:

/* Namespace固有のスタイル */
[data-barba-namespace="home"] .hero {
  background: blue;
}

[data-barba-namespace="about"] .hero {
  background: red;
}

またはbeforeEnterでリセット:

beforeEnter({ next }) {
  // スクロール位置をリセット
  window.scrollTo(0, 0);

  // グローバル状態をリセット
  document.body.classList.remove('menu-open');
}

4. ドキュメントタイトルとメタタグを更新しない

問題: ナビゲーション時にページタイトルとメタタグが更新されない。

解決策: @barba/headプラグインを使用するか、手動で更新:

npm install --save-dev @barba/head

import barba from '@barba/core';
import barbaHead from '@barba/head';

barba.use(barbaHead);

barba.init({
  // Headプラグインが自動的に<head>タグを更新
});

または手動で:

barba.hooks.after(({ next }) => {
  // タイトルを更新
  document.title = next.html.querySelector('title').textContent;

  // メタタグを更新
  const newMeta = next.html.querySelectorAll('meta');
  newMeta.forEach(meta => {
    const name = meta.getAttribute('name') || meta.getAttribute('property');
    if (name) {
      const existing = document.querySelector(`meta[name="${name}"], meta[property="${name}"]`);
      if (existing) {
        existing.setAttribute('content', meta.getAttribute('content'));
      }
    }
  });
});

5. 入場時のアニメーションちらつき

問題: 新しいページが入場アニメーション開始前にフラッシュして見える。

解決策: CSSまたはbeforeEnterで初期非表示状態を設定:

/* CSS方法 */
[data-barba="container"] {
  opacity: 0;
}

[data-barba="container"].is-visible {
  opacity: 1;
}

// JavaScript方法
beforeEnter({ next }) {
  gsap.set(next.container, { opacity: 0 });
}

6. 適切なポジショニングなしの同期トランジション

問題: 同期トランジションでコンテナがスタックしてレイアウトシフトが生じる。

解決策: トランジション中にコンテナを絶対配置:

[data-barba="wrapper"] {
  position: relative;
}

[data-barba="container"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

またはJavaScriptで管理:

barba.init({
  transitions: [{
    sync: true,
    beforeLeave({ current }) {
      gsap.set(current.container, {
        position: 'absolute',
        top: 0,
        left: 0,
        width: '100%'
      });
    }
  }]
});

リソース

このスキルには以下が含まれます:

scripts/

Barba.js関連の一般的なタスク用の実行可能ユーティリティ:

transition_generator.py - トランジションボイラープレートコード生成
project_setup.py - Barba.jsプロジェクト構造を初期化

references/

詳細なドキュメント:

api_reference.md - 完全なBarba.js API(フック、トランジション、ビュー、ルーター)
hooks_guide.md - すべての11フック、実行順序、ユースケース
gsap_integration.md - Barbaトランジション用GSAPアニメーションパターン
transition_patterns.md - 一般的なトランジション実装

assets/

テンプレートとスタータープロジェクト:

starter_barba/ - 完全なBarba.js + GSAPスターターテンプレート
examples/ - 実世界のトランジション実装

詳細情報

作者: freshtechbro
リポジトリ: freshtechbro/claudedesignskills
ライセンス: MIT
最終更新: 不明

GitHubで原本を見る →フィードバックを送る

Source: https://github.com/freshtechbro/claudedesignskills / ライセンス: MIT