ハカセノオト

moon indicating dark mode
sun indicating light mode

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

August 11, 2020

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 を普段使わない身としては、思わぬ落とし穴だった)


hnishi のブログ
技術系の記事など。
綺麗に書こうとすると続かない気がするので、割と雑に、備忘録的に書いていく方針。
内容に誤りがあった場合などのご連絡は、Twitter の DM などで頂けると幸いです。