日々のコンピュータ情報の集積と整理

Dr.ウーパのコンピュータ備忘録

2014年4月30日水曜日

javascript: Closure Compilerにて「IE8 (and below) will parse trailing commas inarray and object literals incorrectly」というエラーが出力されたときの対処方法

記事「ページ表示速度改善:SyntaxHighlighter使用箇所があれば読み込む(完成スクリプトの配布)」にて作成した JavaScript を Closure Compiler にて最適化しようとしたところ、以下のエラーが出力されて最適化できませんでした。




>java -jar C:\tool\compiler-latest\compi
ler.jar --charset Shift_JIS --js try4.js --js_output_file try4_compiled.js

try4.js:177: ERROR - Parse error. IE8 (and below) will parse trailing commas in
array and object literals incorrectly. If you are targeting newer versions of JS
, set the appropriate language_in option.
                new CBrushRelation("ActionScript3", ["as3", "actionscript3"], "s
hBrushAS3.js"),
                ^

1 error(s), 0 warning(s)


どうやら入力した JavaScript(以下に抜粋した) では、IE8 以前ではうまく動いてくれないとのこと。

            // ブラシの関連付け配列
            var brushRelations = [
                new CBrushRelation("ActionScript3", ["as3", "actionscript3"], "shBrushAS3.js"),
                new CBrushRelation("Bash/shell", ["bash", "shell"], "shBrushBash.js"),
                new CBrushRelation("ColdFusion", ["cf", "coldfusion"], "shBrushColdFusion.js"),
                new CBrushRelation("C#", ["c-sharp", "csharp"], "shBrushCSharp.js"),
                new CBrushRelation("C++", ["cpp", "c"], "shBrushCpp.js"),
                new CBrushRelation("CSS", ["css"], "shBrushCss.js"),
                new CBrushRelation("Delphi", ["delphi", "pas", "pascal"], "shBrushDelphi.js"),
                new CBrushRelation("Diff", ["diff", "patch"], "shBrushDiff.js"),
                new CBrushRelation("Erlang", ["erl", "erlang"], "shBrushErlang.js"),
                new CBrushRelation("Groovy", ["groovy"], "shBrushGroovy.js"),
                new CBrushRelation("JavaScript", ["js", "jscript", "javascript"], "shBrushJScript.js"),
                new CBrushRelation("Java", ["java"], "shBrushJava.js"),
                new CBrushRelation("JavaFX", ["jfx", "javafx"], "shBrushJavaFX.js"),
                new CBrushRelation("Perl", ["perl", "pl"], "shBrushPerl.js"),
                new CBrushRelation("PHP", ["php"], "shBrushPhp.js"),
                new CBrushRelation("Plain Text", ["plain", "text"], "shBrushPlain.js"),
                new CBrushRelation("PowerShell", ["ps", "powershell"], "shBrushPowerShell.js"),
                new CBrushRelation("Python", ["py", "python"], "shBrushPython.js"),
                new CBrushRelation("Ruby", ["rails", "ror", "ruby"], "shBrushRuby.js"),
                new CBrushRelation("Scala", ["scala"], "shBrushScala.js"),
                new CBrushRelation("SQL", ["sql"], "shBrushSql.js"),
                new CBrushRelation("Visual Basic", ["vb", "vbnet"], "shBrushVb.js"),
                new CBrushRelation("XML", ["xml", "xhtml", "xslt", "html", "xhtml"], "shBrushXml.js"),
            ];


しかし、どの部部に問題があるのかよくわからない。。。
いろいろと調べていたところ、以下の情報を見つけました。

google closure compiler - issue regarding trailing commas in JavaScript - Stack Overflow
http://stackoverflow.com/questions/12076373/issue-regarding-trailing-commas-in-javascript


なるほど、配列の一番最後の要素に , がついているとまずいのか。
ということで、次のように修正して、再度Closure Compiler にて最適化したところ、エラーなく最適化できました。

            // ブラシの関連付け配列
            var brushRelations = [
                new CBrushRelation("ActionScript3", ["as3", "actionscript3"], "shBrushAS3.js"),
                new CBrushRelation("Bash/shell", ["bash", "shell"], "shBrushBash.js"),
                new CBrushRelation("ColdFusion", ["cf", "coldfusion"], "shBrushColdFusion.js"),
                new CBrushRelation("C#", ["c-sharp", "csharp"], "shBrushCSharp.js"),
                new CBrushRelation("C++", ["cpp", "c"], "shBrushCpp.js"),
                new CBrushRelation("CSS", ["css"], "shBrushCss.js"),
                new CBrushRelation("Delphi", ["delphi", "pas", "pascal"], "shBrushDelphi.js"),
                new CBrushRelation("Diff", ["diff", "patch"], "shBrushDiff.js"),
                new CBrushRelation("Erlang", ["erl", "erlang"], "shBrushErlang.js"),
                new CBrushRelation("Groovy", ["groovy"], "shBrushGroovy.js"),
                new CBrushRelation("JavaScript", ["js", "jscript", "javascript"], "shBrushJScript.js"),
                new CBrushRelation("Java", ["java"], "shBrushJava.js"),
                new CBrushRelation("JavaFX", ["jfx", "javafx"], "shBrushJavaFX.js"),
                new CBrushRelation("Perl", ["perl", "pl"], "shBrushPerl.js"),
                new CBrushRelation("PHP", ["php"], "shBrushPhp.js"),
                new CBrushRelation("Plain Text", ["plain", "text"], "shBrushPlain.js"),
                new CBrushRelation("PowerShell", ["ps", "powershell"], "shBrushPowerShell.js"),
                new CBrushRelation("Python", ["py", "python"], "shBrushPython.js"),
                new CBrushRelation("Ruby", ["rails", "ror", "ruby"], "shBrushRuby.js"),
                new CBrushRelation("Scala", ["scala"], "shBrushScala.js"),
                new CBrushRelation("SQL", ["sql"], "shBrushSql.js"),
                new CBrushRelation("Visual Basic", ["vb", "vbnet"], "shBrushVb.js"),
                new CBrushRelation("XML", ["xml", "xhtml", "xslt", "html", "xhtml"], "shBrushXml.js")
            ];

分かりづらいですが、一番最後の要素の最後の , を消しました。

ついつい他の言語の癖で、配列の最後の要素にも , を付けてしまうのですが、JavaScript の場合には特定ブラウザでうまく動かない可能性があるので、配列の最後の要素に , をつけてはならないというわけですね。






関連記事

関連記事を読み込み中...

同じラベルの記事を読み込み中...