React Content Loader

リアクト・コンテント・ローダー

Electron

Next.js

TypeScript

React Content Loader を分かりやすく

React Content Loader は、コンテンツの読み込み中に表示されるプレースホルダーを作成するためのライブラリです。SVG を使用して、データのローディング中にアニメーション付きのプレースホルダーを表示することができます。

React Content Loader を使うメリット

ユーザー体験の向上: ローディング中のコンテンツを視覚的に示すことで、ユーザーはページが読み込まれていることを感じることができます。
カスタマイズ可能: プレースホルダーの形状、サイズ、アニメーション速度など、多くのカスタマイズオプションがあります。
スケーラブル: SVG を使用しているため、どのようなデバイスや画面解像度でも正確に表示されます。

React Content Loader を実装する

まず、React Content Loader をプロジェクトにインストールします。

npm install react-content-loader

次に、Next.js と TypeScript を使用して、プレースホルダーを表示するコンポーネントを作成します。例えば、以下のような LoadingPlaceholder.tsx コンポーネントを作成することができます。

// components/LoadingPlaceholder.tsx
import { ContentLoader } from 'react-content-loader'
import React from 'react'

const LoadingPlaceholder = () => {
  return (
    <ContentLoader speed={2} width={400} height={160} viewBox="0 0 400 160" backgroundColor="#f3f3f3" foregroundColor="#ecebeb">
      <rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
      <rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
      <rect x="0" y="20" rx="3" ry="3" width="350" height="10" />
      <rect x="0" y="40" rx="3" ry="3" width="380" height="10" />
      <rect x="0" y="60" rx="3" ry="3" width="400" height="10" />
      <rect x="0" y="80" rx="3" ry="3" width="200" height="10" />
    </ContentLoader>
  )
}

export default LoadingPlaceholder

このコンポーネントは、複数の長方形を使用して、読み込み中のプレースホルダーを表現しています。ContentLoader コンポーネントのプロパティを変更することで、アニメーション速度、背景色、前景色などをカスタマイズできます。

次に、プレースホルダーコンポーネントをページに組み込みます。例として、data という変数に格納されたデータを読み込んで表示する DataDisplay.tsx コンポーネントを作成します。

// components/DataDisplay.tsx
import React, { useState, useEffect } from 'react'
import LoadingPlaceholder from './LoadingPlaceholder'

interface Data {
  id: number
  value: string
}

const DataDisplay = () => {
  const [data, setData] = useState<Data[] | null>(null)

  useEffect(() => {
    // データ取得をシミュレートするためのダミー関数
    const fetchData = async () => {
      return new Promise<Data[]>((resolve) => {
        setTimeout(() => {
          resolve([
            { id: 1, value: 'Item 1' },
            { id: 2, value: 'Item 2' },
            { id: 3, value: 'Item 3' },
          ])
        }, 2000)
      })
    }

    fetchData().then((fetchedData) => {
      setData(fetchedData)
    })
  }, [])

  return <div>{data ? data.map((item) => <div key={item.id}>{item.value}</div>) : <LoadingPlaceholder />}</div>
}

export default DataDisplay

このコンポーネントでは、data が null の場合、LoadingPlaceholder コンポーネントを表示し、データが読み込まれたら、データの内容を表示します。useEffect を使用して、データ取得をシミュレートするダミー関数を実行し、2 秒後にデータを setData を使ってセットしています。

最後に、DataDisplay コンポーネントをページに追加します。

// pages/index.tsx
import React from 'react'
import DataDisplay from 'components/DataDisplay'

const HomePage = () => {
  return (
    <div>
      <h1>Data Display</h1>
      <DataDisplay />
    </div>
  )
}

export default HomePage

これで、Next.js と TypeScript を使って、React Content Loader を利用したプレースホルダーが表示されるようになりました。データの読み込みが完了すると、プレースホルダーがデータの内容に置き換わります。

この実装例を参考に、React Content Loader を使ってさまざまなプレースホルダーを作成し、アプリケーションのユーザビリティを向上させてください。

Next.js を学ぶ一覧へ