jsPsychのためにも知っておきたいパスの話
はじめに
jsPsych を用いた実験を作成する際には，その html ファイルの冒頭に以下のように書いて，特定のプラグインを使用できるようにします。
<head>
<script src="../dist/jspsych.js"></script>
<script src="../dist/plugin-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css">
</head>
jsPsychv6.3 までを利用している人なら必ず触る部分ですし，v7系を使っている人でもライブラリを github からダウンロードして使用する場合は触る必要があります（v7系については黒木先生の紹介記事があります）。
この"../packages/jspsych/dist/index.browser.js"などはファイルパス (file path) と呼ばれるもので，ファイル（やフォルダ）が保存されている場所を示しています。 jsPsych で実験作成に取り組むことになって初めてプログラミングをするという方にとってはよくわからない呪文に見えるかもしれません。
今回の記事では，そういった方に向けて，ファイルパスについて簡単に説明します。パスの利用は jsPsych で実験プログラムを書くときだけでなく，他のプログラミング言語にも必要になります。パスの取り扱いを知っておくとフォルダ構成の自由度がぐっと高まり，自分好みにファイル・フォルダを整理できるようになります。例として，今回は最近個人的にハマっているフォルダ構成についても紹介します。
本記事は psyJS Advent Calendar 2021 ６日目の記事になります。
事前準備
本記事では，Github からダウンロードした jsPsych ライブラリを用いてパスを例示します。以下のリンク先から Dist archive の zip ファイルを任意の場所にダウンロードしておいてください。
ファイルパスとは
上でも書きましたが，ファイルパスはファイル（やフォルダ）が保存されている場所を示しています。path の辞書的な意味の通り，あるファイルやフォルダまでの経路と考えたほうがわかりやすいかもしれません。
どこを起点にするのかによって，ファイルパスには以下の 2 種類があります。
- 絶対パス
- 相対パス
絶対パス
絶対パスは大本のフォルダ（ルートディレクトリ・フォルダ）から目的のファイルまでの経路です。例えば，事前準備でダウンロードした jsPsych のplugin-html-keyboard-response.jsの絶対パスは以下のようになります。
/Users/ユーザー名/Experiments/jspsych-7.1.0/dist/plugin-html-keyboard-response.js
Usersという大本のフォルダから順にファイルまでの経路をたどっています。著者の場合は，現在ログインしている PC ユーザー（ユーザー名）のExperimentsというフォルダに保存しておいた jsPsych ライブラリjspsychのdistというフォルダにplugin-html-keyboard-response.jsがあるということがわかります。ご自身の手元でもパスを取得して，フォルダの階層関係と対応付けて確認してみてください。
上に例示したパスは Mac 形式ですが，Windows でも同様の考え方ができます。Windows だったらC:￥が大本のフォルダのことが多いです。それぞれの OS でのパスの取得方法はそれぞれ［Mac］この記事や［Windows］この記事などを参考にしてください。
相対パス
相対パスは現在作業をしている場所（作業ディレクトリ）から目的のファイルまでの経路です。ダウンロードした jspsych のexamplesフォルダに入っているjspsych-html-keyboard-response.htmlの先頭のパス指定を見てみます（本記事の最初に載せたものと同様です）。
<head>
<script src="../dist/jspsych.js"></script>
<script src="../dist/plugin-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css" />
</head>
"../dist/jspsych.js"が相対パスです。..は作業ディレクトリの一つ上のディレクトリ（フォルダ）を指します。jspsych-html-keyboard-response.htmlであれば，作業ディレクトリはexamplesになるので，..が指しているのはjspsych-7.1.0になります（以下の絶対パスを参照）。
/Users/ユーザー名/Experiments/jspsych-7.1.0/examples/jspsych-html-keyboard-response.html
この例にはないですが，.は作業ディレクトリ（ここではexamples）を指します。
絶対パスと相対パスの大きな違い
絶対パスは大本のフォルダからの経路を示しているので，ファイルが同じ場所に保存されている限り，作業ディレクトリが変わっても指定されたファイルを参照することができます。ただし，作業する PC が変わると，多くの場合うまく参照できなくなってしまいます。
相対パスは作業ディレクトリからの経路を示しているので，作業ディレクトリが変わらない限りは指定されたファイルを参照することができます。作業する PC が変わっても，作業ディレクトリと目的のファイルの位置関係が保たれていれば，ファイルをうまく参照することができます。html ファイルを実行する場合は，その html ファイルが保存されているフォルダが作業ディレクトリとして認識される（たぶん）ので，「作業ディレクトリ」を「その html ファイルが保存されているフォルダ」と読み替えてもらって差し支えないでしょう。
オンライン実験を実施する際には手元で作成していた実験用のファイル群をサーバー上にアップ必要があり，これは「作業する PC が変わる」と同じ状況になります。もし html 先頭のパスの指定を絶対パスにしていると実験はうまく動作しません。このため，オンライン実験目的には絶対パスよりも相対パスのほうが使用されますし，jspsych 公式のサンプルファイルでも相対パスが示されているわけです。
フォルダ構成をアレンジする
パスが理解できれば，ファイルの参照に困らないので，実験に関わるファイル・フォルダの構成を自由に編集できるようになります。自由に構成できるようになると，実験で使用するファイルを整頓することができるようになります。
パスの説明を省いたため拙著の jspsych チュートリアルでは，以下のように，こちらが指定したフォルダ構成でチュートリアルを進めてもらうようにしていました。jspsych-tutorialというフォルダにjspsych-6.3.1とpracticeというフォルダが入っている状態です。このようなフォルダの階層構造の表示方法をツリー表示といいます。
jspsych-tutorial/
├── jspsych-6.3.1
└── practice
いざ例えば画像を使うような実験を作成することになった際に，パスの概念がよくわからず，以下のようにpracticeのフォルダに実験用のファイルを追加するということになってしまうかもしれません（させてしまっていたら申し訳ありません）。
jspsych-tutorial/
├── jspsych-6.3.1
└── practice
├── exp1.html
├── stimuli1.jpg # 刺激画像
├── stimuli2.jpg # 刺激画像
...
├── instruction4.jpg # 教示画像
└── instruction5.jpg # 教示画像
実験用の html ファイルと刺激や教示用の画像ファイルが混在していて見通しが悪いため，このようなフォルダ構成は良くないと思います。自分が実験を作成するときにファイルを見失いやすくなってしまいます。また，実験スクリプトも公開するとなった場合に他の利用者も同様の困難を抱えることになってしまいます。jspsych-tutorialやpracticeというフォルダ名も変ですね。
あくまで一例ですが，以下のようなフォルダを構成だと見通しがよいと思います。
exp/
├── exp1.html
├── instructions
│ ├── instruction1.jpg
│ ├── instruction2.jpg
│ ...
│
├── jspsych-6.3.1
└── materials
├── stimuli1.jpg
├── stimuli2.jpg
...
この変更に合わせてプラグインや画像のパスの指定を修正すれば実験もうまく動作します。例えば，exp1.html冒頭のプラグインの読み込みは以下のようになります。
<head>
<meta charset="UTF-8" />
<script src="./jspsych-6.3.1/jspsych.js"></script>
<script src="./jspsych-6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
<link rel="stylesheet" href="./jspsych-6.3.1/css/jspsych.css" />
</head>
practiceフォルダにexp1.htmlを作成する場合は以下のようなプラグインの読み込みになります。比較してみてください。
<head>
<script src="../jspsych-6.3.1/jspsych.js"></script>
<script src="../jspsych-6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
<link rel="stylesheet" href="../jspsych-6.3.1/css/jspsych.css"></link>
</head>
../jspsych-6.3.1とドットを 2 つ使用していたのが./jspsych-6.3.1とドットが 1 つになっています。practiceフォルダに実験用のファイルを作成した場合はpracticeから一つ上のフォルダ../(=jspsych-tutorial)に移動してからjspsychのプラグインフォルダを参照する必要があります。新しく例示したようなフォルダ構成だと実験用のファイルexp1.htmlがjspsych-6.3.1と同じフォルダ（exp）に存在するので，./で指定します。
オープンデータ・オープンサイエンスが重視される昨今においては，実験用のフォルダを整えるだけでなく，実験や分析のフォルダもいい感じに構成した研究プロジェクト全体のフォルダを作って，すぐにでも公開できるようにしておくのが個人的にはいいと思っています。詳しくは以前に作成した Github レポジトリの README に書いたのでよければ見てみてください。
おわりに
今回は，jsPsych を用いた実験を作成しているときに目にするパスについて紹介しました。序盤でも言及しましたが，ファイルパスは実験の作成だけでなく，データ分析をコーディングで行う際にも関わってきます。ファイルの位置を変えたりするなどいろいろ試してみて理解を深めてください。
不定期にはなりますが，今後も引き続き心理学実験・研究法に関する Tips を共有していきます。いいね・サポートをいただけると大変励みになりますので，ぜひそちらもよろしくお願いします。
Discussion