【日記】Gatsbyの勉強⑥

前回の続き。gatsby newで作成されるページにgatsby-starter-default-i18nのソースを取り込んで色々試してみたけど、わからなかったので結局言語ごとのファイルのリンク情報を直接修正することに。

 index.jp.js → page2.jp.jsの場合はこんな感じに。この部分を書き換えずにうまくルーティングしてくれる方法があれば良かったんだけど見つからなかった（ご存じの方がいればコメントで教えて下さい） 。

<Link to="/page2/">page2</Link>
↓
<Link to="/jp/page2/">page2</Link>

検証していた際の不明点のメモ。

react-helmetってなに？

react-helmetについて

headタグを管理するコンポーネントらしい。

react-intlのaddLocaleData

react-intlでググって調べるとどのサイトも大体これを使っているんだけど、廃止になっているみたい。

Upgrade Guide (v2 -> v3) | Format.JS

言語毎の設定ファイルをyamlで構造的に管理

Test:
  msg: メッセージ

というようなyamlを用意して、

<FormattedMessage id="Test.msg"/>

というような形で呼び出したい。

・yaml-flat-loaderを導入
・GatsbyのWebpackの設定変更
でいけそうかな。

yaml-flat-loaderの導入は、npmでサクッと。
問題は、Webpackの設定の方かな。

Adding a Custom webpack Config

To add custom webpack configurations, create (if there’s not one already) a gatsby-node.js file in your root directory. Inside this file, export a function called onCreateWebpackConfig.

ということなので、gatsby-node.jsをこんな感じに修正。

import messages from '../data/messages/jp.yml'

でyamlをjsonで読み込んで、読み込んだ情報をIntlProviderのmessagesに渡せばうまくいきました。

あと、検証していく際にVS Codeを色々とカスタマイズしました。
VS Codeもまだなれていないので、色々試して慣れていきたい。

vs codeで言語ごとのタブ設定

javascriptのタブ設定を4→2に変更

Visual Studio Codeで言語ごとにインデント設定を行う方法

vs codeでgatsbyのデバッグ

これでchromeでデバッグできるようになりました。とても便利！

VSCodeでgatsbyのデバッグをする - Qiita