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

17684 ワード
JavaScript kintone JavaScript テキストリンク

こんにちは！
3～4年くらい前に「for」は時代遅れだ！
forじゃなくてmapメソッドを使いましょう！

なんてことを言い聞かされて、
プログラマーXX歳定年説みたいなのをなんとなく意識してしまったことのあるジュリドン（当時事務職）です。

今日は、そんなforの仲間、for-ofを紹介しつつ、
配列で使えるforEachメソッドも使って、
テーブルのフィールドの値を取得してみたいと思います。

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

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