どうも。つじけ（tsujikenzo）です。このシリーズでは「２次元配列をオブジェクトに変換する」という内容で全6回でお送りします。今日は第2回目です。
引き続きオブジェクト、特にオブジェクトリテラルの基礎について前編・中編・後編としてまとめていきたいと思います。
前回のおさらい
前回は、「2次元配列をオブジェクトに変換する」という大まかな流れを説明しました。
見たことがあるオブジェクト（キーバリュー方式）の書き方だったと思います。
今回は、初級講座などでは触れることのあまりない オブジェクトリテラルの基礎 について、深掘りします。（簡単に言うとオブジェクトの書き方のルールについてです）
オブジェクトリテラルとは
リテラルはありのまま
私はリテラルとは 「直書き（じかがき）」 だと理解しています。べた書きでもいいです。。
リテラルは値や型とセットに理解した方がしっくりきます。
「文字列をリテラルに書いて、変数に代入してください」と言われたら、、、
const text = ‘Hello World’;
のように書きます。型の確認はtypeof演算子でやります。
const text = ‘Hello World’;
console.log(typeof text); //string
オブジェクトリテラルのルール
では「オブジェクトをリテラルに書いて、変数に代入してください」と言われたら、、、
const person = {id:’tg001’, name:‘つじけ’, age:35, favorite:‘Coffee’};
console.log(typeof person); //object
このように書きますね。（型の確認もしました。）
- オブジェクトは必ず波カッコ{}で囲まれており、
- プロパティ（一つ一つの要素）はkey:value形式、
- 複数のプロパティがある時はカンマ区切りで記述しなければならない
という、ルールがあります。
逆にいうと、このルールに従って書くと、それはオブジェクトである ということです。
プロパティの追加と呼び出し方法
プロパティの操作について、[ドット記法][ブラケット記法]の2種類の方法があります。
それぞれ追加と呼び出しについてまとめます。
const person = {id:’tg001’, name:‘つじけ’, age:35, favorite:‘Coffee’};
//追加
person.address = ‘北海道’; //ドット記法
person[‘address’] = ‘北海道’; //ブラケット記法（シングル・ダブルクォーテーションで囲みます）
//呼び出し
console.log(person.address); // ‘北海道’;
console.log(person[‘address’]); // ‘北海道’;
プロパティの追加、と書きましたが、既に同じ名前のキーが存在した場合は値の上書きになります。（ドット記法は割愛します）
const person = {id:’tg001’, name:‘つじけ’, age:35, favorite:‘Coffee’, address:‘北海道’};
//追加
person[‘address’] = ‘札幌市’;
//呼び出し
console.log(person[‘address’]); // ‘札幌市’;
プロパティキーの暗黙の型変換
オブジェクトリテラルでは、プロパティキーに与えらえた値（式）を評価（string型かsymbol型か判定）し、もしどちらでも無ければ暗黙的にstring型に型変換を行っています。
文章ではむずかしいですが、サンプルコードを見て頂けると大丈夫です。
数値型1をプロパティキーに設定すると、文字列型’1’に変換されてます。うーん不思議。ですがちゃんとルールに従っていて、不思議ではないんです。
const obj = {1:100};
console.log(obj); // { '1': 100 }
念のため、V8から使えるようになったObject.keys()メソッドを使って（説明は割愛します）、型を確認して裏を取ります。
console.log(Object.keys(obj)[0]); // '1'
console.log(typeof Object.keys(obj)[0]); //string
プロパティキーのルールとは
初めからプロパティキーを文字列型（シングルクォーテーションOK、ダブルクォーテーションOK、バックティック🙅）で指定することもできますが、ログ出力の際はそれらのクォーテーションが外れます。
let obj2 = {'number':100};
console.log(obj2); // { number : 100 }
obj2 = {"number":100};
console.log(obj2); // { number : 100 }
obj2 = {`number`:100}; //SyntaxError: Unexpected template string
これは 「オブジェクトリテラルのルールが適用されると、プロパティキーは文字列型だとしてもクォーテーションは表示しない、しなくていい」 ルールになっていると言えます。
通常は宣言の無い変数のように、obj = {number:100}; と書きますよね。しかし{}で囲んで、:でキーとバリューをセットで書いた瞬間にオブジェクトリテラルのルールが適用されるので、numberは変数ではなく 「はいはい、プロパティキーね。内部では文字列型にしとくから。」 と動作しています。
obj2 = {number:100}; //プロパティキーは宣言のない変数のように見えるが内部では文字列型
プロパティキーに変数を使用する
obj = {number:100}; のnumberは変数ではないことが分かりましたが、プロパティキーを角カッコ[]で囲むと変数として扱うことができます。
const property = 'number';
const obj3 = {[property]:100};
console.log(obj3); // { number : 100 }
お気付きの方も多いと思いますが、これは[ブラケット記法]ですね。
つまり追加と呼び出しにはプロパティキーに変数が使えるのです。
const person = {id:’tg001’, name:'つじけ', age:35, favorite:'Coffee'};
//追加と呼び出し
const property = 'address';
person[property] = '北海道';
console.log(person[property]); // ‘北海道’;
つまり、オブジェクトリテラルが適用されている時に、プロパティキーを角カッコ[]で囲むと、「はいはい、プロパティキーね、ん？[]で囲んでるね、ちょっと待って評価するから」と言うことで、角カッコ[]内の値（式）を評価し、文字列型かシンボルl型かを判定し、それ以外だった場合は文字列型に型変換を行っていることが分かります。
const property = 'number';
const obj3 = {[property]:100};
console.log(obj3); // { number : 100 }
console.log(typeof Object.keys(obj3)[0]); // string
まとめ（オブジェクトリテラルのシンタックスハイライト）
以上で、オブジェクトリテラルの基礎について前半部分をまとめました。
折角なのでエディタについて触れておきたいのですが、オブジェクトをリテラルに書くと、プロパティキーのシンタックスハイライトが効いて、色が変わることがあります。
このエディタの場合、下記のような色付けがされているようです。見やすいですね。
- 変数/定数・・・オレンジ
- プロパティキー・紫
- 文字列型・・・・緑
- 数値型・・・・・青
- 定義済みオブジェクト、演算子・・・白
![]("https://tgg.jugani-japan.com/tsujike/wp-content/uploads/null-1102.png")
GASの標準エディタ（背景白）は、シンタックスハイライトが少し分かりづらいです。
プロパティキーと変数/定数の色が黒で同じですね。なので、もしエディタを選ぶときは、最低限のシンタックスハイライトが効くものを選んだ方が良さそうです。（2021年に新IDEが公開されてから、この問題は解決しました。）
![]("https://tgg.jugani-japan.com/tsujike/wp-content/uploads/null-1103.png")
次回は、オブジェクトリテラル【中編】 をお送りします。
このシリーズの目次
[GAS]2次元配列をオブジェクトに変換する‐1日目‐
[GAS]オブジェクトリテラルと仲良くなろう【前編】‐2日目‐
[GAS]オブジェクトリテラルと仲良くなろう【中編】‐3日目‐
[GAS]オブジェクトリテラルと仲良くなろう【後編】‐4日目‐
[GAS]2次元配列をオブジェクト化[最終系] 【前編】‐5日目‐
[GAS]2次元配列をオブジェクト化[最終系] 【後編】‐6日目‐
