Tutorial

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

JavaScriptReact

はじめに

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

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

前提条件

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

このチュートリアルは、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には完成したプロジェクトすべてがあります。

GitHub Repo Screenshot

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

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

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

src/Components/Navbar.js
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>の実際の位置がわかります。

src/Components/App.js
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 で確認できます。

Screenshot of app in browser

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

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

react-scroll package on npm

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

  • npm install react-scroll

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

src/Components/Navbar.js
import { Link, animateScroll as scroll } from "react-scroll";

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

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

さしあたり、次のプロパティ:activeClasstospysmoothoffsetdurationに注目してください。

  • 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> をクリックするか、ページの下部まで手動でスクロールしたときに、アクティブなクラスが確かに適用されているのがわかりました。

Browser view of React app

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

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

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

Updated browser view of React app

ステップ4 — 機能の追加

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

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

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

src/Components/Navbar.js
scrollToTop = () => {
    scroll.scrollToTop();
};

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

まとめ

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

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

Creative Commons License