kintone新規登録用レコードのデータ構築関数の作成

# はじめに
kintoneアプリのレコード内容をサクッと取得できる方法を記事にしたのですが、今回は、取得したレコード内容を元にレコード構造を作成する関数を作ってみたいと思います。
レコード更新は更新元レコードの内容を修正すればよいので、今回作成する関数はレコード新規登録用となります。

# サンプルアプリ
前回記事の流用です。
レコード構造を確認しやすいように、レコード内容を登録しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355999/a7ac0582-bbe6-c534-2cdc-219922f0855d.png)

# レコードを取得
ベースとなるレコードを取得します。レコード取得の手順は前回の記事をご覧ください。

https://qiita.com/kitamon/items/24eeafa0d3151791e25d

こんな感じで取得できます。
~~~sample_1.json
{
    "record": {
        "支店コード": {
            "type": "SINGLE_LINE_TEXT",
            "value": "SMPL001"
        },
        "支店名": {
            "type": "SINGLE_LINE_TEXT",
            "value": "サンプル支店"
        },
        "配送オプション": {
            "type": "CHECK_BOX",
            "value": [
                "段ボール",
                "冷蔵"
            ]
        },
        "明細テーブル": {
            "type": "SUBTABLE",
            "value": [
                {
                    "id": "209188",
                    "value": {
                        "品目コード": {
                            "type": "SINGLE_LINE_TEXT",
                            "value": "001"
                        },
                        "品名": {
                            "type": "SINGLE_LINE_TEXT",
                            "value": "みかん"
                        },
                        "数量": {
                            "type": "NUMBER",
                            "value": "1"
                        }
                    }
                }
            ]
        },
        "$revision": {
            "type": "__REVISION__",
            "value": "5"
        },
        "$id": {
            "type": "__ID__",
            "value": "1"
        },
        "レコード番号": {
            "type": "RECORD_NUMBER",
            "value": "1"
        },
        "更新者": {
            "type": "MODIFIER",
            "value": {
                "code": "K211033",
                "name": "ds_user"
            }
        },
        "作成者": {
            "type": "CREATOR",
            "value": {
                "code": "K211033",
                "name": "ds_user"
            }
        },
        "更新日時": {
            "type": "UPDATED_TIME",
            "value": "2022-11-30T11:40:00Z"
        },
        "作成日時": {
            "type": "CREATED_TIME",
            "value": "2022-11-29T10:35:00Z"
        }
    }
}
~~~
# 取得したレコード内容から不要部の削除
レコード新規登録時には、$id項目、$revision、レコード番号や作成者、作成日時、更新者、更新日時、サブテーブルのid項目等が不要になるので削除します。

~~~sample_2.json
{
    "record": {
        "支店コード": {
            "type": "SINGLE_LINE_TEXT",
            "value": "SMPL001"
        },
        "支店名": {
            "type": "SINGLE_LINE_TEXT",
            "value": "サンプル支店"
        },
        "配送オプション": {
            "type": "CHECK_BOX",
            "value": [
                "段ボール",
                "冷蔵"
            ]
        },
        "明細テーブル": {
            "type": "SUBTABLE",
            "value": [
                {
                    "value": {
                        "品目コード": {
                            "type": "SINGLE_LINE_TEXT",
                            "value": "001"
                        },
                        "品名": {
                            "type": "SINGLE_LINE_TEXT",
                            "value": "みかん"
                        },
                        "数量": {
                            "type": "NUMBER",
                            "value": "1"
                        }
                    }
                }
            ]
        }
    }
}
~~~
# サブテーブル項目の関数化
深い階層から、関数化していきます。サブテーブルの無いkintoneアプリが対象の場合は、この部分は読み飛ばしてください。

まず、サブテーブルのValueの中身(の要素)だけ抜き出します。
~~~Sample_stbl.json
                {
                    "value": {
                        "品目コード": {
                            "type": "SINGLE_LINE_TEXT",
                            "value": "001"
                        },
                        "品名": {
                            "type": "SINGLE_LINE_TEXT",
                            "value": "みかん"
                        },
                        "数量": {
                            "type": "NUMBER",
                            "value": "1"
                        }
                    }
                }
~~~
とりあえず、値が設定される部分を変数化してサブテーブルの行を作成する関数にします。
~~~Sample_stbl.js
     //サブテーブル行を戻す関数
    function MakeRow(h_code,h_name,amount){
       var smplRow =
            {
                "value": {
                    "品目コード": {
                        "type": "SINGLE_LINE_TEXT",
                        "value": h_code
                    },
                    "品名": {
                        "type": "SINGLE_LINE_TEXT",
                        "value": h_name
                        },
                    "数量": {
                        "type": "NUMBER",
                        "value": amount
                    }
                }
            }
        return smplRow
    };
~~~
サブテーブル項目はサブテーブル行データの配列になっているので、入力データをループでサブテーブル行に変換して配列にする関数を追加します。
~~~Sample_stbl.js
    //入力データをサブテーブル行の配列に変換する。
    function MakeTable(in_sub_records){
        //サブテーブルデータ格納用
        var tmpRecords = [];
        //サブテーブル行データ格納用
        var tmpRow;
        //入力配列(in_sub_records)の要素数分繰り返す。
        for(var i=0; i < in_sub_records.length; i++){
            //サンプルデータを配列を1要素ずつ、サブテーブル行構造に変換
            tmpRow = MakeRow(
                        in_sub_records[i]['品目コード'],
                        in_sub_records[i]['品名'],
                        in_sub_records[i]['数量']
                        );
            //サブテーブル配列に追加する。
            tmpRecords.push(tmpRow);
        }
        return tmpRecords
    }

~~~

# レコード構造の関数化
レコード構造を関数化します。サブテーブル項目はここまでで作成したサブテーブル行の配列を渡すようにします。
~~~Sample_stbl.js
    //レコード構造を作成
    function makeRecord(siten_cd,siten_name,hai_option,meisai_tbl){
        var record = 
            {
                "record": {
                    "支店コード": {
                        "type": "SINGLE_LINE_TEXT",
                        "value": siten_cd
                    },
                    "支店名": {
                        "type": "SINGLE_LINE_TEXT",
                        "value": siten_name
                    },
                    "配送オプション": {
                        "type": "CHECK_BOX",
                        "value": hai_option
                    },
                    "明細テーブル": {
                        "type": "SUBTABLE",
                        "value": meisai_tbl
                    }
                }
            };
        return record
    };
~~~

# 全体
今回作成したデータ構築関数の作成を呼び出して、サンプルデータを入力するドライバ関数と、その関数をレコード編集画面表示時に実行する処理を追加します。全体としては以下のような感じです。


~~~Sample_stbl.js
(function() {
    "use strict";
    var events = [
        // レコード編集画面表示時
        'app.record.edit.show'
    ];
    kintone.events.on(events, function(event) {
        //ドライバ関数呼び出し
        setRecord();
    });

    //テーブル構造を作成するドライバ関数
    function setRecord(){
        //サブテーブル更新用サンプルデータ配列
        var smple_sub_records = [
            {"品目コード":"003","品名":"りんご","数量":3},
            {"品目コード":"004","品名":"レモン","数量":4},
            {"品目コード":"005","品名":"バナナ","数量":5}
        ]

        //サブテーブル構造データ生成
        var subRecords = MakeTable(smple_sub_records);
        //レコード構造生成
        var m_record = makeRecord("005","サンプル支店5",["冷蔵","マルチ"],subRecords);
    
    };
 
    //入力データをサブテーブル行の配列に変換する。
    function MakeTable(in_sub_records){
        //サブテーブルデータ格納用
        var tmpRecords = [];
        //サブテーブル行データ格納用
        var tmpRow;
        //入力配列(in_sub_records)の要素数分繰り返す。
        for(var i=0; i < in_sub_records.length; i++){
            //サンプルデータを配列を1要素ずつ、サブテーブル行構造に変換
            tmpRow = MakeRow(
                        in_sub_records[i]['品目コード'],
                        in_sub_records[i]['品名'],
                        in_sub_records[i]['数量']
                        );
            //サブテーブル配列に追加する。
            tmpRecords.push(tmpRow);
        }
        return tmpRecords
    }

    //サブテーブル行を戻す関数
    function MakeRow(h_code,h_name,amount){
       var smplRow =
            {
                "value": {
                    "品目コード": {
                        "type": "SINGLE_LINE_TEXT",
                        "value": h_code
                    },
                    "品名": {
                        "type": "SINGLE_LINE_TEXT",
                        "value": h_name
                        },
                    "数量": {
                        "type": "NUMBER",
                        "value": amount
                    }
                }
            }
        return smplRow
    };

    //レコード構造を作成
    function makeRecord(siten_cd,siten_name,hai_option,meisai_tbl){
        var record = 
            {
                "record": {
                    "支店コード": {
                        "type": "SINGLE_LINE_TEXT",
                        "value": siten_cd
                    },
                    "支店名": {
                        "type": "SINGLE_LINE_TEXT",
                        "value": siten_name
                    },
                    "配送オプション": {
                        "type": "CHECK_BOX",
                        "value": hai_option
                    },
                    "明細テーブル": {
                        "type": "SUBTABLE",
                        "value": meisai_tbl
                    }
                }
            };
        return record
    };
})(); 

~~~

# レコード構造の確認
ChromeのDevToolsを使用して、今回の関数で作成したレコード構造を確認します。

kintoneアプリに今回作成したJavascriptを登録したら、一旦レコード詳細画面でF12キーを押下してDevRoolsを起動し、ドライバ関数内の下記の行をクリックしてブレークポイントを設定します。
青い横矢印が表示されている行がブレークポイントの設定業となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355999/b2a10881-81ec-5ee7-34c5-077fd647c3c0.png)

Chromeで表示しているレコード詳細画面に戻り、レコード編集ボタンを押下します。
DevRools上のブレークポイントで処理が停止するので、コンソールでm_record変数を参照、参照結果を右クリックして「objectのコピー」 を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355999/1202f3d3-f32b-44a6-cb0d-7c7b387b7e0f.png)

コピーした内容をメモ帳などに貼り付けてレコード内容を確認します。
~~~JSON
{
    "record": {
        "支店コード": {
            "type": "SINGLE_LINE_TEXT",
            "value": "005"
        },
        "支店名": {
            "type": "SINGLE_LINE_TEXT",
            "value": "サンプル支店5"
        },
        "配送オプション": {
            "type": "CHECK_BOX",
            "value": [
                "冷蔵",
                "マルチ"
            ]
        },
        "明細テーブル": {
            "type": "SUBTABLE",
            "value": [
                {
                    "value": {
                        "品目コード": {
                            "type": "SINGLE_LINE_TEXT",
                            "value": "003"
                        },
                        "品名": {
                            "type": "SINGLE_LINE_TEXT",
                            "value": "りんご"
                        },
                        "数量": {
                            "type": "NUMBER",
                            "value": 3
                        }
                    }
                },
                {
                    "value": {
                        "品目コード": {
                            "type": "SINGLE_LINE_TEXT",
                            "value": "004"
                        },
                        "品名": {
                            "type": "SINGLE_LINE_TEXT",
                            "value": "レモン"
                        },
                        "数量": {
                            "type": "NUMBER",
                            "value": 4
                        }
                    }
                },
                {
                    "value": {
                        "品目コード": {
                            "type": "SINGLE_LINE_TEXT",
                            "value": "005"
                        },
                        "品名": {
                            "type": "SINGLE_LINE_TEXT",
                            "value": "バナナ"
                        },
                        "数量": {
                            "type": "NUMBER",
                            "value": 5
                        }
                    }
                }
            ]
        }
    }
}
~~~

# おわりに
実際の開発作業では、今回作成したデータ構築関数に入力できる状態に、元データを編集するまでが大変かもしれません。また、もっとスマートなデータ構築方法もあると思いますが、見た目で分かりやすいかと思いますので、まずとっかかりとして今回の方法でデータ構築関数を作成してから、スマート化していくのも良いのではないでしょうか。