スクロールするとコンテンツが読み込まれて表示されるウェブサイトやアプリを目にしたことはありませんか。これを無限スクロールと呼びます。
無限スクロールは大量のコンテンツを閲覧しやすくする一般的な手法です。また、特にモバイルデバイスではユーザーエクスペリエンスをよりスムーズにすることができます。
React.jsで無限スクロールを実装する
Reactで無限スクロールを実装するには、いくつかの方法があります。1つ目は、react-infinite-scroll-componentのようなライブラリを使用することです。このライブラリのコンポーネントは、ユーザーがページの一番下までスクロールするたびにイベントをトリガーします。このイベントをきっかけにして、コンテンツをさらに読み込むことができます。
Reactで無限スクロールを実装するもう1つの方法は、その組み込み関数を使用することです。そのような関数の1つに「componentDidMount」があり、Reactはコンポーネントを最初にマウントするときに呼び出します。
この関数を使用して最初のバッチのデータを読み込み、続いてユーザーがスクロールダウンするにつれて「componentDidUpdate」関数を使用して後続のデータを読み込むことができます。
また、Reactフックを使用して無限スクロール機能を追加することもできます。
react-infinite-scroll-componentライブラリを使用する
react-infinite-scroll-componentを使用するには、いくつかの方法があります。
react-infinite-scroll-componentをインストールする
使用を開始するには、まずnpmでインストールする必要があります:
npm install react-infinite-scroll-component --save
react-infinite-scroll-componentをReactにインポートする
インストール後、無限スクロールライブラリをReactコンポーネントにインポートする必要があります。
import React from 'react'
import InfiniteScroll from 'react-infinite-scroll-component'
class App extends React.Component {
constructor() {
super()
this.state = {
items: [],
hasMore: true
}
}
componentDidMount() {
this.fetchData(1)
}
fetchData = (page) => {
const newItems = []
for (let i = 0; i < 100; i++) {
newItems.push(i )
}
if (page === 100) {
this.setState({ hasMore: false })
}
this.setState({ items: [...this.state.items, ...newItems] })
}
render() {
return (
<div>
<h1>Infinite Scroll</h1>
<InfiniteScroll
dataLength={this.state.items.length}
next={this.fetchData}
hasMore={this.state.hasMore}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: 'center' }}>
<b>Yay! You have seen it all</b>
</p>
}
>
{this.state.items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</InfiniteScroll>
</div>
)
}
}
export default App
このコードは、ReactとInfiniteScrollコンポーネントをreact-infinite-scroll-componentライブラリからインポートすることから始まります。次に、状態を持つコンポーネントを作成し、items配列とTrueに設定されたhasMoreフラグで初期化します。
パラメータを設定する
componentDidMountライフサイクルメソッドでは、pageパラメータを1に設定したfetchDataメソッドを呼び出す必要があります。fetchDataメソッドはデータを取得するためのAPI呼び出しを行います。このreact-infinite-scrollerの例では、ダミーデータが生成され、100個のアイテムの配列が作成されます。
pageパラメータが100に達すると、アイテムが存在しなくなるため、hasMoreフラグをFalseに設定できます。これにより、InfiniteScrollコンポーネントがそれ以上のAPI呼び出しを行うことが停止します。最後に、新しいデータを使用して状態を設定します。
renderメソッドはInfiniteScrollコンポーネントを使用し、いくつかのpropsを渡します。dataLengthpropはitems配列の長さに設定されます。次のpropはfetchDataメソッドに設定されます。hasMore propはhasMoreフラグと同じ値に設定されます。
loader propは、コンポーネントのコンテンツをロードインジケータとしてレンダリングします。同様に、すべてのデータのロードが完了したら、endMessagepropをメッセージとしてレンダリングします。
InfiniteScrollコンポーネントには他のpropsを渡すこともできますが、これらは最も頻繁に使用するpropsです。
組み込み関数を使用する
Reactには、InfiniteScrollを実装するために使用できる組み込みメソッドもいくつかあります。
最初のメソッドはcomponentDidUpdateです。Reactはこのメソッドをコンポーネントを更新した後に呼び出します。このメソッドを使用して、ユーザーがページの一番下までスクロールしたかどうかを確認できます。その場合、さらにデータを読み込みます。
2つ目のメソッドはscrollで、ユーザーがスクロールするとReactが呼び出します。このメソッドを使用して、スクロール位置を追跡できます。ユーザーがページの一番下までスクロールした場合に、さらにデータを読み込むことができます。
これらのメソッドを使用する方法を示す、Reactの無限スクロールの例を次に示します。
import React, {useState, useEffect} from 'react'
function App() {
const [items, setItems] = useState([])
const [hasMore, setHasMore] = useState(true)
const [page, setPage] = useState(1)
useEffect(() => {
fetchData(page)
}, [page])
const fetchData = (page) => {
const newItems = []
for (let i = 0; i < 100; i++) {
newItems.push(i)
}
if (page === 100) {
setHasMore(false)
}
setItems([...items, ...newItems])
}
const onScroll = () => {
const scrollTop = document.documentElement.scrollTop
const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight
if (scrollTop + clientHeight >= scrollHeight) {
setPage(page + 1)
}
}
useEffect(() => {
window.addEventListener('scroll', onScroll)
return () => window.removeEventListener('scroll', onScroll)
}, [items])
return (
<div>
{items.map((item, index) => (
<div key={index}>
{item}
</div>
))}
</div>
)
}
export default App
このコードは、useStateフックとuseEffectフックを使用して、状態と副作用を管理しています。
useEffectフックの中で、fetchDataメソッドを現在のページで呼び出しています。fetchDataメソッドはデータを取得するためのAPI呼び出しを行います。この例では、単にダミーデータを作成して、手法を実演しています。
forループはnewItems配列に100個の整数を格納します。pageパラメータが100の場合、hasMoreフラグをFalseに設定します。これにより、無限スクロールコンポーネントがそれ以上のAPI呼び出しを行うことが停止します。
最後に、新しいデータを使用して状態を設定します。
onScrollメソッドは、スクロール位置を追跡します。ユーザーがページの一番下までスクロールした場合に、さらにデータを読み込むことができます。
useEffectフックは、スクロールイベントのイベントリスナーを追加します。スクロールイベントが発生すると、onScrollメソッドが呼び出されます。
Reactの無限スクロールの長所と短所
Reactの無限スクロールを使用することには、長所と短所があります。ユーザーインターフェースが改善され、特にモバイルデバイスでよりスムーズなエクスペリエンスを実現します。しかし、ユーザーがコンテンツを見るために十分にスクロールダウンしない可能性があるため、ユーザーがコンテンツを見逃す可能性もあります。
ウェブサイトやアプリに無限スクロールの手法を実装する前に、長所と短所を比較検討することが重要です。
React.jsで無限スクロールを使用してユーザーエクスペリエンスを向上させる
React.jsのウェブサイトやアプリに無限スクロールを追加すると、ユーザーエクスペリエンスを向上させることができます。無限スクロールを使用すると、ユーザーはより多くのコンテンツを見るためにクリックする必要がありません。React.jsアプリで無限スクロールを使用すると、ページの読み込み回数を削減でき、パフォーマンスがさらに向上します。
また、ReactアプリをGithubページに無料で簡単にデプロイすることもできます。
コメントする