Contents
まとめ
- gatsby-theme-blog のデフォルト設定では数式対応していない
はじめに
gatsby-theme-blog で数式使えるかどうかを実験しながら調べました．
結果 gatsby-theme-blog のデフォルト設定では数式は使えませんでした．
数式を使った記事を将来的には書きたいと考えているので良い機会なので gatsby-starter-blog に乗り換えることにしました．
gatsby-starter-blog はデフォルト設定で数式が使えるので楽チンでした．
(デフォルト設定で ok と言ってもプラグインをインストールしてプラグインの設定をする必要はあります)
本記事では
- gatsby-theme-blog で数式が使えない原因
- gatsby-theme-blog で数式を使うにはどうすれば良いのか
この2点を中心にして解説します．
それではどうぞ！
gatsby-theme-blog で数式が使えない理由
同じことを考えている人は世界のどこかに大体いる
gatsby-theme-blog ではなぜ数式が使えないのか．
同じことを考えている人や同じことを経験している人ってのは大体ググったら見つかります．
今回も同じことを経験している人を見つけました↓
how to add katex plugin into gatsby-theme-blog @StackOverflow
この質問のスレッドを読むと gatsby-theme-blog で数式が使えない理由がわかります．
その理由とは次の通りです．
gatsby-theme-blog では gatsby-node.js で HTML ファイルを生成していないから期待通りの結果が得られない
さらに回答者さんは原因を指摘するだけではなく次の解決策も同時に提示しています．
gatsby-starter-blog を使うか gatsby-theme-blog に gatsby-node.js を追加して必要な実装をするかだ
素晴らしい回答者さんです． ハンドルネームは @acagastya という方です． 回答していただいてありがとうございます．
回答者さんの裏取り
ということで回答者さんの指摘した原因と提示した解決策の裏取りをしてみましょう．
gatsby-theme-blog の Github リポジトリはこちら: https://github.com/gatsbyjs/gatsby-starter-blog-theme
gatsby-starter-blog の Github リポジトリはこちら: https://github.com/gatsbyjs/gatsby-starter-blog
gatsby-theme-blog の Github リポジトリを見ると確かに
gatsby-node.js は見当たりませんでした．
一方 gatsby-starter-blog の Github リポジトリを見ると確かに
gatsby-node.js
が見当たりました．
その見つかった gatsby-node.js 内に
createPage
という GatsbyJS API を叩いている箇所も見つかりました．
gatsby-theme-blog に足りない実装というのはおそらくこの createPage API を叩く処理でしょう．
GatsbyJS では同じ形式の HTML ファイルを大量に生成するなら，
この createPage API を叩くのが常套手段だからです．
回答者さんはそこまで細かい指摘はしていませんが自分はそう理解しました．
ということで回答者さんの裏取りも ok ですね．
ほんと素晴らしい回答者さんです．
自分の方針
gatsby-theme-blog で数式を書くには追加実装する必要がある．
gatsby-theme-blog を半年間くらい触っているのですがちょっと使いづらいかな感があります．
継承に継承を重ねている感じでちょっと取っ付きづらいんですよね．
GraphQL を記載しているファイルとその GraphQL で引っ張ってくるデータを使うファイルが別だったり．
初心者にはちょっと厳しめなんですよね．
ということで gatsby-theme-blog から gatsby-starter-blog に乗り換えることにしました．
現時点 (2021-05-06) では既に gatsby-starter-blog への移行は完了しています．
移行作業をしていて気付いたことがあります．
それは…
gatsby-starter-blog むっちゃ使いやすいわ． GraphQL も同じファイルに記載されているし． GatsbyJS の鬼門である画像の取り扱い方も今までより遥かに簡単になっているし． gatsby-theme-blog で疲弊していた自分アホみたいやな
です．
gatsby-theme-blog に使いづらさを感じている人は gatsby-starter-blog に乗り換えると幸せになるかと思います．
ぜひぜひ．
もちろん gatsby-starter-blog では数式が使えますよ．
世界で一番美しい式ですね，オイラーの公式．
おわりに
gatsby-theme-blog では数式が使えないけど gatsby-starter-blog では数式が使えます．
gatsby-theme-blog で数式を使えるようにしたい人は
gatsby-node.js ファイルに createPage API を実行する実装をしてください．
gatsby-stater-blog に乗り換える人はチャキチャキと乗り換えちゃってください．
gatsby-starter-blog を使うと従来の GatsbyJS の煩わしさから開放されます．
GatsbyJS のオライリー本が 2021-12-21 に出版されるそうで 2025年くらいまでは GatsbyJS が盛り上がって欲しいなと期待しています．
ちなみに本の表紙はこんな感じになるそう↓
Gatsby: The Definitive Guide: Build and Deploy Highly Performant Jamstack Sites and Applications
最後までお読みいただきありがとうございました．
良い一日を！
執筆機材
- Xiser Pro Trainer (ステッパー)
- HHKB Professional 墨 (キーボード)
- HHKB キートップセット 白 (キートップ)
- Apple Magic Mouse 2 (マウス)
- Apple MacMini (PC)
- iiyama Display 27inch FullHD (ディスプレイ)
- KINTO UNITEA 550ml (コップ)
