<h2 id="hda758b60ea">導入方法(CDN)</h2><p>GSAPを導入したいHTMLファイルの&lt;/body&gt;の前に下記コードを記入。</p><p><a href="https://gsap.com/docs/v3/" target="_blank" rel="noopener noreferrer">公式のDocsページ</a></p><pre><code class="language-javascript">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js&quot;&lt;/script&gt;
</code></pre><p>本体ライブラリとScrollTriggerプラグインを追加している💡</p><table><tbody><tr><th colspan="1" rowspan="1"><p>CDN</p></th><th colspan="1" rowspan="1"><p>内容</p></th></tr><tr><td colspan="1" rowspan="1"><p><code>gsap.min.js</code></p></td><td colspan="1" rowspan="1"><p>GSAPの本体ライブラリ（アニメーションの基礎）</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>ScrollTrigger.min.js</code></p></td><td colspan="1" rowspan="1"><p>要素のスクロール位置に応じたアニメーション制御</p></td></tr></tbody></table><p>実際にアニメーション内容を記入する、JavaScriptファイルを作成し読み込ませる。今回はcommon.jsで作成。</p><pre><code class="language-javascript">&lt;script src=&quot;https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js&quot;&lt;/script&gt;
&lt;script src=&quot;js/common.js&quot;&gt;&lt;/script&gt;</code></pre><h2 id="h45a528422f">🎉【完成コード】設定した場所までスクロールしたら下からフェードイン</h2><p>feadInというクラス名をつけた要素にアニメーションを設定し、アニメーションの発火は.feadIn-containerというクラス名をつけた要素としています。</p><pre><code class="language-javascript">gsap.registerPlugin(ScrollTrigger);

gsap.set(&quot;.feadIn&quot;, { opacity: 0, y: 50 }); // 初期値を設定

gsap.to(&quot;.feadIn&quot;, {
  opacity: 1,
  y: 0,
  duration: 1,
  ease: &quot;power2.out&quot;,
  scrollTrigger: {
    trigger: &quot;.feadIn-container&quot;,
    start: &quot;top 40%&quot;, // .feadIn-container の top が、ビューポートの40%の位置に来たら開始
    toggleActions: &quot;play none none none&quot;, // アニメーションのトリガー挙動
    markers: true,
  },
});</code></pre><figure><img src="https://images.microcms-assets.io/assets/8bac7d974bcd43e6a673ba966786d5c9/baba82755dd940998ceaa6a90d08193e/feadInImg.png" alt="GSAP参考画像" width="1073" height="590"></figure><p>上記のfeadIn-container（start）がビューポート位置(scroller-start)の位置に来たら、feadIn要素のアニメーション開始。</p><h2 id="h89be3c8553">🎉【 解説 】大事な部分だけのカンタン解説</h2><p>メイン機能のみのカンタン解説。<br>公式にはさらに詳細設定できる項目がたくさんあり⭐️</p><p><a href="https://gsap.com/cheatsheet" target="_blank" rel="noopener noreferrer nofollow">チートシート｜gsap.com/cheatsheet</a></p><hr><h2 id="hb2eb891176">①gsap.set｜初期状態を設定</h2><p>アニメーションさせる前の状態を設定する。CSS Stylesheetであらかじめアニメーション前の状態に設定している場合は設定はしなくても良い。〇〇の部分にアニメーションをさせたい要素のクラス名を設定。</p><p>gsap.set(&quot;.〇〇&quot;, { 初期状態のCSS });</p><hr><h2 id="h6475b37808">②gsap.to()｜アニメーション詳細を設定</h2><p>どの要素をどのようにアニメーションさせるか詳細を設定。（opacityやy置、easeやdurationなど）</p><p>gsap.to(&quot;.〇〇&quot;, {<br>//ここでアニメーション詳細を設定</p><p>〇〇にアニメーションをさせたい要素のクラス名を設定。</p><hr><h2 id="h84301d5f50">③scrollTrigger : {}｜アニメーションの発火の詳細を設定</h2><p>アニメーションの発火となる要素を決める。<br>いつどのタイミングでアニメーションを発火させるかなどの詳細設定が可能。</p><h3 id="h04a728d120">scrollTrigger：{ trigger</h3><p>trigger:　&quot;.〇〇&quot;,　← triggerにしたいコンテナまたは要素のクラス名を設定。<br>ここに設定した要素をアニメーション発火のトリガーにできる。</p><h3 id="h2d5be69994">scrollTrigger：{ start</h3><p>設定したアニメーション発火のtrigger:&quot;.〇〇&quot;,　要素のどの部分が、ビューポートのどの位置にきたらアニメーションをstartさせるかを設定する。endもあり。</p><p>start:　&quot; trigger<span style="color: #000000">要素の位置</span>&quot;　,　ビューポートの位置 &quot;,</p><p>例：<code>start: &quot;top 80%&quot;,</code>にすると、設定したtrigger:&quot;.〇〇&quot;,要素のtopがビューポート80%の位置にきたらアニメーション開始。</p><h3 id="h9c29dbf06b">scrollTrigger：{ toggleActions</h3><p>ScrollTrigger におけるスクロールイベントの挙動（トリガーに入った・出た時の動作）を細かく制御するためのオプション。<br>playもしくはnoneで設定可能。</p><p>それぞれ下記の順番で設定。</p><p><strong>toggleActions: &quot;<span style="color: #67d639">onEnter</span> <span style="color: #d5214c">onLeave</span> <span style="color: #3285eb">onEnterBack</span> <span style="color: #d517f0">onLeaveBack</span>&quot;</strong></p><table><tbody><tr><th colspan="1" rowspan="1"><p>項目</p></th><th colspan="1" rowspan="1"><p>発火タイミング</p></th><th colspan="1" rowspan="1"><p>設定</p></th></tr><tr><td colspan="1" rowspan="1"><p><strong><span style="color: #67d639">onEnter</span></strong></p></td><td colspan="1" rowspan="1"><p>トリガー要素がビューポートに <strong>入った時</strong></p></td><td colspan="1" rowspan="1"><p><code>play</code>or<code>none</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong><span style="color: #d5214c">onLeave</span></strong></p></td><td colspan="1" rowspan="1"><p>トリガー要素がビューポートから <strong>出た時</strong></p></td><td colspan="1" rowspan="1"><p><code>play</code>or<code>none</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong><span style="color: #3285eb">onEnterBack</span></strong></p></td><td colspan="1" rowspan="1"><p>戻るスクロールで再び <strong>入った時</strong></p></td><td colspan="1" rowspan="1"><p><code>play</code>or<code>none</code></p></td></tr><tr><td colspan="1" rowspan="1"><p><strong><span style="color: #d517f0">onLeaveBack</span></strong></p></td><td colspan="1" rowspan="1"><p>戻るスクロールで <strong>出た時</strong></p></td><td colspan="1" rowspan="1"><p><code>play</code>or<code>none</code></p></td></tr></tbody></table><p>💡 <strong>よく使う組み合わせ例</strong></p><table><tbody><tr><th colspan="1" rowspan="1"><p>記述</p></th><th colspan="1" rowspan="1"><p>説明</p></th></tr><tr><td colspan="1" rowspan="1"><p><code>&quot;play none none none&quot;</code></p></td><td colspan="1" rowspan="1"><p>一度だけアニメーションさせたい場合に最適（入ったときだけ再生）</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>&quot;play reverse play reverse&quot;</code></p></td><td colspan="1" rowspan="1"><p>入ると再生、出ると逆再生（往復アニメーション）</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>&quot;restart pause resume pause&quot;</code></p></td><td colspan="1" rowspan="1"><p>再入場時に再開など、状態維持しつつ動かしたいとき</p></td></tr><tr><td colspan="1" rowspan="1"><p><code>&quot;play reset play reset&quot;</code></p></td><td colspan="1" rowspan="1"><p>入るたびに最初から再生し直す</p></td></tr></tbody></table><p></p><h2 id="h0e837fc56c">🧠【完成コード】フェードインアニメーションを複数の要素に設定。</h2><p>複数にフェードインアニメーションを設定したい時。<br>.fade-in クラス自体をトリガーとして、.fade-in クラスをもつすべての要素にアニメーションを設定。</p><p>forEachを使って、ループ処理で一括設定する。</p><pre><code class="language-javascript">gsap.registerPlugin(ScrollTrigger);


gsap.utils.toArray(&quot;.fade-in&quot;).forEach((el) =&gt; {
  gsap.from(el, {
    opacity: 0,
    y: 50,
    duration: 1,
    scrollTrigger: {
      trigger: el,
      start: &quot;top 80%&quot;,
      toggleActions: &quot;play none none none&quot;,
      markers: true, 
    },
  });
});
</code></pre><ul><li>gsap.utils.toArray() で .fade-in 要素を全部取得</li><li>el はそれぞれのtrigger要素</li><li>trigger: el とし、それぞれの要素が自分自身をトリガーにする</li></ul><h3 id="ha81ddca65a">📝一つずつ要素のアニメーションをずらす</h3><p>すこしタイミングをずらしてstaggerっぽくフェードインさせる。</p><pre><code class="language-javascript">gsap.utils.toArray(&quot;.feadUp&quot;).forEach((el, i) =&gt; {
  gsap.set(el, { opacity: 0, y: 50 });

  gsap.to(el, {
    opacity: 1,
    y: 0,
    duration: 1,
    delay: i * 0.2, // 手動でstaggerっぽくする
    ease: &quot;power2.out&quot;,
    scrollTrigger: {
      trigger: el,
      start: &quot;top 80%&quot;,
      toggleActions: &quot;play none none none&quot;,
      markers: true,
    },
  });
});
</code></pre><p></p>

GSAPのScrollTriggerの使い方解説。個別の設定や一括設定方法も。

GSAPスクロールアニメーション｜ScrollTriggerを使って指定した要素をフェードインさせる。

<h2 id="he16b7b12c8">⚡️無限スクロールはCSR</h2><p>ユーザーのアクション（今回はスクロール）でデータ取得を行い、ページを表示させるCSR。</p><p><code>useState</code> と <code>useEffect</code> を使って無限スクロールを実装したけど、記事一覧ページから個別記事に移動して、また一覧ページに戻ると、<strong>すでに取得済みの11件目以降の記事が再度取得されてしまう</strong>。</p><p>これはNext.jsの仕様で、ページを離れるとコンポーネントの状態（<code>useState</code>など）はリセットされるため、戻ってきた時には再初期化されてしまうことが原因。</p><p>一度無限スクロールで取得したデータを取り直さないようにするには、<strong><span class="text-large">クライアントサイドで状態を保持する仕組み</span></strong>を導入する。</p><h2 id="hcd1318e753">✅ 解決方法：<code>zustand</code>や<code>Recoil</code>、<code>Redux</code>などの状態管理ライブラリを使う</h2><p>状態管理ライブラリを使用することで、ブログ一覧ページを離れて詳細ページに行っても、戻ってきたら<strong><span class="highlight">読み込んだブログ一覧は維持されたままにできる。</span></strong></p><h2 id="h3ec8ddcdcc">🧠 <code>zustand</code>の導入 &amp; 実装ステップ</h2><h3 id="hd7ea8c0b9d">1. <code>zustand</code> をインストール</h3><pre><code>npm install zustand</code></pre><h3 id="ha18b429992">2. ストアを作成（例：<code>src/store/useBlogStore.js</code>）</h3><p>⚠️Zustandの初期状態を設定する際の注意点：<br>ビルドした時、getStaticPropsですでに10件分の記事は取得されている状態。<br>Zustandの初期状態を設定する際、初期データをそのまま追加してしまうとZustandの初期状態を設定するuseEffectが走った際に、元あるデータ＋初期データが追加されてデータが重複してしまう。</p><p>そのため、取得するデータの状態を「初期時」と「追加時」と「初期化」の3つの状態を用意する。</p><p>❌状態を分けないと…<br>ビルド時にデータを10件取得<br>↓<br>useEffectでZustandの初期状態を設定（ビルド時に取得したデータをそのまま入れる）<br>↓<br>20件の重複データが表示される</p><pre><code class="language-javascript">import { create } from &quot;zustand&quot;;

const useBlogStore = create((set) =&gt; ({
  blogs: [],
  offset: 0,
  isEnd: false,
  initialized: false, 

  // 初回取得時に実行する（SSGデータセット）
  initBlogs: (initialBlogs) =&gt;
    set({
      blogs: initialBlogs,
      offset: initialBlogs.length,
      isEnd: initialBlogs.length === 0,
      initialized: true, // ← 初期化フラグを立てる
    }),

  // 無限スクロール時に実行する（新しい記事を追加）
  addBlogs: (newBlogs) =&gt;
    set((state) =&gt; ({
      blogs: [...state.blogs, ...newBlogs],
      offset: state.offset + newBlogs.length,
      isEnd: newBlogs.length === 0,
    })),
}));

export default useBlogStore;</code></pre><h3 id="h8c7ef6f8be">3.一覧ページ<code>blogs/index.jsx</code>で<code>useBlogStore.js</code>を使う</h3><pre><code class="language-javascript">import useBlogStore from &quot;src/store/useBlogStore&quot;;

export default function Blog({ data, category }) {
const { blogs, offset, isEnd, initBlogs, addBlogs, initialized } = useBlogStore();
const [loading, setLoading] = useState(false);
const observerRef = useRef();</code></pre><h3 id="h6d0c35c5d5">4. ストアに初期データをセット(初回のみ)</h3><pre><code class="language-javascript">useEffect(() =&gt; {
    if (!initialized &amp;&amp; blogs.length === 0 &amp;&amp; data.length &gt; 0) {
      initBlogs(data);//← このdataはビルド時にgetStaticPropsで取得したデータ
    }
  }, [data, blogs.length, initBlogs]);</code></pre><h3 id="h04211d5294">5. 無限スクロールで新しく取得したデータをセット</h3><p>スクロールに合わせてデータを取得するfetchMore関数。ここで新しく取得したデータをnewBlogsに入れて、状態管理化にあるaddBlogs(newBlogs)に渡す。<br>useBlogStore.jsにあるaddBlogsがこのデータを受け取り、mergeして状態を更新する。</p><pre><code class="language-javascript">const fetchMore = useCallback(async () =&gt; {
    if (loading || isEnd) return;
    setLoading(true);

    try {
      const res = await fetch(`/api/blogs?offset=${offset}&amp;limit=10`);
      const newBlogs = await res.json();
      addBlogs(newBlogs);//← スクロールして取得したデータ
    } catch (error) {
      console.error(&quot;ブログの追加取得に失敗:&quot;, error);
    } finally {
      setLoading(false);
    }
  }, [offset, loading, isEnd, addBlogs]);

//... IntersectionObserverで無限スクロールの処理が続く</code></pre><h2 id="h3d98d76ffb">✅一覧ページから記事ページへ行き、戻るボタンで一覧に戻った際にデータを再取得しなくなった</h2><p>Zustandで状態を管理することで、一度取得したデータを保持しているため、無限スクロールの処理が走らなくなった。</p><p></p><h2 id="hda0fe6edde">⭐️次の課題は戻るボタンで一覧に戻った際に、元いた位置に戻ること</h2><p>無限スクロールで11件目以降の記事一覧を取得したけれども、記事を読んで戻るとスクロール位置はトップに戻ってしまう。<br>何かデータを探している時や、次は12件目の記事を読もうと思っていた時にTOPまで戻されてしまうのはとてもストレスを感じる。</p><p><a href="/blogs/howtoback-previous-scrollspot" target="_blank" rel="noopener noreferrer nofollow">Next.js｜ブラウザバックで元のスクロール位置に戻る方法</a></p><h2 id="h805544825f">❓ビルド時とスクロールで取得する時の処理を分ける必要があるのか？</h2><p>SSGで記事一覧ページ(10件分)を作成し、クライアント側のスクロールによってクライアント側でデータ取得と分けているから複雑に感じた。</p><p>はじめからクライアントサイドで、一覧ページにアクセスした際にapiルートでデータを取得して10件表示させる。<br>そこからスクロール値に合わせて、CSR無限スクロールにしたらシンプルな構成になるのではと思った。</p><h3 id="h4d6af5edd7">それぞれの構成とメリットデメリット</h3><p>chatGPTに聞いたところ下記返答が返ってくる。</p><table><tbody><tr><th colspan="1" rowspan="1"><p>構成</p></th><th colspan="1" rowspan="1"><p>メリット</p></th><th colspan="1" rowspan="1"><p>デメリット</p></th></tr><tr><td colspan="1" rowspan="1"><p>SSG + CSR無限スクロール</p></td><td colspan="1" rowspan="1"><p>初速が速く、SEOにも強い</p></td><td colspan="1" rowspan="1"><p>記事整合性が崩れる可能性あり（revalidate依存）</p></td></tr><tr><td colspan="1" rowspan="1"><p>SSR + CSR無限スクロール</p></td><td colspan="1" rowspan="1"><p>データ整合性がある程度保証される</p></td><td colspan="1" rowspan="1"><p>表示速度やキャッシュ性は落ちる</p></td></tr><tr><td colspan="1" rowspan="1"><p>CSR完全切替</p></td><td colspan="1" rowspan="1"><p>自由で柔軟</p></td><td colspan="1" rowspan="1"><p>SEOが効きづらい、初速が遅い</p></td></tr></tbody></table><p>CSR完全切替だとデータ取得時に時間がかかりストレスがかかるのかもしれない…。<br>データの量や画像があるなしでどう変化があり、メリットデメリットがどこまで響くのかが実際に使ってみないと分からないと感じた。</p>

ブログ一覧に無限スクロールを設置したけれどページを離れるたびに、一度取得済みのデータを取り直さないでほしい！

ライブラリ

GSAPスクロールアニメーション｜ScrollTriggerを使って指定した要素をフェードインさせる。

Next.js×microCMS｜zustandを使用して無限スクロールで取得済みデータの再取得をしないようにする