# 可変サブテーブル作成について

**URL:** <https://community.cybozu.dev/t/topic/8068>\
**Category:** kintone 開発相談\
**Created:** [2023 年 9 月 5 日午前 4:12 UTC](https://community.cybozu.dev/t/topic/8068 "2023-09-05T04:12:35Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![rena\_168](https://avatars.discourse-cdn.com/v4/letter/r/8dc957/32.png) [@rena\_168](https://community.cybozu.dev/u/rena_168)\
**Post date:** [2023 年 9 月 5 日午前 4:12 UTC](https://community.cybozu.dev/t/topic/8068/1 "2023-09-05T04:12:35Z")

</div>

### 何を実現したいのかを書きましょう

javascriptで別アプリから取得した個数分のサブテーブルを新規作成し、作成した新規サブテーブルに  
値を設定したいです。  
現在は、フォームで器のサブテーブルを作成し、javascriptで値の設定は出来ていますが、  
フォームでサブテーブルを作成せず、javascriptで動的なテーブルを作成することは可能でしょうか？

---

<div class="post-metadata">

**Author:** ![y\_minamitani9534](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/y_minamitani9534/32/462_2.png) [@y\_minamitani9534](https://community.cybozu.dev/u/y_minamitani9534)\
**Post date:** [2023 年 9 月 5 日午前 7:12 UTC](https://community.cybozu.dev/t/topic/8068/2 "2023-09-05T07:12:39Z")

</div>

@rena_168 さん

こんにちは、気になったので回答してみました。  
されたい事として、サブテーブルをフォームとして新規追加されたいのか、  
仮想的なテーブルを作成されたいのかどちらなのでしょうか…？  
仮想的なテーブルとして既に関連レコード一覧といった機能はございますがこちらで代用は不可でしょうか？

---

<div class="post-metadata">

**Author:** ![rena\_168](https://avatars.discourse-cdn.com/v4/letter/r/8dc957/32.png) [@rena\_168](https://community.cybozu.dev/u/rena_168)\
**Post date:** [2023 年 9 月 5 日午前 7:15 UTC](https://community.cybozu.dev/t/topic/8068/3 "2023-09-05T07:15:23Z")

</div>

フォームで事前にサブテーブルを作成したくないです。  
javascriptでいちから可変サブテーブルを作成、値を設定したいのですが、  
kintoneではそれがそもそもできるかどうかが知りたいですね。

---

<div class="post-metadata">

**Author:** ![y\_minamitani9534](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/y_minamitani9534/32/462_2.png) [@y\_minamitani9534](https://community.cybozu.dev/u/y_minamitani9534)\
**Post date:** [2023 年 9 月 5 日午前 7:41 UTC](https://community.cybozu.dev/t/topic/8068/4 "2023-09-05T07:41:14Z")

</div>

なるほど、Vue.jsを使えば仮想的ではありますが、テーブルの作成もできますよ。  
ただ仮想的なので、あくまで表示されているだけでレコードには保存されていないといった形になります。  
それでもよければ再現できるかと。  
手順として一例ですが、  
スペースフィールドを作成して、kintone.app.record.getSpaceElement()でDOM取得  
↓  
取得したDOMに「table」要素を作成する。  
↓  
REST APIで対象のデータを抽出して反映させる。  
↓  
値の更新があれば、またREST APIを実行して値を更新させる。

簡易的ですが、このようなフローになるかと思われます。  
何点か以下に参考リンク貼りますね。

参考リンク：[Vue.js3解説](https://www.kabanoki.net/9275/)  
参考リンク：[スペースフィールドを取得](https://cybozu.dev/ja/kintone/docs/js-api/record/get-space-element/)  
参考リンク：[kintoneでのVue.jsを使用してのテーブル作成の一例（こちらは一覧画面）](https://specially198.com/create-a-customized-view-using-vue-js-and-bootstrap-with-kintone/)

これらを組み合わせればできるんじゃないかなと思います。

---

<div class="post-metadata">

**Author:** ![rena\_168](https://avatars.discourse-cdn.com/v4/letter/r/8dc957/32.png) [@rena\_168](https://community.cybozu.dev/u/rena_168)\
**Post date:** [2023 年 9 月 5 日午前 7:49 UTC](https://community.cybozu.dev/t/topic/8068/5 "2023-09-05T07:49:56Z")

</div>

そうなんですね。  
kintoneもjavascriptをベースにしているから、jqで可変テーブル作成とかよくありますもんね。

毎回可変テーブル生成し、可変のjson形式のレコードデータをサブテーブルに設定させようかなと思っています。これだと実際保存されず、毎回生成したサブテーブルのデータが表示されるだけですかね。

ちょっとDOM操作より、jsonでやったほうが個人的にやりやすいですが、どっちでもいいですよね？！

---

<div class="post-metadata">

**Author:** ![y\_minamitani9534](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/y_minamitani9534/32/462_2.png) [@y\_minamitani9534](https://community.cybozu.dev/u/y_minamitani9534)\
**Post date:** [2023 年 9 月 5 日午前 8:04 UTC](https://community.cybozu.dev/t/topic/8068/6 "2023-09-05T08:04:34Z")

</div>

表示させようと思えば、DOM操作は必ず必要ですね。  
また、Vue.jsのデータの更新はJSON文字列渡して表示させたり更新しているのでいわれていることと同意かと思われます…

もちろん、サブテーブルを用意しておいて何かのきっかけで中身入れ替えをしたりもできますが、列（いわゆるカラム）はあまり融通きかないです。

---

<div class="post-metadata">

**Author:** ![rena\_168](https://avatars.discourse-cdn.com/v4/letter/r/8dc957/32.png) [@rena\_168](https://community.cybozu.dev/u/rena_168)\
**Post date:** [2023 年 9 月 5 日午前 9:59 UTC](https://community.cybozu.dev/t/topic/8068/7 "2023-09-05T09:59:49Z")

</div>

サブテーブル要するのも最大数分用意するなんてスマートではないですね。

やっぱりDOM操作なんですね！

Vue.jsはあんまり使ったことがないので、原本のjavascriptかjqで試行錯誤してみます。

ありがとうございます。

---

<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:** [2023 年 9 月 8 日午前 10:00 UTC](https://community.cybozu.dev/t/topic/8068/8 "2023-09-08T10:00:29Z")

</div>

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