React でスムーススクロールを実装する方法

はじめに

_スムーススクロール_は、ボタンをクリックして（同じ） ページの別の箇所へジャンプさせる代わりに、スクロールアニメーションによって移動させる機能です。これはサイトの美観に差をつける繊細な機能です。

この記事では、npm 上でreact-scrollパッケージを使用して、スムーズなスクロールを実装します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

• インストール済の有効なGit 。Gitのセットアップについては、チュートリアルGit入門を参照してください。
• ローカルにインストール済のNode.js。チュートリアルNode.jsをインストールしてローカル開発環境を構築する方法を参照してください。

このチュートリアルは、Node v13.14.0、npm v6.14.5、 reactv16.13.1、react-scroll v.1.7.16 で検証済です。

クイックスタート: react-scrollを使用する

このチュートリアルでは簡単なアプリを作成しますが、react-scroll機能の概要を手軽に知りたいなら、この要約版を参照してください。

react-scroll をインストールします。

npm i -S react-scroll

react-scrollパッケージをインポートします。

import { Link, animateScroll as scroll } from "react-scroll";

リンクコンポーネントを追加します。<Link /> コンポーネントは、アプリの任意の領域をポイントします。

<Link to="section1">

さらに踏み込んで、スムーススクロール付きのReact アプリを作成しましょう。

ステップ1 — React アプリのインストールと実行

便宜上、チュートリアルでは、上部にナビゲーションバー（navbar）と5つのセクションに別れたコンテンツがあるstarter React project（Create React App 2.0を使用）を使用します。

navbar のリンクは、この時点でアンカータグだけですが、スムーススクロールが有効になるようにまもなく更新します。

プロジェクトはReact With Smooth Scrollingにあります。リンクがstartbranch 向けであることに注意してください。master branchには完成したプロジェクトすべてがあります。

プロジェクトを複製するには、次のコマンドを使用します。

git clone https://github.com/do-community/React-With-Smooth-Scrolling.git

src/Components ディレクトリを調べると、Navbar.js ファイルがあります。このファイルの<Navbar>には、5つの<Section>それぞれに対応するnav-item が入っています。

import React, { Component } from "react";
import logo from "../logo.svg";

export default class Navbar extends Component {
  render() {
    return (
      <nav className="nav" id="navbar">
        <div className="nav-content">
          <img
            src={logo}
            className="nav-logo"
            alt="Logo."
            onClick={this.scrollToTop}
          />
          <ul className="nav-items">
            <li className="nav-item">Section 1</li>
            <li className="nav-item">Section 2</li>
            <li className="nav-item">Section 3</li>
            <li className="nav-item">Section 4</li>
            <li className="nav-item">Section 5</li>
          </ul>
        </div>
      </nav>
    );
  }
}

srcディレクトリでApp.jsファイルを開くと、<Navbar>と5つの<Section>の実際の位置がわかります。

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Navbar from "./Components/Navbar";
import Section from "./Components/Section";
import dummyText from "./DummyText";
class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar />
        <Section
          title="Section 1"
          subtitle={dummyText}
          dark={true}
          id="section1"
        />
        <Section
          title="Section 2"
          subtitle={dummyText}
          dark={false}
          id="section2"
        />
        <Section
          title="Section 3"
          subtitle={dummyText}
          dark={true}
          id="section3"
        />
        <Section
          title="Section 4"
          subtitle={dummyText}
          dark={false}
          id="section4"
        />
        <Section
          title="Section 5"
          subtitle={dummyText}
          dark={true}
          id="section5"
        />
      </div>
    );
  }
}

export default App;

各<Section> コンポーネントには、タイトルとサブタイトルがあります。

このプロジェクトは、各セクションでdummyTextを使用しているので、コードの繰り返しを減らすため、このテキストをDummyText.js ファイルに追加し、それを各<Section> コンポーネントにインポートして渡しました。

アプリを実行するには、次のコマンドを入力します。

cd React-With-Smooth-Scrolling
npm install
npm start

これにより、アプリが開発モードで起動し、ファイルの保存時にアプリが自動で更新されます。ブラウザのlocalhost:3000 で確認できます。

ステップ2 — React-Scroll のインストールと設定

それではreact-scrollパッケージをインストールしてその機能を追加しましょう。npm にパッケージ情報が表示されます。

パッケージをインストールするには、次のコマンドを実行します。

npm install react-scroll

次に、Navbar.js ファイルのバックアップを開き、Link、animateScrollという2つのインポートを追加します。

import { Link, animateScroll as scroll } from "react-scroll";

使い勝手を良くするため、名前をanimatedScroll からscrollに変更したことがおわかりでしょう。

インポートをすべて定義したら、nav-itemsを更新して<Link>コンポーネントを使用します。このコンポーネントには、プロパティがいくつかあります。ドキュメントページで、全内容を確認できます。

さしあたり、次のプロパティ：activeClass、to、spy、smooth、offset、durationに注目してください。

• activeClass - 要素に達したときに適用されるクラスが適用されます。
• to - スクロール先のターゲット。
• spy - scrollがターゲットの位置にあるとき、Linkを選択させます。
• smooth - スクロールをアニメーション化します。
• offset- 追加 px分（パディングのように）スクロールします。
• duration -スクロールアニメーションの完了までにかかる時間数字か関数が入ります。

toプロパティは、コンポーネントにスクロール先の要素を指示するので、最も重要です。この場合は各<Section>になります。

offsetプロパティでは、<Section> に到達するために必要な追加スクロール量を定義できます。

各<Link> コンポーネントで使用するプロパティの例を次に示します。両者の唯一の違いは、toプロパティで別の<Section>をポイントしているところです。

<Link
    activeClass="active"
    to="section1"
    spy={true}
    smooth={true}
    offset={-70}
    duration={500}
>

各nav-itemsは適宜更新する必要があります。これらを追加したら、ブラウザに戻って（アプリは自動で再起動済のはずなので）、スムーススクロールが有効になったことが確認できるはずです。

ステップ3 — アクティブリンクのスタイリング

activeClass プロパティを使用すると、to要素がアクティブなときに、<Link> コンポーネントに適用するクラスを定義できます。ページ上部にto要素が表示されていれば、<Link> がアクティブと判断されます。これは、<Link> そのものをクリックするか、手動で<Section> までスクロールすることがトリガーになります。

これを確認するために、Chrome DevTools を開き、次の通り5つ目の<Link> を調査しました。<Link> をクリックするか、ページの下部まで手動でスクロールしたときに、アクティブなクラスが確かに適用されているのがわかりました。

これを利用して、アクティブなクラスを作成し、リンクにアンダーラインを追加できます。src ディレクトリの App.css ファイルに、このCSSビットを追加できます。

.nav-item > .active {
    border-bottom: 1px solid #333;
}

これで、ブラウザに戻って、少しスクロールすると、正しい<Link> が下線表示されるはずです。

ステップ4 — 機能の追加

最後に、このパッケージには機能が直接名称になったscrollToTop、scrollToBottomなどの機能があります。さまざまなイベント同様扱えるものです。

これらの機能に関連して、典型的にはnavbarのアプリケーションロゴからホームページか同じページの上部に移動させます。

これらの機能の一つの呼び出し方の簡単な例として、次のように、nav-logoにページのトップに戻るクリックハンドラーを追加しました。

scrollToTop = () => {
    scroll.scrollToTop();
};

ブラウザに戻って、ページを下に向かってスクロールし、navbarのロゴをクリックすると、ページのトップに戻れるはずです。

まとめ

スムーススクロールは、アプリケーションに美的付加価値を大いに与える機能の1つです。react-scrollパッケージを使用すると、あまり多くのオーバーヘッドを必要とせずこの機能を活用できます。

このチュートリアルでは、アプリにスムーススクロールを追加して、さまざまな設定を試しました。興味があれば、時間をかけてこのパッケージで利用できる他の機能やイベントも試してみましょう。