
## Gatsby5 にしてから…

Gatsby5 にしてから、ビルドに時間が掛かる様になりました。

記事を一つ投稿（markdown ファイル + eyecatch 画像）しようとするだけで、数十分掛かる…といった感じです。

```shell
（略）
info bootstrap finished - 13.497s
success write out requires - 0.006s
success Building production JavaScript and CSS bundles - 1.338s
Building HTML renderer
```

Building production JavaScript and CSS bundles まではスムーズに行くのですが、 HTML renderer で時間が取られる。

それが終了して、Running gatsby-plugin-sharp.IMAGE_PROCESSING…の段階に入ると、また時間が取られます。

```shell
（略）
success Execute page configs - 1.604s
success Caching Webpack compilations - 0.001s
Running gatsby-plugin-sharp.IMAGE_PROCESSING…
（略）
warn This query took more than 15s to run — which might indicate you're querying
too much or have some unoptimized code:
File path: /XXXXXX/src/pages/{mdx.frontmatter__slug}.j
s?__contentFilePath=/XXXXXX/blog/github-personal-acces
s-tokens/index.mdx
URL path: /github-personal-access-tokens/
```

動的に作成されるページの分だけ、上記のコードが繰り返し表示され、ビルドが全然終わらない。

ビルド時に最適化された画像を作成しているとは思うんですが、画像の点数もサイズだってそんなに多くないのに…

## Gatsby5 の新機能

Gatby5 の新機能は、以下の記事に書かれています。

- [v5 Release Notes](https://www.gatsbyjs.com/docs/reference/release-notes/v5.0/)

GraphQL も記事に書かれているコマンドを実行して、新しい書き方に変更済みです。

- [GraphQL schema: Changes to sort and aggregation fields](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v4-to-v5/#graphql-schema-changes-to-sort-and-aggregation-fields)

変更後の GraphQL のコードも、チュートリアル等に書かれているサンプルコードとほぼ一緒なので、GraphQL 自体には問題なさそう。

（Gatsby Cloud を使っていないので、効果はあまり期待出来ないけど）Gatsby Slice も使った上でビルドしてみても、同じ様に時間が掛かる…

node のバージョンを色々変更（v18.0.0〜v18.14.0）してみても、結果は同じ。

## NextJS で試してみる

以前に NextJS で markdown ファイルを読み込んで表示させるブログを作成していたので、試しに Gatsby のブログ記事を NextJS に持って行って、画像のパスなどを修正して、ビルドしてみると…

十数秒でビルドが終わった…

えっ、何で？

ちょっと前にサーバーの OS を CentOS から RockyLinux に変更したけど、Gatsby にだけ影響あるとかは考えにくいし…

Gatsby Cloud を使えば、ビルドもサクッと終わるのかもしれないんですけど…

yarn install も NextJS だと（プラグインとかそんなに使っていないので）サクッと終わったし、これなら NextJS でいいんじゃないかと。

なので、暫くは NextJS に切り替えてやってみようかと思っています。


GatsbyからNextJSに移行してみた


## Gatsby4 では

Gatsby4 では、markdown での table 記法が、ブラウザできちんと表示されていました。

![markdownのtable記法が、正常に表示されている](../assets/markdown_table.png)

## Gatsby5 だと表示が崩れる

Gatby4 から 5 にアップデートして、設定を特に変更せずにいたのですが、markdown での table 記法が、ブラウザで正常に表示されなくなっていました。

![markdownのtable記法が、正常に表示されている](../assets/markdown_table_display_collapses.png)

## ググってみる

- [Markdown の table が正しくパースされない #10](https://github.com/gh640/nextjs-blog-example-ja/issues/10)

どうやら、remark-gfm を使うといいみたい…

では gatsby-plugin-mdx で、どう使えばいいのか…

- [gatsby-plugin-mdx](https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/)

以下の様な記述がありました。

> MDX syntax differs from Markdown as it only supports CommonMark by default. Nonstandard markdown features like GitHub flavored markdown (GFM) can be enabled with plugins (see mdxOptions instructions).

## mdxOptions

mdxOptions を使えば、いいっぽい。

```js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        mdxOptions: {
          remarkPlugins: [
            // Add GitHub Flavored Markdown (GFM) support
            require(`remark-gfm`),
          ],
        },
      },
    },
  ],
};
```

この様に設定して、gatsby develop をしても、表示は崩れたまま…

## 注意書きがあった

> Please Note: Most of the remark ecosystem is ESM which means that packages like remark-gfm currently don’t work out of the box with Gatsby. You have two options until Gatsby fully supports ESM:

2 パターンあるみたいですが、今回は 1 の方法を試してみました。

```shell
npm install remark-gfm@^1
```

remark-gfm をインストールして、再度 gatsby develop してみると、

|                      | 旧ブログ | 新ブログ |
| :------------------- | :------- | :------- |
| バージョン           | 3        | 4        |
| 読み込み可能ファイル | md       | mdx      |

ブラウザでも正常に表示される様になりました。


markdownのtable記法、ブラウザでの表示が崩れる


## Could not parse expression with acorn: Expecting Unicode escape sequence \\uXXXX

[GatsbyJS を 5 にアップデートしてみる](https://flabaka.com/gatsby-update-v5)の mdx ファイルをビルドすると、エラーが発生。

```shell
Could not parse expression with acorn: Expecting Unicode escape sequence \\uXXXX
```

この様なエラーが出たのは初めてだったので、Gatsby5 にしたのが原因なのかな？　とか思いながら、Gatsby4 の環境で同じ mdx ファイルをビルドしてみたんですが、こちらはエラーは出ず。

## gatsby-plugin-mdx のドキュメントを見てみる

ひとまず、gatsby-plugin-mdx のドキュメントを見てみる。

- [Updating MDX content](https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/?=gatsby-plugin-mdx#updating-mdx-content)

すると、以下の様な記述が…

> As MDX v2 changed the way it handles content you might need to update your MDX files to be valid MDX now. See their Update MDX content guide for all details. In What is MDX? it is also laid out which features don’t work. Most importantly for this migration:

MDX が v2 になって、変更点があった様です。

> Unescaped left angle bracket / less than (<) and left curly brace ({) have to be escaped: \< or \{ (or use expressions: {'<'}, {'{'})

どうやら\< と \{ を表示するには、エスケープ処理が必要になったらしい…

## パースエラーは出ず

Gatsby4 の package.json

```json
"gatsby": "^4.25.4",
"gatsby-plugin-mdx": "^3.20.0",
"@mdx-js/mdx": "^1.6.22",
"@mdx-js/react": "^1.6.22",
```

## パースエラーになる

Gatsby5 の package.json

```json
"gatsby": "^5.5.0",
"gatsby-plugin-mdx": "^5.5.0",
"@mdx-js/mdx": "^2.2.1",
"@mdx-js/react": "^2.2.1",
```

記事の通り ＠mdx-js が v2 の環境だと、エラーが発生していました。

## エスケープ処理を行う

先の記事の mdx ファイル内で、ファイル名（{mdx.slug}.js や{mdx.frontmatter\_\_slug}.js ）を記述した際には、エスケープ処理をしていませんでした。

Gatsby4 の環境は v1 だったので、エスケープ処理せずともエラーにはならなかったと。

Gatsby5 の v2 の環境でも、エスケープ処理をきちんと行うと、エラーは表示されなくなりました。

## コード内はエスケープ処理しなくても大丈夫っぽい

```markdown
// エスケープ処理あり
\<h1>タイトル\</h1>
```

シンタックスハイライトには prism.js を使っているんですが、上記の様にコード内でエスケープ処理を行うと、バックスラッシュはそのまま表示されてしまうみたいです。

コード内ではエスケープ処理はしなくても大丈夫っぽいです。

## frontmatter 内も処理しなくて大丈夫っぽい

```markdown
---
title: "ビルドすると、mdxファイルがパースエラーになる"
date: "2023-03-02T23:35:16.365Z"
summary: "ファイル名は、\{mdx.slug}.jsです"
---
```

frontmatter 内でエスケープ処理をすると上記の様になってしまうので、こちらも処理の必要はなさそうです。

## Unexpected character

> Unescaped left angle bracket / less than (<) and left curly brace ({) have to be escaped: \< or \{ (or use expressions: {'<'}, {'{'})

先に引用した箇所ですが、そのままでは以下のエラーが出ました。

```shell
Unexpected character `)` (U+0029) before name, expected a character that can start a name, such as a letter, `$`, or `_`
```

- [Unexpected character = (U+003D) before name, expected a character that can start a name, such as a letter #122](https://github.com/kentcdodds/mdx-bundler/issues/122)

この記事を読むとエスケープ処理が必要みたいだけど、複雑な記述になりそうな気が…

何か方法はないかなぁ…と思いながら、Gatsby のマニュアルを再び見ていると…

- [Updating MDX content](https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/?=gatsby-plugin-mdx#updating-mdx-content)

上記リンク内の文章（In our testing〜）の下にある DIFF で囲まれているコードの様に、Unescaped left angle bracket〜の文章全体を backticks で囲んであげると、エラーは出なくなりました。

もっといい方法があるのかもしれませんが、ひとまずこんな感じで。


ビルドすると、mdxファイルがパースエラーになる


## CentOS7 に node18 を入れようとすると…

ローカルでは Gatsby4 から 5 への移行が出来たので、サーバー側でも上手くいくか試してみる。

Gatsby5 は node18 を推奨とのことだったので、サーバー（CentOS7）に node18 をインストールして、使おうとすると…

```shell
node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)
```

上記の様なエラーが出た。

対処する方法もあるみたいだけど、CentOS7 のサポートも来年で切れるみたいなので、これを機に他の OS に移行してみる事に…

## OS の再インストールをしてみる

CentOS7 からの移行には、[ELevate](https://almalinux.org/elevate)みたいな移行ツールもあるみたいですが、忘れているであろう Linux の設定等の復習も兼ねて、移行ツールは使わずに OS の再インストールをしてみました。

どの OS にしようかと思ったんですが、何となくで RockyLinux を使ってみることに。

- [Rocky Linux ガイド](https://docs.rockylinux.org/ja/guides/)

上記のガイドなどを参考にしながら、基本的な設定を行いました。

## Nginx や Let's Encrypt をインストール

RockyLinux の標準リポジトリにある Nginx は古いみたいなので、以下の記事を参考に Nginx をインストール。

- [Rocky Linux に Nginx を公式リポジトリからインストールする](https://sig9.org/archives/4116)

Let's Encrypt のインストールは前回もやったはずなんだけど、すっかり手順を忘れていたので、以下の記事を参考にさせて頂きました。

- [Generating SSL Keys - Let's Encrypt](https://docs.rockylinux.org/ja/guides/security/generating_ssl_keys_lets_encrypt/)
- [Certbot 公式に従って Nginx を常時 SSL 化](https://zenn.dev/hitoshiro/articles/b8170ec36d1f01)

今回は記事内にもある様に、以下のコマンドを使ってインストールしました。

```shell
certbot --nginx
```

Nginx 側の設定を、いい感じにやってくれます。

## yarn install してみたら…

あとは node18 をインストールして、Gatsby5 のプロジェクトを Github から pull してきて、yarn install を実行。

```shell
There appears to be trouble with your network connection. Retrying...
```

上記のエラーが表示され、強制終了。

何度やっても強制終了してしまうので、yarn ではなく npm でインストールしてみても、強制終了してしまう。

- [Yarn でパッケージをインストールする際に info There appears to be trouble with your network connection. Retrying… が出て失敗してしまう](https://labor.ewigleere.net/2021/01/08/yarn_error_there_appears_to_be_trouble_with_your_network/)
- [yarn を行うと「info There appears to be trouble with your network connection. Retrying...」が出てくる](https://blog.sa2taka.com/post/resolve-yarn-info-there-appears-to-be-trouble-with-your-network-connection-retrying/)

ググってみたら、タイムアウト時間を設定してあげると良いとのことだったので、試してみても再び強制終了。

## 一旦、4 に戻してみる

Gatsby のバージョンを 5 にしたのが原因なのかな？　とか思ったので、一旦 バージョンを 4 に戻してみる。

node も 17 にして、再度 yarn install してみました。

```shell
There appears to be trouble with your network connection. Retrying...
```

結果は変わらず。

タイムアウト時間を設定しても、駄目。

CentOS7 の時はタイムアウト時間を設定しなくても、yarn install ですんなりインストール出来たのになぁ…

OS を変更したことだったり、あとはサーバーのスペックの問題とかなの？

契約しているサーバーの更新がもうすぐだったこともあり、試しにサーバーのスペックを一つ上のものへと変更してみました。

で、再び yarn install してみると…

タイムアウト時間を設定しなくても、あっさりインストールが完了。

その後 gatsby build を行なっても、エラーは出ず。

## 5 に戻してみる

Gatsby 4 が動くことが分かったので、次に 5 もちゃんと動くか試してみる。

node の 18 に切り替えて、再び yarn install してみると…

```shell
<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
```

タイムアウトのエラーにはならなかったものの、今度は上記の様なエラーが表示されました。

- [[エラー][Angular] JavaScript heap out of memory(ヒープメモリ不足 )](https://zenn.dev/yusuke_docha/articles/f8c3cd88302d16)
- [JavaScript heap out of memory が発生したときに試したこと](https://www.gaji.jp/blog/2019/12/17/1860/)
- [Next.js でビルド時に「heap out of memory」でエラーになる場合の対処方法](https://choppydays.com/next-js%E3%81%A7%E3%83%93%E3%83%AB%E3%83%89%E6%99%82%E3%81%AB%E3%80%8Cheap-out-of-memory%E3%80%8D%E3%81%A7%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E3%81%AA%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AE%E5%AF%BE/)

上記の記事を参考にさせて頂き、yarn install 時に max-old-space-size を設定してあげることで、無事インストールが完了。

インストールが終わったので、gatsby build をしてみたら、新たなエラーが…


CentOSからRockyLinuxへ移行してみた


## warn Browserslist が…

いつからか、以下の様なものが表示される様になっていました。

```shell
warn Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
```

とりあえず、ググってみる。

- [[React] アプリのビルド時に Browserslist の更新を要求されるので対処してみる](https://dev.classmethod.jp/articles/asked-to-update-the-browserslist-when-building-react-app/)

ターミナル上に記載されていた github へのリンクや上記記事を読んだ後、Please run に書かれているコマンドを走らせてみると、先の warn は表示されなくなりました。

## 4 の最新版にアップデートしてみたら…

- [Migrating from v4 to v5](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v4-to-v5/)

GatsbyJS が 5 になっているみたいなので、アップデートしようかな？　と。

> Before upgrading to v5 we highly recommend upgrading gatsby (and all plugins) to the latest v4 version.

まずは 4 の最新版（プラグインとかも）にアップデートしてからにしてね的なことが書かれていたので、その通りにやってみる。

4 の最新版（4.25.0）にしてから gatsby develop すると、今度は以下の warn が出る様になりました。

```shell
warn gatsby-plugin-react-helmet: Gatsby now has built-in support for modifying the document head. Learn more at https://gatsby.dev/gatsby-head
```

- [Gatsby Head API](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/)

リンク先を見てみると、4.19.0 から react-helmet ではなく、Gatsby Head API が使われる様になったと。

- [非推奨になる react-helmet から Gatsby Head API に書き換える方法](https://bel-itigo.com/how-to-use-gatsby-head-api/)
- [Tutorial: Learn how Gatsby works](https://www.gatsbyjs.com/docs/tutorial/)

上記記事などを参考にし、react-helmet を Gatsby Head API に置き換えました。（Gatsby の Tutorial も、Gatsby Head API を使ったものに更新されていますね！）

## 5 にアップデートしてみる。

4 の最新版にアップデート出来たので、次に 5 にアップデートしてみる。

> For most users we expect a smooth upgrade path as only a couple of changes will be required: Updating to Node 18, switching to React 18, and changing GraphQL queries using a codemod.

5 を動かすには、React も node も v18 以降にし、プラグインも最新バージョンに置き換えました。

```shell
npx gatsby-codemods@latest sort-and-aggr-graphql .
```

GraphQL の書き方が変更になっているみたいなので、マニュアルにもある様に上記のコマンドを叩いて変換してから、gatsby develop をしてみたら…

色々とエラーが出た！

## 4 の時は、slug を取得出来ていた…

pages/index.js ファイルに、以下の様なエラーが出ていました。

```shell
ERROR #85923  GRAPHQL.VALIDATION

There was an error in your GraphQL query:

Cannot query field "slug" on type "Mdx".
```

Gatsby4 の時は、以下の様な記述で slug （ブログ記事のフォルダ名）を取得し、それを個別記事へのパスとして使っていました。

```graphql
query MyQuery {
  allMdx {
    edges {
      node {
        frontmatter {
          title
          tags
        }
        slug
      }
    }
  }
}
```

これを GraphiQL で実行すると、

```json
{
  "data": {
    "allMdx": {
      "edges": [
        {
          "node": {
            "frontmatter": {
              "title": "TailWindCSSのlast、@apply、last-of-typeを使ってみる",
              "tags": ["TailWindCSS"]
            },
            "slug": "tailwindcss-apply-last-type-of/"
          }
        },
        {
          "node": {
            "frontmatter": {
              "title": "Gatsbyの記事に目次を作成してみる",
              "tags": ["GatsbyJS"]
            },
            "slug": "table-of-contents/"
          }
        }
      ]
    }
  },
  "extensions": {}
}
```

こんな感じで、slug を取得出来ていましたが、（GraphiQL を見てみると）5 からは、slug の項目がなくなっている…

最新（v5）のチュートリアルにもある様に、mdx ファイル側で slug を設定してあげて、

```markdown
---
title: "TailWindCSSのlast、@apply、last-of-typeを使ってみる"
tags: ["TailWindCSS"]
slug: "tailwindcss-apply-last-type-of"
---
```

それを graphql で取得する様に変更しました。（4 の時からこの手法を取っていた方は、修正しなくても大丈夫かと）

```graphql
export const query = graphql`
  {
    allMdx(sort: { frontmatter: { date: DESC } }) {
      nodes {
        frontmatter {
          title
          tags
          slug
        }
      }
    }
  }
`
```

## templates のファイルにも…

templates フォルダ内に作成したファイルにも、先と同様のエラーが出ていたので、そちらも修正。

加えて propTypes も修正する。以前はこんな感じ。

```graphql
Tags.propTypes = {
  pageContext: PropTypes.shape({
    tag: PropTypes.string.isRequired,
  }),
  data: PropTypes.shape({
    allMdx: PropTypes.shape({
      totalCount: PropTypes.number.isRequired,
      edges: PropTypes.arrayOf(
        PropTypes.shape({
          node: PropTypes.shape({
            frontmatter: PropTypes.shape({
              title: PropTypes.string.isRequired,
            }),
            slug: PropTypes.string.isRequired,
          }),
        }).isRequired
      ),
    }),
  }),
}
```

slug の記述箇所を、修正しました。

```graphql
Tags.propTypes = {
  pageContext: PropTypes.shape({
    tag: PropTypes.string.isRequired,
  }),
  data: PropTypes.shape({
    allMdx: PropTypes.shape({
      totalCount: PropTypes.number.isRequired,
      edges: PropTypes.arrayOf(
        PropTypes.shape({
          node: PropTypes.shape({
            frontmatter: PropTypes.shape({
              title: PropTypes.string.isRequired,
              slug: PropTypes.string.isRequired,
            }),
          }),
        }).isRequired
      ),
    }),
  }),
}
```

## 動的に作成する個別記事ページも…

記事一覧ページから個別記事ページに遷移しようとしたら、動的にページが作成されずにエラーとなる現象も出ました。

### ファイル名を変更

バージョン 4 の時は\{mdx.slug}.js だったファイル名を、チュートリアルにもある様に、\{mdx.frontmatter\_\_slug}.js に変更。

### データ取得の記述も修正

4 の時は以下の様な記述でデータを取得していました。（v4 のチュートリアルも、この方法だった様な気がする）

```jsx
import { MDXRenderer } from "gatsby-plugin-mdx"

（略）

<MDXRenderer>{data.mdx.body}</MDXRenderer>
```

う〜ん、何が問題なのかなぁ…　そういえば v5 のチュートリアルで MDXRenderer って出てきたっけ？

- [Render post contents in the blog post page template](https://www.gatsbyjs.com/docs/tutorial/part-6/#render-post-contents-in-the-blog-post-page-template)

MDXRenderer は、使ってない！

- [updating-page-templates](https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#updating-page-templates)

page-templates の変更点みたいな記事もあったので、そちらを見ても MDXRenderer は使わず、children を使っていました。

```jsx
const BlogPost = ({ data, children }) => {
（略）
<article>
        <h1>{data.mdx.frontmatter.title}</h1>
        （略）
        {children}
</article>
```

この様にコードを修正するとエラーにならず、個別記事のページに遷移出来る様になりました。


GatsbyJS を4から5にアップデートしてみる


## onKeyDown

input エリアに検索したい語句を入力して Enter キーを押すと、一致する記事が表示される。

今まではこんな感じでしたが、Enter キーを押さずに、記事の絞り込みがしたいなと。それも複数語句対応で。

```jsx
const keyDown = (e) => {
  if (e.key === "Enter") {
    //console.log("Enterキーが押されました！")
    const word = e.target.value;
    //console.log(word)
    //検索処理
  }
};
```

## onChange

input エリアの入力値に変化があった際に、onChange イベントを使って検索処理を走らせる様にしてみました。

```jsx
const onChange = (e) => {
  const word = e.target.value;
  //検索処理
};
return (
  <input
    type="text"
    placeholder="検索ワードを入力"
    onChange={(e) => onChange(e)}
  />
);
```

input エリアが空の場合は、投稿されている記事全てを表示させる。

何か入力されている場合は、その値を使って検索処理を走らせています。

検索語句はひとまず 3 語まで対応。

input に入力された値の受け渡しは useState を使っているんですが、useReducer を使った方がいいのかなぁ…

useReducer 、勉強せねば…

ひとまずこれで Enter キーを押さずとも、（自動的に）検索処理が走る仕様になりました。


inputエリアの入力値に変化があったら、検索が行われる様にしてみた


## querySelector

input エリアの値は getElementById、e.target.value 以外にも、querySelector を使っても値を取得出来るみたいなので、試してみました。

- [Document.querySelector()・mdn web docs](https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector)

```jsx
const keyDown = (e) => {
  if (e.key === "Enter") {
    //console.log("Enterキーが押されました！")
    // const word = document.getElementById("textval").value
    //const word = e.target.value
    const word = document.querySelector("#textval").value;
    console.log(word);
  }
};
```

input エリアに id 属性が設定されているのであれば、#id 名を。クラス属性ならば、.クラス名を設定してあげます。

## onSubmit

前回は e.key===Enter を使って Enter キーが押されたかを判断していました。

form タグを使っても可能な様なので、こちらも試してみる事に。

- [フォーム（React Docs）](https://ja.reactjs.org/docs/forms.html)
- [HTMLFormElement: submit イベント（mdn web docs）](https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/submit_event)

```jsx
<form onSubmit={keyDown}>
  <input type="text" placeholder="検索ワードを入力" id="textval" />
</form>
```

form に onSubmit を設定

```jsx
const keyDown = (e) => {
  const word = document.querySelector("#textval").value;
  //検索処理
};
```

これで試してみると…

input に検索語句を入力して Enter を押すと、ブラウザがリロードされるだけで、検索処理が行われませんでした。

## preventDefault

- [Event.preventDefault()（mdn web docs）](https://developer.mozilla.org/ja/docs/Web/API/Event/preventDefault)

```jsx
const keyDown = (e) => {
  const word = document.querySelector("#textval").value;
  e.preventDefault();
  //検索処理
};
```

preventDefault を設定する事で、ブラウザのリロードが行われなくなり、検索結果が無事表示されました。

form を使ってのやり方も分かりましたが、今回は e.key===Enter を使っての方法で行こうかと思っています。


querySelectorとpreventDefaultを使ってみる


## 単一語句での検索

以前 GatsbyJS のブログに、検索機能を実装してみた記事はこちら

- [GatsbyJS のブログに検索機能を実装してみる](https://flabaka.com/implement-searchform-gatsbyjs/)

Input エリアに検索語句を入力すると、リアルタイムに記事がリストアップされる感じだったんですが、検索語句は 1 語のみの対応でした。

検索語句を一つ入力して、半角スペースを入力したところで、（記事が）何も表示されなくなっていました。

## 複数語句対応にしてみる

複数語句に対応する様にしたいなぁ…と思っていたので、あれこれやってみました。

1. 検索語句は 3 語まで
1. リアルタイムに記事はリストアップされない

## 検索語句は 3 語まで

検索語句をいくつまで対応させようか迷いましたが、（個人ブログなので）ひとまず 3 語くらいでいいかな？　と。

例えばですが、nextjs、remark、mdx の語句を input エリアに入力し、Enter（Return）を押すと、三つの検索語句全てに引っ掛かる記事がリストアップされます。

```jsx
nextjs && remark && mdx;
```

コードで書いたら、上記の様な感じですね。

## リアルタイムに記事はリストアップされない

input エリアに語句を入力し、Enter（Return）を押すと、検索が行われます。

リアルタイム表示は、今のところ非対応です。（そのうちやるかも？）

当初検索ボタンを配置しようかな？　とも思ったんですが、自分が検索する際は、Enter（Return）を押すことが多いので、今回ボタンは配置しませんでした。

## keypress は非推奨

Enter（Return）は keypress イベントで良さそうかな？　と思ったんですが、調べると非推奨になっているみたいでした。

- [Element: keypress イベント（mdn web docs）](https://developer.mozilla.org/ja/docs/Web/API/Element/keypress_event)
- [Element: keydown イベント（mdn web docs）](https://developer.mozilla.org/ja/docs/Web/API/Element/keydown_event)
- [キーボードイベント（React Docs）](https://ja.reactjs.org/docs/events.html#keyboard-events)

React の Docs には onKeyPress も掲載されているのですが、今回は onKeyDown イベントを使って実装してみました。

```jsx
const keyDown = (e) => {
  if (e.key === "Enter") {
    console.log("Enterキーが押されました！");
  }
};
return (
  <input
    type="text"
    placeholder="検索ワードを入力"
    id="textval"
    onKeyDown={(e) => keyDown(e)}
  />
);
```

React の Docs に、key プロパティで使える値は DOM Level3 Events Spec のドキュメントを見てねとあったので…

- [UI Events KeyboardEvent key Values](https://www.w3.org/TR/uievents-key/#named-key-attribute-values)

Whitespace Keys の箇所に、Enter（Mac では Return）は、"Enter"で OK と書かれていたので、使ってみました。

## input エリアの値を取得

input エリアの値を取得するには、以下の方法で行いました。

```jsx
const keyDown = (e) => {
  if (e.key === "Enter") {
    //console.log("Enterキーが押されました！")
    // const word = document.getElementById("textval").value
    const word = e.target.value;
    //console.log(word)
  }
};
```

e.target.value でも、getElementById でも、どちらを使っても取得出来ました。

自分は e.target.value の方を使っています。

input エリアが空になったら、絞り込んだ記事から全記事を表示する様にしてあります。

ひとまずこんな感じになりましたが、（細かいところは）使いながら修正していくつもりです。


GatsbyJSブログの検索フォームを、複数語対応にしてみる


## プラグイン？

- [Gatsby 公式サイト・Plugin Library](https://www.gatsbyjs.com/plugins)

検索フォームを実装するには、どうしたらいいか？

公式サイトには Search の項目に、プラグインが 3 つ表示されています。

人気なのは、Algolia なんですかね？

う〜ん、プラグインを使わない方法はないものか？　と思い、調べていくと…

## 全文検索？

Algolia の様に全文検索した方がいいよなぁ…とは思いつつも、個人ブログだからそこまでやる必要ある？　とか思ったりもするし…

全文検索するなら、graphql の body とか html に対して、検索処理を行って…という感じになりそう？

記事が増えたら、処理に時間掛かりそうだなぁ…

## graphql で試してみる

```javascript
{
  allMarkdownRemark(filter: {frontmatter: {categories: {eq: "magical creatures"}}}) {
    edges {
      node {
        frontmatter {
          title
          categories
        }
      }
    }
  }
}
```

- [Recipes: Querying Data（GatsbyJS 公式サイト）](https://www.gatsbyjs.com/docs/recipes/querying-data/#filtering-with-graphql)

ドキュメントに上記のソースが掲載されていたので、http://localhost:8000/\_\_\_graphql で以下を試してみました。

```javascript
{
  allMdx(filter: {frontmatter: {tags: {eq: "GatsbyJS"}}}) {
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}

```

これを実行してみると

```javascript
{
  "data": {
    "allMdx": {
      "edges": [
        {
          "node": {
            "frontmatter": {
              "title": "Gatsbyの記事に目次を作成してみる"
            }
          }
        },
        {
          "node": {
            "frontmatter": {
              "title": "このブログについて"
            }
          }
        },
        {
          "node": {
            "frontmatter": {
              "title": "GatsbyJSのブログに検索機能を実装してみる"
            }
          }
        }
      ]
    }
  },
  "extensions": {}
}
```

こんな感じで GatsbyJS というタグがついた記事のタイトルを取得出来ました。

```javascript
{
  allMdx(filter: {frontmatter: {title: {eq: "GatsbyJS"}}}) {
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}
```

次にタイトルに GatsbyJS が入っているものを取得しようとして、上記のコードを実行してみると…

```javascript
{
  "data": {
    "allMdx": {
      "edges": []
    }
  },
  "extensions": {}
}
```

取得出来ない…

title ではなく summary に対して同様に試してみましたが、こちらも上手くいかず…

```javascript
{
  //eqだと取得出来ない（inでも同じ）
  allMdx(filter: {frontmatter: {title: {eq: "GatsbyJS"}, summary: {eq: "GatsbyJS"}}}){
  //neだと取得出来る
  allMdx(filter: {frontmatter: {title: {ne: "GatsbyJS"}, summary: {ne: "GatsbyJS"}}}){
  //ninでも取得出来る
  allMdx(filter: {frontmatter: {title: {nin: "GatsbyJS"}, summary: {nin: "GatsbyJS"}}}){
    edges {
      node {
        frontmatter {
          title
        }
      }
    }
  }
}
```

色々試してみたら、 eq や in ではなく ne と ini を使った場合に、title と summary で値を取得出来ました。

- [Supported comparators（GatsbyJS 公式サイト）](https://www.gatsbyjs.com/docs/query-filters/#supported-comparators)

comparator は上記のページに掲載されていますが、何故 tags の場合と同様に eq や in で取得出来ずに、 ne と nin の場合に取得出来るのかが分からず…

フォームに検索する語句が入力される度に、（graphql の）filter を使ったクエリを発行する方法は、思ったより大変そう…

## 別の方法を考えてみる

他の方法だと、記事内の検索されそうな語句を使って要約を用意して、それに対して検索処理を掛けたら、全文検索っぽいのが出来るんじゃない？

この方法なら全文検索より負荷は掛からなそうだし…

```markdown
---
title: "GatsbyJSのブログに検索機能を実装してみる"
date: "2022-06-17T11:15:00.000Z"
summary: "GatsbyJSで作成したブログに、検索フォームを実装してみました。Algoliaの様に全文検索とまではいきませんが…"
tags: ["GatsbyJS"]
---
```

例えばこの記事だと、gatsbyjs、ブログ、検索フォーム、全文検索 などの語句を使って、要約を作成するという感じですね。

そんなことを考えている時に、以下のブログに行き着きました。

## 参考にさせて頂いた記事

- [GatsbyJS ブログに検索を実装してみた（mottox2 さん）](https://mottox2.com/posts/268)
- [Gatsby 製ブログでサイト内検索を実装しました（diff001a さん）](https://diff001a.netlify.app/gatsby-site-search/)

今回は、diff001a さんの方法で実装してみることに！

## 工夫した点

- [配列内の検索（MDN Web Docs）](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter#searching_in_array)

MDN Web Docs の記事は、filter や indexOf の使い方が、詳しく書かれています。

（自分の場合は）Index ページに検索フォームを設置しているので、投稿された記事一覧を取得するクエリをそのまま使って、（検索用に別途クエリを作成しなくても）実装が出来ました。

検索ワードが入力されたら、キーワードに一致する記事を絞り込み、検索フォームの下に表示する様にしてみました。

検索ワードが入力されていない場合は、投稿されている全記事が表示されます。

（検索ワードを入力した場合）タイトルだけではなく記事の要約も表示されるので、（クリックせずとも、なんとなくですが）あ〜、こんな内容の記事なのね…と理解出来るかなぁと。

最後に、検索フォームにフォーカスが当たった際のアニメーションですが、特に意味はありません。

そういえばフォームに CSS の transition を適用したことないなぁ…と思っていたので、今回ちょっと試してみたまでです。


GatsbyJSのブログに検索機能を実装してみる


## 目次を作るには？

- [Gatsby 公式サイト・Table of Contents in Gatsby](https://www.gatsbyjs.com/plugins/gatsby-remark-table-of-contents/?=table)

目次を作るには、gatsby-remark-table-of-contents と gatsby-remark-autolink-headers のプラグインを使えば、サクッと出来ちゃいそうですが…

Graphql のクエリの中に tableOfContents という項目があるので、それと gatsby-remark-autolink-headers で目次を作成してみたいと思います。

gatsby-remark-autolink-headers の使い方は、いろんな記事になっているので、割愛。

## 以前のブログでも

gatsby-starter-blog を使っていた時は以下の様な手順でやっていました。

コードは以下に掲載されているものでやってみます。

- [Gatsby 公式サイト・Adding Markdown Pages](https://www.gatsbyjs.com/docs/how-to/routing/adding-markdown-pages/)

```javascript
export const pageQuery = graphql`
  query ($id: String!) {
    markdownRemark(id: { eq: $id }) {
      html
      tableOfContents
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        slug
        title
      }
    }
  }
`;
```

http://localhost:8000/\_\_\_graphql で実行すると…

```javascript
{
  "data": {
    "markdownRemark": {
      "tableOfContents": "<ul>
      <li><a href="#%E4%BB%A5%E5%89%8D%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0%E3%81%AF">以前のブログは</a></li>
      <li><a href="#3-%E3%81%8B%E3%82%89-4-%E3%81%AB%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88">3 から 4 にアップデート</a></li>
      <li><a href="#allmdx-%E3%82%92%E4%BD%BF%E3%81%86">allMdx を使う</a></li>
      <li><a href="#staticimage-%E3%81%8C%E4%BE%BF%E5%88%A9%E3%81%9D%E3%81%86">StaticImage が便利そう</a></li>
      <li><a href="#css-%E3%81%AF-styled-components">CSS は styled components</a></li>
      <li><a href="#%E4%BB%8A%E5%BE%8C%E3%81%AF">今後は</a></li>
      </ul>"
    }
  },
  "extensions": {}
}
```

この様な感じで tableOfContents の値を取得出来ます。

```javascript
import React from "react";
import { graphql } from "gatsby";
export default function Template({
  data, // this prop will be injected by the GraphQL query below.
}) {
  const { markdownRemark } = data; // data.markdownRemark holds your post data
  const { frontmatter, html, tableOfContents } = markdownRemark;
  return (
    <div className="blog-post-container">
      <div className="blog-post">
        <h1>{frontmatter.title}</h1>
        <div
          className="XXXXXX"
          dangerouslySetInnerHTML={{ __html: tableOfContents }}
        />
        <h2>{frontmatter.date}</h2>
        <div
          className="blog-post-content"
          dangerouslySetInnerHTML={{ __html: html }}
        />
      </div>
    </div>
  );
}
```

後はコード内にある html を表示する手順に倣って、tableOfContents を表示させます。

## allMdx で同じことを試すと

- [Gatsby 公式サイト・Part 6: Create Pages Programmatically](https://www.gatsbyjs.com/docs/tutorial/part-6/)

チュートリアルページに掲載されている、src/pages/blog/\{mdx.slug}.js で同じことをすると…

```javascript
export const query = graphql`
  query ($id: String) {
    mdx(id: { eq: $id }) {
      frontmatter {
        title
        date(formatString: "MMMM D, YYYY")
      }
      body
      tableOfContents
    }
  }
`;
```

tableOfContents をクエリに追加して、

```javascript
import * as React from "react";
import { graphql } from "gatsby";
import { MDXRenderer } from "gatsby-plugin-mdx";
import Layout from "../../components/layout";
const BlogPost = ({ data }) => {
  return (
    <Layout pageTitle={data.mdx.frontmatter.title}>
      <div
        className="XXXXXX"
        dangerouslySetInnerHTML={{ __html: data.mdx.tableOfContents }}
      />
      <p>{data.mdx.frontmatter.date}</p>
      <MDXRenderer>{data.mdx.body}</MDXRenderer>
    </Layout>
  );
};
```

markdownRemark の時と同じ様にして、実行してみると…

[object Object]と表示されてしまいます。

http://localhost:8000/\_\_\_graphql を開いて、tableOfContents の中を確かめてみると…

```javascript
{
  "data": {
    "mdx": {
      "tableOfContents": {
        "items": [
          {
            "url": "#以前のブログは",
            "title": "以前のブログは"
          },
          {
            "url": "#3-から-4-にアップデート",
            "title": "3 から 4 にアップデート"
          },
          {
            "url": "#allmdx-を使う",
            "title": "allMdx を使う"
          },
          {
            "url": "#staticimage-が便利そう",
            "title": "StaticImage が便利そう"
          },
          {
            "url": "#css-は-styled-components",
            "title": "CSS は styled components"
          },
          {
            "url": "#今後は",
            "title": "今後は"
          }
        ]
      }
    }
  },
  "extensions": {}
}
```

そりゃ、表示されないわ…ということで、コンポーネント化してみます。

src/pages/blog/\{mdx.slug}.js の記述を変更

```javascript
import * as React from "react";
import { graphql } from "gatsby";
import { MDXRenderer } from "gatsby-plugin-mdx";
import Layout from "../../components/layout";
import Toc from "../components/toc";

const BlogPost = ({ data }) => {
  return (
    <Layout pageTitle={data.mdx.frontmatter.title}>
      <Toc tableOfContents={data.mdx.tableOfContents.items} />
      <p>{data.mdx.frontmatter.date}</p>
      <MDXRenderer>{data.mdx.body}</MDXRenderer>
    </Layout>
  );
};
```

ざっくりとですが、目次用のコンポーネントを用意してあげると

```javascript
import React from "react";

const TOC = (props) => {
  const data = props.tableOfContents;
  return (
    <div>
      <h4>目次</h4>
      <ul>
        {data.map((item) => (
          <li>
            <a href={item.url}>{item.title}</a>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TOC;
```

こんな感じで目次用のコンポーネントを作成してあげたら良さそうです。

## 参考にさせて頂いた記事

- [Gatsby のブログに目次を追加した（dnrsm.dev さん）](https://dnrsm.dev/blog/2020/gatsby-mdx-table-of-contents)

（自分は JS ですが）TypeScript ではこう書けばいいのか…と勉強させていただきました。


Gatsbyの記事に目次を作成してみる


## 以前のブログは

以前のブログは、GatsbyJS のバージョンは 3 で、gatsby-starter-blog のテーマを使っていました。

「（GatsbyJS）バージョン 4 になっているんだよなぁ…」と思いながらも長いこと放置してました。

久しぶりに公式サイトを見てみたところ、mdx ファイルを読み込んで表示させるというものが、チュートリアルのページに掲載されていました。（gatsby-starter-blog は、md ファイルの読み込みだった…）

- [Gatsby 公式サイト・チュートリアル](https://www.gatsbyjs.com/docs/tutorial/)

4 から新しい機能も追加されているみたいなので、GatsbyJS に再入門がてら、ブログを作り直してみました。

|                      | 旧ブログ | 新ブログ |
| :------------------- | :------- | :------- |
| バージョン           | 3        | 4        |
| 読み込み可能ファイル | md       | mdx      |

基本的には mdx ファイルの読み込みだけど、gatsby-config.js > gatsby-plugin-mdx > options > extensions に追加指定することで（md ファイルなども）読み込み可能になるらしい…

- [Gatsby 公式サイト・What’s MDX?](https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/?=mdx)

## 3 から 4 にアップデート

- [Gatsby 公式サイト・Migrating from v3 to v4](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v3-to-v4/#update-gatsby-version)

Gatsby のバージョンを 3 から 4 にアップデートするには、上記ページを参考にすると良さそう。

今回は gatsby-starter-blog をアップデートするのではなく、新たに作り直しました。

チュートリアルにある Gatsby Cloud は便利そうだけど、今回は見送ることに…

## allMdx を使う

gatsby-plugin-mdx をインストールした後は、（allMarkdownRemark ではなく）allMdx を使うらしい…

```javascript
export const query = graphql`
  query {
    allMdx(sort: { fields: frontmatter___date, order: DESC }) {
      nodes {
        frontmatter {
          date(formatString: "YYYY-MM-DD")
          title
          description
        }
      }
    }
  }
`;
```

## StaticImage が便利そう

- [Gatsby 公式サイト・Gatsby Image plugin](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/)

```javascript
import { StaticImage } from "gatsby-plugin-image"

return (
    <Layout>
        <StaticImage src="./hoge.jpg" alt="XXXXXX" layout="constrained" />
    </Layout>
```

こんな感じでクエリを使わずに画像を表示出来るみたいです。

## CSS は styled components

CSS は何にしようかな…と思ったんですが、ひとまず styled components で良いかな？　と。

コンポーネントベースで作成していくには、CSS は何がベストなのかを探りつつ、色々試していこうかなと思っています。

## 今後は

今後も React、GatsbyJS、CSS の勉強を続けながら、TypeScript と NextJS で（ブログでも）作ろうかなぁ…とか思ったりしています。


タイトル	投稿日時
GatsbyからNextJSに移行してみた	2023-03-24
markdownのtable記法、ブラウザでの表示が崩れる	2023-03-11
ビルドすると、mdxファイルがパースエラーになる	2023-03-02
CentOSからRockyLinuxへ移行してみた	2023-02-28
GatsbyJS を4から5にアップデートしてみる	2023-02-15
inputエリアの入力値に変化があったら、検索が行われる様にしてみた	2022-08-03
querySelectorとpreventDefaultを使ってみる	2022-08-01
GatsbyJSブログの検索フォームを、複数語対応にしてみる	2022-07-29
GatsbyJSのブログに検索機能を実装してみる	2022-06-17
Gatsbyの記事に目次を作成してみる	2022-06-02
このブログについて	2022-06-01

GatsbyJSの記事、11件あります