【kintoneカスタマイズ初心者】cybozu developer networkのチュートリアルの理解を深める（分割代入編）

はじめに

ノベルワークスのつつみんです。12月に入社し、研修中です。初心者なのでカリキュラムとして、cybozu developer networkのチュートリアルに取り組んでいます。
今回は、チュートリアルに取り組む中でサンプルコードの中に出てきた分割代入について備忘録として残しておこうと思います。

分割代入とは

分割代入（Destructuring Assignment）とは、JavaScriptの構文の1つで、配列やオブジェクトの要素を簡単に取り出して変数に割り当てる方法です。

今回勉強したチュートリアル、はじめようkintoneプラグインのサンプルコードでは、プラグインの設定画面で保存された config オブジェクトから、sourceFieldValue、targetFieldValue、spaceFieldID の値を取り出して利用していました。

const {sourceFieldValue, targetFieldValue, spaceFieldID} = config;

どんな時に使うと便利なのか、他にどんな使い方があるのかについてまとめてみたいと思います！

分割代入の例

オブジェクトから特定のプロパティを取り出す

//定義
const person = {
  name: "Taro",
  age: 30,
  job: "Engineer"
};
// // 分割代入を使用して特定のプロパティを取り出す
const { name, age } = person;

console.log(name); // "Taro"
console.log(age);  // 30

・person というオブジェクトから name と age プロパティを取り出し、それぞれ同名の変数に代入
・元のオブジェクト（person）はそのまま保持

こんなときに使うと便利
大量のデータが含まれるオブジェクトから特定の値を取得する場合

メリット
必要なデータだけを取り出せる。
オブジェクトのプロパティ名をそのまま変数として使用できる。

関数の戻り値を効率的に扱う

function getUser() {
  return { id: 1, name: 'Taro', age: 30 };
}

// 戻り値を分割代入で取得
const { name, age } = getUser();
console.log(name); // 'Taro'
console.log(age);  // 30

こんなときに使うと便利
関数がオブジェクトや配列を返す場合

メリット
不要なプロパティを無視しながら、必要な情報だけを取り出せる。

まとめ

分割代入は、オブジェクトや配列の要素を簡単に変数に割り当てる方法。
コードを短く、読みやすくするために便利です（必要に応じて別名も指定できます）。

比べてみる

最初に紹介した、今回のチュートリアル（はじめようkintoneプラグイン）のサンプルコード（分割代入）の場合

const {sourceFieldValue, targetFieldValue, spaceFieldID} = config;

分割代入を使わなかった場合

const sourceFieldValue = config.sourceFieldValue;
const targetFieldValue = config.targetFieldValue;
const spaceFieldID = config.spaceFieldID;

サンプルコードの方が短く、分かりやすい。
必要なデータのみ取り出せる。

おわりに

とっても初心者の内容ですが...分割代入について知らなかったのでまとめてみました（配列の分割代入についても勉強しました）。知らなかったら、一つずつ変数に代入してたと思うのでここで知れて良かったです。スクールとかに通って勉強してない人ってこういうことは、どうやって学んでいるのだろう･･･。
分割代入を使って、効率よく、読みやすいコードを書きたいなと思っています。