for-ofとは

オブジェクトのなかから1つずつ値をとってきて処理できる繰り返し文です。
こんな感じで使います。


for(const x of オブジェクト){
   console.log(x);
}

for-ofの使い方1

突然ですが、for-ofを試しに使ってみたいと思います。
たとえばこんなオブジェクトがあったときを考えましょう・・・


const lunch = [
    {名前:"ひめ", セット:"A", デザート:"チョコ"},
    {名前:"たろう", セット:"B", デザート:"チョコ"},
    {名前:"なすび", セット:"C", デザート:"チョコ"}
];

↓こうすると配列の最初から最後までとってこれます

for(const r of lunch){
    console.log(r);
}

console上での実行結果↓

for-ofの使い方2

こうするとキーが「名前」のオブジェクトだけ取ってこれます。

for(const {名前} of lunch){
    console.log({名前});
}

console上での実行結果↓

for-ofの使い方3

こうすると名前の値だけ取ってこれます。
分割代入というやり方です。
参考：分割代入


for(const {名前:v} of lunch){
    console.log(v);
}

console上での実行結果↓

forEachで書き換えてみる

配列から1つずつ値を持ってきて処理する・・・・というメソッドですが、こんなふうに書きます。

配列.forEach(v =>{
    //処理
})

先程のfor-ofの使い方1～3を書き換えるとこんな感じ。結果も同じです。

//1
lunch.forEach(r => {
    console.log(r);
});

//2
lunch.forEach(({名前}) => {
    console.log({名前});
});

//3
lunch.forEach(({名前:v}) => {
    console.log(v);
});

テーブルで試す

テーブルの準備

こんなテーブルを準備しましょう。

テーブル名：ランチ

フィールド名／コード	フィールド種類	内容
番号	数値
名前	文字列(1行)
セット	ラジオボタン	A B
デザート	チェックボックス	チョコ　バニラ

JavaScriptを書く

こんな感じで、詳細画面で中身が確認できるように色々と書いてみました。
是非、実行してみてね✨✨
※【kintone】テーブルの値を変更してみる（超初心者向け）等参考にしてくださいね。

即時関数の部分は自分で書いてね

//詳細画面
kintone.events.on(['app.record.detail.show'], event => {

    const record = event.record;
    console.log("record\n",record.ランチ.value);

    console.log("\n【for-of 1】for(const r of record.ランチ.value)");
    for(const r of record.ランチ.value){
        console.log(r);
    }

    console.log("\n【for-of 2】for(const {value} of record.ランチ.value)");
    for(const {value} of record.ランチ.value){
        console.log(value);
    }

    console.log("\n【for-of 3】for(const {value:r} of record.ランチ.value)");
    for(const {value:r} of record.ランチ.value){
        console.log(r);
    }

    console.log("\n【for-of 4】for(const {value:{名前:r}} of record.ランチ.value)");
    for(const {value:{名前:r}} of record.ランチ.value){
        console.log(r);
    }

    console.log("\n【for-of 5】for(const {value:{名前:{value:r}}} of record.ランチ.value)");
    for(const {value:{名前:{value:r}}} of record.ランチ.value){
        console.log(r);
    }

    console.log("\n【for-of 6】for(const r of record.ランチ.value)");
    for(const r of record.ランチ.value){
        console.log(r.value.名前.value);
    }

    console.log("\n【forEach　1】forEach");
    record.ランチ.value.forEach(({value:{名前:{value:r}}}) => {
        console.log(r);
    });

    console.log("\n【forEach 2】forEach");
    record.ランチ.value.forEach(r => {
        console.log(r.value.名前.value);
    });

    return event;
});

実行結果のconsoleスクショ画像（長い）

まとめ

for-ofやforEachを使うと、自由自在？にテーブルのフィールドの値が取ってこれるような気がしてきました。
どの方法が一番いいのかは試していないですが、処理速度とか調べてみたいです。（調べたよって方がいたら教えて下さい）

というわけで、今日はこのへんで(・ω・)ﾉｼﾉｼ

【kintone】for-ofやforEachでテーブルの値を覗いてみる

for-ofとは

for-ofの使い方1

for-ofの使い方2

for-ofの使い方3

forEachで書き換えてみる

テーブルで試す

テーブルの準備

JavaScriptを書く

実行結果のconsoleスクショ画像（長い）

まとめ