デバッグをしてみよう

固定リンクがコピーされました

デバッグとは

固定リンクがコピーされました

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

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

固定リンクがコピーされました

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

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

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

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

まとめ

固定リンクがコピーされました

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

はじめよう kintone API