// Tutorial //

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

Published on December 15, 2020
Default avatar
By James Quick
Developer and author at DigitalOcean.
日本語
React でスムーススクロールを実装する方法

はじめに

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

この記事では、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> コンポーネントにインポートして渡しました。

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

  1. cd React-With-Smooth-Scrolling
  2. npm install
  3. npm start

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

Screenshot of app in browser

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

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

react-scroll package on npm

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

  1. 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パッケージを使用すると、あまり多くのオーバーヘッドを必要とせずこの機能を活用できます。

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

If you’ve enjoyed this tutorial and our broader community, consider checking out our DigitalOcean products which can also help you achieve your development goals.

Learn more here


About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?
Leave a comment

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!