jQueryのCSSメソッドで、複数プロパティをまとめた書き方について

Question

jQueryのCSSメソッドで、複数プロパティをまとめた書き方を調べているときに、あるTIPS記事に以下のような例がありました。そこで分からない点がありましたので、質問させてください。

// 例1　変数に入れる
var p_props = {
    "color" : "red",
    "font-size" : "16px",
    "font-weight" : "bold"
}

// 例2
var p_props = {
    color : "red",
    fontSize : "16px",
    fontWeight : "bold"
}

// 例3
$("p").css({
    "color" : "#f00",
    "font-size" : "28px",
    "font-weight" : "bold"
});

// 例4
$("p").css({
    color : "red",
    font-size : "16px",
    font-weight : "bold"
});

• 「例1」は、CSSプロパティは文字列となるため、クオートで囲われている (この{}はグループ化)
• 「例2」は、キャメルケースを使用しているため、クオートの省略が可能 (この{}はオブジェクト)
• 「例3」は、CSSプロパティは文字列となるため、クオートで囲われている (この{}はグループ化)
• 「例4」は、このCSSプロパティは文字列では？ (この{}はグループ化？)

---

<質問1>
「例1～4」の書き方でそれぞれ試してみたのですが、「例4」では'SyntaxError'となりました。
他の参考サイトではこのような書き方は見当たらなかったので、「例4」は単に記事上の記述ミスでしょうか。

まだ「{}」の意味や「オブジェクト」という考え方も曖昧で理解が追い付いていないので、調べている内に混乱してしまいました。

---

<質問2>
また、こちらのサイトに以下のようにあったのですが、自分の書いている練習用コードで "first-name" を first_name にするとエラーは出ませんでしたが、この行のみスルーされたようでした。これはjQueryだからでしょうか。

プロパティ名の前後に付けるクオート（""）は、文字列が予約語ではなく、JavaScriptの名前に則っていれば、省略することができます。 上記の例"first-name"の場合はクオートが必要ですが、first_nameの場合は省略可能です。

---

初歩的な質問で恐縮ですが、jQueryの公式のCSSや/Types/#Stringの項目を読んでも、はっきりした答えを見つけられなかったので、熟達者の方のご意見をお伺いできると幸いです。

Answer 1

「例4」は単に記事上の記述ミスでしょうか。

はい、JavaScriptの文法として成立しません。

"first-name"をfirst_nameにした部分はエラーは出ませんでしたが、この行のみスルーさたようでした。

文法的にはfirst_nameのようなキーであればクオート不要ですが、jQuery.fn.cssが求めるキーはハイフン区切りもしくはキャメルケースのものだけです（公式）。

Comments

[maisumakun]

> この{}はグループ化

いえ、すべてオブジェクトの生成です。

[maisumakun]

{ foo: 1, 'hoge-piyo': false }のように、1つのオブジェクトリテラル内にクオートありとなしを混ぜて書くことも可能です。

[ync_pp]

大変分かりやすい回答をありがとうございました。身近にこういったことを聞ける人がいないため、とても助かりました。公式のドキュメントも再度読み直してみます。

Answer 2

javascriptのオブジェクトのキーを設定するさい
演算子など予約語を含むキーはクォーテーションなしでは
指定できません。

Comments

[yambejp]

console.log({"a=b":123});
console.log({"a-b":456});
console.log({'a+b':789});

上記はOK、クォーテーションはずすとNG
またヒアドキュメント用のバッククォーテーションも使えません

[ync_pp]

なるほど、参考例を記述いただいてありがとうございます。