Kintoneのテーブルの仕様というよりもJavaScriptの参照渡しの仕様に躓いたお話

やりたかったのは、
・KintoneのアプリAのレコード詳細画面にボタン追加
・ボタンをクリックするとアプリBのレコード作成画面に遷移
・その時アプリAの情報を初期値として設定したい
という内容。
アプリAとアプリBで重複する項目があるので初期値として自動で入っててほしいという内容です。

最初の方針としては、
・アプリAでレコード詳細を開いた際、必要な情報を取りそれらをGETパラメータとしてURLを生成
・ボタンを押すとそのURLを別タブで開く
・アプリBのレコード追加画面にてそのGETパラメータを解析して初期値としてセット
という考え方。

そのやり方自体は全然できたんだけど、ユーザー選択の表示がcode(メールアドレス)だけだと分かりづらいなとか、けどnameまで含めちゃうとURLめっちゃ長くなるなーとか、色々思うところがあったので以下のやり方に変更。

・アプリAでレコード詳細を開いた際、そのレコードIDをGETパラメータとしてURLを生成
・ボタンを押すとそのURLを別タブで開く
・アプリBのレコード追加画面にて、受け取ったレコードIDを使ってAPIによりアプリAからレコード取得、そこから必要な情報をセットしていく

これでURLも短く簡潔だし、アプリAに入ってる情報はすべて取れるから見た目もよく間違いもなくできるだろうと。

そしてこれもこれで全然できたんだけど、数時間詰まったことがあってそれをこれから説明。

その初期値としてセットする項目としてテーブルに値をセットするというのがあって、それが複数行になることもあるという状況。
JavaScriptでテーブルを扱うときは配列を使うんだけど、配列の値はきちんとした構造となってるオブジェクトを入れる必要があるらしい。

https://developer.cybozu.io/hc/ja/articles/360022502911-kintone%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E6%93%8D%E4%BD%9C%E3%81%AE%E5%9F%BA%E6%9C%AC-%E8%A1%8C%E3%81%AE%E8%BF%BD%E5%8A%A0-%E6%9B%B4%E6%96%B0-%E5%89%8A%E9%99%A4-#:~:text=%E3%81%93%E3%81%AE%E6%99%82%E3%80%81%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E5%86%85%E3%81%AE%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AE%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%82%B3%E3%83%BC%E3%83%89%E3%82%84%20type%2C%20value%20%E3%82%82%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B%E5%BF%85%E8%A6%81%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

そういうこともあって、eventオブジェクトのrecord内にあるテーブルの配列[0]を最初にテンプレートデータとして別の変数に持つようにして、それをPushして必要なところだけ変えればいいか!と思ったのがすべての始まり。

Pushして値を書き換えて、Pushして値を書き換えて、全部終わってeventオブジェクト返してみるとテーブルのすべての行に同じ値が入っている状態。
Chromeのデベロッパーツールで細く見てみると、たしかに最初はテンプレートデータには各項目undefinedになってるんだけど、Pushした値の書き換えを行う度にテンプレートデータの値も書き換えられている。

全然意味がわからなくて多分結局3時間くらいずっとにらめっこしていて、状況的に値じゃなくてアドレスで渡されてないとこうはならないよな…?と思ってそういうキーワードで調べてみて以下の記事を発見。

オブジェクトはアドレスが渡されますよと…。


そこから頭整理してみて、多分以下のような状況になっていたんだと思われる。人に説明するための図になってないので非常に分かりづらいと思う。dummyDataって書いてるのがテンプレートデータのことです。

かれこれ数年JavaScriptは触っているけどオブジェクトはアドレス渡しというのを初めて知った…。

Object.assign()で値渡し(というよりコピー)できますよというのは見たけれど、その中にさらにオブジェクトがあった場合、それは参照渡しになりますという話もあって

今回の自分はそういうケースに当てはまったので、あまり効率的な方法ではないだろうけどいいアイデアも思い浮かばなかったのでテンプレートデータを配列[0]の流用ではなくベタ書きすることにしました。
これで一応、解決はできました。


こんなことに躓くのは自分だけなのかな…?それともkintoneっていうキーワードも含めて調べてたからかな?あんまり有益な情報を見つけられず、なかなかに時間を費やしてしまった。

参考になるか分かりませんが皆さんもお気をつけて。

この記事が気に入ったらサポートをしてみませんか?