Chromeの開発者ツールのGeminiを使ってkintoneカスタマイズのよくあるエラーをデバッグしてみた

Chromeの開発者ツールにエラーメッセージをGeminiに解説してもらえる機能が搭載された

「Google I/O 2024」で、Chrome の開発者ツールに Google の AI である Gemini が組み込まれることが発表されました。
https://developer.chrome.com/blog/web-at-io24?hl=ja
開発者ツールに Gemini が組み込まれることで、Gemini がコンソールに表示されるエラーメッセージを解説し、エラーの対処方法を提示してくれます。

つい先日、日本でもこの機能を使用できるようになったので、今回は kintone カスタマイズでよくあるエラーを、開発者ツールの Gemini を使ってデバッグしてみました。
いわゆるやってみた系の記事です。

確認した環境

• Chrome v 126.0.6478.183（Chrome v125 以上が必要）

Geminiを利用する設定

開発者ツールで Gemini を利用するには、言語設定と AI 利用の有効化を設定します。

1. Chrome の開発者ツールを開き、設定アイコンをクリックします。
2. [Perefence]タブを開き、言語設定を「英語（アメリカ）」に変更します。
   
3. Chrome を再起動します。
4. 再度、開発者ツールの設定メニューを開きます。
5. [Perefence]タブの「Console」セクションの「Understand console messages with API」を選択します。
   

使い方

開発者ツールの[Console]にエラーメッセージの上で右クリックすると、「Understand this error」メニューが表示されます。
「Understand this error」をクリックすると、エラーの内容が Gemini に送信されます。

初回は、Gemini の利用に同意する旨のメッセージが表示されます。
画面の指示に沿って、利用に同意しておきましょう。

Gemini への問い合わせが完了すると、Gemini の出力結果として、エラーの原因の解説や、修正後のコードが表示されます。
（スクリーンショットでは、コード部分のレイアウトが崩れています。いつか直るのかな。）

kintoneカスタマイズでよくあるエラーの内容をGeminiに解説してもらう

cybozu developer network の デバッグをしてみよう のよくあるエラーに掲載されている、次のエラーを Gemini に解説してもらいます。

• ReferenceError: 変数名や関数名 is not defined
• Uncaught TypeError: Cannot read property プロパティ名 of undefined
• Uncaught SyntaxError: Unexpected end of input

ReferenceError: 変数名や関数名 is not defined

このエラーは、定義されていない変数や関数を参照したときに発生します。
よくある間違いは、変数名や関数名の typo です。

以下のコードを kintone に適用して、エラーを再現してみましょう。
console.log() に渡した変数名を typo してしまったコードです。
なお、コメント行を抜いたコードを kintone アプリに適用しています。以降のコードもすべてコメント部分を抜いてアプリに適用しています。

// recordsをtypoしたので動かない
(() => {
  kintone.events.on('app.record.index.show', (event) => {
    const records = event.records;
    console.log(record);
    return event;
  });
})();

上記のコードを kintone アプリに適用してレコード一覧画面を開くと、次のエラーメッセージが表示されます。

Uncaught ReferenceError: record is not defined

Geminiによるエラーの解説

Gemini のエラーの解説を見てみましょう。

The error "Uncaught ReferenceError: record is not defined" is happening because you're trying to access a variable named record in your code, but you've actually defined a variable called records (plural). JavaScript is case-sensitive, so record and records are treated as distinct variables.

「record という存在しない変数を呼び出している。定義されている変数は records だ」という解説が表示れました。
エラーの原因を正しく解説していることがわかります。

この解説の下には、より詳しい解説や修正後のコードも表示されました。
Gemini から提案された、修正後のコードは次のとおりです。

(() => {
  kintone.events.on('app.record.index.show', (event) => {
    const records = event.records;
    console.log(records); // Correctly access the records variable
    return event;
  });
})();

修正後のコードでは、records を参照するように訂正されています。

Uncaught TypeError: Cannot read property プロパティ名 of undefined

存在しないプロパティの値を参照しようとしたときに発生するエラーを再現してみましょう。
このエラーは、レコードの値を取得するときにフィールドコードを間違えていると遭遇するエラーです。

 // 名前というフィールドコードが存在しないので動かない
(() => {
  kintone.events.on('app.record.edit.show', (event) => {
    const record = event.record;
    record.名前.value = 'piyo';
    return event;
  });
})();

上記のコードを kintone アプリに適用してレコード編集画面を開くと、次のエラーメッセージが表示されます。

Uncaught TypeError: Cannot set properties of undefined (setting 'value')

Geminiによるエラーの解説

Gemini のエラーの解説を見てみましょう。

The error "Uncaught TypeError: Cannot set properties of undefined (setting 'value')" means you're trying to set a property (value) on an object that doesn't exist yet. In your code, the problem lies in this line:
record.名前.value = 'piyo';

record.名前 is undefined: The record object you get from the app.record.edit.show event contains the data of the record being edited. However, it seems the field with the key 名前 (which likely represents a field name in your kintone app) doesn't exist in the record object at the time you're trying to access it.

「存在しないか未定義のフィールドの value プロパティに設定しようとしている」という解説が表示されます。
詳しい解説では、kintone アプリに名前というキーのフィールドが存在しない可能性を指摘しています。
エラーの原因を的確に解説していることがわかります。

次に、修正後のコードも確認してみましょう。
今回は次の 2 種類のコードが提示されたのですが、どちらもエラーを解決できないコードでした。
本当のフィールドコードは Gemini に共有されていないので、仕方ないかもしれません。

• コード 1：record.名前 の存在チェックをして、存在するときだけ値を設定する

  const record = event.record;
  if (record.hasOwnProperty('名前')) {
    record.名前.value = 'piyo';
  } else {
    console.warn("Field '名前' not found in record.");
  }
  return event;
  

• コード 2：record.名前 がなければ、value プロパティを生やす

  const record = event.record;
  record.名前 = record.名前 || { value: '' }; // Set an empty value if not present
  record.名前.value = 'piyo';
  return event;
  

Uncaught SyntaxError: Unexpected end of input

このエラーは閉じカッコの数が合わない場合に発生するエラーです。

// if文の閉じカッコがないので動かない
(() => {
  kintone.events.on('app.record.edit.show', (event) => {
    const record = event.record;
    if(record.Name.value === 'piyo') {
      record.Name.value = 'piyopiyo';

    return event;
  });
})();

上記のコードを kintone アプリに適用してレコード編集画面を開くと、次のエラーメッセージが表示されます。

Uncaught SyntaxError: Unexpected token ')'

Geminiによるエラーの解説

Gemini のエラーの解説を見てみましょう。

The error "Uncaught SyntaxError: Unexpected token ')'" in your browser means that JavaScript encountered a closing parenthesis ')' where it wasn't expecting one. This usually happens due to a missing or misplaced opening parenthesis '('.
Here are some common reasons and how to fix them:

想定していない閉じ括弧が存在することを指摘しています。
また、修正後のコードとしては、3 種類のコードが提示されました。

• コード 1：行の終わりには ; をつける

  // Incorrect:
   myFunction() 
   // Correct:
   myFunction();
  

• コード 2：if 文のカッコがない

  // Incorrect:
  if (condition)
  // Correct:
  if (condition) {
    // code
  }
  

• コード 3：for 文のブロック文は {} で囲む

  // Incorrect:
  for (i = 0; i < 10; i++)
  // Correct:
  for (let i = 0; i < 10; i++) {
    // code
  }
  

エラーの解説はあっていますが、提示された修正方針はいずれも的外れでした。
また、一般的な内容になっているので、実際のコードのどの箇所で発生したかは自分で見つける必要があります。

所感

開発者ツールから直接エラーメッセージに関するヒントを AI に問い合わせできるのは、非常に便利だと感じました。
直接問い合わせできるおかげで、「エラーメッセージをコピペしてチャット UI 型の AI に貼り付ける」という手間を省けます。
今回のケースでは、ズバリな修正後のコードは 1/3 の勝率でしたが、Gemini によるエラーの解説は原因を特定するためのヒントになりました。

今回のやってみたを通して気になった点は次の 2 つです。

• 現在は英語だけをサポートしているので、英語に対して抵抗感がある人には使いづらいかもしれません。
• 違うエラーメッセージで何度か試していると、結果の精度が低下していると感じることがありました。
  エラーメッセージの解説はほぼ合っていますが、修正後のコードがどんどん的外れになりました。
  その場合は、Chrome を再起動してやり直すと改善されたことを確認しています。

開発者ツールの Gemini だけあれば怖いものなしにはまだ遠いかもしれませんが、デバッグ時の補助として使うにはよさそうです。