Reactを使用したスムーズスクロールの実践：チュートリアル

Preslav Dobrev2022-10-05 · 6 min read

Reactは、未来的なウェブサイトデザインの構築やユーザーインターフェースの向上に使用されるオープンソースのJavaScriptライブラリです。その堅牢性、柔軟性、そして効率性により、競合するフロントエンドライブラリやフレームワークを凌駕しています。Reactは、カスタマイズやダイナミックなアニメーションを容易にする優れた機能と際立った機能性を提供します。

アニメーションコレクションのリストにおいて、Reactでのスムーズスクロールは、ウェブアプリのインタラクティブ性を高め、アニメーションを効率化するのに役立ちます。スムーズスクロールは、ユーザーがナビゲーションバーを使用してページの異なるセクションに移動できるようにする機能です。つまり、ボタンを押して同じページの別のセクションに即座に移動するのではなく、スクロールアニメーションを通じてユーザーをターゲットに誘導します。

このガイドでは、Reactを使用してスムーズスクロールを実装する手順を順を追って説明します.

始めましょう！

前提条件

このチュートリアルを進めるには、以下が必要です。

Gitがシステムにインストールされていること。
- 以下に従って、Ubuntu 18.04にGitをインストールして設定します
最新バージョンのNode.jsがセットアップされている必要があります。
- このチュートリアルを使用して、Ubuntu 18.04にNode.jsをインストールします

基本的なセットアップ：react-scrollのインストール

この初心者向けのガイドでは、以下を使用してシンプルなアプリケーションを設計します。 react-scroll。もしあなたがReactの基本を理解しており、さらに react-scrollの機能についての知識を深めたい場合は、以下の要約された手順を参照してください。

まず、次のコマンドを使用して react-scrollをインストールします。

npm npm i -S react-scroll

1	npm npm i -S react-scroll

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

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

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

その後、アプリの特定のセクションをターゲットにする <Link />コンポーネントを挿入します。

<Link to="section1">

1	<Link to="section1">

それでは、スムーズスクロールを備えたReactアプリケーションの設計に進みましょう。

ステップ1：Reactアプリのクローンと実行

このガイドでは、上部にナビゲーションバーが含まれるスターターReactプロジェクトを使用します。そこには、順次配置された5つのユニークな <sections>が表示されます。

現在、ナビゲーションバーのリンクはアンカータグです。ただし、スムーズスクロールを有効にするために、これらをすぐに更新する必要があります。ページに従って、React With Smooth Scrollingプロジェクトのリポジトリに移動してください。このリンクはstartブランチ用であることに注意してください。masterブランチには、完了したすべての変更が含まれています。URLを開くと、リポジトリが表示されます。

リポジトリページに、緑色の Codeボタンが表示されます。 PRESSドロップダウンの矢印を押します。

矢印をクリックすると、HTTP リンクが表示されます。:

次に、gitターミナルに移動し、次のコマンドを使用してローカルマシンにプロジェクトをcloneします。

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

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

のsrc/Componentsディレクトリ内に、 Navbar.jsファイルがあります。これには、 <Navbar>と、それに対応する nav-items（順次配置された5つのユニークな <Section>に対応）が含まれています：

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>
    );
  }
}

import React, { Component } from "react";

import logo from "../logo.svg";

export default class Navbar extends Component {

render() {

return (

<img

src={logo}

className="nav-logo"

alt="ロゴ"

onClick={this.scrollToTop}

<li className="nav-item">セクション 1</li>

<li className="nav-item">セクション 2</li>

<li className="nav-item">セクション 3</li>

<li className="nav-item">セクション 4</li>

<li className="nav-item">セクション 5</li>

</ul>

</div>

</nav>

);

}

次に、 App.jsファイル（ srcディレクトリ内）に移動します。そこでは、 <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;

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 (

<Section

title="Section 1"

subtitle={dummyText}

dark={true}

id="section1"

<Section

title="セクション 2"

subtitle={dummyText}

dark={false}

id="section2"

<Section

title="セクション 3"

subtitle={dummyText}

dark={true}

id="section3"

<Section

title="セクション 4"

subtitle={dummyText}

dark={false}

id="section4"

<Section

title="セクション 5"

subtitle={dummyText}

dark={true}

id="section5"

</div>

);

}

export default App;

デフォルトでは、すべての <Section> コンポーネントには、 title と subtitle が含まれます。.

DRY 原則の実践

チュートリアル用にダミーテキストを使用しているため、時間を節約し重複を減らすために、 dummyText.js ファイルを追加しましょう。新しく作成した JavaScript ファイルを使用して、すべての <Section> 要素に渡します。

Reactのインストール

次のコマンドを使用して、アプリを起動します：

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

cd React-With-Smooth-Scrolling

npm install

npm start

実行すると、rpm によってアプリケーションが開発モードで起動します。 localhost:3000 にアクセスして、システムでアプリが動作していることを確認してください：

アプリが起動したので、次のステップに進み、 react-scroll をインストールしましょう。

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

まず、Node Package Managerのパッケージにアクセスして、 react-scroll をダウンロードする必要があります。このガイドの執筆時点では、最新リリースの react-scroll , 1.8.7 を使用しています。将来アップデートがある場合は、必ず最新バージョンを入手してください：

次のコマンドを実行して、 react-scroll:

$ npm install react-scroll

1	$ npm install react-scroll

その後、 Navbar.js ファイルに移動し、 Link と animateScroll を react-scroll からインポートします。シンプルで使いやすくするために、 animateScroll を scroll とします:

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

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

その後、 nav-items を更新して、 <Link> コンポーネントを使用するようにします。また、 <Link> にリストされている多くのプロパティが表示されます。コンポーネントは、このチュートリアルにとっては些細なものです。しかし、これらのプロパティは次のドキュメントページで確認できます。.

注目に値するいくつかの重要なプロパティ：

activeClass – 要素がアクティブなときに使用されるクラス。
to – スクロール先となる指定されたターゲットを通知します。
- The to 機能は、コンポーネントにどの要素をスクロールするかを指示するため、非常に重要です。
spy: スクロールがターゲット位置にあるときに、 Link を選択するように指定します。
smooth: スクロールをアニメーション化します。
offset: 追加で px（例：パディングなど）スクロールします。
- また、 offset を使用して、追加のスクロール量を設定し、個々の <Section>.
duration: アニメーションのスクロール時間。数値または関数を指定できます。

以下は、すべての <Link> コンポーネントで使用できる機能の例です。それらの唯一の違いは、すべて異なる to 機能であり、それぞれ異なる <Section> を指しています：

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

<Link

activeClass="active"

to="section1"

spy={true}

smooth={true}

offset={-70}

duration={500}

すべての nav-items を更新することを検討してください。すべてのアイテムが正常に追加されたら、ブラウザに戻って実際のスムーズスクロールを確認してください。

Step 3: Style Active Links

このステップでは、CSS プロパティを使用してコードブロックを再設計し、スタイリッシュに見せます。 activeClass 機能を使用すると、クラスを定義して、 <Link> コンポーネントに適用できます。これは、 to 要素がアクティブなときです。使用している <Link> の to 要素がページの上部に表示されている場合、その <Link> はアクティブであるとみなされます。 <Link> をクリックするか、手動で <Section> をスクロールして、 <Link>.

実際にテストして動作を確認してみましょう。 Chrome DevTools を開き、5番目の <Link> を検証（インスペクト）します（以下でハイライトされている通りです）。 <Link> をクリックするか、手動で <Section> をページの下部までスクロールすると、アクティブクラスが適用されるのが確認できます：

追加のステップとして、アクティブクラスを作成し、リンクに下線を引きます。次に、以下の小さな CSS ブロックを、 App.css ファイル（ src ディレクトリ内）に追加します：

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

.nav-item > .active {

border-bottom: 1px solid #333;

}

その後、ブラウザを更新します。少しスクロールすると、指定された <Link> に下線が表示されていることがわかります：

Step 4: Add More Functions

上記で使用したプロパティに加えて、他にも以下のような機能があります： scrollToTop, scrollToBottom などが使用できます。これらの関数を直接呼び出して、その動作を明示的に管理できます。これらの機能に関して、当然ながら、ナビゲーションバーのアプリロゴをクリックするとホームページの上部に移動します。

Using the scrollToTop 関数を使用して、クリックハンドラーを nav-logo に追加し、ユーザーをページの上部に戻すようにします：

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

scrollToTop = () => {

scroll.scrollToTop();

};

Using the scrollToTop 関数を使用して、クリックハンドラーを nav-logo に追加し、ユーザーをページの下部にスクロールするようにします：

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

scrollToTop = () => {

scroll.scrollToBottom();

};

ブラウザに戻り、ページを下にスクロールしてからナビゲーションバーのロゴをクリックすると、ページの上部に戻るようになります。

Conclusion

スムーズスクロール は、Web アプリに多くの視覚的価値を追加できる機能の 1 つです。 react-scroll パッケージを使用すると、大きなオーバーヘッドなしにこの機能を利用できます。

学習体験の次のステップとして、次の場所で公開されているReactおよびJavaScriptのチュートリアルをさらにご覧ください：私たちのブログ:

ハッピーコンピューティング！

Preslav Dobrev

著者 · CloudSigma

Preslav DobrevはCloudSigmaのクリエイティブデザイナーであり、従来型および革新的なマーケティングチャネルを活用した一貫性のあるビジネスアイデンティティに注力しています。彼は芸術的なビジョンと戦略的マーケティングを融合させ、インパクトのあるブランドナラティブを生み出すことに長けています。

Reactを使用したスムーズスクロールの実践：チュートリアル

前提条件

基本的なセットアップ：react-scrollのインストール

ステップ1：Reactアプリのクローンと実行

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

Step 3: Style Active Links

Step 4: Add More Functions

Conclusion

Preslav Dobrev

コメント