kintoneにおけるテーブル操作の基本（行の追加・更新・削除）

kintoneで便利なテーブルですが、JavaScriptカスタマイズで取得して操作する場合は入れ子構造が深くて少々複雑ですので、構造や操作方法について解説します。

テーブルの操作の仕方

テーブルの構造

テーブルの構造は少々複雑ですが、どのような構造になっているか下記の図に示しましたので困ったときに参考にしてください。
特に、テーブルのオブジェクトの中には3階層にわたって value がありますので注意してください。
実際のオブジェクトを示すとこのようになります。（テーブル以外のフィールドは省略）

サンプルアプリ：テーブル操作

テーブルをJavaScriptカスタマイズで操作するための、デモ環境にサンプルアプリを用意してみました。

デモ環境

こちらのデモ環境から実際に動作を確認できます。

https://dev-demo.cybozu.com/k/313/

デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。

※デモ環境についての説明はこちら

このアプリでは、「追加」「更新」「削除」ができます。

• 追加ボタンを押したとき・・・「追加_テキスト」「追加_チェックボックス」フィールドにいれた値をテーブルに追加する
• 更新ボタンを押したとき・・・「更新_行番号」で指定したテーブルの対象の「テキスト」フィールドを「更新_テキスト」「更新_チェックボックス」に入れた値に更新する
• 削除ボタンを押したとき・・・「削除_行番号」で指定したテーブルの対象の行を削除する

サンプルプログラムの解説は、こちらの チュートリアル記事 にあります。
「コードの意味は理解できていない」「変更を加えたいけど、どの部分を修正すればいいかわからない」
と感じている方は、ぜひチュートリアル記事を確認してみてください。

プログラム

JavaScriptカスタマイズ全体の構成

このJavaScriptカスタマイズは、「スペースフィールドにボタンを設置する」部分と「テーブルの行追加・更新・削除」部分に分かれます。
今回はテーブルを中心に解説しますので、スペースフィールドの扱い方は下記の記事を参考にしてください。

第3回 レコード詳細にもボタンを設置しよう！

• スペースフィールドにボタンを設置する処理

• テーブルの行を追加する処理

• テーブルの行を更新する処理

• テーブルの行を削除する処理

• テーブルの行番号を更新する処理

以下に、それぞれの部分ごとに解説をします。

ボタン設置部分

ここでは、スペースフィールドへのボタン設置と、ボタン押下時の設定をそれぞれいれています。
例えば下記は「追加ボタン」に後続に宣言している「行追加」の関数を指定しています。

行追加処理

テーブルは配列で表現されていますので、JavaScriptで言うと配列の最後に値を追加する処理を書きます。
配列に行を追加するには .push() を使います。
.push() の中にはテーブルの行に相当する value を指定します。
この時、テーブル内のすべてのフィールドのフィールドコードや type, value も指定する必要があります。

テーブルへ１行追加するためのコード（例）

行追加のイメージ

サンプルアプリのコードの行追加部分の解説

前述の例の通り.push()をつかって行を追加します。
このサンプルでは、追加/更新/削除すべてのタイミングで resetRowNo() という関数を呼んで行番号をリセットしています。（詳しくは後述）

• record取得と追加する行にセットするための値を代入する

• .push()で行を追加する
  このとき、全てのフィールドの value/typeを指定する必要があります。

• 行番号には空文字を指定する
  行追加の直後に行番号を更新するため、行番号には空文字を指定します。

• 行番号更新関数（後述）

• ここまでの変更内容をrecordに反映させる

行更新処理 

行を更新する場合は、大まかにわけて「更新したい行を探す」「行の値を書き換える」の２つの処理が必要です。
「更新したい行を探す」方法はいくつかありますが、今回はループして該当の行の場合は書き換えるという処理にしています。

• record取得と追加する行にセットするための値を代入する

• .forEach()を使ってループし、「更新_行番号」と同じ行を更新する

• 行番号更新関数（後述）

• ここまでの変更内容をrecordに反映させる

行削除処理 

追加と同じく、JavaScriptの配列操作によって配列を一部削除する必要があります。
配列の一部要素を削除するには、 .splice() を使うことでできます。

テーブルの行を削除するためのコード（例）

.splice() は2つの引数が必要です。

• 1つ目の引数: 何番目の配列か
• 2つ目の引数: 何個消すか

二つ目の行を1行削除するには下記の通りになります。

行削除のイメージ

サンプルアプリのコードの行削除部分の解説

更新のときのように.forEach()でループさせて判定処理を行い、対象の行を.splice()を削除する流れになっています。

• record取得と削除する行番号取得

• .forEach()を使ってループし、「削除_行番号」と同じ行を.splice()で削除する

• 行番号更新関数（後述）

• ここまでの変更内容をrecordに反映させる

行番号リセット処理 

今回のサンプルアプリでは追加/更新/削除どの関数を使っても毎回最後に行番号をリセットするようにしています。
行番号更新と削除と同じように.forEach()で繰り返し処理をして、番号を書き換えています。
※リセット処理は各追加/更新/削除関数で呼ばれるため、recordデータは引数に渡すようにしています。

補足

保存時に処理を実行させたい場合

今回のサンプルアプリでは、編集画面でボタンを押したときに動作するものなので、
kintone.app.record.get() / kintone.app.record.set() をつかっています。
保存時に処理を実行させる場合は、レコード保存時のイベントハンドラを使って、
引数eventに渡されるrecordを編集すればOKです

.forEach() などの繰り返し処理について

通常のfor文よりも、.forEach()や.map(), .reduce() などの繰り返し処理が便利ですので、下記リンクを参考にしてください。
forEach, map, filterなどをつかってkintoneのrecords配列をもっと上手に扱う

テーブルを一括削除したい場合

テーブルは配列でできていますので、配列の中身を空にすれば一括で削除できます。

このTipsは、2022年7月版 kintoneで確認したものになります。

デモ環境

https://dev-demo.cybozu.com/k/313/

※デモ環境についての説明はこちら