ITエンジニアの種籾(たねもみ)

IT技術とか株式投資とか。

Gatsby.js チュートリアルを読んでみよう

2020年 07月 17日

目次

Gatsby.js でブログサイトを立ち上げるために必要な Gatsby.js の基本的な構造を解説します。

よくチュートリアルをやったときには理解してたんだけど、 数カ月後に実際に作ってみようと思ったときに「何したらいいんだっけ?」と途方にくれることありますよね。

本記事の目的は、実際に Gatsby.js でブログサイトを作るときに、 Gatsby.js の基本構造を数分で復習するための解説することです。

また、Node.js や React など Gatsby.js の前提になる技術の説明は省き、 ブログを作るための情報に絞っています。

元ネタは、本家の Gatsby.js Tutorials なので、 はじめて Gatsby.js に触れる方はそちらを読んでください。 チュートリアルだけなら1日くらいで読み切れます。

また、サラッと読めるように箇条書きを多用します。いってみましょう。

イントロダクション

チュートリアルの目的は、

  • Gatsby.js サイトのセットアップとデプロイ
  • 一般的なウェブ開発のトピックを紹介
  • Gatsby サイトの基本的な構造についての説明

開発環境のセットアップ

必要な技術やソフトウェアツールは、

  • コマンドライン操作 : CUI での操作が必要です。
  • Node.js : Gatsby.js は Node.js で構築されています。
  • Git : スターターは裏で Git を使って必要なファイルをインストールします。
  • gatsby-cli : Gatsby.js サイトの作成や開発に必要です。
  • コードエディタ : VSCode がおすすめです。
  • コードの自動整形プラグイン : VSCode なら Prettier がおすすめです。

Gatsby.js サイトが使用する Web 技術は、

  • HTML, CSS : Web ブラウザが理解できるマークアップ言語とコンテンツの外観を調整するスタイル言語です。
  • JavaScript, React : プログラミング言語とフレームワークです。
  • GraphQL : データに対するクエリ言語です。

Gatsby.js の構造を理解する

  • src/pages/*.js で作られている React コンポーネントは、Gatsby.js が自動的にページコンポーネントにします。
  • サブコンポーネントはsrc/componentsなどどこでも良いです。
  • ページ間をリンクするのは<Link/>を使い、外部サイトは<a/>を使います。
  • デプロイ用にビルドするにはgatsby buildします。
  • 生成されたファイルはpublicに出力します。

Gatsby.js のスタイルの入門編

Gatsby.js でスタイルの設定方法が3つあります。

1. グローバルなスタイルを設定する方法

  • styles/global.cssなど作る
  • gatsby-browser.jsで include する(import "./src/styles/global.css")

gatsby-browser.js を使うと、ブラウザ内のアクションに反応したり、追加のコンポーネントでサイトをラップしたりすることができます。 gatsby-browser.js で import すると、全ページに反映されるので、そこで global.css を import します。

この方法で、スタイルを設定できますが、共有コンポーネントと CSS モジュールの方法でも同じことできます。 コンポーネント間で干渉しないようにに、可能な限り共有コンポーネントを使うべきです。

2. CSS モジュール

ローカルにスコープされている CSS ファイルで、クラス名やアニメーション名を自動生成してくれるのでグローバルな CSS より安全です。 実装方法は、

  • コンポーネント用のcontainer.module.cssを作成する (.module.cssとすることで Gatsby.js に CSS モジュールと伝える)
  • コンポーネントでimport containerStyles from "./container.module.css"でインポートする
  • <div className={containerStyles.container}>{children}</div>で CSS のクラス名を割り当てる

これにより、この HTML 要素(上記だと div)配下にスタイルを適用できます。 ページの一番外側の要素に、この CSS モジューを適用すれば、グローバルな CSS を使わなくて済みます。

3. CSS-in-JS

コンポーネント指向のスタイリング手法です。 一般的には、JavaScript を使って CSS をインラインで構成するパターンがほとんどです。

EmotionStyled Components のミニチュートリアルがあります。

Web デザインに興味がなければ理解する必要ないため、ここでは割愛します。 本家のチュートリアルでも紹介までです。

レイアウトコンポーネント

レイアウトコンポーネントは、複数のページで共有したいサイトのセクションのためのものです。 React で画面を作るときによくやる手法で、外側の大きなレイアウトコンポーネントを作るノウハウです。

レイアウトコンポーネントを使えば、ヘッダー、フッター、グローバルナビゲーション、サイドバーなどを共通的なコンポーネントとして作ることができます。 また、CSS モジュール方式をとれば、サイト全体のスタイルも定義することができます。

Gatsby.js のデータ

Gatsby.js のデータレイヤーは GraphQL を利用しています。 GraphQL はクエリ言語(名前の QL の部分)です。

Gatsby.js は GraphQL を使用して、コンポーネントが必要なデータを宣言できるようにしています。 Markdown や CSV などのファイル形式や、データベースや API などあらゆる種類のものにも対応しています。

ページクエリ

ページクエリはコンポーネント定義の外にあり、慣習的にはページコンポーネントファイルの最後に記述します。 ページコンポーネント上でのみ利用可能です。 (ページコンポーネントとはsrc/pages/*.jsにあたる js に書かれたコンポーネント)

  • ページクエリはexport const query = graphql`クエリ` で記述
  • ページコンポーネントの props にdataという名前で渡ってくる

Static クエリ

Static クエリ ではページコンポーネント以外の共通のコンポーネント(layout.js コンポーネントなど)から GraphQL クエリを使ってデータを取得することができます。

useStaticQuery API を使って React コンポーネントの render 関数の中でクエリできます。

const data = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `
  )

関連情報:サイトのメタ情報

サイトタイトルなどサイトのメタデータはgatsby-config.jssiteMetadataに定義できます。

データソースプラグイン

ソースプラグインは、ファイルやデータベースなどのソースからデータを生成します。

例えば、ファイルシステムのソースプラグインは、ファイルシステムからデータを取得します。 WordPress プラグインは WordPress API からデータを取得します。

ファイルシステムのソースプラグインはgatsby-source-filesystemです。 このソースプラグインだけだと、生のコンテンツであるファイルをデータとして扱えるようになるだけです。

ソースプラグインと、後で出てくるトランスフォーマープラグインを組み合わせることで、 Gatsby.js サイトを構築する際に必要なすべてのデータソーシングとデータ変換を処理することができます。

関連情報:GraphiQL

GraphiQL は GraphQL 統合開発環境(IDE)です。これは、Gatsby のウェブサイトを構築している間に頻繁に使用するパワフルな(そして万能な)ツールです。

http://localhost:8000/___graphql

トランスフォーマープラグイン

トランスフォーマープラグインは、ソースプラグインが持ち込んだ生のコンテンツを変換します。 これにより、ファイル内のデータを問い合わせられるようになります。

Markdown を変換するプラグインは gatsby-transformer-remark です。

データからページを作成

Gatsby.js は GraphQL を使ってデータをクエリし、クエリ結果をページにマッピングすることができます。 これは本当に強力なアイデアです。Next.js も同じ考えを持っています。

新しいページを作成するには、2 つのステップがあります。

  • ページの「パス」または「スラッグ」を生成します。(下記 onCreateNode)
  • ページを作成します。(下記 createPages)

マークダウンページを作成するために、2 つの Gatsby API を使用します。

  • onCreateNode : 新しいノードが作成されたときに呼び出されます。Markdown ノードにスラッグを追加します。
  • createPages : ページを追加するようにプラグインに指示します。

上記2つの API を実装するには、gatsby-node.js から API の名前を付けた関数をエクスポートします。

onCreateNode

onCreateNode でページのスラッグを生成して Markdown ノードに追加します。

ノードは、オリジナルの作成者のみが変更できます。 プラグイン作成者か gatsby-node.js の onCreateNode の API だけです。

なので、Markdown ファイルからスラッグを作成するために、gatsby-node.js の onCreateNode を実装します。

createPages

createPages でページを生成します。

  • GraphQL でデータを問い合わせる (graphql)
  • クエリ結果をページにマップする (createPage)

createPage には、スラッグとページコンポーネント、コンテキスト(内容)を渡します。

サイトを公開するための準備

Lighthouse と呼ばれる強力なサイト診断ツールを紹介しながら、サイトを稼働させるための一般的な準備の手順を説明します。

Lighthouse

Lighthouse は、Web ページの品質を向上させるためのオープンソースの自動化ツールです。 Lighthouse は Chrome DevTools に含まれています。

以下の手順でテストできます。

  • ビルド gatsby build
  • 公開版をローカルで起動 gatsby serve
  • Chrome を起動して、「開発者用ツール」>「Lighthouse」でツールを起動します。

ここまでの説明で Gatsby.js で作成されたサイトは PWA、アクセシビリティ、ベストプラクティス、SEO のために、スコアを向上させるためのいくつかのことを見逃しています。

PWA(Progressive Web App)の対応

Web アプリのマニフェストのインクルードは、PWA の 3 つの一般的に受け入れられているベースライン要件の 1 つです。 Web アプリのマニフェストは、ウェブアプリケーションについてブラウザに伝え、ユーザーのモバイルデバイスやデスクトップに「インストール」されたときにどのように動作するかを伝えるシンプルな JSON ファイルです。 Gatsby の manifest プラグインgatsby-plugin-manifestは、すべてのサイトのビルドで manifest.webmanifest ファイルを作成するように Gatsby を設定します。

オフラインサポート

ウェブサイトが PWA として認定されるためのもう 1 つの要件は、サービスワーカーの使用です。 サービスワーカーはバックグラウンドで実行され、接続性に基づいてネットワークまたはキャッシュされたコンテンツを提供することを決定し、シームレスで管理されたオフライン体験を可能にします。 Gatsby のオフラインプラグインgatsby-plugin-offlineは、サイトのサービスワーカーを作成することで、Gatsby サイトをオフラインで動作させ、ネットワークの悪条件に強くします。

ページのメタデータの対応

ページにメタデータ(タイトルや説明文など)を追加することは、Google などの検索エンジンがコンテンツを理解し、検索結果に表示するタイミングを決める上で重要です。 Gatsby の react helmet プラグインreact-helmetgatsby-plugin-react-helmetは、React Helmet で追加したサーバーレンダリングデータをドロップインでサポートします。 このプラグインを使用すると、React Helmet に追加した属性が、Gatsby が構築する静的な HTML ページに追加されます。

まとめ

チュートリアルの説明から、実際にページを作ることを考えると下記2パターンを頭に入れとけば大丈夫です。

静的なページを作る場合

  • src/pages/\*.jsに下記の要領でページコンポーネントを作る。

    • export constタグ付きテンプレートgatsby.graphqlのクエリを定義する(慣習的にはページコンポーネントファイルの最後)
    • ページコンポーネントをexport default constする

動的にページを作る場合

  • Markdown のノードができたときに、そのページの URL のスラッグの属性を作って追加する

    • gatsby-node.jsonCreateNode API に実装する
  • データからページを生成する

    • gatsby-node.js で createPages API に実装する
    • 生成したいページのページコンポーネントのパスを生成する。
    • 生成したいデータをクエリする。(gatsby.graphql を関数で呼ぶ)
    • ループして createPage API を呼び出して生成する。 (引数はページのパス、コンポーネントのパス、他に渡したいコンテキスト)
  • ページコンポーネントを実装する

    • 静的なページコンポーネントと同じだが、データのクエリにコンテキストの情報が使える。
    • export constタグ付きテンプレートgatsby.graphqlのクエリを定義する(慣習的にはページコンポーネントファイルの最後)
    • React コンポーネントをexport default constする

以上です。

広告