GatsbyJSサイトにカスタムJavaScriptを追加する方法

GatsbyJSはReactフレームワークですが、カスタムJavaScriptをGatsbyプロジェクトに追加する方法を知っておくと便利です。おそらく、古いWebサイトをGatsbyに移動したばかりで、今はReactJS構文に変換するのがあまり好きではないカスタムバニラJavaScriptがたくさんあると思います。

幸い、プレーンなJavaScriptをGatsbyに追加することはまったく難しくありません。必要なのは、単純なファイルhtml.jsを公開することだけです。 、これはデフォルトではGatsbyプロジェクトに表示されません。

html.jsを公開（利用可能）するには ファイルを開き、ターミナルを開き、Gatsbyプロジェクトフォルダのルートに移動して、次のように入力します。

cp .cache/default-html.js src/html.js

今html.js srcで利用可能です Gatsbyプロジェクトのフォルダ。

html.jsの内部 ファイルあなたがおそらく認識しているHTML構文の束があります。既存のコードには触れないでください。ただし、dangerouslySetInnerHTMLを使用してdiv要素に注意してください。 属性。 <script>で同じ属性を使用する必要があります エレメント。

次のスニペットをすぐ上にコピーして貼り付けます html.js ファイルの終了本文タグ</body> ：

<script
  dangerouslySetInnerHTML={{
    __html: `
    console.log('Plain JavaScript inside Gatsby!');
`
  }}
/>

変更を保存してGatsbyサーバーを起動するか、Gatsbyが既に実行されている場合はブラウザタブを更新します。正しく実行すると、Chromeコンソールに次のメッセージが表示されます。

Plain JavaScript inside Gatsby!

スクリプト要素内にアラートメッセージを含むクリックイベントを追加してみてください：

document.body.addEventListener('click', function() {
  alert('JavaScript!')
})

これで、ページの任意の場所をクリックすると、「JavaScript！」というアラートメッセージがポップアップ表示されます。

リソース：

（カスタムJavaScriptの追加）[https://www.gatsbyjs.org/docs/custom-html/#adding-custom-javascript]