このスクリプトの読み方

1. 読み込み

   <script src="dist/jspsych.js"></script>
   <script src="dist/plugin-html-keyboard-response.js"></script>
   <link rel="stylesheet" href="dist/jspsych.css">

   ここでは、jsPsych本体、試行に使うプラグイン、画面の見た目を整えるスタイルシート（CSS）を読み込みます。

   jspsych.jsはライブラリです。ライブラリは、実験を作るときに使う機能をまとめたプログラムです。jsPsychでは、実験の初期化や試行の実行など、実験全体を動かす土台になります。

   plugin-html-keyboard-response.jsはプラグインです。プラグインは、実験で行う個々の試行の種類を追加します。このプラグインは、画面にHTMLを表示し、キーボード反応を扱います。後でtypeに書くjsPsychHtmlKeyboardResponseは、このプラグインが用意するものです。

   jspsych.cssはスタイルシート（CSS）です。画面に表示する内容の見た目や配置を整えます。JavaScriptのように実験の処理を実行するものではありません。

   この3つは授業用教材のdistフォルダに入っています。インターネットから取得するのではなく、このHTMLファイルsample-fixation.htmlからの相対的な場所を指定して読み込みます。

   読み込む順番も大切です。まずjsPsych本体、次に試行で使うプラグインを読み込み、その後に実験のスクリプトを実行します。プラグインを読み込まずに使おうとすると、jsPsychHtmlKeyboardResponseが見つからないというエラーになります。

2. 刺激を書く場所と提示順

   <body></body>には刺激を直接書かず、空のままにします。刺激の設定は<script></script>の中に変数を定義して、実際に提示する順番はjsPsych.run([...])の配列に並べて指定します。

3. 初期化

   const jsPsych = initJsPsych()

   実験を管理するjsPsychオブジェクトを作ります。

4. 試行の定義

   const fixation = { ... }

   fixation という変数名で、1回の試行の設定をオブジェクトとしてまとめます。ここでは後から別の値を代入しないため、const を使います。

5. 提示する内容

   type: jsPsychHtmlKeyboardResponse / stimulus: ...

   文字やHTMLを表示してキー反応を扱うプラグインを選びます。stimulus 内で「＋」を <div> で囲み、その div だけに font-size:60px を指定しています。この設定は、この刺激の「＋」だけに適用されます。

6. 終了条件

   choices: 'NO_KEYS' / trial_duration: 5000

   キーでは終了させず、開始から5000ミリ秒（5秒）後に試行を終えます。

7. 実行

   jsPsych.run([fixation])

   角括弧内に書いた順番で試行を実行します。今回はfixationを1回だけ実行します。

文字の大きさを刺激ごとに変更する

jsPsych 8.3.0の標準CSSでは、実験画面の基本文字サイズは 18px（印刷で使う単位に換算すると約13.5ポイント）です。そのまま「＋」を表示すると固視点としては小さいため、この例では60pxにしています。

stimulus: '<div style="font-size:60px">+</div>'

<div> は刺激の中に一つのまとまりを作るHTML要素です。開始タグの style 属性に文字サイズを書くことで、ページ全体ではなく、その div 内の文字だけを変更できます。

ブラウザ上の文字サイズには通常 px を使用します。例えば 36px、48px、60px のように値を変えて、見え方を確認できます。

変数の定義：const・let・varの違い

JavaScriptでは、値や試行設定に名前を付けて保存するものを変数と呼びます。このサンプルでは jsPsych と fixation が変数です。

const fixationDuration = 5000;

let trialCount = 0;
trialCount = trialCount + 1;

const は変数名に別の値を再代入できないという意味です。オブジェクトとして保存した試行設定の各項目まで完全に変更不能になる、という意味ではありません。初心者のうちは、まず const を使い、後から値を入れ替える必要がある場合だけ let を使うと覚えるとよいでしょう。