Gatsby.js 使い方メモ（つまづいた点と解消法）

Gatsby.jsのLP実装で制作とは異なる点があったのでメモ
※今後も追加予定。

背景

初めてGatsby.jsをさわってみて、WEB制作とは異なる点があり、その仕様を理解するのに時間がかかったので、理解用にメモ。

注意

• aタグは使用せず、Linkタグを使用
  ブラウザでは、「ページ遷移」ではなく、「同じページで描画を書き換えている」
  DOM描画時に、aタグに変換される

• pタグでは画像を囲えない
  ↓以下だと、<p class="img_box"></>が認識されない。

<p class="img_box">
  <Staticimage
    alt=""
    src=""
  />
</p>

パッケージのインストールで役立った記事

npmは使用したことがあったが、yarnは今回が初めて。
下記記事が両者のコマンドを比較しており、役立った。

・npmとyarnのコマンド早見表
https://qiita.com/rubytomato@github/items/1696530bb9fd59aa28d8

インストール、アンインストールコマンドをよく使った。

gatsby-config.jsは編集しない方が良さげ → そんなことはなかった

ファイルを見ると、google fontsが読み込まれており、font-weight 700のみ指定されていた。

{
  resolve: `gatsby-plugin-webfonts`,
  options: {
    fonts: {
      google: [
        {
          family: `Noto Sans JP`,
          variants: [`700`]
        },
        {
          family: `Roboto`,
          variants: [`400`]
        },
      ],
    },
  },
},

他のweightも追加したかったので、（下記ドキュメントを参考に）400, 500を追加したところ・・・

variants: [`400`, `500`, `700`]

ブラウザ側では以下のようなアラートが・・・

直訳すると

gatsby-config.jsへの変更を適用するには、開発プログラムを再起動する必要があります。
今すぐ開発プロセスを再開しますか？

その後エラーが出て、変更を戻してもエラーが直らなくなった。
yarn developして再度サーバーを立ち上げてもエラーが直らず。

結局、リポジトリを別フォルダにcloneし直して、ファイルを上書きして対応して元に戻すことに。

今の仮説

gatsby-cofig.jsは編集しないようにした方が良さそう。
・・・しかしドキュメントにはEdit gatsby-config.jsと記載されているのが謎。

↓

他のパッケージをインストールしたが、その際はgatsby-cofig.jsを編集してもエラーにならなかった。
この仮説は間違っていた。
編集しても良いし、gatsby-plugin-webfontsパッケージに問題がありそう。

webfontsの実装【結局gatsby-plugin-webfontsでうまくいった】

前述の通り、gatsby-plugin-webfontsが使われていたものの、新たなfont-weightを追加しようと思うとエラーが出る。

そこで、新しいパッケージをインストールして対応することにした。

↓

いくつか試してみるも500が適用されない

↓

そこでその後、もう一度gatsby-plugin-webfontsの設定を追加してみると
variants: [`400`, `500`, `700`]

うまく適用された。
以前はなぜエラーが出たか、原因は分からないが結果的にうまくいった。

スムーススクロール実装

【先に結論】↓↓gatsby-plugin-smoothscrollパッケージでは実装できなかった

下記記事を参考に実装
・公式ドキュメント
https://www.gatsbyjs.com/plugins/gatsby-plugin-smoothscroll/

・Gatsby.jsのおすすめプラグインをまとめてみた
https://webcraftlog.net/best-gatsbyjs-plugins/

①yarn add gatsby-plugin-smoothscrollでインストール
②gatsby-config.jsに以下を追記

plugins: [
  `gatsby-plugin-smoothscroll`
]

※ここでローカル環境でアラートが出てヒヤッとしたが、フォントの時とは違いエラーにはならなかった。
しかし、LinkタグでonClick実装ができず断念（アンインストール）
別のパッケージで試してみる

【これでも無理だった】react-scrollパッケージ

次にこちらで試してみる。

・react-scroll を導入し超簡単に画面内のスクロールを実装しよう
https://fwywd.com/tech/install-react-scroll

ページ内リンクでのスムーススクロールは実装できた。
だが、他のページからの遷移ができない。
アンインストール。

【これで実装できた】react-anchor-link-smooth-scroll

ここで紹介されているプラグインで実装できた。
https://qiita.com/kume_krowl/items/607516e8878ac0653425

ただし、今回の仕様として、「別ページから遷移」 &&　「ページ内遷移」 なので
headerを分ける必要がありそう。

• ページ遷移とページ内遷移を併せ持たせることは出来なさそう
• headerを出し分けする
• 読み込むlayoutを分ける

この通りに進めたら実装できた。
headerの出し分けをしないと、↓この両立は出来なさそう。

「別ページから遷移」 &&　「ページ内遷移」

モーダル実装

■以下の流れで実装
・クリックしたらクラスを追加、削除（つまりtoggle）

Reactの場合、どう書いたら良いか、どこに書いたら良いか全く分からなかったが記事を見て、実装できた。
・【React】onClickでclassNameをつけたり外したりする方法
https://ralacode.com/blog/post/react-toggle-classname/