GatsbyJSで静的サイトジェネレートをはじめよう！

パフォーマンスが重視される昨今、サーバサイドレンダリングを採用したり、静的サイトジェネレーターを使用して必要なファイルをあらかじめ生成してからホスティングするサイトが増えてきています。

これまでもJekyllをはじめとして静的サイトジェネレーターはいくつかありましたが、Webフロントエンド界隈では普段から使用しているスキルセットで扱えるジェネレーターとしてNuxt.js、VuePress、GatsbyJSなどが話題を呼んでいます。ジェネレーターの機能をCIに組み込むことで、サイトの構築をVue.jsやReactで行いながら静的ファイルの生成からデプロイまで一気に行うこともできます。

中でもGatsbyJSはテキストなどのデータソースをWordPressやDrupalから取得したうえで静的サイトを生成する機能を持っており、これまでCMSで自分のブログを運用していた方がGatsbyJSに乗り換えたという話をよく耳にします。今日はそんなGatsbyJSの使い方を簡単にみてみましょう。

GatsbyJSを特徴づける3つの機能

GatsbyJSには「Starters」「Plugins」という2つのエコシステムとデータソース取得機能の大きく3つの特徴があります。

StartersはCMSでいうところのテーマに当たります。ブログやECサイトなどさまざまなカテゴリがあり、非公式のものも含めると200以上のStarterが存在します。

Pluginsは名前の通りGatsbyJSで使用できるプラグインの集まりです。PWA対応や多言語対応用のプラグインなど、その数はすでに1000種近く存在します。StarterをベースとしてPluginでカスタマイズしながらサイトを作る流れはCMSにとてもよく似ていますね。

では、気になるCMSからデータを取得する部分を見ていきましょう。

WordPressからデータを取得する

CMSからデータソースを取得するには各種CMS用のプラグインを使用します。プラグインを使用すると内部的にGraphQLベースでデータを取得できる仕組みが構築され、各ページに必要なデータを取得できるようになります。WordPressを例にとり、順を追って説明します。

まずはWordPress用のプラグイン「gatsby-source-wordpress」をインストールします。

npm i gatsby-source-wordpress

その後、gatsby-config.jsに、WordPressにアクセスするための情報を書いていきます。あらかじめWordPressの開発者サイトにアクセスしてGatsbyJS用のアプリケーションを作成し、clientIdとclientSecretを取得しておきましょう。下記に一部を抜粋します。

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-wordpress`,
      options: {
        baseUrl: `WordPressのURLを記述`,
        protocol: `https`,
        hostingWPCOM: true, // wordpress.comを使用している場合はtrue
        useACF: false,
        auth: {
          wpcom_app_clientSecret: 'CLIENT_SECRET',
          wpcom_app_clientId: CLIENT_ID,
          wpcom_user: 'WordPressのユーザーネーム',
          wpcom_pass: 'WordPressのパスワード',
        },
        verboseOutput: true,
        perPage: 100,
        concurrentRequests: 10,
        includedRoutes: [
          "/**/**/posts", // 取得するコンテンツを指定。今回は投稿を対象とする
        ],
      }
    }
  ]
}

データ取得のための設定は以上です。続いて以下のコマンドを実行します。

npm run develop

コマンド実行後にhttp://localhost:8000/___graphql/をブラウザで開くと、テストページでクエリを試すことができます。サイドナビからallWordpressPostを選択して、画面上部の実行ボタンをクリックしてみましょう。下記のキャプチャのように右側のパネルにWordPressで取得したデータが表示されるはずです。

あとはページのテンプレートを作成し、取得したデータと組み合わせてビルドすればファイルの生成ができます。ファイルの生成処理はgatsby-node.jsに書いていきます。

const path = require(`path`);

exports.createPages = ({ graphql, actions }) => {
    const { createPage } = actions;
    const blogPost = path.resolve(`./src/templates/blog-post.js`);
    return graphql(`{
        allWordpressPost {
          edges {
            node {
              id
              path
            }
          }
        }
    }`).then(result => {
        if (result.errors) {
            throw result.errors
        }

        const posts = result.data.allWordpressPost.edges;

        posts.forEach((post) => {
            createPage({
                path: `/${post.node.id}/`,
                component: blogPost,
                context: {
                    id: post.node.id,
                },
            })
        });

        return null;
    });
};

参考までにデータソース元のWordPressページとビルド後のページのキャプチャを掲載します。今回はGatsbyJSが提供しているテーマ「gatsby-starter-blog」をベースにファイルを生成しました。

静的サイトジェネレーターを活用すれば、ページロード後の余計な処理が減ることでパフォーマンスが上がるだけでなく、外部から入り込む余地が減りセキュリティの向上にもつながります。またOGPタグやcanonicalタグなど、サイト全体にわたって必要だがページごとに記述が異なるような記述も機械的に設定ができるため、効率よく開発できます。

動的サイトやCMSから静的サイトへ時代が立ち戻っているようで興味深いですね。パフォーマンス施策にお悩みの方がいれば試してみてはいかがでしょうか？