lab.js Builderでプログラムを作成しても,なかなか思い通りにいかない場合も多いでしょう。エラーが生じていても,何が起きているのかわからなければ対処することができません。どのような対処方法を取るべきかを紹介します。うまく動かない場合は,エラーが生じていて動かないという場合と,エラーは生じてないが意図しない動作をしている場合の2パターンがあります。

状態を把握する(エラーが生じているのかを知る)

lab.jsはjavaScriptで動いていますが,javaScriptのエラーメッセージを表示する方法と同じ方法でエラーメッセージを表示することができます。lab.jsの実行環境としてChromeまたはFirefoxが推奨されているので,今回はChromeでのエラーメッセージの表示方法を紹介します。Chromeでエラーメッセージを表示するには,ブラウザのデベロッパーツールのコンソールを表示します。具体的には,うまく動作しないlab.jsのプログラムを実施してる際に,右クリックでメニューを表示し,「検証」を選んでデベロッパーツールを表示します。そして,デベロッパーツールの「Console」というタブを選んでください。もし,何らかのエラーによってプログラムが理想通りに動かない場合には,「Console」に赤字でエラーメッセージが表示されています。エラーが表示された場合,javaScript自体に起因するもの,lab.js自体に起因するもののどちらかでしょう。エラーが表示されない場合は,プログラムとしては正常に動作しているものの,意図とは異なる動作をしているということになります(個人的にはこちらの方が修正に手間取ります)。少なくとも,うまく動作しない理由がエラーなのかどうかを切り替えてから,対処しましょう。

また,lab.js Builderでプログラムを動かしている際には,課題の進行に伴うデータ出力をリアルタイムに表示させるデータプレビューも利用できます。ウィンドウの右下のメニュー(以下の画像)をクリックすることで,データ出力が表示されるので,データ保存やパラメータ割り当てがうまく行かない場合は表示させてみましょう。このデータプレビューに表示されてない場合は,それらの変数がうまく割り当ていない可能性があります。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6cfa56d7-a49d-4683-a353-a239cf91b1a1/_2020-05-19_10.43.11.png

このページの下部に,よくあるエラーとその対応を少し紹介しますが(徐々に追加します),現実的には,みなさんそれぞれが様々な環境で様々なプログラムを作成するため,このページだけ対処することは極めて困難でしょう。基本的には,以下の対処方法を参考に,うまく動作しない原因を突き止め,自分で対処するというスタンスでお願いします。

対処方法

  1. 公式ドキュメントや公式動画で調べる

    lab.js · Support

  2. 公式サポートSlackチャンネルの過去ログを検索する

    Welcome to the lab.js documentation! - lab.js 20.0.1 documentation

  3. 公式サポートSlackチャンネルで質問する(英語でになります)

よくあるエラー(徐々に追加します)

例えば,${this.parameters.word}とすべきところを${this.parameter.word}と,打ち間違えていた場合には,存在しない変数を参照しているため,エラーが起きます。この場合には以下のようなエラーメッセージがコンソールに表示されます。英語なので,やや取っつきにくいかもしれませんが,よく読むと「word」というプロパティを持つオブジェクトが未定義(undifined)で読み込めてないという意味のようです。簡単に言えば,変数名が間違っているので読み込む対象がないというエラーですね。これは非常によく遭遇するものです。また,よく読むとlab.jsという文字も見えるので,ここからlab.jsの実行時に読み込めないものがあるということがわかるわけです。対処方法は,正しい変数名を指定です。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/44e6fc6e-9fe1-4e6d-9cee-fed0ef9af3a7/_2020-05-19_10.20.27.png

©2020 Masanori Kobayashi