jsPsych vs. lab.js

はじめに

オンライン実験を無料で実施したい場合，jsPsychまたはlab.jsが選ばれることが多いかと思います。現在のところ，jsPsychはcognition.run，lab.jsはopenlabをホスティングサービスとして利用することで無料でオンライン実験（実施，データ保存を含む）を行うことができます。jsPsychとlab.jsともに心理学実験用のJavaScriptライブラリという点で似ています（lab.jsの方が後発）。では，この2つのライブラリにはどういった違いがあり，どちらを利用するのがよいのでしょうか？たまにどちらがいいのかを聞かれることもあるので，ここで整理してみたいと思います。

まず，前提として，小林はjsPsychは今年（2020年）に入ってから始め，lab.jsは3月くらいから始めました。それまではInquisit Webというソフトウェアでオンライン実験をしていました（ちなみに，Inquisitはプログラミング経験があるほど使いにくいです。ループがないので繰り返す場合はコピペになるし，ぶつぶつ･･････。）。このように，jsPsych，lab.jsともにオンライン実験を実施したことがありますが，共に使用歴は1年未満です。jsPsychは最近ほとんど使っていないので，バージョンアップによる変化があるかもしれません。不正確な情報が含まれている場合もあるので，ご容赦ください。

1つ目の違い：Builderの有無

jsPsychとlab.jsの違いはいくつかありますが，その1つはGUIでの作成が可能かどうかです。ご存じのように，lab.jsにはlab.js BuilderというGUIでの作成ツールが存在します。これは，psychoPyでいうBuilderやOpen Sesameと同様のものです。ノーコードで簡単なオンライン実験であれば作成することができます。これは，初学者にとっては大きなメリットですし，教育者としても同様です。しかも，ブラウザで利用できるため（ソフトウェアのインストールが不要なため），オンライン授業では非常に利用しやすいわけです（詳しくは別記事でまとめる予定）。実験作成は，各過程をパーツに分けて，それぞれのパーツを作成し組み合わせるという流れになりますが，Builderを使うことで動作の実装というコードで書く作業なしでパーツごとの作成のみに焦点を当てられる点はメリットです。実験作成の全体的な手続きを理解することができます。一方で，jsPsychにはGUIでの作成ツールは提供されていません（開発されていた（いる？）痕跡はあります）。プログラミング未経験者だと最初は作成が大変かもしれません（プログラミング経験があっても，jsPsychは独自の関数の利用がメインなので，一定の学習は必要ですが）。

2つ目の違い：組み込まれている機能

2つ目として，組み込まれている機能（数）の違いがあります。lab.jsは実験作成に必要な機能の多くが既に組み込まれていますが，jsPsychは実験に必要な機能をプラグインとして自分で読み込んで利用していくスタイルです。例えば，HTMLに文字を表示し，キーボードを押すと画面が切り替わるという試行を作成する場合，lab.jsはpage HTMLコンポーネントを使えば，ノーコードで作成できます。一方で，jsPsychはHTMLを表示してキーボード入力を受け付けるというプラグイン（jspsych-html-keyboard-response.js）を読み込んだ上で，html-keyboard-responseのモジュールを作成する必要があります。どちらがいいかはわかりません。jsPsychは各実験において必要最小限の機能のみを組み込むことで軽量化できるという利点（利点というほどの効果があるかは不明）がある一方で，プラグインの組み込み忘れなども起こりえます。jsPsychのプラグインはプラグインごとの質に差があり，使いにくいものも含まれます。特に画面レイアウトに関してjsPsychはシンプルなので，自分である程度，レイアウト構成を行わなければならない場合があります。その場合はHTMLかCSSの知識がないと難しいでしょう。

一方で，lab.jsは元々の画面レイアウトの構成がしっかりしているので，細かいレイアウト構成を調整しようとしなければそのまま利用できると思います。例えば，多肢選択型の質問紙を作成する場合，jsPsychではjspsych-survey-multhi-choice.jsを読み込んで作成しますが，このプラグインでは選択肢の選択ボタンが質問項目の後に配置されています（例. 非常によくあてはまる○）。lab.jsは質問項目の前に配置されています（例. ○非常によくあてはまる）。一般的には質問項目の前に選択ボタンが配置されるので，jsPsychではやや特殊なレイアウトだと思います。もし，jsPsychで質問項目の前に選択ボタンを持ってきたい場合はプラグイン側（jspsych-survey-multhi-choice.js）の方を修正する必要があります（CSSでもできますが，こちらの方が楽です）。なお，lab.jsは元々のレイアウト設定があるため，細かいレイアウトの修正は難しいように思えますが，HTMLを直接記述できるコンポーネント（Screen HTML）を使えば大丈夫です。また，lab.js BuilderでCanvasコンポーネントを使えば，実際の画面に刺激を配置できるので直感的に構成可能です。多肢選択型の質問紙についてはjsPsychの方が手間がかかる点を述べましたが，jsPsychはプラグインの影響力が強いので，プラグインを自分で改良したり，プラグインを開発することで，効率的な実験作成が可能になるという場合もあるでしょう。

3つ目の違い：変数の参照範囲

3つ目の違いとして変数参照の範囲に違いがあります。jsPsychは普通に（？）JavaScriptの同じように変数を参照することができます。例えば，刺激とする文字列を変数として格納しておいて，別の場所でその編集を参照するなどです。以下のような注視点を表示するコードのうち，stimulusの部分は文字列をそのまま書いてもいいですし，別の変数に入れた値を参照するように置き換えることも可能です。

//注視点
const fixation = {
    type: 'html-keyboard-response',
    stimulus: '+',
    trial_duration: 400,
    choices: jsPsych.NO_KEYS
};

//注視点
const fixationText =  '+';
const fixation = {
    type: 'html-keyboard-response',
    stimulus: fixationText,
    trial_duration: 400,
    choices: jsPsych.NO_KEYS
};

一方で，lab.jsは基本的にはコンポーネント単位でしか変数を参照できません。コンポーネントAで以下のような変数を作成しても，コンポーネントBでは一般的なJavaScriptのように参照できません。

//コンポーネントA
const fixationText = '+';

//コンポーネントB
const stimulus = fixationText;  //undefinedになる 

これは変数の参照範囲がコンポーネントに閉じているためです。もし，コンポーネントを超えて変数を参照したい場合は以下のようにwindow.xxxxに格納する必要があります。

//コンポーネントA
const fixationText = '+';
window.fixationText = fixationText;

//コンポーネントB
const stimulus = window.fixationText;  

ここで言いたいことは，lab.jsは普通のJavaScriptとして書こうとするとややこしい点が多いということです。関数の定義も可能ですが，その関数をコンポーネントを超えて利用するにはwindowに格納しなければなりません。

まとめ

jsPsychとlab.jsの違いはまだまだあるのですが（オンライン実験化のしやすさなど），大きな違いについてはここまで書いた通りです。結局のところ，どちらがいいのかですが，どちらを使っても複雑な実験をする場合にはコードを書かなければならず，その際にはHTML, CSS, JavaScriptの知識が必要となります（すべての実験プログラムはコードへ通じる）。どういった実験が複雑かですが，例えば，画面の一部だけを書き替えるとか，一定のルールに基づくランダム化（セミランダム化），などでしょうか？この点を踏まえると，簡単な実験だけの場合はlab.js，複雑な実験をするという場合はコード書かなければいけなくなるので，最初からコードのjsPsychの方が学習効率はよいかもしれません（最初は大変かも）。lab.jsを使い，複雑な部分以外をBuilderで作り，複雑な部分をコードで作るということも可能ですが，Builderとコードの両方を覚えないといけないという手間もあります。複雑な部分が少ない場合はlab.jsもよいかもしれません。

いずれにせよ，自分が作りたい実験プログラムをパーツ単位に分解し，どのような制御が必要かを考慮して選択するということが重要でしょう。プログラミング初学者に教える必要がある場合（特にオンライン授業の場合）は，lab.jsの方がおすすめです。

この記事は，Online Psychological Experiment Advent Calender 2020の11日目でした。