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

はじめようJavaScript

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

固定リンクがコピーされました

更新日：2023年02月01日

配列操作

固定リンクがコピーされました

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

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カスタマイズとは切っても切れない関係です。
多くのメソッドがありますが、まずは基本的なものを理解し、使えるようになりましょう。
慣れてきたら、より簡潔に記述できるメソッドがないかを調べて試してみましょう。
次回は関数について学習しましょう。

チュートリアル

はじめようJavaScript