microCMSのデータをJavaScriptで取得したときに、ハイフンつなぎの項目にアクセスできなくて困った件

自分の制作実績をmicroCMSで管理していて、そのデータを静的サイトにJavaScriptSDKを使って、Fetchしようとしたときに、ハイフンつなぎのデータにうまくアクセスできなくて困りました。
そのときに調べて理解できたことをメモしておきます。

問題の状況

https://www.npmjs.com/package/microcms-js-sdk
こちらの記事を参考にデータをFetch
ここまでは超スムーズにできて、自分の成長を感じます😆

res.createdAt　とばっちりデータにもアクセスできた！となっていたのですが、
res.works-title としたときに、なにやらエラーっぽい波線が引いてあります。
console.logしてみると、やはりエラーでした。
ハイフンつなぎがだめだということはわかったのですが、
その先、どうすればいいかわからないとなってしまいました。

microCMSのデータはObject形式でやってくる

const { createClient } = microcms;
// Initialize Client SDK.
const client = createClient({
  serviceDomain: "domain", // YOUR_DOMAIN is the XXXX part of XXXX.microcms.io
  apiKey: "api-key",
});

client
  .getListDetail({
    endpoint: 'works-main',
		contentId: 'english-school',
  })
  .then((res) => {
		console.log(res)
	})
  .catch((err) => console.error(err));

resにObject型でデータが渡ってきます。

このObject型データにアクセスする基本形は2つ

ドット

res.createdAt
という形でアクセスします。
ぼくのなかでは一番ポピュラーな形でした。

そしてぼくのmicroCMSのデータの中に
「works-title」
という項目がありました。
res.works-title
これではアクセスできないのです。
どうすればいい！と調べると、次の記事に助けられました。
https://web-dev.hatenablog.com/entry/web/js/lang/access-to-json-hyphen-key

角括弧

res['key']
角括弧でkeyを指定すると、そのkeyに対応するデータがとれます。

const createdAt = res['createdAt']
const worksTitle = res['wroks-title']

これで一安心。
制作実績を無事自分のサイトにひょうじできます。
でも、これって1つずつ、アクセスして、変数に代入して使うのか？
そういえば「分割代入」というやつがあったな。

分割代入したい！

分割代入という便利な仕組みがあります。
例えば resというデータの中身が

{
id: 'english-school', 
createdAt: '2022-08-14T08:49:34.112Z', 
updatedAt: '2022-10-29T23:20:37.810Z', 
publishedAt: '2022-08-14T08:49:34.112Z'
・・・
}

こんな感じのデータなら

const { id, createdAt } = res

とすると、id,createdAtという変数ができちゃうといいうやつです。
ということで、works-titleを分割代入しようとして

const { id, works-title } = res

としましたが、だめでした。
次に助けていただいたのは、こちら
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
ご存知MDN様です。

const { id, 'works-title': worksTitle } = res

これで無事データをとることができました！

あらゆる状況を想定して、言語仕様が作られているということなんだなと感激しました。
いや、これは超基本なのだろうなと、なんとなくコードを書いてきた自分を
戒めるきっかけとしたいと思います。

気づき

ウェブ制作で、けっこうハイフンつなぎでクラス名とかつけることが多いので、
その流れで、項目名とかもつけてしまっていました。
その後、どんな環境でそれを使うかなど、考えてやったほうが良いなと思いました。

それまでは、GtasbyでmicroCMSを扱うことが多かったので、
基本、GraphQLでしたが、このハイフンつなぎ問題とかも、
そこでよしなにしてくれているんだなと感動しました。