Gatsby でのデータ表示-jsチュートリアル-php.cn

Gatsby でのデータ表示

Mary-Kate Olsen

リリース： 2024-09-21 14:30:42

オリジナル

1026 人が閲覧しました

Data Display in Gatsby

Gatsby は、開発者が高速でスケーラブルな Web サイトやアプリケーションを構築できるようにする、React ベースの強力な静的サイトジェネレーターです。効果的な Web サイトを構築するための重要な側面の 1 つは、ユーザーにデータを効率的に表示することです。 Gatsby では、GraphQL、React コンポーネント、およびヘッドレス CMS、API、ローカルファイルなどのサードパーティデータソースを組み合わせてデータ表示を実現できます。

この記事では、データを効果的にレンダリングするための重要な原則、戦略、ベストプラクティスに焦点を当てながら、Gatsby アプリケーションでデータを取得して表示するプロセスについて説明します。

1. ギャツビーのデータ層を理解する

Gatsby のデータ層は GraphQL を中心に構築されており、開発者が必要なデータを正確にリクエストできるようにするクエリ言語として機能します。 Gatsby は GraphQL と深く統合されているため、Markdown ファイル、JSON ファイル、外部 API などのさまざまなソースからデータを簡単に取得して、React コンポーネント内に表示できます。

Gatsby でデータを表示する手順は通常次のとおりです。

外部または内部ソースからのデータの取得
GraphQL クエリを使用したデータの構造化
React コンポーネントを使用したデータの表示

2. Gatsby での GraphQL クエリの設定

Gatsby には、データソースに簡単にアクセスできる GraphQL レイヤーが組み込まれています。 GraphQL クエリを使用して、以下からデータを抽出できます。

Markdown や JSON などのローカルファイル
Contentful、Strapi、WordPress などの CMS プラットフォーム
API とデータベース

例 1: マークダウンデータのクエリ

ブログを構築していて、投稿を Markdown ファイルで書いたとします。 Gatsby の gatsby-transformer-remark プラグインを使用して Markdown ファイルをクエリし、React コンポーネントにコンテンツを表示できます。

export const query = graphql`
  query BlogPostQuery {
    allMarkdownRemark {
      edges {
        node {
          frontmatter {
            title
            date
          }
          excerpt
        }
      }
    }
  }
`

ログイン後にコピー

その後、JSX を使用して、コンポーネント内で取得したブログ投稿をレンダリングできます。

const Blog = ({ data }) => (
  <div>
    {data.allMarkdownRemark.edges.map(({ node }) => (
      <div key="{node.id}">
        <h2>{node.frontmatter.title}</h2>
        <p>{node.excerpt}</p>
        <small>{node.frontmatter.date}</small>
      </div>
    ))}
  </div>
)

ログイン後にコピー

例 2: CMS からのデータのクエリ (コンテンツフル)

Contentful のようなヘッドレス CMS を使用している場合は、Gatsby を Contentful の API と統合する gatsby-source-contentful プラグインをインストールすることでデータをクエリできます。 Contentful からブログ投稿を取得する例を次に示します:

export const query = graphql`
  query ContentfulBlogPostQuery {
    allContentfulBlogPost {
      edges {
        node {
          title
          publishedDate(formatString: "MMMM Do, YYYY")
          body {
            childMarkdownRemark {
              excerpt
            }
          }
        }
      }
    }
  }
`

ログイン後にコピー

Markdown の場合と同様にデータをレンダリングできるようになりました。

const Blog = ({ data }) => (
  <div>
    {data.allContentfulBlogPost.edges.map(({ node }) => (
      <div key="{node.id}">
        <h2>{node.title}</h2>
        <p>{node.body.childMarkdownRemark.excerpt}</p>
        <small>{node.publishedDate}</small>
      </div>
    ))}
  </div>
)

ログイン後にコピー

3. API を介した外部データのレンダリング

Gatsby の静的データソース (Markdown、CMS など) は優れていますが、API から外部データを動的にフェッチする必要がある場合もあります。 React の useEffect フックを使用してデータを取得し、クライアント側で表示できます。たとえば、REST エンドポイントや GraphQL サービスなどの外部 API からデータをフェッチする方法は次のとおりです。

import React, { useEffect, useState } from "react";

const DataDisplay = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    // Fetch data from an external API
    fetch('https://api.Gatsby でのデータ表示.com/data')
      .then(response => response.json())
      .then(result => setData(result))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key="{item.id}">
          <h2>{item.name}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
};

export default DataDisplay;

ログイン後にコピー

4. Gatsby によるデータ表示の最適化

Gatsby は、データ表示を最適化し、パフォーマンスを向上させるいくつかの方法を提供します。

ページネーション

大規模なデータセットを表示する場合は、データをページ分割してページの読み込み時間を短縮し、コンテンツを管理しやすくすることが不可欠です。 Gatsby の createPages API を使用すると、ページ分割されたページを動的に生成できます。

const Blog = ({ pageContext, data }) => {
  const { currentPage, numPages } = pageContext;

  return (
    <div>
      {data.allMarkdownRemark.edges.map(({ node }) => (
        <div key="{node.id}">
          <h2>{node.frontmatter.title}</h2>
          <p>{node.excerpt}</p>
        </div>
      ))}

      <pagination currentpage="{currentPage}" numpages="{numPages}"></pagination>
    </div>
  );
};

ログイン後にコピー

遅延読み込み

遅延読み込みは、必須ではないリソースの読み込みを遅らせ、パフォーマンスを向上させる手法です。たとえば、Gatsby の gatsby-image は画像を最適化でき、React.lazy または動的インポートはコンポーネントの読み込みを遅延できます。

import { LazyLoadImage } from 'react-lazy-load-image-component';

<lazyloadimage alt="Gatsby でのデータ表示" height="{300}" effect="blur" src="path/to/image.jpg"></lazyloadimage>

ログイン後にコピー

静的サイトの生成

Gatsby のビルドプロセスは、ページを静的 HTML に事前レンダリングし、パフォーマンスを大幅に向上させます。ただし、クライアント側のレンダリングを使用して、実行時に動的コンテンツをフェッチおよび挿入することもできます。

5. Gatsby によるデータの視覚化

データを効果的に表示するには、チャートやグラフなどの視覚化が必要になる場合があります。 Chart.js や D3.js などのデータ視覚化ライブラリを Gatsby プロジェクトに統合して、視覚的なデータ表現をレンダリングできます。

import { Line } from "react-chartjs-2";

const data = {
  labels: ['January', 'February', 'March', 'April', 'May'],
  datasets: [
    {
      label: 'Sales',
      data: [65, 59, 80, 81, 56],
      fill: false,
      backgroundColor: 'rgb(75, 192, 192)',
      borderColor: 'rgba(75, 192, 192, 0.2)',
    },
  ],
};

const MyChart = () => (
  <div>
    <h2>Sales Over Time</h2>
    <line data="{data}"></line>
  </div>
);

ログイン後にコピー

結論

Gatsby でのデータの表示は、GraphQL とその React ベースのアーキテクチャとの統合のおかげで、柔軟で効率的なプロセスです。ローカルファイル、CMS、API のいずれからデータを取得する場合でも、Gatsby は、豊富なデータ表示機能を備えた高性能 Web アプリケーションを構築するための強固な基盤を提供します。ページネーション、遅延読み込み、その他の最適化手法を実装することで、大規模なデータセットを処理する場合でも、Gatsby サイトの高速性と応答性を確保できます。

以上がGatsby でのデータ表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。