Chapter 02

jsPsychのインストール・簡単な刺激の提示

snishiyama
snishiyama
2022.05.27に更新
このチャプターの目次
  1. はじめに
  2. 下準備
    1. チュートリアル用のフォルダを作成
    2. ファイルの拡張子を表示する
    3. テキストエディタを用意する
  3. jsPsych のインストール
  4. とりあえず jsPsych を使ってみる
    1. 新規ファイルの作成
    2. 文字列を提示する
    3. 画像を提示する
  5. デバッグ
  6. おわりに

はじめに

この章では，jsPsych を利用するための準備をします。また，jsPsych を用いて単純な文字列や画像を提示を体験します。

下準備

チュートリアル用のフォルダを作成

任意の場所（特にこだわりがなければデスクトップ）にこのチュートリアル用のフォルダを作成してください。名前はなんでも構いません。jspsych-tutorialとかが分かりやすいとは思います。なお，日本語を使用するのは避けましょう。ファイル名に日本語を使っているせいでプログラムが動かないということがたまにあります。

また，新しく作成したフォルダ内にpracticeというフォルダを作成してください。このフォルダに，今後編集するファイルを入れていきます。

ファイルの拡張子を表示する

それぞれのファイル名には最後の部分にそのファイルの識別子がついています。これが拡張子と呼ばれます。PC の初期設定では表示されないようになっていることが多いです。以下のリンク先を参考に拡張子を表示するようにしてください。拡張子を表示しておくと，どんな種類のファイルを編集しているのか意識しやすくなります。また，拡張子以外が同じ名前のファイルが複数存在してしまっていても，取り違えることが少なくなります。

Windows
https://pc-karuma.net/windows-10-show-explorer-file-name-extension/

Mac
https://support.apple.com/ja-jp/guide/mac-help/mchlp2304/mac

テキストエディタを用意する

jsPsych のスクリプトを編集するためにはテキストエディタが必要です。何でも構いません。特にこだわりがなければ，Visual Studio Code (VSCode) をオススメしています。

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

表示言語を日本語にしたい場合は以下のページを参考にしてみてください。Windows 用の説明ですが，Mac でも同様の方法で日本語化できるはずです。

https://www.kkaneko.jp/tools/win/vscode.html

VSCode を入れた場合は， Prettier という拡張機能も入れておいてください（導入・有効化の参考になるサイト）。Prettier は書いたスクリプトをきれいに整形してくれる便利ツールです。

jsPsych のインストール

公式のダウンロードページ にある zip ファイルをダウンロードしてください。特別な事情がない限り，最新版で大丈夫です（2022/05/12 時点で v7.2.1 が最新）。以下のリンクにアクセスして，Dist archive（zip）と書かれた部分をクリックしてください。

https://github.com/jspsych/jsPsych/releases/tag/jspsych%407.2.1

ダウンロードしたら zip ファイルを展開してください。Windows の場合，zip ファイルを選択した状態で右クリックしたのち，「すべて展開」をクリックしてください。Mac の場合はダブルクリックするだけで展開されます。

展開後のフォルダをpracticeフォルダの隣に保存してください（つまり，jspsych-tutorialの中）。フォルダの構造は以下のようになります。jspsych-tutorialというフォルダの中にjspsychの最新バージョンとpracticeというフォルダが入っています[1]。

jspsych-tutorial/
├── jspsych
└── practice

とりあえず jsPsych を使ってみる

新規ファイルの作成

テキストエディタを開いて，新しいファイルを新規作成してください。Visual Studio Code なら（おそらく他の多くのエディタでも）control + n（Mac の場合はcommand + n）で新規ファイルが作成できます。

文字列を提示する

新しいファイルに以下のコードを入力し，ファイルを保存してください。初回はファイル名を要求されるので後で見返したときに分かりやすい名前にしましょう。例えば，下のコードエリアの左上に書いてあるように，hello-world.htmlと付けて，practiceフォルダの中に保存してください。ファイル名は半角英数字にし，最後に.html をかならず付けてください。html はウェブページを作成する際によく使用されるファイルの種類です[2]。

そして，フォルダ内に保存されたhello-world.htmlをダブルクリックで開いてください。ブラウザ（chrome や firefox など）が起動し，中央に「hello world!」と書かれたページが開くはずです。適当なキーを押すと真っ白な画面になります。

hello-world.html
<!DOCTYPE html>
<html>
<head>
  <script src="../jspsych/dist/jspsych.js"></script>
  <script src="../jspsych/dist/plugin-html-keyboard-response.js"></script>
  <link rel="stylesheet" href="../jspsych/dist/jspsych.css">
</head>
<body></body>
<script>
  const jsPsych = initJsPsych()
  const trial = {
    type: jsPsychHtmlKeyboardResponse, // 試行のタイプ指定
    stimulus: 'hello world!', // 提示する刺激
  }

  jsPsych.run([trial]) // 提示順序の指定
</script>
</html>

さっそくコードがたくさん書かれていて気が滅入りそうですが，大まかな構造を理解しておくと見通しが良くなります。jsPsych を使った心理実験を作成する際に書くコードの構成は

  1. html のコードと
  2. JavaScript (jsPsych) のコード

に分けられます。

まず，以下が html のコードです。説明のためにコメントを付け足しています。<!--ほげほげ--> や // ほげほげ は実行時に処理されない部分で，コードに関するコメントとして機能します[3]。

<!DOCTYPE html>
<html>
  <head>
    <!-- jsPsych関連ツールの呼び出し -->
    <script src="../jspsych/dist/jspsych.js"></script>
    <script src="../jspsych/dist/plugin-html-keyboard-response.js"></script>
    <link rel="stylesheet" href="../jspsych/dist/jspsych.css" />
  </head>
  <body></body>
  <script>
    // ここにjavascriptコードを書いて実験を作成する
    // 基本的にはここを編集すれば良い
  </script>
</html>

html の部分で重要なのは，head タグ（<head></head>）で囲まれた３行です。ここで jsPsych の関連ツールの読み込みを行っています。ここでは 2 つのプラグインを読み込んでいます[4]。

  1. jspsych.js：jsPsych の本体です。これがすべての機能の核となっているので，どのコードでもこれを必ず最初に読み込みます。
  2. plugin-html-keyboard-response.js：（主に）文字列の提示[5]およびそれに対する反応の取得を可能にするプラグインです。

上で省略した<script></script> の間に，jsPsych（JavaScript）のコードを書きます。

const jsPsych = initJsPsych();
// 実験の設定変数の作成
const trial = {
  type: jsPsychHtmlKeyboardResponse, // 試行のタイプ指定
  stimulus: 'hello world!', // 提示する刺激
};

// 設定をもとに実験を実行する関数
jsPsych.run([trial]); // 提示順序の指定

JavaScript では，const 変数名 = あるいは let 変数名 = で変数を宣言します[6]。{} はオブジェクト型（連想配列）になります。データ型の種類や詳細については この記事 を参照してください。JavaScript を書いているといろんなカッコ{}, [], () を別々の用途で使うので，間違えないように注意してください。

この例のように，jsPsych では，実験（ここであれば 1 試行）の設定が指定された変数を作成（const trial = ）し，それを jsPsych.run() に入れることで実験として実行されます（run()の中身については次章で解説します）。上の例では，試行変数に次の 2 つの項目を設定しています。

  • type：試行のタイプ。jsPsychHtmlKeyboardResponse は，html 形式で刺激を指定し，キー入力を収集する試行。
  • stimulus：刺激。単に文字を提示する場合は文字列を指定すれば良い。

typeには読み込んだプラグインのタイプを指定できます。上記のheadタグの部分で読み込んでいるプラグインと対応していることを確認してください。

演習

  • 画面に表示される文字列を変更してみよう。
コード例
const jsPsych = initJsPsych();

const trial = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: 'Hi, there!', // ここを編集する
};

jsPsych.run([trial]);

日本語を提示する

上の演習で日本語を表示しようとして文字化けした人もいるかも知れません。文字化けを回避するためには，以下のように，<head>というタグの直後に，<meta charset="utf-8">を追加します。

hello-world-jp.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"> <!-- これを足す -->
    <script src="../jspsych/dist/jspsych.js"></script>
    <script src="../jspsych/dist/plugin-html-keyboard-response.js"></script>
    <link rel="stylesheet" href="../jspsych/dist/jspsych.css">
  </head>
  <body></body>
  <script>
    // 省略
  </script>
</html>

画像を提示する

画像を用意する

提示するための画像を練習用のフォルダ（practice）に用意します。このリンクから画像ファイルをダウンロードしてjspsych-logo.jpgという名前で保存してください。

コードを書く

新しいファイルを作成して，以下のコードを書いてください。ファイルを保存後ブラウザで開いて，挙動を確認してください。

show-image.html
<!DOCTYPE html>
<html>
  <head>
    <script src="../jspsych/dist/jspsych.js"></script>
    <!-- 画像提示用のプラグイン -->
    <script src="../jspsych/dist/plugin-image-keyboard-response.js"></script>
    <link rel="stylesheet" href="../jspsych/dist/jspsych.css" />
  </head>
  <body></body>
  <script>
    const jsPsych = initJsPsych();

    const trial = {
      type: jsPsychImageKeyboardResponse, // 画像提示用のタイプ
      stimulus: 'jspsych-logo.jpg', // 画像ファイル名
    };

    jsPsych.run([trial])

  </script>
</html>

ブラウザの中央に画像が表示されたはずです。hello-world.htmlから 3 点変更点があります。

  1. 読み込むプラグインをplugin-image-keyboard-response.jsに変更（さっきは plugin-html-keyboard-response.js）。
  2. type:をImageKeyboardResponseに変更（さっきは HtmlKeyboardResponse）
  3. stimulus:に保存したファイル名を指定

うまく画像が表示されない場合は，ファイルの名前や保存先が間違っているかもしれません。

デバッグ

プログラミングにバグはつきものです。コードを一旦完成させていざ動かしても動かないことはよくあります。jsPsych で書いた実験のコードにバグがある場合，html ファイルを開くとエラーが発生するタイミングで真っ白な画面でフリーズします。書いたコードが上手く動いていないということはすぐに理解できるのですが，どういうエラーが発生したのかさっぱりわかりません（通常，プログラミングをしていてエラーが発生した場合，エラーメッセージは目の届く範囲に出力されます）。実は，html ファイル（内の javascript）でエラーが発生した場合のエラーメッセージは，ブラウザの「javascript コンソール」で確認することができます。ブラウザごとに javascript コンソールの開き方は異なります。ここでは紹介しませんが，Google 先生に聞けばすぐに教えてくれるはずです。

以下の画像は，サンプルコードで発生させてみたエラーです（黄色で表示されている caution は無視してください）。どういうエラーが発生しているかわかりますでしょうか？

Safari の javascript コンソール

ReferenceError: Can't find variable: jsPsychHtmlKeyboardResponseとありますので，どうやら jsPsychHtmlKeyboardResponse をコードで使用しているのに，プラグインとして読み込むのを忘れているようです。html ファイルの先頭にプラグインを読み込むを追加すれば，このエラーは解決できそうです。

このように，バグを修正するためにはエラーメッセージを確認することが重要です。今回の例のようにわかりやすいエラーメッセージがばかりではないですが，経験とともにいろんなエラーメッセージが理解できるようになって，修正点に対する勘も養われてくると思います[7]。

おわりに

本章では，jsPsych をインストールし，文字列や画像を提示してみました。文字・画像刺激以外にも，動画や音声，リッカートスケールなども提示することができます。jsPsych 内にある examples フォルダに，サンプルのコード（それぞれ jspsych-video-keyboard-response.html, jspsych-audio-keyboard-response.html, jspsych-survey-likert.html など）をブラウザで開いて試してみたり，テキストエディタで開いてそのスクリプトを確認してみてください。

次回から数章にわたって，フランカー課題の作成をしていきます。フランカー課題を完成させ，jsPsych を用いた実験作成・実施の大まかな流れを理解していきます。

脚注

  1. プログラミングの際には「フォルダ」ではなく，「ディレクトリ」という用語が使われることが多いです。少しググってみました（このサイトとかこのサイト）が，ほとんど同じものだそうです。プログラミングに馴染みのない人は「フォルダ」を使うことが多いと思うので，本チュートリアルでも「フォルダ」を使用しました。 ↩︎

  2. より厳密には「コンテンツの構造を定義するマークアップ言語」（MDN Web Docs 「HTML の基本」より） ↩︎

  3. メモを書くときだけでなく，一時的にある行のコードを実行したくない場合にも//は便利です。行頭に//をつけて行ごとコメント化し，処理を回避できます（コメントアウトと言います）。 VS Code 上では，control + / (Mac ならCommand + /)で（複数行でも）コメントアウトができます。 ↩︎

  4. 公式リファレンスを見ると，jsPsych の開発者らは，jspsych.jsをライブラリと呼んでいますが，これらの用語の違いを私は理解していないので，簡単のため，どちらもプラグインと呼びます。 ↩︎

  5. 「文字列の提示」ではなく「html の要素の提示」と表現するほうがより正確です。このプラグインを使って画像を提示することも可能です。画像の提示にはそれ専用のプラグインがあるので，このhtml-keyboard-responseは文字列提示用のプラグインだと考えてもらって（今のところは）大丈夫だと思います。ただ，提示する文字列の見栄えや位置を変更する際には，stimulus:の部分で html タグを追加したりすることになるので，このプラグインが単に文字列を扱っているのではなく，html を扱っているのだということを頭の片隅に置いておいてもらえればと思います。 ↩︎

  6. constとletの違いは，その変数の値の編集を許容するかどうかです。constで宣言した変数の値は定数として扱われ，他の値の再代入ができません。リファレンス。 ↩︎

  7. 経験を積めば，出来上がった瞬間からバッチリ回るコードを書けるようになる！とは言えないのがなんとも苦しいところですね。もちろん絶対数や解決までにかかる時間は減ってきます。 ↩︎