動かない？そんな時はデバッグをしてみよう！入門編

（著者：kintone エバンジェリスト 村濱 一樹）

はじめに

kintoneはJavaScriptを使って柔軟にカスタマイズができますが、「Tipsのとおりに書いたけどエラーが出て動かない」「思ったのと違う挙動をしてしまう」というように、解決策を見いだせずお困りの方をコミュニティでみかけることがあります。
今回は、いままでJavaScriptをあまり使ったことがなく、kintoneのカスタマイズでガッツリ触るようになった方向けに、kintoneカスタマイズのデバッグ方法をいくつか紹介したいと思います。

本Tipsを読むことで、JavaScriptが動かない時にまず何をしたら良いか？どこに注意すべきかが判断できるようになるかと思います。

簡単なデバッグ

最近のウェブブラウザには、JavaScriptやHTML/CSSをデバックするためのデバッガーがついています。（以下 開発者ツールとします）

• Chrome: デベロッパーツール
  
  • 開き方: Ctrl + Shift + I(MacはCommand + Option + I）
• Firefox: 開発ツール/Firebug
  • 開き方: Ctrl + Shift + I(MacはCommand + Option + I）
• Microsoft Edge : 開発者ツール
  • 開き方: F12

エラーを発生させてみる

エラーを解決するときの流れをツールで見てみましょう。（実行環境はChrome）
意図的にエラーを発生させてみます。
レコード詳細画面を開いた時に「会社名」フィールドの値をアラートダイアログに出すプログラムですが、
フィールドコードを間違ってしまうパターンです。

当然ですが、この状態で実際にレコード詳細画面を見ても何も表示されません。

どういうエラーが発生しているか見てみる

さっそくどういうエラーが発生しているか見てみます。
1. 開発者ツールを開く（JavaScriptが実行される画面で。この場合はレコード詳細画面。）
2. Consoleタブを押す
3. エラーログを確認する

エラーが発生していれば、上記のように、Consoleタブからエラーが表示されていることが確認できます。
エラーログは基本的に英語ですが、Googleなどで検索すれば原因がわかることが多いです。
上記の場合はvalueというプロパティがありませんといった内容ですが、「会社」というフィールドコードがないのが原因ですね。
（逆に言うと正しい場合はrecord["会社名"]["value"]は存在するのでエラーにならない）

他にも、JavaScriptのタイプミスをしてしまった時にもエラーとなってログに表示されますので、JavaScriptカスタマイズするときは基本的にログは見るようにしたほうがいいでしょう。

• alertをalretと書き間違えた場合

開発者ツールの便利な機能

他にも、実行中のプログラムを一時停止（ブレークポイント）したり、変数の中身をみたりすることもできるので、下記を参考に使いこなせるようになるとkintoneのカスタマイズも捗ります。
Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能

私がよくやっているのは、開発者ツールのconsoleに直接コーディングをして動作を確かめることです。
例えば、表示しているレコードのデータを取得する、というのもそのまま実行できます。

kintone絡みのエラー

上記はどちらかというとJavaScriptに依るエラーですが、kintone特有のよくあるエラーもあります。

JavaScriptカスタマイズをしたのに動かない・エラーも表示されない

意外によくあります。下記の可能性があります。

• jsファイルをアップロードしていない、もしくはリンクが間違っている
  設定画面を見なおして、ファイルがアップロードされているか、ファイルが正しいかなどをみましょう。
• イベントが指定されていない、間違っている 下記のようにイベントの指定がまちがっている場合があります。

• 最後のカッコが抜けている どちらかというとJavaScript起因の問題ですが、下記のように書かなければ実行されません。 興味のある方は"即時関数"で検索をしてみてください。

kintone REST APIを使ってデータを変更したいがうまくいかない

• 権限がない
  アプリの権限設定を見直し、権限が充分か確認してみましょう。自分の権限は問題ないが、他のユーザーはデータの更新ができない、などはよくあります。
• フィールドコードの指定が間違っている
  アプリのフィールド名とフィールドコードは別で設定できるので、勘違いしてしまう場合があります。フィールドコードが正しく指定できているかアプリの設定を見てみましょう。
• JSONの記述が間違っている
  テーブルなどを使っているアプリでは、どうしてもJSONが複雑になりがちでなかなかエラーが解決できない場合があります。
  その場合は下記のような整形・構文チェックサービスで、JSONが間違っていないかなど確認できます。
  https://syncer.jp/json-prettyprint
• フィールドを必須項目にしているのに値を指定しないままPOSTしている
  kintoneのフィールド設定では、「必須項目にする」というオプションがありますが、これを有効にすると、kintone REST APIを使ってデータを登録・更新するときも値の指定が必要です。忘れないようにしましょう。
• ルックアップフィールドのコピー元フィールドで重複禁止オプションを指定していない
  kintone REST APIでルックアップフィールドに値を指定する場合は、ルックアップに関連付けるアプリのコピー元フィールドの設定で「値の重複を禁止する」オプションを有効にする必要があります。 下記記事に詳しく載っていますので参考になります。 REST APIを使ってルックアップフィールドの一括更新を行う

複数アプリのデータを取得したいが、何故か中身が空になってしまう。

• APIからのレスポンスがある前に次の処理が実行されている
  kintoneのリクエスト系の標準APIは全て非同期リクエストとなっており、レスポンスを待たずに次の処理にいってしまい想定していた値がはいらない、ということがあります。
  処理を待ちたい場合は、コールバックメソッドに書いていく方法がありますがそれだと階層が深くなってしまいがちなので、下記のようにPromiseを使ったカスタマイズも有効です。 kintone カスタマイズで非同期処理をする

その他

• JavaScriptでエラーになっていると、処理が最後まで実行されず、kintoneへデータの反映などがされないことがあります。エラーがでてないか確認してみましょう。
• 基本的な話ですが、「kintone JavaScript コーディングガイドライン」に沿うとエラーを未然に防げます。 kintone JavaScript コーディングガイドライン

モバイル版のデバッグ

kintone のアプリのURLを以下に変更することでモバイルビューのデバッグを行うことができます。

• PCビュー ：https://sample.cybozu.com/k/{appId}
• モバイルビュー：https://sample.cybozu.com/k/m/{appId}

ゲストスペースの場合は以下のURLです。

• https://sample.cybozu.com/k/guest/{spaceId}/m/{appId}

最後に

まだまだ、記載できていないエラーのパターンもあると思いますが、少しでもkintoneのJavaScriptカスタマイズがしやすくなれば幸いです。
どうしてもわからないことは是非developer network communityで聞いてみてください。聞く際は「動かないんですけど」ではなく「こういうエラーがでています」というように、具体的な方が回答者も回答しやすいと思います。

このTipsは、2016年1月時点で確認したものになります。