jsPsychを利用するには，Githubからダウンロードしてください。○○release（○○は数字）をクリックし，そのページの下部にあるjspsych-○○.zipをダウンロードしてください。
ダウンロードしたファイルは解凍してください。実験を格納するフォルダを作成します。ここではExperimentというフォルダを作成しました。そして，そのフォルダ内に解凍したjspsych-○○フォルダを入れてください。
jspsych-6.10のようなフォルダ名だと，バージョンが変わる度にコードを変更しないといけなくなるので，フォルダ名「jspsych」に変更しておきましょう。以下のように，実験ごとにフォルダを作成し，そこにjspsychをフォルダごと入れておくと良いでしょう。ここでは現時点で最新のjsPsych-6.1.0で説明します。
次に，エディタ（atom，sublimetext，Brackets，VScode，メモ帳など）を立ち上げてください。オススメのエディタについては以下のページをご覧下さい。作成者はBracketsを使っています。
まず，最初に，jsPsychの基本構造を記述したファイルを作成します。以下のコードをエディタにコピーして貼り付けてください。このファイルに「index.html」という名前をつけてExperimentフォルダに保存してください。Experimentフォルダは以下のようになります。
<!DOCTYPE html>
<html xmlns="<http://www.w3.org/1999/xhtml>">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="MK lab" />
<title>Experiment</title>
<link href="jspsych/css/jspsych.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="jspsych/jspsych.js"></script>
<!-- 必要なプラグインを記述 -->
<script src="jspsych/plugins/jspsych-html-keyboard-response.js"></script>
<!-- ここまで -->
<!-- 実験ファイルを記述-->
<script src="main.js"></script>
<!--ここまで-->
</body>
</html>
jsPsychを実施するにはindex.htmlにすべてのコードを書くという方法と実験本体を別のjavascriptファイル(main.js）に記述し，index.htmlで読み込むという方法の2つがあります。本チュートリアルでは，後者の別ファイルでの実施を推奨します（過去はindex.htmlに一括で記述していたので，古い記事は随時差し替えます。）この点についての詳しい説明は以下のページをご覧ください。
続いて，jsPsychの実行ファイルとなるmain.jsも作成しましょう。エディタで新規作成を選んで，以下のコードをコピペして，「main.js」という名前でExperimentフォルダに保存してください。
//以下は使用時には削除してください
//htmlを表示するプラグイン（html-keyboard-response）を利用
const showHelloWorld = {
type: 'html-keyboard-response',
stimulus: 'Hello, world!',
choices: jsPsych.NO_KEYS,
trial_duration: 5 * 1000
}
//空のtimelineを作成
const timeline = [];
//以下は使用時には削除してください
//各試行・ブロックをtimelineに追加
timeline.push(showHelloWorld);
//以下はjsPsychの初期設定
//デフォルトでのデータ保存は終了時に画面に表示
//csvで出力したい場合は「終了時にcsvに出力」の方を利用する
jsPsych.init({
timeline: timeline,
on_finish: function()
{
//終了時にデータを画面に表示
jsPsych.data.displayData("csv")
//終了時にデータをcsvに出力
//jsPsych.data.get().localSave("csv", "data.csv")
}
});
ここまでで，以下のようなフォルダ構成になったかと思います。
これで最小限の形で実験を作成できています。では，index.htmlをブラウザで開いてみてください。「Hello, world!」と表示されれば成功です。
基本的には，先ほど作ったようにjsPsychに加えて，index.html, main.jsの2つを含めた構成を基本とします。main.jsに実験のコードを書いていきましょう。