Gatsby+Strapiでブログを構築した話（５） Strapiプラグイン紹介+トラブルシューティング

前回のあらすじ

Gatsbyでフロントエンドを作った
Strapiからデータを取得して表示した

この記事ですること

Gatsbyのプラグイン紹介
初見で構築した際、私が詰まったところを話す

Gatsbyプラグイン

Gatsbyにはプラグインという形で容易に機能拡張が出来る仕組みがある。
これがとても便利で、前の記事でStrapiからデータ取得をした際も活用している。ただ、プラグインは大量にあってどれを入れればいいのか分かりづらくもある。
そこで、このブログにおいて入れているプラグインと採用理由について話していく。

今回は下記URLを参考にしつつ使ってみて必要だったものを残した形だ。
https://qiita.com/Takumon/items/da8347f81a9f021b637f
ありがとうございます。

コーディング系

gatsby-source-strapi

https://www.gatsbyjs.com/plugins/gatsby-source-strapi/
前回使ったStrapiからのデータ取得を楽にしてくれるプラグイン。

{
    resolve: "gatsby-source-strapi",
    options: {
        apiURL: process.env.API_URL || "http://localhost:1337",
        contentTypes: [
            // List of the Content Types you want to be able to request from Gatsby.
            "article",
            "category",
            "page",
            "sidebar",
        ],
        queryLimit: 1000,
        markdownImages: {
            typesToParse: {
                article: ['content'],
                page: ['content'],
                sidebar: ['content']
            }
        }
    },
},

今の設定はこんな感じ。
contentTypesがStrapiから取得したいコレクションタイプ名となる。
Strapiの構造を変えたらこっちも変えることを忘れずに。

gatsby-plugin-sass

https://www.gatsbyjs.com/plugins/gatsby-plugin-sass/
sassが使えるようになる。以上。
書くだけなので特に説明もない。

"gatsby-plugin-sass"

gatsby-plugin-typescript

https://www.gatsbyjs.com/plugins/gatsby-plugin-typescript/
typescriptが（ry

"gatsby-plugin-typescript"

gatsby-plugin-graphql-codegen

https://www.gatsbyjs.com/plugins/gatsby-plugin-graphql-codegen/
typescriptを使っていると、GraphQLの結果の型をどうすんねん問題が発生する。
自分でいちいち作るのは地獄といっていいだろう。
そこでビルド時に取得できた構造から型を自動生成してくれるのがこのプラグイン。
この場合types/graphql-types.d.tsに出力してくれるのでインポートして使おう。

{
    resolve: 'gatsby-plugin-graphql-codegen',
    options: {
        fileName: `types/graphql-types.d.ts`
    }
},

デザイン系

書いたら使えるだけなので説明ないです。

gatsby-plugin-material-ui

https://www.gatsbyjs.com/plugins/gatsby-plugin-material-ui/

"gatsby-plugin-material-ui"

gatsby-plugin-styled-components

https://www.gatsbyjs.com/plugins/gatsby-plugin-styled-components/

"gatsby-plugin-styled-components"

アクセス分析

gatsby-plugin-google-analytics

https://www.gatsbyjs.com/plugins/gatsby-plugin-google-analytics/
Google Analyticsが（ry
trackingIdはUAから始まる例のやつ。

{
    resolve: `gatsby-plugin-google-analytics`,
    options: {
        trackingId: $googleTrackingId,
        head: true,
    },
},

このプラグインは先頭に書けって説明されてるので注意。

gatsby-plugin-facebook-analytics

https://www.gatsbyjs.com/plugins/gatsby-plugin-facebook-analytics/
上に同じ。
Facebook Analyricsの導入は簡単だが、あまり情報がなかったのでそのうち導入方法の記事を書く。

{
    resolve: `gatsby-plugin-facebook-analytics`,
    options: {
        appId: $facebookAppId,
        includeInDevelopment: false,
        debug: false,
        xfbml: false,
        language: "ja-jp",
    },
},

SEO系

gatsby-plugin-canonical-urls

https://www.gatsbyjs.com/plugins/gatsby-plugin-canonical-urls/
URL正規化するやつ。
それが何かはSEOの話になるはずなので割愛。
気がついたら入ってたけどいれた記憶がない。

{
    resolve: `gatsby-plugin-canonical-urls`,
    options: {
        siteUrl: $siteUrl,
    },
},

gatsby-plugin-sitemap

https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/
サイトマップ作る。
これもSEO系ですね。

{
    resolve: `gatsby-plugin-sitemap`,
    options: {
        sitemapSize: 5000
    }
},

gatsby-plugin-robots-txt

https://www.gatsbyjs.com/plugins/gatsby-plugin-robots-txt/

'gatsby-plugin-robots-txt'

構成補助系

gatsby-plugin-catch-links

https://www.gatsbyjs.com/plugins/gatsby-plugin-catch-links/
<a href>のような形の内部リンクを<Link>の動作に置き換えてくれるもの。
これにより、内部での遷移の際リロードが発生しなくなる。
markdownを変換する形だと普通にやればaタグが出てきてしまうので導入必須といっていいだろう。

"gatsby-plugin-catch-links"

gatsby-plugin-offline

https://www.gatsbyjs.com/plugins/gatsby-plugin-offline/
ネットワークが不安定な環境でもサイトを見られるようにサービスワーカーを作ってくれる。
特にスムーズに見てほしいページにはオプションでプリキャッシュを指定できる。

"gatsby-plugin-offline"

gatsby-plugin-nprogress

https://www.gatsbyjs.com/plugins/gatsby-plugin-nprogress/
ページの読み込みが遅かった場合にプログレスバーを表示してくれる。

{
    resolve: `gatsby-plugin-nprogress`,
    options: {
        color: `#444`,
        showSpinner: false,
    },
},

gatsby-transformer-remark

これはGatsbyでよく使われているmarkdown parserだが、今回はReactMarkdownをメインで使うので記事の抜粋の表示の為にだけ使っている。

https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/
https://github.com/rexxars/react-markdown

{
    resolve: `gatsby-transformer-remark`,
    options: {
        plugins: [
            
        ],
    },
}

gatsby-plugin-twitter

https://www.gatsbyjs.com/plugins/gatsby-plugin-twitter/
twitterの埋め込みを書くのが少し楽になる。

`gatsby-plugin-twitter`

元々入ってるやつ

画像をいい感じに処理してくれるやつとその画像をGraphQL経由で読み込めるようにするやつ。
基本セットで使っていいと思う。

並べてみて分かるプラグインの多さ…
これらの機能を実装しようとしたらどれだけかかるか分からないくらいなので、これだけでもGatsbyを使う価値は間違いなくある。
まだまだいいプラグインはあるはずなので、いろいろ試してみてほしい。

ブログ構築でトラブったところ

このブログ構築は説明している程スムーズに行ったわけじゃない。スムーズだったら週末2回潰したりしない。
ということでここまでの過程で躓いたところを話していく。

.tsと.tsxの違いが分かってなかった

前記事でも話したけど、x付いてるかついてないかで天地の差があった。
なんでこのタグ使えないの…とか思ってたけどこれだけだった。
消費時間：2時間

GraphQLのクエリがunknownって言われる

gatsby-source-strapiの設定に新しい項目を追加してなかった。
Strapi側を変えたらこっちも変えることは徹底しましょう。
消費時間：1時間

propsの型をどう作るか分からなかった

そもそもpropsってなんだよというところから始まる。
ただのデータの集まりだと気づいてからはひたすら入る値を構造体にしていく作業になった。
消費時間：0.5時間

StrapiのAPIにアクセスできない

権限を追加するのを忘れていた。
findとfindAllは追加しておかないと外部からデータが見れない。
これもGraphQLの方と合わせて忘れがち。
消費時間：0.5時間

返ってくるデータ構造が足りない

Strapiで必須ではないデータ項目にデータを入れていないとGraphQLでちゃんとした型を取得できなかった。
作ったばかりのデータ構造には一旦全てのデータを入れたものを一つ作成しよう。
GraphQL周りは引っかかるところがまあまああった。
消費時間：1時間

Strapi、productionではデータ構造を弄れない

gatsby developで起動したときにデータ構造を作って、productionで使う形になる。
APIルートを作るわけでサーバーの再起動もかかるので当たり前ではあるのだが、最初見たときは謎だった。

contentにhtmlを書いたらそのまま表示される

これはReactMarkdownのオプションを読んでなかった問題。
ちゃんとレンダリングするか指定できるので、それさえすればよかった。
消費時間：0.5時間

dockerでStrapiが起動しない

これは前にもすこし触れたの。
node_modulesの中身の問題で起動がコケていた。
消費時間：1.5時間

チュートリアルあるにも関わらず躓きまくりだった。余計なことやりすぎ。
さて、次回はこのブログのデザイン過程について話していく。基本的にMaterial-UIを使用していくので、他の慣れたライブラリを使っている場合はそちらを使うほうが良いだろう。

次の記事： Gatsby+Strapiでブログを構築した話（６）ブログのデザイン過程

Sep 4th 2020

Dreamer