みなさんこんにちは。久しぶりに更新するケリーの姉です。現場が変わったり、現場が変わったり、勉強会に狂ったように参加して忙しかったのと、書くのが面倒だったのでサボっていました。よくないね。今回は、javascript使いなら誰でも通る「オブジェクトリテラル」のお話をしようと思います。知ってる人は読まなくていいです。

オブジェクトリテラルって何？

JavaScriptのオブジェクトの表記法のことです。 jsonで「key：value」という表記を見たことがありませんか？その記法のことです。

基本文法

「key：value」のペアを「,」で区切って、全体を{}で囲めば・・・はい！オブジェクトリテラルの完成です！

JSONとの違い

JSONの場合、keyをダブルクオーテーションで囲う必要があります。オブジェクトリテラルの場合はそれが不要です。

オブジェクトリテラルのアクセス

オブジェクトリテラルの値のアクセスには、[]形式とプロパティ形式の2種類があります。

各形式の例

例えば、こんなオブジェクトリテラルがある場合、「name」を表示するアクセス形式の違い

var parson = { name: "テスト太郎",  age: "56", blood: "B" }

[]形式

parson["name"]

変数名["キー"]という形で指定します。（キーはダブルクオーテーションで囲む）

プロパティ形式

parson.name

変数名とキーを「.」で接続して指定します。

オブジェクトリテラルの階層構造

オブジェクトリテラルの値には、さらに別のオブジェクトリテラルや配列や関数などを指定して、階層構造にすることが可能です。オブジェクトリテラルのゲシュタルト崩壊起こしかけていますが、実際のコードを見てもらうのが早いと思います。

var parson = {
   name: "テスト太郎",
   age: "56",
   blood: "B",
   detail: { 
      sns: ["twitter", "blog"],
      threeSize: [87, 81, 88]
   },
   testLog: function () {
      console.log('テストログですぞ！')
   }
};

detailとtestLogという項目を増やしてみました。 detailは、新しいオブジェクトリテラルです。中にはsnsとthreeSizeという配列を指定しています。 testLogは関数です。

ちょっと複雑に見えますが、アクセス方法はとても簡単なので、ぜひ覚えてください。 detailのsnsの1番目の値がほしいときはこう書きます。

person.detail.sns[0]

testLogキーに指定した関数の呼び出しはこう書きます。

testLog.cx()

わかってしまえば、とても簡単でスマートですね！それでは、よいJavaScriptライフを！！

ケリーの姉の技術ブログ

ケリーの姉が仕事で学んだ技術に関するアウトプットを行うブログです。たまにゲームの作成秘話なんかも

オブジェクトリテラルの話