配列/オブジェクトを操作してみよう

目次

配列操作

配列を使うと、複数の値に順序をつけてデータを格納できます。

1
const array = [10, 20, 30];

ここでは、配列のデータを操作する方法を例示します。
初期の段階では大まかな理解にとどめて、実際に利用する場面で参照することをおすすめします。

追加(unshift / push)

配列に要素を追加できます。

先頭に追加する(unshift)
1
2
3
const array = [10, 20, 30];
array.unshift(1); // 先頭に1を追加する
console.log(array); // 実行結果 [1, 10, 20, 30];
末尾に追加する(push)
1
2
3
const array = [10, 20, 30];
array.push(40); // 末尾に40を追加する
console.log(array); // 実行結果 [10, 20, 30, 40];

削除(shift / pop)

配列から要素を削除できます。

先頭を削除する(shift)
1
2
3
const array = [10, 20, 30];
array.shift(); // 先頭を削除する
console.log(array); // 実行結果 [20, 30];
末尾を削除する(pop)
1
2
3
const array = [10, 20, 30];
array.pop(); // 末尾を削除する
console.log(array); // 実行結果 [10, 20];

並び替え(sort / reverse)

配列を並び替えることができます。

昇順に並び替える(sort)
1
2
3
const array = [30, 20, 10];
array.sort(); // 昇順に並び替える
console.log(array); // 実行結果 [10, 20, 30];
降順に並び替える(sort)
1
2
3
const array = [20, 10, 30];
array.sort((a, b) => b - a); // 降順に並び替える
console.log(array); // 実行結果 [30, 20, 10];
逆順に並び替える(reverse)
1
2
3
const array = [10, 0, 30];
array.reverse(); // 降順に並び替える
console.log(array); // 実行結果 [30, 0, 10];

結合(join)

配列の要素を結合できます。

  • 配列をひとつのデータに結合する(join)
1
2
3
const array = [10, 20, 30];
const joinedArray = array.join(',');
console.log(joinedArray); // 実行結果 "10,20,30"

確認(indexOf / includes)

配列の要素の位置や存在を確認できます。

  • 値の位置を確認する(indexOf)
1
2
3
const array = [10, 20, 30];
console.log(array.indexOf(20)); // 実行結果 1 (2番目に位置する)
console.log(array.indexOf(40)); // 実行結果 -1 (位置が見つからない)
  • 値の存在を確認する(includes)
1
2
3
const array = [10, 20, 30];
console.log(array.includes(20)); // 実行結果 true
console.log(array.includes(40)); // 実行結果 false

関数(forEach / map / filter / find)

配列の要素を処理できます。

すべての要素を処理する(forEach)
1
2
3
4
5
6
7
8
const array = [10, 20, 30];
array.forEach((value) => {
  console.log(value);
});
// 実行結果
// 10
// 20
// 30
新たな配列を作成する(map)
1
2
3
4
5
const array = [10, 20, 30];
const array2 = array.map((value) => {
  return value * 2;
});
console.log(array2); // 実行結果 [20, 40, 60]
複数要素を絞り込む(filter)
1
2
3
4
5
const array = [10, 20, 30];
const array2 = array.filter((value) => {
  return value > 10;
});
console.log(array2); // 実行結果 [20, 30]
ひとつの要素に絞り込む(find)

条件に一致した、最初の要素に絞り込みます。

1
2
3
4
5
const array = [10, 20, 30];
const found = array.find((value) => {
  return value > 10;
});
console.log(found); // 実行結果 20

オブジェクト操作

オブジェクトを使うと、複数の対となるデータをひとまとめにして管理できます。

1
2
3
4
5
const fruits = {
  apple: 'バラ科リンゴ属の落葉高木',
  orange: 'ミカン科ミカン属の常緑小高木',
  grape: 'ブドウ科のつる性落葉低木'
};

プロパティ名を配列で取得する(Object.keys)

オブジェクトのプロパティ名を配列で取得できます。 通常、オブジェクトは forEach で処理できませんが、配列で取得すると処理できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const obj = {
  product: 'kintone',
  company: 'cybozu',
};
Object.keys(obj).forEach((key) => {
  console.log(key);
});
// 実行結果
// product
// company

プロパティの値を配列で取得する(Object.values)

オブジェクトのプロパティの値を配列で取得できます。

1
2
3
4
5
6
7
8
const obj = {
  a: {name: 'Taro', age: 20, from: 'Tokyo'},
  b: {name: 'Hanako', age: 30, from: 'Osaka'},
  c: {name: 'John', age: 40, from: 'Canada'},
};
const array = Object.values(obj).map((value) => value);
console.log(array[0].name); // 実行結果 Taro
console.log(array[1].age); // 実行結果 30

まとめ

配列操作やオブジェクト操作は kintone カスタマイズとは切っても切れない関係です。
多くのメソッドがありますが、まずは基本的なものを理解し、使えるようになりましょう。
慣れてきたら、より簡潔に記述できるメソッドがないかを調べて試してみましょう。
次回は 関数 について学習しましょう。