gatsby で日本語が文字化けしたがファイルエンコーディングの問題だった

gatsby でサイトを作成している際に、日本語の文字化けが発生した。

その原因と解決方法を記載する。

TL;DR

ファイルエンコーディングが iso-2022-jp になっていたので、utf-8 に変更すれば解決した。

Vim でやる場合は、コマンドモードで以下、

:set fileencoding=utf-8

経緯

Gatsby で作成している自分のブログに、タグ一覧ページを作ろうとしている。

その際に、ページに表示する日本語が文字化けする問題に直面した。

以下のコードである。

import React from 'react'
import Layout from "gatsby-theme-blog/src/components/layout"
import SEO from "gatsby-theme-blog/src/components/seo"
import Footer from "gatsby-theme-blog/src/components/home-footer"
import PostList from "gatsby-theme-blog/src/components/post-list"

const Tag = ({ location, data, pageContext }) => (
  <Layout location={location} title={data.site.siteMetadata.title}>
    <SEO title={pageContext.tag + " - tag pages"} />
    <main>
      <h1>
        {pageContext.tag} tag (total {data.allBlogPost.totalCount} pages)
      </h1>
      <p>こんにちは</p>
      <PostList posts={data.allBlogPost.edges} />
    </main>
    <Footer socialLinks={data.site.siteMetadata.social} />
  </Layout>
)

export default Tag

の

<p>こんにちは</p>

で以下の文字化け

$B$3$s$K$A$O(B

デプロイ済みのブログページでも日本語を使っているが、文字化けしていない。

font の設定はデプロイ済みのページとおなじになっているのになぁ。。。というお気持ちだった。

該当ファイルのエンコーディングを確認すると

fileencoding=iso-2022-jp

だった。 ちなみに、vim でファイルのエンコーディングを確認するには

:se fenc?

を打てばよい。

適切に日本語が表示されるファイルだと、以下のようにちゃんと utf-8 になっていたので、これが原因みたい。

fileencoding=utf-8

というわけで、utf-8 にファイルエンコーディングを vim で変更。

:set fileencoding=utf-8

無事に、日本語が表示された。

なぜ、ファイルエンコーディングが iso-2022-jp になっていたか？

vim で新規ファイルを作成する際は、デフォルトで utf-8 になるように設定している。

なので、エディタの問題ではない。

問題があった該当のファイルは、shadowing するために、

node_modules/gatsby-theme-blog-tags/src/components/tag.js

からコピーしてきたものだった。

node_modules にダウンロードされるファイルは、自動で言語設定を読み込んで、iso-2022-jp になっているようだった（余計なお世話）。

これは、npm とかの設定で変えられると思うが。。。

（npm を普段使わない身としては、思わぬ落とし穴だった）

2021-01-04 追記

これは npm の問題ではなく、自分の .vimrc の設定の問題だった。

~/.vimrc で下記のように設定していたため、iso-2022-jp としてファイルが保存されてしまっていた。

set fileencodings=iso-2022-jp,euc-jp,sjis,utf-8

下記のように utf-8 を優先順位の先頭に持ってくることで、このトラブルを解決した。

set fileencodings=utf-8,iso-2022-jp,euc-jp,sjis