1. はじめに

前回の記事で、REST API利用時のクエリ記法について触れましたが、文字列操作の説明の続きとして、今回は「レコードにアクセスするときのブラケット記法とドット記法」について、詳しく掘り下げていきたいと思います。

kintoneアプリ開発では、レコードデータにアクセスすることが多いですが、JSの記法に慣れてないと混乱しがちです。それぞれの記法がどのように機能するのか、そしてどちらを使うべきなのか、具体例を交えながら説明していきます。
混乱したり迷った際はこの記事を見返してもらえるとうれしいです。

2. 基本のデータ構造とアクセス方法

kintoneでは、レコードの各フィールドはオブジェクト形式で保持されています。このオブジェクトには、フィールドコードをキーとしてアクセスします。

例として、以下のようなレコードデータを考えてみましょう：

const record = {
    customerName: {
        value: "山田 太郎"
    },
    orderNumber: {
        value: "12345"
    }
};

このデータにアクセスする際、主に2つの記法があります。

ドット記法
ブラケット記法

3. ドット記法

ドット記法は、フィールドコードを直接指定してアクセスする方法です。

console.log(record.customerName.value); // "山田 太郎"

また、キー名が日本語（つまり、フィールドコードが日本語）でも問題なくアクセスできます。

console.log(record.名前.value); // フィールドコードが「名前」の場合

メリット

コードが簡潔で読みやすい。
タイプ数が少なく済む。
エディタの補完機能を活用しやすい。

デメリット

フィールドコードが固定で、動的に指定したい場合には使えない。

4. ブラケット記法

ブラケット記法では、キーを文字列で指定します。この方法は、フィールドコードを変数として扱う場合に便利です。

console.log(record["customerName"].value); // "山田 太郎"

下記のように変数を利用することができるのがブラケット記法の強みです。
（故に、動的にフィールドコードを指定できます！）

const fieldCode = "customerName";
console.log(record[fieldCode].value); // "山田 太郎"

※JSの記法上、ダブルクォーテーションで囲まれていると文字列、囲まれていない場合は変数になるので初学者の場合はここが混乱ポイントですね。
上記２つの例を見比べると理解できると思いますので困ったら見返してみてください。

メリット

フィールドコードを動的に指定できる。
特定の文字（例: ハイフンやスペース）が含まれるキーにも対応可能。

デメリット

ドット記法に比べて少し長くなるので、タイプ数が増える。
エディタの補完機能を活用しにくい。

5. どちらを使うべき？

固定的なフィールドコードを使用する場合: ドット記法を使うことで、コードの可読性を保てます。
動的にフィールドコードを扱う場合: ブラケット記法を使用する必要があります。

例えば、動的にフィールドコードを生成するケースでは、ブラケット記法が必須となります。

const fieldCodes = ["customerName", "orderNumber"];
fieldCodes.forEach((code) => {
    console.log(record[code].value);
});

6. まとめ

ドット記法とブラケット記法、それぞれにメリットとデメリットがあり、使い分けが重要です。
個人的には、基本的にはドット記法が楽なのでドット記法を使い、必要になったらブラケット記法を使うようにしています。
一方で常にブラケット記法で書かれるのを好む方もいますので、プロジェクトや関わるメンバー同士で決めてもらえればいいと思います！