Tutorial
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パッケージを使用すると、あまり多くのオーバーヘッドを必要とせずこの機能を活用できます。
このチュートリアルでは、アプリにスムーススクロールを追加して、さまざまな設定を試しました。興味があれば、時間をかけてこのパッケージで利用できる他の機能やイベントも試してみましょう。
