GatsbyJSを使ってみて地味に詰まったポイントがscriptタグの扱いでした。 僕のようになんとなくjavascriptを使い始めた方もいるかもしれないので、今回はGatsbyJSでのscriptタグに関する注意点について書いてみました。

Markdownファイルに書き込んだScriptタグは実行されない

まず最初はこれです。

サブタイトルにも書きましたが、GatsbyではMarkdown中のScriptタグはエスケープ処理されてしまうため実行されません。 Markdown中のscriptタグを実行させるには、専用に作られたプラグインを導入するか、自分でそれように作り込む必要があります。

プラグインについてはTwitterやYoutubeといった大手サイトに適合したものはGatsbyJSの公式サイトで多数見つけられるので大丈夫でしょう。

アフィリエイト関係は少し考える必要がありそうです

国内のアフィリエイトサイトが用意したスクリプトの場合は自分でなんとかする必要がありそうです。

たとえば僕の使っている「もしもアフィリエイト」でのことですが、ここでは「かんたんリンク」というソース生成ツールが提供されているのですが、そこで生成されるソースをただ貼り付けるだけでは動作しません。 なぜならこのソースにはjavascriptの処理が含まれているからです。

この場合、広告を管理するjsファイルを別に用意し、そちら側で操作を実行させる必要があると思います。

ただ僕としては後々の編集を考えた場合、広告に関することは該当する記事ファイルのみに記述したいという思いが強いので、カエレバのHTMLソースを使うようにしています。 （カエレバのHTMLソースにはscriptが含まれていないので問題なく動作します。）

Googleのトラッキングコードについて

Googleアナリティクスのトラッキングコードのようにページのデータを逐一収集する場合、与えられたトラッキングコードをただ貼り付けただけでは正確なデータを拾うことはできません。 これはReactの特性によるものなので、手軽な方法という意味では、公式によるプラグインの利用が一番だと思います。

HTMLヘッダーにscriptタグを差し込む方法について

HTMLヘッダーにscriptタグを差し込む場合、一番簡単な方法はreact-helmetを利用することです。

単なる読み込み用のscriptタグの場合

読み込みだけで良い場合はHelmetタグ内にそのまま書き込めば使えます。

<Helmet>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</Helmet>

なんとなくjqueryを例に使ってみました。

js処理が含まれる場合

ここでいうjs処理が含まれるコードとは次のような形のものの場合です。

<script>
jsコード
</script>

こういうscriptタグで挟まれたjsコードを手動で差し込む場合、公式ではReactのdangerouslySetInnerHTMLを使うよう推奨されています。 しかし、React公式によるとscriptタグではdangerouslySetInnerHTMLは実行されないようになっているとのことで、結論としてはこの方法は無効となります。

この場合は{``}で挟み込むと、うまく対応できます。

<script>
{`
jsコード
`}
</script>

Helmet以外の方法

Helmetを利用する以外は、html.jsを.cacheフォルダからsrc/html.jsへとコピーして活用する方法やgatsby-ssr.jsを使う方法がありますが、僕は使ってないのでこれらについては割愛します。