デバッグとは

プログラムを実装して動作を確認してみると、エラーが出ていたり、期待どおりに動かなかったりします。
そんなときに行うのが「デバッグ」です。
デバッグとは、プログラムに潜む欠陥（バグ）を探して取り除く作業のことです。

kintone カスタマイズをデバッグしてみよう

Web ブラウザー上で動く kintone JavaScript API を使ったカスタマイズは、ブラウザーの開発者ツールを使ってデバッグすることが多いです。
kintone では、基本的に次の流れでデバッグします。

1. 開発者ツールのコンソール画面に、エラーが表示されているかどうかを確認する。
2. エラーがある場合は、エラーメッセージを確認し、エラーが出ている箇所を特定する。
3. console.log() や debugger を設定してデータの中身を確認する。
4. エラーの原因を解決する。

さっそくわざとエラーが出るカスタマイズを適用して、デバッグしていきましょう。

まず、kintone アプリストアから 問い合わせ管理 を追加します。
「サンプルデータを含める」のチェックボックスを選択してください。
続いて、次のコードをコピーしてテキストエディタに貼り付けます。

1
2
3
4
5
6
7
8
9

(() => {
  'use struct';
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;
    const customer = record['Castomer'].value;
    window.alert(`顧客名は${customer}です！`);
    return event;
  });
})();

文字コードを「UTF-8（BOM なし）」にしてファイルを保存します。ファイル名は何でもよいですが、拡張子は「.js」にしてください。
保存したファイルを追加したアプリへ適用して、アプリを更新してください。

アプリを更新できたら、一番上のレコードを開いてみましょう。

STEP 1. 開発者ツールのコンソール画面に、エラーが表示されているかどうかを確認しよう

開発者ツールは、Windows の場合は F12、Mac の場合は command + option + I で開きます。
次に、開発者ツールの「コンソール」タブを開いてみましょう。

赤いメッセージが表示されているのを確認できましたか？
このように、プログラムでエラーが発生すると、赤い文字でコンソールにエラーメッセージが表示されます。

STEP 2. エラーメッセージを確認し、エラーが出ている箇所を特定しよう

エラーメッセージは、次のような形式で表示されます。

1
2
3

Uncaught SyntaxError: Cannot set properties of undefined (setting 'value')      download.do?app=360&contentId=8075&jsType=DESKTOP&hash=8ab1624d5a:5 
^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ^^^
エラーの種類                            エラー内容の説明                                                            ファイル名                                                                                                                             行番号

「エラー内容の説明」は「Uncaught TypeError: Cannot set properties of undefined（setting 'value'）」ですね。
直訳すると、「定義されていない value プロパティを読み取れない」です。
このエラーの場合は、アプリに設定したフィールドコードと実装したソースコードのフィールドコードが違っているときによく発生します。
このエラーは、5 行目で発生しているようです。

1
2
3
4

Uncaught SyntaxError: Cannot set properties of undefined (setting 'value')      download.do?app=360&contentId=8075&jsType=DESKTOP&hash=8ab1624d5a:5 
    at download.do?app=364&contentId=8090&jsType=DESKTOP&hash=b7ed787b52941ccd47b25c656120db317fa937ee:5
    at show.js:270
    ...

kintone カスタマイズの場合は、エラーメッセージの 2 行目の「download.do?app=n&...」をクリックするとエラーが発生しているコードの行へ飛ぶことができます。

ほとんどの場合、マウスカーソルがあたっているコードの周辺にエラーの原因があります。
今回は const customer = record['Castomer'].value; のあたりに原因がありそうです。

STEP 3. データの内容を確認しよう

思ったとおりのデータが設定されているかを確認したいときは、console.log() を使って内容をアウトプットしたり、debugger を使ってプログラムを一時停止したりします。

console.log() を利用する

アウトプット方法・DOM操作・基本文法 で、console.log() を使うと、「コンソール」にデータの内容を出力できることを学びました。
デバッグでも、データの内容を確認するためによく console.log() を利用します。

では、record オブジェクトの中身を確認してみましょう。
4 行目の後に、console.log(record); と追記して、カスタマイズを適用し直します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

(() => {
  'use struct';
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;
    console.log(record); // 追記1
    const customer = record['Castomer'].value;
    window.alert(`顧客名は${customer}です！`);
    return event;
  });
})();

アプリを更新したら、もう一度レコードを開いてみましょう。
開発者ツールのコンソールに表示された ▶ {レコード番号: {…}, ... の▶をクリックして展開すると、開いているレコードの中身が表示されます。

record の中身を見てみると、「Castomer」というプロパティはありません。

debugger を設定する

debugger を使うと、プログラムが実行されたときに、debugger を設定した箇所の手前で一時停止できます。
console.log() と同様にデータの中身を確認したいときに使います。

console.log(record): の下に debugger; を追記して、カスタマイズを再適用しましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

(() => {
  'use struct';
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;
    console.log(record); // 追記
    debugger; // 追記2
    const customer = record['Castomer'].value;
    window.alert(`顧客名は${customer}です！`);
    return event;
  });
})();

開発者ツールを開いている状態でレコードを開くと、「デバッガ内で一時停止」が表示され、一時停止します。
このときプログラムは、debugger と書いてある手前まで実行されている状態です。

「ソース」タブで、変数にマウスカーソルをあていると、データの中身を見ることができます。
ソースコード内の「record」にマウスカーソルをあて、record の中身を確認してみましょう。

また、右側の「範囲」セクションで「▶ローカル」の▶をクリックして展開すると、その時点でのローカル変数の中身を見ることができます。

やはり、「Castomer」というプロパティはなさそうですね。

「デバッガ内で一時停止」横の再生ボタンを押すと、次の debugger と書かれている箇所まで再生します。
この例では debugger が書かれている箇所は他にないため、最後までプログラムが実行されます。

このように、debugger は、同時に複数の変数の中身を確認したいときに便利です。
ただしプログラムが一時停止してしまうので、運用を開始したアプリには debugger を書かないでください。

STEP 4. エラーの原因を解決しよう

console.log() や debugger でデータの中身を確認すると、「Castomer」というプロパティはありませんでした。
「Castomer」というプロパティがないので、その下の value というプロパティは読み取れません。 そのため、「Uncaught TypeError: Cannot set properties of undefined（setting 'value'）」というエラーが発生しています。
アプリのフィールドの設定を確認すると、「顧客名」フィールドのフィールドコードは「Customer」でした。 どうやらタイプミスをしていたようです。

原因がわかったので、コードを修正しましょう。
Castumer を Customer に直してください。
デバッグ用に追記した console.log(record); と debugger; を消します。

1
2
3
4
5
6
7
8
9

(() => {
  'use struct';
  kintone.events.on('app.record.detail.show', (event) => {
    const record = event.record;
    const customer = record['Customer'].value; // Castumer を Customer に直す
    window.alert(`顧客名は${customer}です！`);
    return event;
  });
})();

カスタマイズを適用し直してレコードを開くと、プログラムが正常に実行され、アラートに顧客名が表示されました。

デバッグのポイント

エラーを解決する方法はケースバイケースです。
よくあるエラー にエラーの代表例と対応方法をまとめましたが、 これがエラーのすべてではありません。

エラーを解決するために大事なことは、エラーメッセージを読んで意味を理解することと、意味がわからなければエラーメッセージで検索して解決策を調べることです。
一般的な JavaScript のエラーメッセージが出ていることも多いので、インターネット上にまとめられている情報はとても有益です。
解決方法がわからないエラーに遭遇したら、まずは検索エンジンでエラーメッセージを調べてみましょう。

よくあるエラー

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

エラー例：ReferenceError: alart is not defined

エラー例を直訳すると、「alart が定義されていない」です。
定義されていない変数名や関数名があるときに発生するエラーです。

このエラーの場合は、エラーが発生している箇所で次のことを確認しましょう。

• 変数や関数名のスペルが正しいか。
  大文字小文字もすべて一致させる必要があります。
• 必要な変数や関数を定義しているか。

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

エラー例：Uncaught TypeError: Cannot read property 'value' of undefined

エラー例を直訳すると、「定義されていない value プロパティを読み取れない」です。
先ほどの「〜 is not defined」エラーと似ていますが、このエラーは「変数や関数は存在するけど value というプロパティがないので読み取れないよ」というエラーです。

kintone カスタマイズでは、アプリに設定したフィールドコードと実装したソースコードのフィールドコードが違っているときによく発生します。
たとえば「フィールドコードに Company と設定したけど、ソースコードで Campany と打ち間違えてしまった」という場合です。
また、一般的なオブジェクトのプロパティ名をタイプミスしたときにも、このエラーが発生します。

このエラーを解決するには、エラーが発生している箇所で次のことを確認しましょう。

• kintone のフィールドの場合は、kintone で設定したフィールドコードと一致しているか。
  大文字小文字もすべて一致させる必要があります。
• オブジェクトの場合は、プロパティ名にスペルミスがないか。

Uncaught SyntaxError: Unexpected end of input

エラー例：Uncaught SyntaxError: Unexpected end of input

エラーを訳すと「予期しない入力の終わり」です。
開き括弧に対して閉じ括弧の数があっていない場合に発生するエラーです。

1
2
3
4

function sayHello() {
  if(true) {
    console.log('Helllo World');
  }

このエラーを解決するには、閉じ括弧を忘れている箇所にきちんと閉じ括弧を付けます。

Uncaught SyntaxError: Unexpected token 記号

エラー例： Uncaught SyntaxError: Unexpected token ,

エラー例を訳すと、「予期しないトークン記号」です。 括弧を忘れていたり、カンマの位置がおかしいなど、エラーの原因はさまざまです。

1
2
3

if true {
  console.log('Helllo World');
}

このエラーを解決するには、正しい JavaScript の文法に従うように修正します。

最初のバグは本当に虫だった！？

世界最初のバグは本物の虫（bug）だったことを知っていますか？

1947 年 9 月 9 日、ハーバード大学の計算機「マークⅡ」が突然動かなくなりました。
当時の計算機（コンピュータ）は、私達が普段使っているコンピュータよりもはるかに大きく、たくさんの電子部品から構成される機械でした。
原因を調査していた開発者のグレース・ホッパー氏は、たくさんの部品の中から犯人を見つけます。
それが、回路の間に挟まった蛾だったのです。
このとき見つかった蛾は、「実際にバグが見つかった最初の例」としてグレース・ホッパー氏の作業日誌に貼り付けられています。

まとめ

今回は、デバッグについて学習しました。
バグは、コードを書いていると必ずぶつかる壁なので、デバッグ方法は身につけておきたいですね。
次回は、 カスタマイズビュー について学習しましょう。