Gatsbyで静的ファイルを使用する方法

投稿日: 2022-04-20 2022-04-20
タグ: css, Development, GatsbyJS, javascript

著者は、 Write for DOnations プログラムの一環として、 InternetArchiveを選択して寄付を受け取りました。

序章

多くの人気のある静的サイトジェネレーターと同様に、 Gatsby は、フロントエンドで React を使用し、 Node.js を使用して、動的Webフレームワークの使用を採用しています。バックエンド。ただし、Gatsbyは、画像、 CSS ファイル、JavaScriptファイルなどの静的ファイルやアセットを取り込むこともできます。

このチュートリアルでは、Gatsbyサイトで静的ファイルを使用する場合がある状況について説明します。画像、スタイルシートをグローバルに、モジュール、JavaScriptファイル、およびユーザーがダウンロードできるPDFなどの任意のファイルとして追加するのに最適な方法を示します。

前提条件

始める前に、ここにあなたが必要とするいくつかのものがあります：

Gatsbyを実行してサイトを構築するためのNode.jsのローカルインストール。インストール手順はオペレーティングシステムによって異なりますが、DigitalOceanには Ubuntu20.04およびmacOSのガイドがあり、最新リリースは公式Node.jsダウンロードページ[ X213X]。
gatsby-starter-defaultからの足場となる新しいGatsbyプロジェクト。この要件を満たし、新しいGatsbyプロジェクトを最初から構築するには、最初のGatsbyWebサイトのセットアップ方法チュートリアルのステップ1を参照してください。
このチュートリアルで説明されている以上に投稿のユーザーインターフェイス（UI）をカスタマイズする場合は、ReactとJSX、およびHTML要素にある程度精通している必要があります。
zipアーカイブファイルを解凍するプログラム。ほとんどのオペレーティングシステムでは、 unzip が最適なコマンドであり、ローカルのパッケージマネージャーを使用してLinuxにダウンロードできます。
このチュートリアルのサンプルファイルを提供するために使用されるデモファイルリポジトリへのアクセス。 DigitalOcean Community GitHubリポジトリからアクセスでき、ステップ1でダウンロード方法を説明します。

このチュートリアルは、Node.js v14.16.1、npm v6.14.12、Gatsby v3.13.1、およびflexboxgridv6.3.1でテストされました。

ステップ1—サンプルファイルの準備

このチュートリアルでは、事前に準備された静的アセットのコレクションを使用します。これらのコレクションは、次の手順で使用されます。ファイルのコレクションはGitHubリポジトリとして利用できます。このチュートリアルの最初のステップは、ファイルをダウンロードしてGatsbyプロジェクト内に配置することです。

まず、サンプルファイルをsrc/sample-assetsに抽出します。これは、 zipファイルをダウンロードして選択した解凍ツールを使用するか、次のコマンドを実行して手動で行うことができます。 Gatsbyプロジェクトのルートにあるターミナル：

wget -O ../sample-assets.zip https://github.com/do-community/gatsby-static-files-tutorial-assets/archive/refs/heads/main.zip
unzip ../sample-assets.zip -d ./src

上記のコマンドは、リポジトリ全体のアーカイブを wget を使用して単一のzipアーカイブファイルとしてダウンロードし、コンテンツをソースディレクトリに解凍します。

ファイルが解凍されたら、次のステップは、このチュートリアルのデモページとして機能する空のGatsbyページコンポーネントを作成することです。 src/pages/static-files-demo.jsで空のファイルを作成し、選択したエディターでファイルを開いて、次のコードを追加します。

src / pages / static-files-demo.js

import * as React from "react"

import Layout from "../components/layout"
import Seo from "../components/seo"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1>Static Files Demo</h1>
  </Layout>
)

export default StaticFilesDemo

このコードは、https://localhost/static-files-demo/でパブリックページを生成するために使用するGatsbyページコンポーネントファイルとして機能します。 StaticFilesDemo関数は、ページコンテンツとなるJSXを返すReactコンポーネントです。 Gatsbyのビルドシステムは、ページコンポーネントのデフォルトのエクスポートがページのレンダリングを担当するReactコンポーネントであると想定しているため、最終行としてexport default StaticFilesDemoを使用します。

ページコードを追加したら、ファイルを保存しますが、次の手順で追加されるため、開いたままにしておきます。

この最初のステップでは、チュートリアル全体で使用される静的アセットファイルをダウンロードし、内部に構築するデモページを設定しました。次のステップでは、静的アセットの最も一般的な形式の1つである画像ファイルを追加します。

ステップ2—画像を追加する

Webサイトの一般的なニーズは、サイトの読み込みエクスペリエンスに影響を与えない方法で画像ファイルを埋め込むことです。このステップでは、gatsby-plugin-imageといくつかのHTMLを使用してGatsbyページに画像を埋め込み、読み込み時間と帯域幅の使用量を最適化して、Gatsbyでこれを行う方法を学びます。

gatsby-plugin-image はgatsby-starter-default前提条件に含まれているため、依存関係としてすでにインストールされており、すぐに使用できます。 gatsby-starter-defaultテンプレートからプロジェクトを開始しなかった場合は、公式Gatsbyドキュメントでgatsby-plugin-imageのインストールと構成について学ぶことができます。

前の手順で作成したデモページコンポーネントファイルを開き、次の強調表示されたコードを追加します。

src / pages / static-files-demo.js

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1>Static Files Demo</h1>

    <section className="demo">
      <h2>Static Image Files Demo</h2>

      <figure className="image-demo">
        <StaticImage
          src="../gatsby-static-files-tutorial-assets-main/images/water.jpg"
          width={1000}
          quality={90}
          alt="Underwater view of clear, blue body of water"
        />
        <figcaption>
          Photo by{" "}
          <a target="_blank" rel="noreferrer noopener" href="https://unsplash.com/@cristianpalmer">
            Cristian Palmer
          </a>
        </figcaption>
      </figure>

      <figure className="image-demo">
        <StaticImage
          src="../gatsby-static-files-tutorial-assets-main/images/turtle.jpg"
          width={1000}
          quality={90}
          alt="Overhead view of a turtle floating over blue water"
        />
        <figcaption>
          Photo by{" "}
          <a target="_blank" rel="noreferrer noopener" href="https://unsplash.com/@ruizra">
            Randall Ruiz
          </a>
        </figcaption>
      </figure>
    </section>
  </Layout>
)

export default StaticFilesDemo

標準のHTMLimgタグを直接使用してパブリックイメージURLを指す代わりに、このコードではgatsby-plugin-imageのStaticImageコンポーネントを使用してパスを渡しますローカルの静止画像に。これはベストプラクティスのアプローチです。StaticImageはソース画像のサイズ変更された複数のバージョンを生成し（内部で gatsby-plugin-sharp を使用）、訪問者に最も近いものを提供します。ウェブページ（ srcset 機能を使用）により、ページの読み込みが速くなり、ダウンロードサイズが小さくなります。

StaticImageに渡される画像では、90の品質を使用して、デフォルト値の50を上書きし、gatsby-plugin-imageがファイルサイズを改善できることを示しています。品質を維持しながら。また、1000の幅を指定しました。これは、両方のソース画像の元の幅がそれをはるかに超えているため、最大幅の上限として機能します。デモや多くのWebページの目的では、幅1000ピクセルで十分です。これらの2つのオプションはパフォーマンスに大きな影響を与えますが、gatsby-plugin-imageには他にも多くのオプションがあり、 Gatsbydocsにあります。

このページでは、2つの画像の元のバージョンは、表示される画面のサイズに関係なく、合わせて約4MBを占めます。しかし、StaticImageを使用すると、小型の携帯電話では、元のサイズの約100kB、つまり約2.5% oに圧縮されます。読み込み時間は、3Gインターネット接続のほぼ2分から数秒に短縮されます。 gatsby-plugin-imageプラグインは、webpやavifなど、圧縮されたWeb配信により適した最新の画像形式も利用します。

先に進む前にファイルを保存してください。

注： gatsby-plugin-imageをバイパスして画像をそのまま完全に読み込む必要がある場合、Gatsbyは静的フォルダーを介してこれを行う方法を提供しますが、これは通常ですこれには前述の画像の最適化が含まれないため、お勧めしません。

これで、Gatsby内のベストプラクティスを使用して、Webページの訪問者に最適なユーザーエクスペリエンスを提供する、いくつかの新しい画像をサイトに追加しました。次のステップでは、静的CSSファイルをサイトに追加して、Webページのスタイリングコンポーネントに焦点を当てます。

ステップ3—CSSスタイルシートを追加する

画像の埋め込みと同様に、CSSベースのスタイルをGatsbyサイトに追加する方法は複数あります。インラインスタイリングとCSS-in-JSは常にGatsbyのオプションですが、サイト全体またはコンポーネントのスタイリングには、専用の静的スタイルシートを使用することをお勧めします。このステップでは、Gatsbyのベストプラクティスに従ったアプローチを使用して、独自のカスタムCSSファイルとサードパーティのCSSファイルをGatsbyプロジェクトに追加します。

デモページと同じフォルダのsrc/pages/static-files-demo.module.cssにCSSファイルを作成することから始めます。 .module.cssサフィックスを使用して、このファイルが CSSモジュールとして使用されることを示しています。これにより、スタイリングは、インポート先のコンポーネントではなく、インポート先のコンポーネントにスコープされるようになります。ユーザーインターフェイス（UI）の他の領域。

新しく作成したファイルを開いた後、次のコードを追加します。

src / pages / static-files-demo.module.css

.headerText {
  width: 100%;
  text-align: center;
}
.container img {
  border-radius: 8px;
}

このCSSでは、.headerTextのクラスを持つ任意の要素のテキストを中央揃えにして全幅にし、要素内の任意のimg要素に丸みを帯びたエッジを与えます。 .containerクラス。

CSSファイルを保存して閉じます。次に、デモページコンポーネントを開いてバックアップし、次の強調表示されたコードを追加します。

src / pages / static-files-demo.js

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"
import * as DemoStyles from "./static-files-demo.module.css"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1 className={DemoStyles.headerText}>Static Files Demo</h1>

    <section className={'demo ' + DemoStyles.container}>
      <h2>Static Image Files Demo</h2>

      <figure className="image-demo">
        ...
      </figure>
      <figure className="image-demo">
        ...
      </figure>
    </section>
  </Layout>
)

export default StaticFilesDemo

このファイルに加えた最初の変更は、作成したCSSファイルをインポートするimportステートメントを追加することです。 CSS @importステートメントを使用する代わりに、標準の ESモジュールインポートステートメントを使用して、このインポートの値をDemoStyles変数に割り当てます。内部的には、GatsbyはこのCSSファイルを webpack で処理し、CSSモジュールとして扱います。

また、CSSモジュールファイルのクラスを使用するようにコンポーネントのJSXを更新しました。これを行うには、戦略的な場所のclassName属性を、DemoStylesインポートからの正確なスコープクラス名で更新します。

ファイルを保存します。

次のステップには、反対のシナリオが含まれます。サイト全体に影響を与える静的CSSコードを追加します。この方法でロードしたい種類のCSSの例は、フレックスボックスベースのレイアウトを設計するときに役立つユーティリティクラスの小さなセットです：flexboxgrid。

Gatsbyプロジェクトのルートで次のコマンドを実行して、このサードパーティのCSSを依存関係としてインストールします。

npm install flexboxgrid

次に、このライブラリが以前と同じデモページ内で提供するCSSをインポートする代わりに、プロジェクトの最上位レベルでインポートして、グローバルに適用されるようにします。スターターテンプレートでは、他のすべてのコンポーネントがそのコンテンツをその中にラップするため、このレベルはlayout.jsファイルにあります。

注：グローバルCSSインポートの別のオプションはgatsby-browser.jsファイルにありますが、グローバルに関する Gatsbyドキュメントで説明されているように、Gatsbyはほとんどの状況でこれを主要なアプローチとして推奨していませんスタイリング。従来の<link>要素を使用して、内部または外部のスタイルシートをインポートすることもできますが、Webpackをバイパスするため、これもお勧めしません。

src/components/layout.jsを開き、次の変更を加えます。

src / components / layout.js

/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.com/docs/use-static-query/
 */

import * as React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"

import Header from "./header"
import "./layout.css"
import "../../node_modules/flexboxgrid/dist/flexboxgrid.min.css"

const Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      ...
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

node_modulesの下のflexboxgridライブラリからCSSファイルを直接インポートするimportステートメントを追加しました。 CSSファイルはサイト全体に適用されることを意図しているため、変数に割り当てることはありません。また、CSSファイルをモジュールとして使用したくないため、ファイル名は.module.cssで終わりません。

layout.jsを保存して閉じ、Gatsbyサイト全体にCSSをグローバルにインポートするプロセスを完了します。

CSSをグローバルにインポートすると、CSSファイルを再度インポートしなくても、デモページでflexboxgridのクラスを使用できるようになります。デモページのコンポーネントファイルを開き、コードを更新します。

src / pages / static-files-demo.js

import * as React from "react"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import Seo from "../components/seo"
import * as DemoStyles from "./static-files-demo.module.css"

const StaticFilesDemo = () => (
  <Layout>
    <Seo title="Static Files Demo" />
    <h1 className={DemoStyles.headerText}>Static Files Demo</h1>

    <section className={'demo row around-xs ' + DemoStyles.container}>
      <h2 className="col-xs-12">Static Image Files Demo</h2>

      <figure className="image-demo col-xs-10 col-sm-5">
        ...
      </figure>

      <figure className="image-demo col-xs-10 col-sm-5">
        ...
      </figure>
    </section>
  </Layout>
)

export default StaticFilesDemo

flexboxgridCSSファイルのルールセットを使用するクラスをデモページに追加しました。 section要素のrowおよびaround-xsクラスは、justify-contentがspace-aroundに設定され、[ X136X]

getdocs

13036