はじめてのlab.js

lab.jsとは

lab.jsは心理学実験・調査を実施するためのjavaScriptライブラリです。JavaScriptライブラリとはJavaScriptというプログラミング言語において利用できる様々な関数の集合です。関数とは,任意に入力に対して特定の処理を行いその結果を出力する命令のことです。

<aside> 💡 関数をポケモンで例えると? 関数をポケモンで例えると,関数は技にあたります。100万ボルトという技であれば「ピカチュウ,100万ボルトだ!」というポケモントレーナーの音声入力に対して,ピカチュウが100万ボルトの発動準備(電気を起こしたりとか?)という内部処理を行い,100万ボルトの発動という結果が出力されるというわけです。このように関数を捉えると,関数の集合であるライブラリは特定の属性の技マシンのセット(電気技の色々な技マシンを集めたもの)と言えるかもしれません。

</aside>

lab.js Builderとは

lab.js自体はJavaScriptライブラリであるため,lab.jsによる実験・調査の作成にはプログラミングが必要です。しかし,GUI(Graphical User Interface; グラフィカルユーザーインターフェース)でlab.jsを用いたプログラムを作成できるウェブアプリケーションとして,lab.js Builderが提供されています。GUIとは,名の通りに視覚的に情報が表示され,マウスなどによって直感的に操作可能なインターフェースです。例えば,ExcelやWordなどはGUIにあたります。このlab.js Builderを利用することで視覚的に情報を確認しながら,マウス操作などでlab.jsによる実験・調査を作成することができます。

ウェブアプリケーションとは,インターネットブラウザ(Edge, Chorome, Safariなど)で利用できるアプリケーションを指します。ウェブアプリケーションは,コンピュータにソフトウェアをインストールすることなく利用でき,異なるコンピュータ(自宅,大学など)でも同一の環境で利用することができます。

このように,lab.js Builderを利用すれば,プログラミング不要,ソフトウェアインストール不要で,どこでも心理学実験・調査を無料で作成できるというわけです。そこで,これからlab.js Builderを使った様々な実験・調査の作成方法を紹介していきます。なお,lab.js Builderはすべて英語なので,最初はとっつきにくいかもしれませんが,使っていくうちに慣れていきます。安心してください。

lab.jsの仕組み

lab.js Builderを使う前に,lab.jsが実験・調査を実施している仕組みをすこし紹介します。冒頭で述べたように,lab.jsはjavaScriptライブラリなので,javaScriptの機能によって実験・調査を実施しています。javaScriptの働きの1つにhtmlやcssを書き換えるというものがあり,これを利用しています。htmlやcssというのは,ウェブページの内容や見た目を制御する言語(マークアップ言語)です。皆さんが普段閲覧しているウェブページの多くはhtmlやcssによって構築されています。この関係をまとめたものが以下の図です。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e403f5de-86d9-409a-b1ca-1d3f2f168e64/Untitled.png

javaScript(含むlab.js)によって,ウェブページを動的に書き換えることで実験・調査を行うというわけです。それぞれのプログラミング言語の役割は以下のようになっています。

例えば,「画面中央に文字を出して,10秒経ったら消える」という動作を行う場合は以下の流れで実現しています。

  1. 中央に文字('Hello, world!')を配置したウェブページ(html, css)を作成
  2. 1.のページの表示開始時点からの経過時間を計測(javaScript)
  3. 経過時間が10秒に達したら,ウェブページを書き換え,中央の文字を消す(javaScript)