Zenn
📝

Node.js環境で作成する心理学実験

2021/12/24に公開
JavaScript
Node.js
jsPsych
tech

はじめに

2021 年 10 月に jsPsychv7系がリリースされました（7.0.0 のリリースページ）。このリリースを期に jsPsych はnpmパッケージとして公開され，Node.jsおよび付随する開発環境を利用しやすくなりました[1]。Node.jsは JavaScript の実行環境で，npmはNode.jsのパッケージ管理ツールです。詳細は以下の記事などを参照してください。

個人的に以前からNode.jsに興味があったので，jsPsych v7系のリリースをきっかけに触り始めることにしました。今回の記事では，npmパッケージとして jsPsych を利用して心理実験を作成する方法を紹介します。

本記事は psyJS Advent Calendar 2021 24 日目の記事になります。

準備

まず，大元の Node.js をインストールします。公式インストーラを用いるなどしてインストールしてください。

次に，練習用のフォルダを作成します。そして，ターミナルやコマンドプロンプトを開き，そのフォルダがカレントディレクトリの状態で以下のコマンドを実行します。

npm init

いろいろな情報が求められますが，今回は練習用なのでデフォルト設定で問題ないです。Enterを連打してください。

続いて，使用するモジュールをインストールします。以下の 6 つです。

  • jspsych
  • @jspsych/plugin-html-keyboard-response
  • webpack
  • webpack-cli
  • style-loader
  • css-loader
npm install jspsych @jspsych/plugin-html-keyboard-response webpack webpack-cli style-loader css-loader

jspsychと@jspsych/plugin-html-keyboard-responseはお馴染みの jspsych ライブラリとhtmlKeyboardResponsePluginです。今回の記事で使用するプラグインは一つだけなので，これで十分です。他のプラグインも使用する場合はその都度対応するモジュールをインストールする必要があります。ここは少し面倒ですね。

webpack・webpack-cliはNode.jsで作成したコードをいい感じにしてくれるモジュールです。style-loader・css-loaderはwebpackを css ファイルに対しても有効にするためのモジュールです。

ディレクトリの整備

webpack 公式ガイドにならって，srcとdistディレクトリを作成します。npm init や モジュールのインストールをしたとき合わせて生成されたディレクトリも含めて，以下のようなディレクトリ構成になっているかと思います。

.
├── dist
├── node_modules
├── package-lock.json
├── package.json
└── src

srcとdistは次のように使い分けます。実験実施の際は，distディレクトリをオンライン実験用サーバーにアップロードします。

  • src: 直接編集するjsファイルを配置する。
  • dist: webpackを用いてsrcのファイルおよびそこで利用されるモジュールをまとめたjsファイルを配置する。また，まとめjsファイルを読むこむ html ファイルを配置する。

実験を作成する

実験用の js ファイルをsrcに作成します。ファイル名はhello-world.jsとしています。以下のコードは，公式のサンプルコードに３行目を追加したものです。

hello-world.js
import { initJsPsych } from 'jspsych';
import htmlKeyboardResponse from '@jspsych/plugin-html-keyboard-response';
import 'jspsych/css/jspsych.css';

const jsPsych = initJsPsych();

const trial = {
  type: htmlKeyboardResponse,
  stimulus: 'Hello world!',
};

jsPsych.run([trial]);

webpack でバンドル

webpack を使って，import 文で読み込んでいるモジュールや css ファイルをひとつのjsファイルにまとめ（バンドルし）ます[2]。

まず，webpack の動作を設定するためのファイルwebpack.config.jsを作成します。公式のコードを一部編集したものです。

  .
  ├── dist
  ├── node_modules
  ├── package-lock.json
  ├── package.json
  ├── src
+ └── webpack.config.js
webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/hello-world.js', // 上のファイル名に合わせる
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

そして，ターミナル・コマンドプロンプトで以下のコマンドを実行し，バンドルを行います。

npx webpack

distフォルダを確認すると，main.jsというファイルが作成されています。ファイルの中身のコードは読めたものではないですが，これで問題なく動作します。

バンドルされたファイルを読み込む html を作成する

distフォルダに以下の内容の html ファイルを作成してください。重要なのは下から 3 行目で生成されたmain.jsを読み込んでいる部分です。<title>の部分は何でも構いません。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Hello world</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

実験を実行する

普段 jsPsych を利用して作成した実験を実行するときと同様に，html ファイルを開くと実験を実行することができます。今回のコードでは，画面中央にHello world!と表示され，何かしらのキーを押下すると消えるという単純な動作になっています。

おわりに

今回の記事では，npmモジュールとして jsPsych を利用して心理実験を作成する方法を紹介しました。個人的には以前から興味のあったNode.jsを利用する JavaScript 開発の一端に触れることができ満足しています。

それでは，今後こういった方法が主流になっていくかと問われると当分はそうならないだろうと思っています。心理実験作成をきっかけにプログラミングを始めた人にとってこのような手法のハードルは高いような気がします。

一方で，全くの趣味の領域かというとそんなことはなく，Node.jsでの開発によって得られるメリットもあると考えています。例えば，様々な支援ツールを利用できることが挙げられます。エディタが関数や変数の候補を表示してくれたり，エラーの検出をしてくれたりします[3]。また，TypeScriptを利用して型を活用できるようにすれば，バグの少ない・管理しやすいコードを書きやすくなるはずです。

とりあえず，私自身はしばらくNode.js環境であれこれ試してみようと思います。

不定期にはなりますが，今後も引き続き心理学実験・研究法に関する Tips を共有していきます。いいね・サポートをいただけると大変励みになりますので，ぜひそちらもよろしくお願いします。

脚注

  1. CDN でも利用できるようになりました（前から？？）。 ↩︎

  2. import文のパスを適切に設定し必要なモジュールもサーバーにアップロードすれば，webpack でバンドルせずともブラウザで動作するプログラムになるような気もしますが，試していません。 ↩︎

  3. 使用するエディタにもよるかもしれません。VS Code ならめちゃめちゃ候補を表示してくれます。 ↩︎

Discussion