JavaScript の動的文字列生成とクオートの問題

この記事では、JavaScriptで動的に生成された文字列に関する問題と、その解決方法について説明します。特に、動的なスクリプト生成の際に発生するクオートの扱い方について詳しく見ていきます。

問題の背景

以下のようなJavaScriptコードがありました。

script.text = '(admaxads = window.admaxads || []).push({admax_id: ' + id + ',type: "banner"});';

一見すると、id の値が動的に挿入されており、特に問題はないように見えます。しかし、実際に実行してみるとエラーが発生していました。

Uncaught SyntaxError: missing exponent

このエラーは、id の値が意図通りに扱われず、広告ライブラリが期待する形式になっていないことが原因でした。

実行する前にコードを見る限りでは、構文自体にはエラーがないように見えます。以下のように、文字列を動的に結合してスクリプトを生成しています。

script.text = '(admaxads = window.admaxads || []).push({admax_id: ' + id + ',type: "banner"});';

しかし、id が数値であった場合や未定義であった場合に問題が発生します。例えば、id が 12345 であるとすると、生成されたスクリプトは次のようになります。

(admaxads = window.admaxads || []).push({admax_id: 12345,type: "banner"});

admax_id に渡される 12345 は、文字列として扱われることを期待しているライブラリにとっては不適切な形式です。この結果、広告ライブラリがエラーを返します。

JavaScriptでは、動的に生成された部分において、データ型が適切でない場合に問題が発生します。このケースでは、admax_id は文字列として渡される必要がありましたが、クオートで囲まれていないために数値として扱われ、エラーになっていました。

さらに、id が未定義（undefined）であった場合、次のようなスクリプトが生成されてしまいます。

(admaxads = window.admaxads || []).push({admax_id: undefined,type: "banner"});

この状態では、admax_id が期待される値の形式に合致しないため、やはりエラーになります。

この問題を解決するためには、id をクオートで囲み、常に文字列として扱うようにする必要があります。以下のように修正しました。

script.text = '(admaxads = window.admaxads || []).push({admax_id: "' + id + '",type: "banner"});';

この変更により、生成されるスクリプトは次のようになります。

(admaxads = window.admaxads || []).push({admax_id: "12345",type: "banner"});

これで、admax_id は文字列として正しく扱われるようになり、エラーが発生しなくなりました。

実行前のコードでは、id の中身が何になるかは動的に決まるため、エディターや構文チェッカーがエラーとして認識することは難しいです。問題が発生するのは、スクリプトが実体化され、ブラウザがそのコードを解釈するタイミングです。

そのため、実行前に構文チェックをしても問題に気づかず、実行時に初めてエラーが発生することになります。

このようにして、JavaScriptで動的にスクリプトを生成する際のクオートの扱い方について理解を深めることができました。