【kintone】テーブルの値を変更してみる（超初心者向け）

こんにちは！
kintoneのテーブルって、扱いにくいですよね（いきなり）

今回は扱いにくいkintoneのテーブルの値の変更に挑戦してみたいと思います！

今回は「アプリの編集画面を開いた時に、値を変更」してみたいと思います。


# アプリを準備する
## アプリストアから追加
アプリストアから案件管理を追加しましょう。
サンプルデータを含めるにチェックを付けてね！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/b23058d8-6246-d920-dac2-441223a23329.png)

## フィールドコードを変更
フィールドコードが良くないので、変えておきましょう。

|旧フィールドコード|新フィールドコード|
|:-:|:-:|
|日付|活動日|
|ドロップダウン_1|活動内容|
|文字列＿1行＿2|メモ|

[フィールドコードが見やすくなるブックマークレットは @potara さんの記事](https://potara.net/2020/12/02/1384/)を御覧ください
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/2b14e83c-61d4-f61d-90f3-dc48a87ca5d8.png)

↓変更後。　フィールド名と同じフィールドコードにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/6c1ba78e-7161-c4ee-c1cd-0001805f6137.png)


# JavaScriptを書く
編集画面を開いた時に、1行目のメモの内容を変えましょう。

プログラムだけ書くとこのようになります。
解説は後述します。

```js
//編集画面開いたときは'app.record.edit.show'
kintone.events.on(['app.record.edit.show'], event => {

    //レコードの情報（活動履歴テーブル1行目のメモ）を変更する
    event.record.活動履歴.value[0].value.メモ.value = "JavaScriptで変更";

    return event;
});    

```

## eventの中には情報が詰まっている！

`kintone.events.on(['app.record.edit.show'], event => {`
この行は、「**`app.record.edit.show` のイベント（編集画面を開いた）の時にプログラムがスタートする**」ということを表しています。
※公式ドキュメントはこちら→https://developer.cybozu.io/hc/ja/articles/202166270#step1

プログラムの中に`event => {`としているところがありますが、この`event`にはレコードの情報が詰まっています。
`event`という箱の中に、`record`という箱が入っているようなイメージです。
`event.record` とすると、`event`箱の中の`record`の情報を扱うことができます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/09a209ea-3cc8-6fa3-8491-0ebf5faf435d.png" width=300px>


`console.log(event.record);`とすると、レコードの情報がコンソールで下図のように見えます👀

※コンソールの開き方はこちらなどご覧ください→https://www.javadrive.jp/javascript/console/index1.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/fd6064c3-f3e6-7281-53d1-3c998fca85f1.png)

## 「活動履歴テーブルの1行目のメモの内容」が入っている「箱」を指定する
`event`箱、`record`箱、とたどっていくと・・・
「**活動履歴テーブルの1行目のメモの内容**」は下図のような位置にあります。

このテーブルの階層がややこしいのですが、テーブルのデータを扱う【キモ】なところです。

活動履歴テーブルには、行がvalueの配列として格納されています。
※配列？という方はこちらをどうぞ
→[はじめようJavaScript第7回](https://developer.cybozu.io/hc/ja/articles/115003765686)

![20201208_011429370_iOS.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/99c2b4ad-939c-e3ed-527c-ad275439c0a4.png)


この階層を言葉で書くとしたら、
`eventの中の、recordの中の、活動履歴テーブルの、1行目(value[0])の値(value)の、メモフィールドの値(value)`
となり、プログラムで表すと
`event.record.活動履歴.value[0].value.メモ.value`
となります。
「箱」を「.（ドット）」でつないで表現します。

## 活動履歴テーブルの1行目のメモの内容を変更する
`event.record.活動履歴.value[0].value.メモ.value`に値を代入して、`return event;`すると、
編集画面上のレコードに反映されます。

```js
    //レコードの情報（活動履歴テーブル1行目のメモ）を変更する
    event.record.活動履歴.value[0].value.メモ.value = "JavaScriptで変更";
    return event;

```

## テーブルの他の行、他のフィールドの値を変更する

変更は何個でもOK。
最後に`return event;`します。

行やフィールドを直接選んで書き換えられました。

```js
    //レコードの情報（活動履歴テーブル1行目のメモ）を変更する
    record.活動履歴.value[0].value.活動日.value = "2020-01-01";     //1行目の活動日を変更
    record.活動履歴.value[1].value.活動内容.value = "メール";        //2行目の活動内容を変更
    record.活動履歴.value[2].value.メモ.value = "JavaScriptで変更";  //3行目のメモを変更
    return event;

```
| before | 
|:-:|
|  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/976b3bb5-c11d-a16a-6728-8e9eca21f061.png)| 
|**after**|
| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/536148/9dc5b3a5-d761-7b9f-249e-0e541b1bcc63.png)
 |

# まとめ
テーブルの値は階層が深くてややこしいですが、
`record.テーブルフィールド.value[行].value.テーブルのフィールド.value`
のように、**value**が3つ出てくる！とおぼえておくと良いかも知れません＾＾

私は2番めのvalueを忘れがちです（´-`）気をつけるぞ。