# テーブルの新規行を作成する汎用的な方法について

**URL:** <https://community.cybozu.dev/t/topic/10078>\
**Category:** kintone 開発相談\
**Created:** [2025 年 2 月 13 日午前 6:32 UTC](https://community.cybozu.dev/t/topic/10078 "2025-02-13T06:32:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![wv-sumichan](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/wv-sumichan/32/1665_2.png) [@wv-sumichan](https://community.cybozu.dev/u/wv-sumichan)\
**Post date:** [2025 年 2 月 13 日午前 6:32 UTC](https://community.cybozu.dev/t/topic/10078/1 "2025-02-13T06:32:41Z")

</div>

イベント発火時や独自ボタンをクリックした時など、テーブルに新しい行を追加したい場合が往々にしてあると思います。  
アプリの構成が絶対に変化しない時は、テーブル内の全フィールドをオブジェクトとしてインラインで定義すればいいのですが…  
テーブルにフィールドを追加したりすると、カスタマイズが壊れてしまうと思います。  
また、REST APIが許容するテーブル構造とJavaScript APIが許容するテーブル構造が違うので、同じ勢いで書くこともできない…

そこで、汎用的なメソッドを作って使いまわしたいな～と思っているのですが、皆さんはこういう時どういうメソッドを書いていますか？

私がやったことあるのは、以下のようなやり方です。

## ① テーブルの既存行をコピーする

新規画面でも編集画面でも、テーブルには自動で1行作られる仕様を利用して、1行目をコピーして中身を初期化するメソッドを用意しておく。

```ts
// 即興で書いているので動かないかも
function createNewRow(record: any, fieldCode: string): any {
  if (record[fieldCode]) {

    // ディープコピー
    const copied = JSON.parse(JSON.stringify(record[fieldCode].value[0].value));

    // フィールドを回る
    for (const key of Object.keys(copied)) {

      // フィールド種類によって初期化方法を変える
      switch (copied[key].type) {
        case: 'CHECK_BOX':
        case: 'UESR_SELECT':
        /* ... */
        case: 'FILE': {
          copied[key].value = [];
          break;
        }
        default: {
          copied[key].value = '';
          break;
        }
      }
    }
    return copied;
  } else {
    return null;
  }
}
// こんな感じかな？

```

## ② REST API でフィールド構成を取得して構築

REST API から情報を取ってきて、フィールドを全て生成する  
※あんまり使わない

## ③ `window.cybozu` オブジェクトから情報を取ってきて、フィールドをすべて生成する

②と同じだけどAPIコール数を使わない  
※あんまり使わない

* * *

考え得るのはこのくらいで、いつもはコール数を消費しない①を使っているのですが、他にも方法はあったりするのでしょうか。  
もし皆さんがやっている方法があれば、教えていただきたいです。

---

<div class="post-metadata">

**Author:** ![chan\_eri\_n](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/chan_eri_n/32/1711_2.png) [@chan\_eri\_n](https://community.cybozu.dev/u/chan_eri_n)\
**Post date:** [2025 年 2 月 13 日午前 6:48 UTC](https://community.cybozu.dev/t/topic/10078/2 "2025-02-13T06:48:20Z")

</div>

日付と時刻は「“”」受け付けないので、nullにしておくのが無難かなと思いました。

---

<div class="post-metadata">

**Author:** ![wv-sumichan](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/wv-sumichan/32/1665_2.png) [@wv-sumichan](https://community.cybozu.dev/u/wv-sumichan)\
**Post date:** [2025 年 2 月 13 日午前 11:40 UTC](https://community.cybozu.dev/t/topic/10078/4 "2025-02-13T11:40:46Z")

</div>

確かにdeveloper networkにはそう書いてありましたね…気を付けないとですね

---

<div class="post-metadata">

**Author:** ![wv-sumichan](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/wv-sumichan/32/1665_2.png) [@wv-sumichan](https://community.cybozu.dev/u/wv-sumichan)\
**Post date:** [2025 年 2 月 13 日午前 11:45 UTC](https://community.cybozu.dev/t/topic/10078/5 "2025-02-13T11:45:24Z")

</div>

確かに、JavaScriptからボタンを押せば、その後テーブルのフィールド変更イベントで追加された行に操作を行うことができるので楽ですね  
ついでにマウスで行を追加したときと処理が共通化できるので、そういう要件の時には便利かも。  
DOM操作にはなっちゃいますが、解決策の一つとして覚えておきたいですね！  
ありがとうございます！

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2025 年 2 月 18 日午前 12:00 UTC](https://community.cybozu.dev/t/topic/10078/6 "2025-02-18T00:00:32Z")

</div>

クローズされました: 2025 年 2 月 18 日午前 12:00 UTC

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。