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

GatsbyJSはReactベースのフレームワークですが、プロジェクトにプレーンな（バニラ）JavaScriptを追加したい場面は意外と多くあります。たとえば、旧サイトからGatsbyへ移行したばかりで、React構文への書き換えがまだ済んでいないカスタムスクリプトが大量にある――そんな経験はありませんか？

幸い、Gatsbyに素のJavaScriptを追加するのはそれほど難しくありません。ポイントは、デフォルトではプロジェクト内に表示されない html.js というファイルを公開（利用可能な状態に）することです。

html.jsファイルを公開する

まず、ターミナルを開き、Gatsbyプロジェクトのルートフォルダに移動して、以下のコマンドを実行します。

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

これで src フォルダ内に html.js ファイルが作成されます。

スクリプトタグを追加する

html.js を開くと、見覚えのあるHTML構文が並んでいます。既存のコードには一切触れず、dangerouslySetInnerHTML 属性が付いたdiv要素に注目してください。<script> 要素でも、この同じ属性を使用します。

次のスニペットをコピーし、html.js の閉じbodyタグ </body> の直前に貼り付けてください。

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

変更を保存し、Gatsbyの開発サーバーを起動します。すでにサーバーが稼働している場合は、ブラウザのタブを再読み込みしてください。正しく設定できていれば、Chromeのコンソールに次のメッセージが表示されるはずです。

Plain JavaScript inside Gatsby!

クリックイベントで動作を確認する

さらに一歩進んで、script要素内にアラート付きのクリックイベントを追加してみましょう。

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

これで、ページ上のどこかをクリックすると「JavaScript!」というアラートがポップアップ表示されるようになります。

参考リソース

より詳しい情報については、GatsbyJS公式ドキュメントのカスタムJavaScriptの追加に関するページを参照してください。