ReactやGatsbyでのGoogleAdsense埋め込み
#React#Gatsby#GoogleAdsense✎ 2021-08-09Reactで動くサイト上に GoogleAdsense の広告コードをそのまま埋め込んでもエラーとなるため、解消法と例をまとめています。
@あまじ✎ 2021年12月19日に更新
Gatsby のバージョンでの変化まとめ、バージョン2 から バージョン4 へのアップデート記録
概要
当ブログでも使用しており、Facebook 社や Nike 社、AirBnb社などでも使用しているフレームワーク「Gatsby」について、各バージョンごとの違いを超概要で備忘としてまとめています。
Gatsby の各バージョンでの差分
超概要のみ記載しています。
詳細や正確な一次情報としては後述の参考の項目にリンクとして載せている公式ページを御覧ください。
| バージョン/リリース | 概要 |
|---|---|
| v1 / 2017年7月 | - React 15 ベース、SSR ビルド時に GraphQL 利用 |
| v2 / 2018年9月 | - v1 からビルド時間が最大 3～4 倍に - v1 からビルド時の JavaScript のサイズを 31% 小さく - 使用ライブラリを webpack 4、Babel 7、React 16.5 に。Nodejs バージョン10 以上で動作 |
| v3 / 2021年3月 | - 開発モードでインクリメンタルビルド（テンプレ更新などでページデータが再生成されるように）が標準で使用可能に - 開発モードでわかりやすいエラー情報が表示されるようになった - 使用ライブラリを webpack 5、React 17、GraphQL 15 に変更。Nodejs バージョン12 以上で動作 に変更 - React v17になったので useHook など便利なReact新機能が利用可能に - gatsby-image が非推奨になり、gatsby-plugin-image を使用することに。それに伴い JSX、TSX 内の IMG タグの利用が非推奨に |
| v4 / 2021年10月 | - Deferred Static Generation（DSG） 機能でアクセス時に動的にページデータが生成されるように - 並列クエリの実行でビルド時間の最大 40 % 程度削減 - 使用ライブラリを webpack 5、React 17、GraphQL 15 に変更。Nodejs バージョン14 以上で動作 に変更 - React v17になったので useHook など便利なReact新機能が利用可能に - gatsby-image が非推奨になり、gatsby-plugin-image を使用することに。それに伴い JSX、TSX 内の IMG タグの利用が非推奨に |
ご参考までに、当ブログは 200 記事程度ですが、結構載せている画像が多く、Gatsby v2 時点ではビルドに 10 分程度かかっていましたが、Gatsby v4 にアップデートすることで 2 分程度にビルドが大幅短縮されました。
ここまで高速化されるとアップデートして良かったと思います。
参考
変更履歴
| 日付 | 変更概要 |
|---|---|
| なし |
送信しました！
コメント、ありがとうございます。
なんかエラーでした 連絡先： メッセージ：
ごめんなさい。エラーでうまく送信できませんでした。ご迷惑をおかけします。しばらくおいてから再度送信を試していただくか、以下から DM などでご連絡頂ければと思います。
Twitter:@NodachiSoft_jpお名前：戻る
内容の確認！ 連絡先： メッセージ：
以下の内容でコメントを送信します。よろしければ、「送信」を押してください。修正する場合は「戻る」を押してください
お名前：Roboto からの操作ではないという確認のため確認キーを入れてください。
確認キー＝95
戻る
/ 送信確認へ
コメント欄
コメント送信確認へ
関連ありそうな記事(5件)です！
目次
Gatsby のバージョンでの変化まとめ、バージョン2 から バージョン4 へのアップデート記録
Gatsby のバージョンでの変化まとめ、バージョン2 から バージョン4 へのアップデート記録
概要
概要
Gatsby の各バージョンでの差分
Gatsby の各バージョンでの差分
参考
参考
変更履歴
変更履歴