HomeTechDesignDaily

もくじ

Tech

  • microCMS
  • Netlify
  • Gatsby

初心者がGatsby+MicroCMS+NetlifyでJAMStackブログを作ってみて躓いたところ

2024/02/01

はじめに

みなさん初めまして。
今回、ReactのフレームワークであるGatsbyを使ってJAMStackブログを作ったので、その時に躓いたことを列挙していこうと思います。
この記事がJAMStackを通して勉強しようと思っている方の補助になれば幸いです。
ちなみに、僕自身はGatsbyどころかReact自体触ったことがなく、Reactの勉強＋JAMStackを作ってみたい！という単純な気持ちでこの構成にしています。
そのため、間違っている箇所などあるかもしれませんが、大目に見てください…
ブログを作るためにやったことなどは別の記事で書くかもしれません。

躓いたところ

netlifyのデプロイができなかった

10:37:08 PM: error Gatsby requires Node.js 18.0.0 or higher (you have v16.18.1).
10:37:08 PM: Upgrade Node to the latest stable release: https://gatsby.dev/upgrading-node-js
10:37:08 PM: ​
10:37:08 PM: ────────────────────────────────────────────────────────────────
10:37:08 PM:   "build.command" failed                                        
10:37:08 PM: ────────────────────────────────────────────────────────────────
10:37:08 PM: ​
10:37:08 PM:   Error message
10:37:08 PM:   Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1)

解決策
NetlifyのデフォルトのNode.jsバージョンがv16.18.1だから最新のGatsbyの求めるNode.jsのバージョンが足りてなかった
これはルートディレクトリに .node-version というファイルを作って、中身に v18.0.0 以上の任意の文字列を置いておけば指定のNodeバージョンでデプロイしてくれるみたいです

カテゴリ一覧のページが一生表示できなかった

Gatsby意味わかんなさすぎて一生ページを表示することができなかった
404出されすぎててほんとにキレそうだった

解決策
graphQLで自分のカテゴリID取得しないとそもそもページが生成されないということに気が付きました
そりゃカテゴリID知らないのにページ生成なんてできないのは当たり前ですが、 {microcmsCategories.categoriesId}.js という名前にしとけば勝手にカテゴリ取得してくれるもんだと思ってたのでだいぶハマりましたね

カテゴリ一覧で絞り込んだ記事一覧が出力できなかった

カテゴリ一覧ページが出せたのはよかったんですけど、次はgraphQLでほしい記事を絞り込んで検索ができなかった
公式のブログを見てても、 query($id: String!)というどこから出てきたか、何を取得してるのかもわからない変数宣言が出てきてそれでフィルターしてたのでそのままパクったんですけど案の定ダメでした
探してもなんかよくわかんなくて……

解決策
よくわかってないですが、query($categoriesId: String!) という名前に変えたらなぜか行けました
これってgraphQLでcategoriesIdというのを取得してるからなんですかね……？

作ったコンポーネントが読み込めなかった

目次用のコンポーネントを作ってサイドメニューで表示しようと思ってたのに全然使えませんでした
ファイル構成も間違ってないし、ファイル名も間違ってないし…でも何度やってもimportしたものがグレーアウトして 'tableOfContents' is defined but never used no-unused-vars （tableOfContentsって宣言してるけど1回も使われてねーぞ！）って言われる

解決策
初歩的なミスだけど、コンポーネントの最初は大文字にしないと認識してくれないらしいですね
https://zenn.dev/shuhei308/articles/b3aa2b8732f63d　こちらの記事を参考にしました。ありがたや。

v-ifみたいな「booleanでの出し分け」ができなかった

「このデータが存在するときはdivだして…なければ出力しない…」とか、「この数以上のアイテムがあればMoreボタン用意して…そうじゃなければ以上ですという文字を出して…」みたいなことをしたいときが何度も出てきましたが、やりかたがわからなかった…

解決策
根本的な解決には未だ至ってないです
というか、ここに関しては人によってやり方が変わる部分っぽいですね
「Trueのときだけ出力する」という意味であれば、

{(条件) && <trueの時に返される値>}

という表記ができるそうです。
もしくは、外部の関数として呼び出すという形にもできそうです

const switchMessage = (value) => {
  if value {
    return '<p>Trueだよ</p>';
  } else {
    return '<p>Falseだよ</p>';
  }
}
  
return(
<div>
  {switchMessage(true)}
</div>
)


詳しいことはこちらの記事に書いてありましたので、参考として載せておきます
https://chaika.hatenablog.com/entry/2019/05/16/083000

GraphQLから存在しない値があると言われてビルドできなかった

If you don"t expect "eyecatch" to exist on the type "MicrocmsBlogs" it is most likely a typo. と言われた
確かに記事にアイキャッチがないこともあるが、今までエラー出たことなかったので困った…
このブログを公開するにあたって過去に公開していたテスト用の記事を非公開にしたのだが、過去に存在していた記事にはアイキャッチがあったがそれを消すことでアイキャッチを持つ記事が0になったことにより出てきたエラーなんでしょうねきっと


解決策
以下の記事を大いに参考にさせていただいて、スキーマを設定しました
https://qiita.com/baan_nasebanaru/items/89036aa975f99bd3a0cf
ルートにあった gatby-node.js に、新たに以下の記述を追加しました

exports.createSchemaCustomization = ({ actions }) => {
    const { createTypes } = actions
    const typeDefs = `
    type MicrocmsBlogs implements Node {
      eyecatch: URL
    }
    type URL {
      url: String
    }
  `
    createTypes(typeDefs)
}


実際のクエリのコードは MicrocmsBlogs > eyecatch > url となっていて、そこで存在しないよ！というエラーが起きているので、そこだけ定義してあげればいいみたいです
とはいえ、その人によってAPIで受け取る値が違うと思うので、きちんと全てのデータに対してスキーマの定義をしてあげた方が良いと思います
ここらへんの型定義はTypeScriptを思い出すので嫌ですね…

---

躓いたところは以上で終わりになります
もし、今後も躓いたところがあれば追記していきます
余談ですが、このブログを時間をかけて作っていた（半年くらい放置してた…）らリッチエディタが新しいものに生まれ変わってしまい、それに合わせてまたデザインを作り直す必要が出てきたので、その対応が終わったらその記事も書こうかなと思っています
今まで作ったものをバージョンアップする（Vue2からVue3にする、みたいな）経験がないので、初めてのバージョンアップ対応ということでそういう観点から記事が書ければいいなと思います
とはいえCSSをちょっと修正するくらいなんだろうなとは思いますが笑

© 2024 - Built with Love.