Chapter 06

【フランカー課題】フォントサイズの変更

snishiyama

2022.08.17に更新

このチャプターの目次

はじめに
自作関数を使わない場合
1. 演習 1
自作関数を使う場合
1. テンプレート文字列の利用
2. 演習 2
おわりに

はじめに

前章まででフランカー課題はだいたい完成しました。しかしながら，実際に実行してみると提示される刺激はいささか小さいような気がします。そこで本章では提示刺激のフォントサイズを変更する方法について解説します。

自作関数を使わない場合

簡単のために，まず自作関数を使わずに試行変数を作成する場合での，文字サイズの変更方法を取り上げます。この場合，文字サイズは以下のようにして変更することができます。

const trial = {
  type: jsPsychHtmlKeyboardResponse,
  stimulus: '<p style="font-size: 48px"><<<<<</p>',
  choices: ['f', 'j'],
  post_trial_gap: 500,
};

<p style="font-size: 48px"></p> という html タグで刺激を囲いました（html タグにも<と>を使用するのでどこまでが刺激か見にくいですね...）。style=に続けて文字の装飾を変更できます。ここでは文字サイズを変更したいので，font-size を指定しています。pxはピクセルという単位です。他にもcmなどを使うこともできます。

style=では，文字サイズ以外に文字の色や表示位置も指定することができます。例えば，<p style="font-size: 48px; color: red"><<<<</p>とすると，提示色が赤色になります。表示位置の変更方法についてはサイモン課題を作成する際に扱います。

演習 1

文字サイズに関する数値や単位を色々変更してみよう
fixationの文字サイズを大きくしてみよう

特にコード例はありません。

自作関数を使う場合

自作関数を使う場合でも，上記のように html タグを利用して文字サイズを大きくすることができます。ただし，html タグで挟まれる刺激の指定の仕方を少し工夫する必要があります。

以下はダメな例です。

const createTrial = (stim) => {
  const trial = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: '<p style="font-size: 48px">stim</p>', // <-- ダメ
    choices: ['f', 'j'],
    post_trial_gap: 500,
  };
  return trial;
};

実際に実行してみると，どの試行でも stim という文字列が大きなフォントで表示されるようになってしまいました。理由は，クォーテーション'に囲まれた部分はすべて文字列として認識されるからです。クォーテーション内の stim も文字列であって引数のstimとは全くの別物なので，引数に与えた刺激は反映されません。

以下のようにすると引数に与えた刺激が，指定した文字サイズになって提示されます。

const createTrial = (stim) => {
  const trial = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: '<p style="font-size: 48px">' + stim + '</p>', // <-- OK
    choices: ['f', 'j'],
    post_trial_gap: 500,
  };
  return trial;
};

stimを html タグで挟むというのはそうなのですが，ここでは，stim をクォーテーションの外に出して，足し算+をしています。こうすると，stimは変数として認識され，引数として指定した刺激文字列が反映されます。

次に足し算ですが，文字列に+を用いると，文字列の連結をしてくれます。下に示した２行は全く同じ結果になります。

'abc';
'a' + 'b' + 'c';

つまり，先ほどの修正した関数の stimulus 部分では以下のようになっているということです。

createTrial('<<<<<'); // この引数の場合
'<p style="font-size: 48px">' + '<<<<<' + '</p>';

テンプレート文字列の利用

文字列の連結の代わりに，テンプレート文字列でも同じことを実現することができます。なんともいかめしい名前ですが，（今回の利用の範囲であれば）やっていることは+を使う場合と同じです。

テンプレート文字列は，バッククォーテーション ` で作成し，バッククォーテーション内で，${変数名}とすることで変数に格納された値を反映した文字列を作成することができます。

const first = '太郎';
const fullname = `田中 ${first}`; // 田中 太郎
const age = 21;
`${fullname} ${age}歳`; // 田中 太郎 21歳

テンプレート文字列を利用する場合は，createTrial関数を以下のようにします。

const createTrial = (stim) => {
  const trial = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: `<p style="font-size: 48px">${stim}</p>`, // <-- OK
    choices: ['f', 'j'],
    post_trial_gap: 500,
  };
  return trial;
};

個人的にはこちらのほうが直感的でわかりやすいように思いますが，足し算かテンプレート文字列かのどちらの方法でも問題ありません。好みです。

timeline_variablesを使う場合，２通りの方法で刺激の文字サイズを変更することができます。どちらにしても上記の html タグを使用して同様に動作するのですが，適用方法が変わります。個人的には２つ目のほうを推しています（好みの問題です）。

演習 2

刺激だけでなく，文字サイズを引数から変更できるようにしよう。

実用的かどうかはわかりませんが，文字サイズの変更を題材に関数の理解を少しだけ深めてみます。刺激と文字サイズの両方を変更できるようにするためには，それぞれを引数として受け取れるようにする必要があります。引数を 2 つ受け取る関数は以下のようにして作成できます。

const combineNameAge = (name, age) => {
  return `${name} ${age}歳`;
};

関数宣言時の()内に引数名をカンマで並べるだけです。

以上を参考に，演習を行ってみてください。

演習 2 のコード例

const createTrial = (stim, fontSize) => {
  const trial = {
    type: jsPsychHtmlKeyboardResponse,
    stimulus: `<p style="font-size: ${fontSize}px">${stim}</p>`, // <-- OK
    choices: ['f', 'j'],
    post_trial_gap: 500,
  };
  return trial;
};

文字列に適用したい変数が増えてくると，テンプレート文字列のほうが扱いやすいかもしれませんね。

前章の演習でcreateBlockを関数化した際，関数内でcreateTrialを呼び出す実装にしていた場合は，createBlockの引数もstim, fontSizeにする必要があります。つまり，以下のようにしなければなりません。

const createBlock = (stim, fontSize) => {
  const trial = createTrial(stim, fontSize);
  const block = {
    timeline: [fixation, trial],
  };
  return block;
};

全体は以下のようになります。

<!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>
    const jsPsych = initJsPsych();

    const createTrial = (stim, fontSize) => {
      const trial = {
        type: jsPsychHtmlKeyboardResponse,
        stimulus: `<p style="font-size: ${fontSize}px">${stim}</p>`,
        choices: ['f', 'j'],
        post_trial_gap: 500,
      };
      return trial;
    };

    const fixation = {
      type: jsPsychHtmlKeyboardResponse,
      stimulus: '<p style="font-size: 48px">+</p>',
      choices: 'NO_KEYS',
      trial_duration: 500,
    };

    const createBlock = (stim, fontSize) => {
      const trial = createTrial(stim, fontSize);
      const block = {
        timeline: [fixation, trial],
      };
      return block;
    };

    // フォントサイズの指定は実用的ではないですが...
    const block1 = createBlock('<<<<<', 48);
    const block2 = createBlock('>>>>>', 48);
    const block3 = createBlock('<<><<', 32);
    const block4 = createBlock('>><>>', 30);

    const blocks = [block1, block2, block3, block4];
    const blocksRandom = jsPsych.randomization.repeat(blocks, 2);

    jsPsych.run(blocksRandom);
  </script>
</html>

なお，mapを使うコードでの対応方法については第 8 章で取りあつかいます。

おわりに

本章では，html タグを使用することでフォントサイズを変更できることを紹介しました。+による文字列の連結やテンプレート文字列は，色んな場面で活躍するので，JavaScript の基本文法として覚えておいてください。また，変数の作成を関数化していることで，文字サイズの大きさの変更も非常に容易だったのではないでしょうか。刺激ごとに試行変数を作成していると...想像するだけでゾッとします。本チュートリアルを通して関数に慣れてもらえれば幸いです。