PWA簡単にできますよっていうQiitaの記事はみましたが、本当かな。
PWAが一度有効になるとServiceWorkerから情報取るのでデプロイで新しいソースが来ても端末側で更新できない問題がすぐに見つかる。どうすんの。
Todoistとかはこの辺うまくやってるのですごいなぁと思う。
公式ドキュメントは日本語よみにくいことこの上なし

この辺の情報は日本語でググっても情報なかったので私がググった結果をリンクおいておきます

結論

下記を実装しましょう
https://medium.com/@arjenbrandenburgh/angulars-pwa-swpush-and-swupdate-15a7e5c154ac 記事のGithub

• https://github.com/arjenbrandenburgh/medium-pwa-example/pull/3/files#diff-465e9f13ce23ec4a1e366935273fdbb6R8-R10

と、updateがうまく行かないので下記を

• https://stackoverflow.com/questions/50968902/angular-service-worker-swupdate-available-not-triggered/50969084#50969084

実装しましょう。

動作確認

• Chrome
• iPhoneでホーム画面に追加した画面

動作確認できました。Edgeとか知らん。Firefoxはしらん。

このあと試したいこと

オフライン <=> オンラインを行き来してうまく端末が追従するか →できたっぽい。

追記

下記シナリオで端末が最新に更新できることを確認しました。

1. 6秒おきにサーバーに確認するようにプログラム(記事は6時間)
2. iPhoneのホーム画面に設置したAngularをオンラインで表示
3. iPhoneを機内モード(オフライン)
4. Angular(FirebaseのHosting)をちょっとだけ更新してデプロイ
5. iPhoneの機内モード解除(オンライン)
6. しばらくしたらiPhoneにて更新がかかる

良い感じ

■ やってみたこと

• Reactチュートリアル
  • 五目並べを作りつながらReactを学んでいくチュートリアル
• チュートリアルの最終結果 に少し手を加えた。
  • 各componentをファイルに分割
  • React Hooks を使うように変更
  • Jest, Enzymeでテストを実装
• コードはここに置いてあります https://github.com/ckona/tic-tac-toe-with-react

■ チュートリアルの最終結果

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [
        {
          squares: Array(9).fill(null)
        }
      ],
      stepNumber: 0,
      xIsNext: true
    };
  }

  handleClick(i) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? "X" : "O";
    this.setState({
      history: history.concat([
        {
          squares: squares
        }
      ]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext
    });
  }

  jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) === 0
    });
  }

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);

    const moves = history.map((step, move) => {
      const desc = move ?
        'Go to move #' + move :
        'Go to game start';
      return (
        <li key={move}>
          <button onClick={() => this.jumpTo(move)}>{desc}</button>
        </li>
      );
    });

    let status;
    if (winner) {
      status = "Winner: " + winner;
    } else {
      status = "Next player: " + (this.state.xIsNext ? "X" : "O");
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={current.squares}
            onClick={i => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{moves}</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(<Game />, document.getElementById("root"));

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

■ 最終的にファイル分割して、React Hooks を使うようにしたVer

• /src/index.js を Game コンポーネントの呼び出しをするだけに。
• /src/components/ ディレクトリを切り、そこに各コンポーネントを移動する。
• classコンポーネントをやめて、React Hooks を使ってみる
  • thisが無くなるので見やすくなりますね。

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import Game from './components/Game';

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

Square

import React from 'react';

const Square = props => (
  <button className="square" onClick={props.onClick}>
    {props.value}
  </button>
);

export default Square;

Board

import React from 'react';
import Square from './Square';

const Board = props => {
  const renderSquare = i => (
    <Square
      value={props.squares[i]}
      onClick={() => props.onClick(i)}
    />
  );

  return (
    <div>
      <div className="board-row">
        {renderSquare(0)}
        {renderSquare(1)}
        {renderSquare(2)}
      </div>
      <div className="board-row">
        {renderSquare(3)}
        {renderSquare(4)}
        {renderSquare(5)}
      </div>
      <div className="board-row">
        {renderSquare(6)}
        {renderSquare(7)}
        {renderSquare(8)}
      </div>
    </div>
  );
};

export default Board;

Game

import React, { useState } from 'react';
import Board from './Board';

const Game = () => {
  const [history, setHistory] = useState([{squares: Array(9).fill(null)}]);
  const [stepNumber, setStepNumber] = useState(0);
  const [xIsNext, setXIsNext] = useState(true);

  const handleClick = i => {
    const _history = history.slice(0, stepNumber + 1);
    const current = _history[_history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = xIsNext ? 'X' : 'O';
    setHistory(_history.concat([{squares: squares,}]));
    setStepNumber(_history.length);
    setXIsNext(!xIsNext);
  };

  const jumpTo = step => {
    setStepNumber(step);
    setXIsNext((step % 2) === 0);
  };

  const current = history[stepNumber];

  const moves = history.map((step, move) => {
    const desc = move ?
          'Go to move #' + move :
          'Go to game start';
    return (
      <li key={move}>
        <button onClick={() => jumpTo(move)}>{desc}</button>
      </li>
    );
  });

  const status = () => {
    const winner = calculateWinner(current.squares);
    if (winner) {
      return 'Winner: ' + winner;
    } else {
      return 'Next player: ' + (xIsNext ? 'X' : 'O');
    }
  };

  const calculateWinner = squares => {
    const lines = [
      [0, 1, 2],
      [3, 4, 5],
      [6, 7, 8],
      [0, 3, 6],
      [1, 4, 7],
      [2, 5, 8],
      [0, 4, 8],
      [2, 4, 6]
    ];
    for (let i = 0; i < lines.length; i++) {
      const [a, b, c] = lines[i];
      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
        return squares[a];
      }
    }
    return null;
  };

  return (
    <div className="game">
      <div className="game-board">
        <Board
          squares={current.squares}
          onClick={(i) => handleClick(i)}
        />
      </div>
      <div className="game-info">
        <div>{status()}</div>
        <ol>{moves}</ol>
      </div>
    </div>
  );
};

export default Game;

■ Jest, Enzyme でテストを実装

準備

必要なライブラリ

• jest
• enzyme
• enzyme-adapter-react-16
• react-test-renderer

最新のVerを下記コマンドで調べて、yarn addで追加する

e.g.

$ npm info jest
$ yarn add --dev jest@25.4.0

最終的な package.json

  "devDependencies": {
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.2",
    "jest": "25.4.0",
    "react-test-renderer": "16.13.1"
  }

テストコードを書くまで

/src直下に以下のようなファイルを作る。
create react app で作成したプロジェクトの場合、ここに置けば自動で読み込んでくれる。
それ以外の場合は、package.json？あたりにsetupFileのパスを設定してあげれば良いと思う。

ref.
- https://github.com/enzymejs/enzyme/issues/1265#issuecomment-336740161
- https://github.com/enzymejs/enzyme/issues/1265#issuecomment-336872722

/src/setupTests.js

import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

テストコードを書く場所

テストコードは、テストしたいコンポーネントがあるディレクトリに __tests__ ディレクトリを切り、その中に作成する。
具体的には下記のような感じに配置する。

├── components
│   ├── Board.jsx
│   ├── Game.jsx
│   ├── Square.jsx
│   └── __tests__
│       ├── Board.test.jsx
│       ├── Game.test.jsx
│       └── Square.test.jsx
├── index.css
├── index.js
└── setupTests.js

実際のテストコード

Squareコンポーネントを例に取る。
Ruby の Rspec を書いたことがある人であれば、すんなり理解できると思う。

Square

import React from 'react';

// shallow関数は、引数に渡されたReactコンポーネントのみをテストするために使う。
import { shallow } from 'enzyme';

import Square from '../Square';

describe('<Square />', () => {
  const propsValue = 'sample text';

  // mock関数
  const onClickFunction = jest.fn();
  const props = {
    value: propsValue,
    onClick: onClickFunction,
  };

  // こうすることでテストのための便利な関数等が使えるようになる
  const wrapper = shallow(<Square {...props} />);

  it('text is equal props value.', () => {
    expect(wrapper.text()).toEqual(propsValue);
  });

  it('when click, onClick function is called.', () => {
    // コンポーネントをクリックする
    wrapper.simulate('click');

    // onClickFunctionが呼ばれることを確認する
    expect(onClickFunction).toBeCalled();
  });
});

• console.log(wrapper.debug()) で中身が見れるので、うまくテストが通らないとき等に使うと良い
  • styled-component を使用すると、指定した名前と変わってしまっていることがある。

最後に

• 冒頭でもリンクを載せたが、そんなこんなで最終的に出来上がったコードがこちら
  • https://github.com/ckona/tic-tac-toe-with-react
• チュートリアル終わった後でも色々とやれることはあるなー。

参考

• Reactチュートリアル
• Jest
• Enzyme
  • setupFileの置き場所について
  • https://github.com/enzymejs/enzyme/issues/1265#issuecomment-336740161
  • https://github.com/enzymejs/enzyme/issues/1265#issuecomment-336872722

JavaScriptの関数

繰り返し手順で必要な4つの関数

setTimeout,clearTimeout,setInterval,clearIntervalという4つのグローバル関数について

setTimeoutとsetIntervalは、指定した時間（ミリ秒）が経過したらコールバック関数を呼び出す関数。
コールバック関数とは、他の関数の引数として指定された関数のこと。（関数Aに引数として渡す別の関数B）

setTimeout・・・一度だけコールバック関数を呼び出す。
setInterval・・・ブラウザを閉じるか、ページを移動するまで繰り返す。

呼び出しを止めるには、
setTimeoutかsetIntevalの戻り値をclearTimeoutとclearIntervalへ渡す。

let タイムアウトID = setTimeout(コールバック関数,ミリ秒);
let インターバルID = setInterval(コールバック関数,ミリ秒);

clearTimeout(タイムアウトID);
clearInterval(タイムアウトID);

以上

現在JavaScriptの学習中でタイマーを作っていたところ、重要だど感じたので書きました。

元ネタ:4歳娘「パパ、constしか使わないで？」

仕組みについては Haskell の記事を読んでいただきたく。

// 代数的データ型を関数に、
// パターンマッチを関数適用に見立てる宣言
const caseOf = match => adt => adt(match);

// Haskell の Maybe を意識した何か
const Nothing = () => ({Nothing}) => Nothing();

const Just = x => ({Just}) => Just(x);

const guard = flg => flg ? Just() : Nothing();

const fmap = f => caseOf({
  Nothing,
  Just: x => Just(f(x))
});

const fromMaybe = v => caseOf({
  Nothing: () => v,
  Just: x => x
})

// 定数関数
const con$t = x => _ => x;

// ifの代替関数の作成用
const if_ = guard

const then_ = x => fmap(con$t(x))

const else_ = fromMaybe

const compose = fs => fs.reduce((g, f) => x => f(g(x)), x => x);

// 使用例
const dayText = compose([
  if_,
  then_(() => "お休み"),
  else_(() => "平日"),
  lazy => lazy()
]);

console.log(dayText(true));
//=> お休み

console.log(dayText(false));
//=> 平日

Network - Http

はじめに

「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」 でお届けしているスクリプト言語 Kinx。言語はライブラリが命。ということでライブラリの使い方編。

今回は Network(Http) です。

• 参考
  • 最初の動機 ... スクリプト言語 KINX（ご紹介）
    • 個別記事へのリンクは全てここに集約してあります。
  • リポジトリ ... https://github.com/Kray-G/kinx
    • Pull Request 等お待ちしております。

libcurl を抱えているので Http 以外も作れるはずだが、まずは一番欲しいのは Http/Https でしょう。

HTTP/HTTPS リクエスト

各メソッドの意味は後で記載することとして、まずは使い方から。

Http クライアント

Http クライアント・オブジェクトは Net.Http クラスを使用する。

var http = new Net.Http();

HTTP メソッド

head、get、post、put、delete をサポート。

HTTP HEAD - head

HEAD メソッドで情報を取得する。SSL に関しては一先ず false にして実行。

var http = new Net.Http();
http.sslVerifyPeer(false);
http.sslVerifyHost(false);
var r = http.head("https://docs.ruby-lang.org/ja/latest/class/Range.html");
if (r.code == 200) {
    System.println(r.toJsonString(true));
}

コールバック関数を指定することもできる。データは取得できたデータ分だけ毎回コールバックされる。その動作はメソッドに関わらず全て同じ動作をする。

また、データは単なるバイト列として扱われるため、日本語などのマルチバイト文字が混じる場合には区切り位置が文字コードの区切りとぴったりあった場所で区切られるとは限らないことに注意。なので、以下のように直接出力した場合、日本語が混じると変になる可能性がある。ヘッダはまだマシだがボディの場合は基本的にはバッファにためていくのが良いかと。

var http = new Net.Http();
http.sslVerifyPeer(false);
http.sslVerifyHost(false);
var r = http.head("https://docs.ruby-lang.org/ja/latest/class/Range.html", &(data) => {
    System.print(data);
});
if (r.code == 200) {    
    ...
}

コールバックでの取得結果は以下の通り。

HTTP/1.1 200 OK
Connection: keep-alive
Content-Length: 48121
Server: nginx/1.14.2
Content-Type: text/html
Last-Modified: Wed, 15 Apr 2020 00:16:18 GMT
ETag: "5e965252-bbf9"
Cache-Control: public, max-age=43200, s-maxage=172800, stale-while-revalidate=86400, stale-if-error=604800
Accept-Ranges: bytes
Date: Mon, 27 Apr 2020 07:25:51 GMT
Via: 1.1 varnish
Age: 12363
X-Served-By: cache-tyo19947-TYO
X-Cache: HIT
X-Cache-Hits: 1
X-Timer: S1587972352.977171,VS0,VE1
Vary: Accept-Encoding

復帰値 r にはヘッダ情報をオブジェクト化したオブジェクトが返され、r.code に HTTP ステータスコードが格納されており、r.body にボディの情報がテキストとして格納されている。この構造は他のメソッドでも同様。HEAD ではボディは無いため r.body == "" となる。

上記の例では以下のようになる。

{
    "Last-Modified": "Wed, 15 Apr 2020 00",
    "X-Cache-Hits": "1, 1",
    "body": "",
    "Server": "nginx/1.14.2",
    "code": 200,
    "Date": "Mon, 27 Apr 2020 07",
    "Via": "1.1 varnish",
    "X-Cache": "HIT, HIT",
    "Content-Type": "text/html",
    "Cache-Control": "public, max-age=43200, s-maxage=172800, stale-while-revalidate=86400, stale-if-error=604800",
    "X-Timer": "S1587972352.977171,VS0,VE1",
    "ETag": "\"5e965252-bbf9\"",
    "Vary": "Accept-Encoding",
    "Content-Length": 48121,
    "Accept-Ranges": "bytes",
    "X-Served-By": "cache-tyo19947-TYO",
    "Connection": "keep-alive",
    "Age": 12363
}

head 以外のメソッドでは body にボディ・データがテキストの形で格納される。なので、JSON 形式で受け取る場合などは JSON.parse(r.body) と自分でパースする必要があるので注意。

HTTP GET - get

GET メソッドで情報を取得する。コールバックを指定しなければ全てを受信し、情報を格納したオブジェクトを返す。r.body は文字列なので、JSON 形式等で受信した場合は自分で JSON.parse(r.body) 等を行う。

var http = new Net.Http();
http.sslVerifyPeer(false);
http.sslVerifyHost(false);
var r = http.get("https://docs.ruby-lang.org/ja/latest/class/Range.html");
if (r.code == 200) {
    System.println(r.toJsonString(true));
}

応答はこんな感じ。

{
    "Last-Modified": "Wed, 15 Apr 2020 00",
    "X-Cache-Hits": 1,
    "body": "<!DOCTYPE html>\n<html lang=\"ja-JP\">\n<head>\n ...省略(長い)...",
    "Server": "nginx/1.14.2",
    "code": 200,
    "Date": "Thu, 30 Apr 2020 12",
    "Via": "1.1 varnish",
    "X-Cache": "HIT",
    "Content-Type": "text/html",
    "Cache-Control": "public, max-age=43200, s-maxage=172800, stale-while-revalidate=86400, stale-if-error=604800",
    "X-Timer": "S1588250498.519558,VS0,VE1",
    "ETag": "\"5e965252-bbf9\"",
    "Vary": "Accept-Encoding",
    "Content-Length": 48121,
    "Accept-Ranges": "bytes",
    "X-Served-By": "cache-tyo19929-TYO",
    "Connection": "keep-alive",
    "Age": 102
}

コールバックはヘッダーとボディそれぞれ設定できる。

http.get("https://docs.ruby-lang.org/ja/latest/class/Range.html", {
    header: &(data) => {
        ...
    },
    body: &(data) => {
        ...
    },
});

コールバックに直接関数オブジェクトを指定した場合、ボディのコールバックとして動作する。

http.get("https://docs.ruby-lang.org/ja/latest/class/Range.html", &(data) => {
    ... // ボディ・データが細切れに来る。
});

HTTP POST - post

POST メソッドを発行する。POST するデータは Http#setPostData メソッドで設定する。その他、コールバック等は GET と同じ。

POST はなかなか試す場所が無いのだが、Ruby で以下のサーバを立ち上げてアクセスしてみる。エラーはするが、アクセスされていることは確認できる。

ruby -rwebrick -e 'WEBrick::HTTPServer.new(:DocumentRoot => "./", :Port => 8000).start'

アクセスしてみる。

var http = new Net.Http();
http.setPostData("POST-DATA");
http.post("http://localhost:8000/index.html", System.print);

GET と同じようにボディがコールバックされてくるため、以下の応答となる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD><TITLE>Not Found</TITLE></HEAD>
  <BODY>
    <H1>Not Found</H1>
    `/index.html' not found.
    <HR>
    <ADDRESS>
     WEBrick/1.4.2 (Ruby/2.5.1/2018-03-29) at
     localhost:8000
    </ADDRESS>
  </BODY>
</HTML>

サーバーのログは以下の通り。

[2020-04-21 17:33:53] ERROR `/index.html' not found.
::1 - - [21/Apr/2020:17:33:53 DST] "POST /index.html HTTP/1.1" 404 280
- -> /index.html

HTTP PUT - put

PUT は POST と同じで、メソッド名だけ PUT に変更して実行する。

var http = new Net.Http();
http.setPostData("PUT-DATA");
http.put("http://localhost:8000/index.html", System.print);

HTTP DELETE - delete

DELETE も GET と同じで、メソッド名だけ DELETE に変更して実行する。

var http = new Net.Http();
http.delete("http://localhost:8000/index.html", System.print);

verbose

Http#setDebug(callback) を使ってデバッグ情報を取得することができる。以下はデバッグ情報だけ出力させる例。

var http = new Net.Http();
http.setDebug(System.print);
http.delete("http://localhost:8000/index.html");

Curl の Verbose 情報を見ることができる。

*   Trying ::1:8000...
* Connected to localhost (::1) port 8000 (#0)
> DELETE /index.html HTTP/1.1
Host: localhost:8000
Accept: */*

* Mark bundle as not supporting multiuse
< HTTP/1.1 405 Method Not Allowed
< Content-Type: text/html; charset=ISO-8859-1
< Server: WEBrick/1.4.2 (Ruby/2.5.1/2018-03-29)
< Date: Tue, 21 Apr 2020 08:49:07 GMT
< Content-Length: 302
< Connection: close
<
* Closing connection 0

ちゃんと DELETE メソッドが発行されてますね。

さらに、setDebugDetail() メソッドで true を指定すると、送受信したデータを表示することも可能。データ量が多くなるので、適宜コントロールすること。

var http = new Net.Http();
http.setDebugDetail(true);
http.setDebug(System.print);
http.delete("http://localhost:8000/index.html");

こんな感じになる。

*   Trying ::1:8000...
* Connected to localhost (::1) port 8000 (#0)
> DELETE /index.html HTTP/1.1
Host: localhost:8000
Accept: */*

* Mark bundle as not supporting multiuse
< HTTP/1.1 405 Method Not Allowed
< Content-Type: text/html; charset=ISO-8859-1
< Server: WEBrick/1.4.2 (Ruby/2.5.1/2018-03-29)
< Date: Tue, 21 Apr 2020 09:09:27 GMT
< Content-Length: 302
< Connection: close
<
> Recv data, 0000000302 bytes (0x0000012e)
0000: 3c 21 44 4f 43 54 59 50 45 20 48 54 4d 4c 20 50 <!DOCTYPE HTML P
0010: 55 42 4c 49 43 20 22 2d 2f 2f 57 33 43 2f 2f 44 UBLIC "-//W3C//D
0020: 54 44 20 48 54 4d 4c 20 34 2e 30 2f 2f 45 4e 22 TD HTML 4.0//EN"
0030: 3e 0a 3c 48 54 4d 4c 3e 0a 20 20 3c 48 45 41 44 >.<HTML>.  <HEAD
0040: 3e 3c 54 49 54 4c 45 3e 4d 65 74 68 6f 64 20 4e ><TITLE>Method N
0050: 6f 74 20 41 6c 6c 6f 77 65 64 3c 2f 54 49 54 4c ot Allowed</TITL
0060: 45 3e 3c 2f 48 45 41 44 3e 0a 20 20 3c 42 4f 44 E></HEAD>.  <BOD
0070: 59 3e 0a 20 20 20 20 3c 48 31 3e 4d 65 74 68 6f Y>.    <H1>Metho
0080: 64 20 4e 6f 74 20 41 6c 6c 6f 77 65 64 3c 2f 48 d Not Allowed</H
0090: 31 3e 0a 20 20 20 20 75 6e 73 75 70 70 6f 72 74 1>.    unsupport
00a0: 65 64 20 6d 65 74 68 6f 64 20 60 44 45 4c 45 54 ed method `DELET
00b0: 45 27 2e 0a 20 20 20 20 3c 48 52 3e 0a 20 20 20 E'..    <HR>.
00c0: 20 3c 41 44 44 52 45 53 53 3e 0a 20 20 20 20 20  <ADDRESS>.
00d0: 57 45 42 72 69 63 6b 2f 31 2e 34 2e 32 20 28 52 WEBrick/1.4.2 (R
00e0: 75 62 79 2f 32 2e 35 2e 31 2f 32 30 31 38 2d 30 uby/2.5.1/2018-0
00f0: 33 2d 32 39 29 20 61 74 0a 20 20 20 20 20 6c 6f 3-29) at.     lo
0100: 63 61 6c 68 6f 73 74 3a 38 30 30 30 0a 20 20 20 calhost:8000.
0110: 20 3c 2f 41 44 44 52 45 53 53 3e 0a 20 20 3c 2f  </ADDRESS>.  </
0120: 42 4f 44 59 3e 0a 3c 2f 48 54 4d 4c 3e 0a       BODY>.</HTML>.
* Closing connection 0

setDebugDetail() のオプションに { hex: false } を指定すると、16進データは表示しない形式で取得することもできる。

var http = new Net.Http();
http.setDebugDetail(true, { hex: false });
http.setDebug(System.print);
http.delete("http://localhost:8000/index.html");

16進ダンプが無くなる。

*   Trying ::1:8000...
* Connected to localhost (::1) port 8000 (#0)
> DELETE /index.html HTTP/1.1
Host: localhost:8000
Accept: */*

* Mark bundle as not supporting multiuse
< HTTP/1.1 405 Method Not Allowed
< Content-Type: text/html; charset=ISO-8859-1
< Server: WEBrick/1.4.2 (Ruby/2.5.1/2018-03-29)
< Date: Tue, 21 Apr 2020 09:09:48 GMT
< Content-Length: 302
< Connection: close
<
> Recv data, 0000000302 bytes (0x0000012e)
0000: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">.<HTML>.  <HEAD
0040: ><TITLE>Method Not Allowed</TITLE></HEAD>.  <BODY>.    <H1>Metho
0080: d Not Allowed</H1>.    unsupported method `DELETE'..    <HR>.
00c0:  <ADDRESS>.     WEBrick/1.4.2 (Ruby/2.5.1/2018-03-29) at.     lo
0100: calhost:8000.    </ADDRESS>.  </BODY>.</HTML>.
* Closing connection 0

Fiber

Fiber を使ってデータをループで処理させることもできる。EventMachine 的な使い方を想定しているが、まだ EventMachine は無いので今後の検討項目。

var http = new Net.Http();
http.sslVerifyPeer(false);
http.sslVerifyHost(false);
var fiber = new Fiber(&{
    http.get("https://docs.ruby-lang.org/ja/latest/class/Range.html", &(data) => {
        yield data;
    });
});
var total = "";
while (true) {
    var d = fiber.resume();
    break if (!fiber.isAlive());
    total += d;
    System.println("read %d bytes, total %d bytes" % d.length() % total.length());
}
System.println(total);

こんな感じで取得できます。

read 1371 bytes, total 1371 bytes
read 1371 bytes, total 2742 bytes
read 1371 bytes, total 4113 bytes
read 1371 bytes, total 5484 bytes
read 1371 bytes, total 6855 bytes
read 1371 bytes, total 8226 bytes
read 1371 bytes, total 9597 bytes
read 1371 bytes, total 10968 bytes
read 1371 bytes, total 12339 bytes
read 1371 bytes, total 13710 bytes
read 1371 bytes, total 15081 bytes
read 1371 bytes, total 16452 bytes
read 1371 bytes, total 17823 bytes
read 1371 bytes, total 19194 bytes
read 1371 bytes, total 20565 bytes
read 1371 bytes, total 21936 bytes
read 1371 bytes, total 23307 bytes
read 1371 bytes, total 24678 bytes
read 1371 bytes, total 26049 bytes
read 1371 bytes, total 27420 bytes
read 1371 bytes, total 28791 bytes
read 1371 bytes, total 30162 bytes
read 1371 bytes, total 31533 bytes
read 1371 bytes, total 32904 bytes
read 1371 bytes, total 34275 bytes
read 1371 bytes, total 35646 bytes
read 1371 bytes, total 37017 bytes
read 1371 bytes, total 38388 bytes
read 1371 bytes, total 39759 bytes
read 1371 bytes, total 41130 bytes
read 1371 bytes, total 42501 bytes
read 1371 bytes, total 43872 bytes
read 1371 bytes, total 45243 bytes
read 1371 bytes, total 46614 bytes
read 1371 bytes, total 47985 bytes
read 136 bytes, total 48121 bytes
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-620926-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'UA-620926-3');
</script>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="../syntax-highlight.css">
<link rel="icon" type="image/png" href="../rurema.png">

<link rel="canonical" href="https://docs.ruby-lang.org/ja/latest/class/Range.html">

<title>class Range (Ruby 2.7.0 リファレンスマニュアル)</title>
...(以下省略)

インスタンス・メソッド

Net.Http クラス・インスタンスに定義されているメソッドは以下の通り。正直、証明書関係はちゃんとテストできていないが、libcurl のマニュアル通りの実装をしてみた。基本的には対応する CURL オプションを設定しているだけです。何かあれば教えていただけると助かります。

メソッド	意味
sslVerifyPeer(tf)	true, 証明書を sslSetCaInfo() メソッド、または sslSetCaPath() メソッドで証明ディレクトリを指定する。 false, 左記の検証を行わない。
sslVerifyHost(verify)	true, SSL ピア証明書に一般名が存在するかどうかを調べ、その名前がホスト名と一致することを検証する。false, 左記の検証を行わない。
sslSetCaInfo(path)	接続先を検証するための証明書を保持するファイル名。 sslVerifyPeer() とともに使用する。
sslSetCaPath(path)	複数の証明書ファイルを保持するディレクトリ。 sslVerifyPeer() とともに使用する。
setDebugDetail(tf, opts)	true, デバッグ情報に送受信データを含める。 opts として { hex: false } を指定すると送受信データに 16 進ダンプを含めない。
setUserPassword(user, pass)	接続に使用するユーザー名とパスワード。
setProxy(url)	リクエストを経由させる HTTP プロキシの URL。
setProxyUserPassword(user, pass)	プロキシに接続するためのユーザー名とパスワード。
setTimeout(millisec)	タイムアウトをミリ秒で指定する。
setDebug(callback)	デバッグ情報を受け取るコールバックを指定する。コールバックを指定するとデバッグ情報を取得するよう設定される。
addHeader(key, value)	設定する HTTP ヘッダフィールドを key と value で指定する。
removeHeader(key)	key で示されるヘッダを削除する。
setRedirect(tf, opts)	サーバーが HTTP ヘッダの一部として送ってくる "Location: " ヘッダの内容をたどる。opts として { max: n } を指定するとリダイレクトする回数の上限を設定できる。
setPostData(data)	POST または PUT で送信するデータを設定する。
head(url, callback)	HEAD メソッドを発行する。コールバックを指定しなかった場合、取得したヘッダデータのオブジェクトを返す。
get(url, callbacks)	GET メソッドを発行する。コールバックはヘッダ・ボディ用関数、または { header: f1, body: f2 } でそれぞれ指定可能。コールバックを指定しなかった場合、取得したデータのオブジェクトを返す。
post(url, callbacks)	POST メソッドを発行する。コールバックはヘッダ・ボディ用関数、または { header: f1, body: f2 } でそれぞれ指定可能。コールバックを指定しなかった場合、取得したデータのオブジェクトを返す。
put(url, callbacks)	PUT メソッドを発行する。コールバックはヘッダ・ボディ用関数、または { header: f1, body: f2 } でそれぞれ指定可能。コールバックを指定しなかった場合、取得したデータのオブジェクトを返す。
delete(url, callbacks)	DELETE メソッドを発行する。コールバックはヘッダ・ボディ用関数、または { header: f1, body: f2 } でそれぞれ指定可能。コールバックを指定しなかった場合、取得したデータのオブジェクトを返す。

おわりに

ネットワーク系は色々使い道があるので今後充実させたいカテゴリー。まずは一番使いたい HTTP を用意してみました。libcurl ではできないものも含めてサポートしていきたい。SNMP とか、SSH とか。

ではまた次回。

plus1.js

//☆使い方☆
//①エクセルの1行目に置換前、2行目に置換後を記入。
//②対象データ範囲をコピーし、クリップボードに登録。
//③処理対象文字列を選択し、マクロ実行。
var listConv = function (inStr, inClip){
  var convList = inClip.split('\r\n');
  for(var i in convList){
    var convRecord = convList[i].split('\t');
    var oldStr = convRecord[0];
    var newStr = convRecord[1];
    if(typeof oldStr === 'string' 
      && typeof newStr === 'string'){
      inStr = inStr.replace(new RegExp(oldStr,'g'), newStr);
    }
  }
  return inStr;
}
//(INPUT)選択範囲を取得
var str = Editor.GetSelectedString(0);
//(INPUT)クリップボードを取得
var clip = Editor.GetClipboard(0);
//(PROCESS)クリップボードの文字列を利用して、順次置換
str = listConv(str, clip);
//(OUT)編集したテキストを設定
Editor.InsText(str);

使用例

置換データをエクセルからコピーし、クリップボードに登録。

サクラエディタの処理対象行(2～5行)を選択して、当マクロを実行する。

実行前

TEST1
TEST1TEST2TEST3
TEST44TEST55TEST66
TEST777TEST888TEST999
TEST10
TEST1

実行後

TEST1
TEST①TEST②TEST③
TEST④④TEST⑤⑤TEST⑥⑥
TEST⑦⑦⑦TEST⑧⑧⑧TEST⑨⑨⑨
TEST⑩
TEST1

インターネットを参考にしながらjavaScriptでトグルメニューを作る方法を勉強した。

しかし、Chromeにて、いざ実行すると
「Cannot read property 'addEventListener' of null」
というエラーが発生する。

はい？何故ですか？？
エラー文を読むと、「addEventListener」が「null」である事が分かる。
id関係のエラーであると予測し、文法ミスをくまなくチェック。
しかし、思い当たる節がない。
あれこれ文字を変えてみるも、結果は変わらず。
何故？？？？

休憩を挟み、googleで検索しまくった結果、ついに解決した。

原因はHTMLにあった。

HTMLにJavascriptを関連付けする為のscriptタグを上部に書いていたのがダメだったようだ。
そこに記述してしまうと、HTMLを読み込む前にjavascriptが動作してしまうようだ。
私は、てっきり、「.css」と同じようにhead部に記述すれば良いものだと思っていた・・・。

この後、headerタグの下部に配置させる事で、無事に問題は解決した。

思い返してみれば、些細な原因だが、解決するまでに丸一日費やしてしまった・・・。

はじめに

この記事は、WordPressでしかホームページを作れないプログラミング初心者が、無理やりWordPressを使って、タイピングのリアルタイム対戦ゲームを作ってみた記事です。

タイピング初心者用に、７０近くあるステージをクリアしていくモードもあります。

IT系の集まりで、「WordPressでこのサイト作ったよ」って言ったらどよめきが起こり、「Qiitaに書いてみれば？」と言われたので書いてみます。

ちなみに、タイピンガーＺというサイトです。

このサイトをWordPressでどうやって作ったのかを、ざっくり書いていこうと思います。

テーマのテンプレート

はるか昔に購入した有料テンプレートを使ってみましたが、改造しすぎて原型をとどめていないので、なんでも良かったと思います。

記事投稿と固定ページテンプレート

タイピンガーＺは、対人対戦を除いて、ステージをクリアしていく仕組みになっているのですが、それらのステージはWordPressの記事投稿で作りました。

記事には、敵キャラのセリフだったり、敵の強さだったり、音楽・背景だったりのパラメーターを記入します。
↓こんな感じ

<!--セリフ-->
<span id="pan2serifu">
（たけしさんブリーフ増えてる・・・）brbr
なんすかそれ,
ブリーフ型ターバンヲ発明シマシタ。22,
ヨガタケシデース22,
カレーガンジーヨガファイア22,
インド人に謝れ,
ヨガソーリー22,
さて、今回もがんばろう。
,*-,*del,((</span>
<!--速度基準-->
<span id="speedlinesetting1">20</span><!--遅い-->
<span id="speedlinesetting2">30</span>
<span id="speedlinesetting3">40</span><!--早い-->
<!--ミス基準-->
<span id="misslinesettei1">60</span><!--正確性低い-->
<span id="misslinesettei2">70</span>
<span id="misslinesettei3">85</span><!--正確性高い-->

それぞれのパラメーターは、Javascriptでゲットできるように、idかclassを付けておきます。
セリフに「22」とか、「*del」とか書いてますが、これはJavascript側に何かしてほしいときの自作コマンドみたいなものです。
このコマンドで、セリフを話してるキャラが消えたり、セリフが大きくなったり、BGMが変わったりと、いろいろ操作することができるようにしてます。

また、これだけではただのブログ記事のデザインにしかならないので、自分で作った固定ページテンプレートを当てます。

「初心者練習ステージテンプレート」「CPU対戦用テンプレート」などをPHPで書いて用意しました。

あとはパラメーターを書いた記事を大量に投稿して、それぞれに固定ページテンプレートを当てれば、ステージがどんどん増えていきます。

リアルタイム対戦

リアルタイム対戦を導入するにあたってNode.jsを使いたかったのですが、僕が使っているロリポップレンタルサーバーが対応してなかったので、仕方なくAWSも使うことにしました。

AWSを「オッス」と読んでたくらい何も知識がなかったのですが、１年目が無料なのと、２年目以降もだいぶ格安っぽい感じだったので使うことにしました。

AWSでNode.jsを導入するにあたって、下記の記事をそのままやりました。

AWS EC2でNodeを動作させる

この記事でやってることが何なのか、何も理解しないまま人形のように作業したのですが、なんと普通にNode.jsが動きました。
記事の筆者さんありがとう。

しかし、この記事のままだとhttpsでのやり取りができず、そこではまりました。
何も理解しないまま進めると、応用が利かないから困ります。

なんとか解決したものの、どうやって解決したのか忘れてしまったという。。。
たしかロードバランサ―の部分でhttpsを受け入れてなかったとか、そんな感じだった気がします。

Socket.io

Node.jsのライブラリであるSocket.ioを使って、リアルタイム対戦を実現しました。
Socket.ioまじですごい。アホでも使えるようにしてくれてる。

基本的には、下の四つだけ覚えたら使えました。

.on()　受信
.emit()　送信
.broadcast()　自分以外に送信
.join()　部屋作る

Firebaseとやらがもっと簡単という噂を聞きましたが、Socket.ioも初心者でも扱えるとてもシンプルなものでした。

処理のフローをまとめると

無理やりWordpress使って、サーバーも２つ使ってるという構造なので、無駄に複雑です。

リアルタイム対戦の処理をまとめると・・・

１、サーバー１(WordPress)からクライアントにページ情報を送信
２、クライアント側でHTMLとかJavascriptが動く
３、クライアントからサーバー２(AWS、Node.js)に情報送信
４、サーバー２から対戦相手のクライアントに情報送信
５、以下サーバー２を通してクライアント同士で情報送受信

という流れです。

Qiitaの天才達、ありがとう

開発前は、プログラミング素人の自分が、リアルタイム対戦なんてできるのか？
とか思ってましたが、やってみればできるもんです。
１０年前だったら不可能だったと思いますが、先人の天才達が素人でもできるように、資料やライブラリを公開してくれているので、なんとかなった感があります。
Qiita、めちゃくちゃ参考にしました。

天才達、ありがとう。

Twitter：@pant2taicho
ホームページ：タイピンガーＺ

はじめに

世の中にダークモードが流行ってる中、ダークモードを実装するには色んな方法がありますが、今回はAngularでアプリのテーマ (背景、色)を管理してみった。

今回のアプリに使用したものはこんな感じです。

• Angular 9
• Angular Material 9.2.1

Angular Materialによるカラー管理

Angular Materialのインストールと設定が終わりましたら、まずはテーマ作成用のscssファイルを作成する。

最初はAngular Materialのテーマ機能をインポートして、コアmaxinをincludeする。
これでAngular部品のテーマ作成機能が使えるようになりました。

カラーパレットを設定

Angular Materialのカラーパレットはprimary(基本)、accent(アクセント)、warn(警告)の三色で構成されています。SCSS変数でそれぞれを設定して、mat-light-theme maxinに注ぎます。

Materialパレットはこちらで参考してください(https://material.io/resources/color/)

上記の構成で最終的にはこういう感じになります。

他の部品を見てみると....

必須項目の色がちゃんとwarnの色になっていますね！

変更用テーマを作成

ここまでデフォルトのテーマを設定できましたので、ここからは変更用のテーマをもう一個作成します。

今までのやり方と変わらず、ダークテーマ用のSCSS変数を設定して、mat-dark-themeに注ぎます。

こういう感じになります。

あとはこのように好きなクラスで囲き込みます。これによって、"unicorn-dark-theme"のDOM要素はこのテーマに適用するようになります。

テーマ変更ボタン(一番右のボタン)をメニューに追加する

ボタンを押すとテーマサービスで対象テーマを適用する

テーマサービスが処理行ったらイベントをAppコンポーネントに送って、対応するクラスをDOM要素に追加する。これで完成です。

最終的にこうなります

デフォルトテーマ

テーマボタン押下後

まとめ

Angular MaterialのTheming機能を紹介させていただきました。
Stackblitzにセットアップなしで試すことできますので、ぜひ皆様もやってみましょう！
今回の成品をstackblitzに載っていますので、良かったら参考してみてください！
(https://angular-crosscomponent.stackblitz.io/)

はじめに

今まで Javascript で変数宣言をする際に let を使っていたけど、その理由がよくわかっていなかったのでまとめます。

まとめ

・ 変数には「グローバル変数」と「ローカル変数」があるよ。
・ 基本型と参照型の変数で処理の流れが変わるよ。
・ やっぱり、varよりletを使った方がいいよ。

先ず、最初にスコープのおさらい。

⑴グローバル変数とローカル変数

基本、関数内で定義された変数が「ローカル変数」です。
ローカル変数は関数全体でのみ有効な為、グローバル変数に影響しません。

javascript.js

var scope = "global";

function getScope(){
  var scope = "local";
  return scope;
}
console.log(getScope()); //=> local
console.log(scope); // => global

上のコードを見てもらうとわかる通り、グローバル変数 scope とローカル変数 scope は同じ変数名でも互いに影響し合わない。
ローカル変数は関数全体でのみ有効なので。


※ちなみに上のコードから var 宣言を取り除いてみます。

javascript.js

scope = "global";

function getScope(){
  scope = "local";
  return scope;
}
console.log(getScope()); // getScope によって scope に local が格納される。=> local
console.log(scope); // => local

var を外して変数を宣言すると全ての変数がグローバル変数扱いになってしまうので2行目のconsole.log(scope)でもlocalが出力されてしまう。
つまりローカル変数がこの場合、存在しないので1行目のconsole.log(getScope())で関数を呼び出した時点でscopeがlocalに上書きされてしまっている。

⑵基本型と参照型による変数の処理方法の違い

先ず、前提として基本型は値自体を変数に格納している。
そして参照型は変数の値が格納されているメモリのアドレスを格納している。(格納している場所情報が変数に格納されているイメージ)。

1,基本型

javascript.js

var i = 10;
function decrement(val){
  val--;
  return val;
}
console.log(decrement(i)); // => 9
console.log(i); // => 10

2,参照型

javascript.js

var arry = [1,2,3,4,5,6];
function deleteElement(val){
  val.pop();// 末尾の要素を削除
  return val;
}
console.log(arry); // => [1,2,3,4,5,6]
console.log(deleteElement(arry)); // => [1,2,3,4,5]
console.log(arry);// => [1,2,3,4,5]

基本型と参照型の最後に出力されている値を見比べていただくとわかるが、
基本型の場合、引数に入れられたグローバル変数が関数内で処理されるも、その後にグローバル変数を出力すると宣言時の値が出力される。
一方、参照型の場合、引数に入れられたグローバル変数が関数内で処理され、その後にグローバル変数を出力しようとすると関数内で処理された結果が再び出力される。

前提でも話した通り、参照型は変数に値を入れている訳でなく、値のメモリ上のアドレスを格納しているため、一度その場所に格納してある値をいじったら、次にアドレスを参照しても、いじられた後の値が見つかる。
※一方、基本型の場合は最初に宣言されているグローバル変数が関数内に入り処理されるため、処理された変数は関数内でのみ有効になり、グローバル変数に影響は与えないと理解しました。

varとletの違い

通常、Javaなどではブロック内で定義された変数はブロックの外では使えない為、あらかじめ、ブロックの外で宣言しておく。それによって一度、ブロック内に入った変数もブロックを抜けても外で使えていた。
その方式に乗っ取りかくと以下のようになります。

javascript.js

var i = 4
if (true) {
  i++;
}
console.log(i); // => 5

しかしjavascriptにはブロックレベルのスコープが存在しない為、以下のような書き方ができる。

javascript.js

if (true) {
  var i = 4;
  i++;
}
console.log(i); // => 5

しかし一般的にこの書き方は「スコープは出来るだけ限定すべき」という一般的ルールから逸脱したものであるため、javaに慣れてきた今となっては分かりづらいし、覚えるのが面倒。

そこで let の使用

上のコードで宣言されているvar i = 4;のvarをletに置き換えてみよう。

javascript.js

f (true) {
  let i = 4;
}
console.log(i); // => Uncaught ReferenceError: i is not defined

見ての通り、ブロックレベルのスコープが働き、ifブロック内で宣言した変数はブロック外ではエラーを吐いてくれるようになりました。これで「スコープは出来るだけ限定すべき」という一般的ルールから逸脱することなく、分かりやすいコードをかけます。

つまり、varはブロックレベルのスコープを認識できず、letはブロックレベルのスコープを認識できることがわかった。以上のことを踏まえてやはり変数宣言はletを使用した方が良いかも。

おまけ

switch分も一つのブロックの為、let宣言は変数の重複エラーになる。

javascript.js

let x = 2;
switch (x) {
  case 0:
    let value = {x:0};
    break;
  case 1:
    let value = {x:1};
    break;
  case 2:
    let value = {x:2}
    break;
}
console.log(value); // => Uncaught SyntaxError: Identifier 'value' has already been declared

解決策

1、最初に変数宣言を行ってしまう

javascript.js

let x = 2;
let value = {x:100}; // ここで変数宣言
switch (x) {
  case 0:
    value = {x:0}; // let消す
    break;
  case 1:
    value = {x:1}; // let消す
    break;
  case 2:
    value = {x:2} // let消す
    break;
}
console.log(value); // => {x:2}

2、ブロック内でvar宣言で変数宣言を行う

javascript.js

let x = 2;
switch (x) {
  case 0:
    var value = {x:0}; // letをvarに変更
    break;
  case 1:
    var value = {x:1}; // letをvarに変更
    break;
  case 2:
    var value = {x:2}; // letをvarに変更
    break;
}
console.log(value); // => {x:2}

スコープは出来る限り限定すべき、という一般的ルールから外れてしまうので⑴の方がいいかな。

最後に

なんとなく使ってモヤモヤしていたvarとletの違いについて改めて勉強することができてよかったです。多分、もうvarは使いません。

はい、皆さんこんにちは！
ある日ネットサーフィンをしていたら、数値を基にグラフを作成してくれる「Chart.js」と世界のコロナウイルスに関するデータを提供してくれるAPIを見つけたので、今日はこれらとVue.jsを組み合わせて世界のコロナウイルスのデータを表示するグラフを作っていきたいと思います。

今回作るもの

APIから国別のコロナウイルスについてのデータを取得し、そのデータをChar.jsを使って棒グラフとしてブラウザ（今回はGoogle Chrome）へ映すプログラム。また、今回扱うAPIはコロナウイルスについて数種類のデータを提供しているため、グラフの利用者がほしいデータの種類を利用者自身がブラウザ上でを選べるようにする。

本日の材料はこちら

• Chart.jsファイル（ダウンロードはこちら）
• API(ダウンロードはこちら)
• Vue.js(グラフの値の操作等で使うだけなので、面倒くさければjavascriptをそのまま使っても大丈夫。ちなみにダウンロードはこちら)

では、実際に作っていく！

今回の工程
1. Chart.js使い、ブラウザ上にグラフを作成する。
2. APIからデータを取得する
3. ブラウザ上からグラフを操作できる仕組みを作る

1. Chart.js使い、ブラウザ上にグラフを作成する。

Chart.jsの扱い方はとても簡単です。Chart.jsを使うためには、CDNを利用するかファイル自体をダウンロードし、ブラウザへ表示したいHTMLファイルにscriptタグで埋め込むだけ！
あとはChart.jsの公式ホームページかこの記事に書いてあるコードをコピペすればすぐに使えます。
あとはコピペしたコードのChartクラス内のdataプロパティなどをいじっていれば扱い方はすぐにわかると思います。

2. APIからデータを取得する

APIからデータを取り出すために、今回はfetch()を使ってみました。コードはこんな感じ

js

 const infoArray = await fetch('https://api.covid19api.com/summary') //awaitはasyncがついている関数内でしか使えないので注意！
    .then(function(response) {
      return response.json();
    }).then(function (data) {
        return data.Countries;
    });

データは変数（今回はinfoArray）にあるので、これを少し加工してChartクラス内のdataプロパティにセットすれば、APIからの情報をグラフで表せます！

3. ブラウザ上からグラフを操作できる仕組みを作る

ブラウザだけではデータベースもなく、jsだとcookieを使ったユーザーからのデータの保持が手軽にできる方法がない。（自分が探していないだけでもしかしたらあるかも）ではどうすれば良いか？そこで今回使用するのはsessionStorage。こちらは配列でブラウザでのユーザーの入力データを保持できます。

js

sessionStorage['kaneko'] = 'kinironoyatu'; 
sessionStorage['Orotimaru'] = 'Yu-sho-'; 

console.log(sessionStorage.getItem('Kaneko')); //consoleにkinironoyatuと表示される
console.log(sessionStorage.getItem('Orotimaru')); //consoleにYu-sho-と表示される

localStorage.tokenでデータを保持しようと初めは考えていましたが、複数のデータを保持させることができなかったので、sessionStorageを使用しました。もしsessionStorageについてもう少し知りたい場合は下の記事を見てみてください。
Qiita sessionStorageをつかってみる

このsessionStorageを使用して作成した見た目（HTML）とその機能（Vue.js）がこちら

body

<p>Select a category you want to know.</p>
    <div id="vue">
        <form style="display: flex;">
            <div v-for="category in categories">
                <input type="radio" name="category" :value=category v-model="select">{{category}} //見たいデータのカテゴリーの選択しの表示
            </div>
            <button @click="selectCategory" style="margin:0 20px;">check!</button> //カテゴリーの切り替え
            <button @click="back" style="margin:0 10px;">back</button> //次の27か国のデータを表示
            <button @click="next" style="margin:0 10px;">next</button> //前の27か国のデータを表示
        </form>
    </div>
    <canvas id="myChart"></canvas> //グラフの表示

Vue.js

const categories = ['NewConfirmed', 'TotalConfirmed', 'NewDeaths',　'TotalDeaths',　'NewRecovered',　'TotalRecovered',]
const getEntry = sessionStorage.getItem('entry') 

new Vue({
    el:'#vue',
    data: {
        categories: categories,
        select: '',
    },
    created: function () {
        if (!getEntry) {
            sessionStorage['entry'] = '0'   
        }
    },
    methods: {
        selectCategory: function () {
            sessionStorage['select'] = this.select
        },
        next: function () {
            switch (getEntry) {
                case '0':
                    sessionStorage['entry'] = '27'
                    break
                case '27':
                    sessionStorage['entry'] = '54'
                    break
                case '54':
                    sessionStorage['entry'] = '81'
                    break
                case '81':
                    sessionStorage['entry'] = '108'
                    break
                case '108':
                    sessionStorage['entry'] = '135'
                    break
                case '135':
                    sessionStorage['entry'] = '162'
                    break
                case '162':
                    sessionStorage['entry'] = '189'
                    break
                default:
                    sessionStorage['entry'] = '216'
                    break
            }
        },
        back: function () {
            switch (getEntry) {
                case `216`:
                    sessionStorage['entry'] = '189'
                    break
                case '189':
                    sessionStorage['entry'] = '162'
                    break
                case '162':
                    sessionStorage['entry'] = '135'
                    break
                case '135':
                    sessionStorage['entry'] = '108'
                    break
                case '108':
                    sessionStorage['entry'] = '81'
                    break
                case '81':
                    sessionStorage['entry'] = '54'
                    break
                case '54':
                    sessionStorage['entry'] = '27'
                    break
                default:
                    sessionStorage['entry'] = '0'
                    break
            }
        }
    }
})

簡単に機能を説明しますと、HTML部分の<button>を押すとVue.jsの部分でそれに応じてsessionStorageを書き換える感じになっています。
また、もともとのAPIの総データ数があまりにも多く、ブラウザで一度にすべての国の情報を載せられなかったため表示できる国の数を制限しました。next、backを押すことでブラウザに表示されていない国のデータを表示させることができま。）あと悔しいことにsessionStorageは文字列データしか扱えないため、こんなに不格好なプログラムになってしまいました。

完成したものがこちら！

ネットを漁っていたら、グラフをお手軽に作成できる作成「Chart.js」なるものとコロナの情報がお手軽に手に入るAPI（https://t.co/VqyaFTWy0n）を見つけたので、さっそく世界中のコロナの情報がグラフで見れるプログラムを書いてみました。動画は実際にこれを動かしている時のものです。 pic.twitter.com/TlVOtK9aag

— サントゥー (@SAshunchan) April 29, 2020

GitHubで公開してます

git cloneなどでコードを詳しく見たい方はこちら
すぐに動かせるので、ぜひ動かしてみてください！

今回の記事はこれで以上です。ではまた！

はじめに

ポートフォリオ制作で、Google Map APIを用いて住所フォームを送信した際に住所名と地図を自動的に地図表示される設定を行ったので、アウトプットも兼ねて手順を紹介していきます。

手順

1.Google MapのAPI Keyを取得
2.住所(address)、緯度(latitude)、経度(longitude)カラムを追加する
3.住所を登録するフォームを作成する
4.gem geocoderを追加する
5.viewにGoogle Mapを表示させる記述を追加する
6.詳しい住所を表示させる
7.GitHubにPushされないように設定する
8.APIキーの書き換え
(その他)AWSでデプロイしている場合

1.Google MapのAPI Keyを取得

APIの取得はこちらの記事がわかりやすいので参考にしてみてください。

https://qiita.com/tiara/items/4a1c98418917a0e74cbb

2.住所、緯度、経度カラムを追加する

住所(address)、緯度(latitude)、経度(longitude)カラムを追加しましょう。

class ChangeDatatypeLanguageOfLabs < ActiveRecord::Migration[5.2]

  def change
        change_column :labs, :address, :string
        change_column :labs, :latitude, :float
        change_column :labs, :longitude, :float
  end
end

labsはモデル名なので人によって変わります。

latitudeとlongitudeはfloat型にします。

floate型については下記の記事を参考にしてみてください。
https://wa3.i-3-i.info/word14968.html

カラムを追加したら$ rails:db:migrateしましょう。

3.住所を登録するフォームを作成する

<%= form_for(@lab) do |f| %>
・・・
<%= f.label :住所 %>
<%= f.text_area :address, autofocus: true %>
・・・
<%= f.submit '投稿' %>
<% end %>

これで住所を登録するフォームが投稿できます。

4.gem geocoderを追加する

地図表示する際に、Google Mapでは緯度・経度から位置を取得します。

なので、緯度・経度の登録を行う為に今回はgem geocoderを導入します。
geocoderによって住所の情報を元に緯度、経度を割り出してくれます。

Gemfile.

gem 'geocoder'

記述後、ターミナル上で$ bundle installを実行します。

lab.rb

  geocoded_by :address(←住所のカラム名)
  after_validation :geocode, if: :address_changed?

これで、モデル登録時と住所(address)変更時にgeocoderが動いて緯度・経度のデータが登録・更新されます

5.viewにGoogle Mapを表示させる記述を追加する

labs/show.html.rb

・・・
<p>住所</p>
<p><%= @lab.address %></p>(住所名表示)

<div id="map"></div>(地図を表示)
・・・

<style>(地図の大きさ指定)
#map{
  height: 150px;
  width:270px;
}
</style>

<script type="text/javascript">
    function initMap() {

        var test ={lat: <%= @lab.latitude %>, lng: <%= @lab.longitude %>};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            center: test
        });
        var transitLayer = new google.maps.TransitLayer();
        transitLayer.setMap(map);

        var contentString = '住所：<%= @lab.address %>';
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position:test,
            map: map,
            title: contentString
        });

        marker.addListener('click', function() {
            infowindow.open(map, marker);
        });
    }
</script>

<script async defer
        src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=取得したAPIキー&callback=initMap">
</script>

これで登録した住所を元に地図表示ができるようになりました。
しかし、この状態では住所名によって地図が表示されない場合があります。

それはデフォルトのgeocoderのままでは詳しい住所の経度、緯度を持ってくることができないからです。

なので、詳しい住所でも表示されるように設定していきます。

6.詳しい住所を表示させる

ターミナル上で$ bin/rails g geocoder:configコマンドを入力。
そうすると、config/initializers/geocoder.rbファイルが作成されます。

作成されたファイルを開き、中身を変更させましょう。

geocoder.rb

Geocoder.configure(
  # Geocoding options
  # timeout: 3,                 # geocoding service timeout (secs)
   lookup: :google,         # name of geocoding service (symbol)
  # ip_lookup: :ipinfo_io,      # name of IP address geocoding service (symbol)
  # language: :en,              # ISO-639 language code
   use_https: true,           # use HTTPS for lookup requests? (if supported)
  # http_proxy: nil,            # HTTP proxy server (user:pass@host:port)
  # https_proxy: nil,           # HTTPS proxy server (user:pass@host:port)
   api_key: ENV['GOOGLE_MAP_API_KEY'],               # API key for geocoding service
  # cache: nil,                 # cache object (must respond to #[], #[]=, and #del)
  # cache_prefix: 'geocoder:',  # prefix (string) to use for all cache keys

  # Exceptions that should not be rescued by default
  # (if you want to implement custom error handling);
  # supports SocketError and Timeout::Error
  # always_raise: [],

  # Calculation options
  # units: :mi,                 # :km for kilometers or :mi for miles
  # distances: :linear          # :spherical or :linear
)

これで、Google mapのAPIを使って緯度、経度を検索できるようになりました。

7.GitHubにPushされないように設定する

この状態でPushしてしまうと取得したAPIキーもGitHub上に上がってしまいます。
なので、Pushしても表示されないように設定しましょう。

gemのdotev-railsを用いて設定していきます。

Gemfile.

gem 'dotenv-rails'

ターミナル上で$ bundle installを実行します。

app等と同じステージに.envファイルを作成しましょう。

.envファイルにAPIキーを記述する。

env.

GOOGLE_MAP_API_KEY=取得したAPIキー

.envファイルの下にある
.gitignoreファイルの最後の行に.envと記述しましょう。
(ちなみにignoreとは無視するという意味です。)

gitignore.

・・・
・・・
/.env

これでPushしても.envファイルは無視されます。

8.APIキーの書き換え

今までAPIキーを直接書き込んでいた全てのファイルでAPIキーの記述を.envファイル内で定義したGOOGLE_MAP_API_KEYに書き換えます。

labs/show.html.rb

<script async defer
        src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<%= ENV['GOOGLE_MAP_API_KEY'] %>&callback=initMap">
</script>

geocoder.rb

 api_key: ENV['GOOGLE_MAP_API_KEY'],  

これでGitHub上にAPIキーが上がることなく地図が表示されるようになります。

(その他)AWSでデプロイしている場合

AWSでデプロイしている場合、本番環境に反映させる為には
EC２にログイン後、Git pullをして変更内容を取り込みます。

その後、$ sudo vi .envコマンドで.envファイルを開き、

GOOGLE_MAP_API_KEY=取得したAPIキー

を記述するとデプロイ先でも反映されるようになります。

はじめに

ポートフォリオ制作で、Google Maps APIを用いて住所フォームを送信した際に住所名と地図を自動で地図表示される設定を行ったので、アウトプットも兼ねて手順を紹介していきます。

手順

1.Google MapのAPI Keyを取得
2.住所(address)、緯度(latitude)、経度(longitude)カラムを追加する
3.住所を登録するフォームを作成する
4.gem geocoderを追加する
5.viewにGoogle Mapを表示させる記述を追加する
6.詳しい住所を表示させる
7.GitHubにPushされないように設定する
8.APIキーの書き換え
(その他)AWSでデプロイしている場合

1.Google MapのAPI Keyを取得

APIの取得はこちらの記事がわかりやすいので参考にしてみてください。

https://qiita.com/tiara/items/4a1c98418917a0e74cbb

2.住所、緯度、経度カラムを追加する

住所(address)、緯度(latitude)、経度(longitude)カラムを追加しましょう。

class ChangeDatatypeLanguageOfLabs < ActiveRecord::Migration[5.2]

  def change
        change_column :labs, :address, :string
        change_column :labs, :latitude, :float
        change_column :labs, :longitude, :float
  end
end

labsはモデル名なので人によって変わります。

latitudeとlongitudeはfloat型にします。

float型については下記の記事を参考にしてみてください。
https://wa3.i-3-i.info/word14968.html

カラムを追加したら$ rails:db:migrateを実行します。

3.住所を登録するフォームを作成する

<%= form_for(@lab) do |f| %>
・・・
<%= f.label :住所 %>
<%= f.text_area :address, autofocus: true %>
・・・
<%= f.submit '投稿' %>
<% end %>

これで住所を登録するフォームが投稿できます。

4.gem geocoderを追加する

地図表示する際に、Google Mapでは緯度・経度から位置を取得します。

なので、緯度・経度の登録を行う為に今回はgem geocoderを導入します。
geocoderによって住所の情報を元に緯度、経度を割り出してくれます。

Gemfile.

gem 'geocoder'

記述後、ターミナル上で$ bundle installを実行します。

lab.rb

  geocoded_by :address(←住所のカラム名)
  after_validation :geocode, if: :address_changed?

これで、モデル登録時と住所(address)変更時にgeocoderが動いて緯度・経度のデータが登録・更新されます

5.viewにGoogle Mapを表示させる記述を追加する

labs/show.html.rb

・・・
<p>住所</p>
<p><%= @lab.address %></p>(住所名表示)

<div id="map"></div>(地図を表示)
・・・

<style>(地図の大きさ指定)
#map{
  height: 150px;
  width:270px;
}
</style>

<script type="text/javascript">
    function initMap() {

        var test ={lat: <%= @lab.latitude %>, lng: <%= @lab.longitude %>};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            center: test
        });
        var transitLayer = new google.maps.TransitLayer();
        transitLayer.setMap(map);

        var contentString = '住所：<%= @lab.address %>';
        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position:test,
            map: map,
            title: contentString
        });

        marker.addListener('click', function() {
            infowindow.open(map, marker);
        });
    }
</script>

<script async defer
        src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=取得したAPIキー&callback=initMap">
</script>

これで登録した住所を元に地図表示ができるようになりました。
しかし、この状態では住所名によって地図が表示されない場合があります。

それはデフォルトのgeocoderのままでは詳しい住所の経度、緯度を持ってくることができないからです。

なので、詳しい住所でも表示されるように設定していきます。

6.詳しい住所を表示させる

ターミナル上で$ bin/rails g geocoder:configコマンドを入力。
そうすると、config/initializers/geocoder.rbファイルが作成されます。

作成されたファイルを開き、中身を変更させましょう。

geocoder.rb

Geocoder.configure(
  # Geocoding options
  # timeout: 3,                 # geocoding service timeout (secs)
   lookup: :google,         # name of geocoding service (symbol)
  # ip_lookup: :ipinfo_io,      # name of IP address geocoding service (symbol)
  # language: :en,              # ISO-639 language code
   use_https: true,           # use HTTPS for lookup requests? (if supported)
  # http_proxy: nil,            # HTTP proxy server (user:pass@host:port)
  # https_proxy: nil,           # HTTPS proxy server (user:pass@host:port)
   api_key: ENV['GOOGLE_MAP_API_KEY'],               # API key for geocoding service
  # cache: nil,                 # cache object (must respond to #[], #[]=, and #del)
  # cache_prefix: 'geocoder:',  # prefix (string) to use for all cache keys

  # Exceptions that should not be rescued by default
  # (if you want to implement custom error handling);
  # supports SocketError and Timeout::Error
  # always_raise: [],

  # Calculation options
  # units: :mi,                 # :km for kilometers or :mi for miles
  # distances: :linear          # :spherical or :linear
)

これで、Google mapのAPIを使って緯度、経度を検索できるようになりました。

7.GitHubにPushされないように設定する

この状態でPushしてしまうと取得したAPIキーもGitHub上に上がってしまいます。
なので、Pushしても表示されないように設定しましょう。

gemのdotev-railsを用いて設定していきます。

Gemfile.

gem 'dotenv-rails'

ターミナル上で$ bundle installを実行します。

app等と同じステージに.envファイルを作成しましょう。

.envファイルにAPIキーを記述する。

env.

GOOGLE_MAP_API_KEY=取得したAPIキー

.envファイルの下にある
.gitignoreファイルの最後の行に.envと記述しましょう。
(ちなみにignoreとは無視するという意味です。)

gitignore.

・・・
・・・
/.env

これでPushしても.envファイルは無視されます。

8.APIキーの書き換え

今までAPIキーを直接書き込んでいた全てのファイルでAPIキーの記述を.envファイル内で定義したGOOGLE_MAP_API_KEYに書き換えます。

labs/show.html.rb

<script async defer
        src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<%= ENV['GOOGLE_MAP_API_KEY'] %>&callback=initMap">
</script>

geocoder.rb

 api_key: ENV['GOOGLE_MAP_API_KEY'],  

これでGitHub上にAPIキーが上がることなく地図が表示されるようになります。

(その他)AWSでデプロイしている場合

AWSでデプロイしている場合、本番環境に反映させる為には
EC２にログイン後、Git pullをして変更内容を取り込みます。

その後、$ sudo vi .envコマンドで.envファイルを開き、

GOOGLE_MAP_API_KEY=取得したAPIキー

を記述するとデプロイ先でも反映されるようになります。

はじめに

本シリーズは，サイモン課題の作成を通して，jsPsychで心理学実験を行うために最低限必要なスキルを身につけることを目標としています。

具体的には，以下の4つです。

1. 参加者情報の入力（第6回）
2. 課題の教示（第7回）
3. 刺激のランダム提示（第1回，第2回，第3回，第4回）
4. データの保存（第5回）

想定しているターゲットは，どの言語のプログラミング経験もない人です。javascript（や，HTML, css）の基本を知っている必要はありません。シリーズでは, jsPsychで心理学実験を作成するのに必要なテクニックをjavascriptの基本的な構文も織り交ぜながら順番に説明していきます。もちろん，javascriptは知っているがjsPsychはこれからという人にも有用な資料になっているはずです。

なお，このチュートリアルは私が以前作成した「PsychoPy Coderによる心理学実験作成チュートリアル」をjsPsych用に書き換えたものです。

jsPsychとは

jsPsychは，javascriptというプログラミング言語で書かれた心理学実験・調査作成ツール（ライブラリ・プラグイン）です。そして，javascriptはGoogle ChromeやFirefox, Safariといったウェブブラウザ上で動作するプログラミング言語です。したがって，jsPsychもウェブブラウザ上で動作します。つまり，ウェブブラウザ上で心理学実験を動作させることができます。ウェブブラウザは，インターネットを介して世界の誰かの記事・ブログを読むためのものです。それらウェブページと同様に，jsPsychで作成した実験をウェブ上にアップロードしておけば，世界のどこかの誰かさんがインターネットを介して自分の作成した心理学実験に参加することができます。つまり，「オンライン実験」を実施することができます。もちろん，jsPsychで作成した実験をPCにダウンロードしておけば，インターネットがなくてもそのPC上で実験を動作させることができるので，jsPsychでも実験室実験を実施することができます。

オンライン実験作成がjsPsychの主な特徴になると思うのですが，他にも同様のツールは結構あるようです（Anwyl-Irvineら(2020)のTable 1）。その中でも私がjsPsychを使おうと思った理由は以下の３つです。

1. 無料で使える¹
2. スクリプトを書いて作成する
3. 日本語の資料がある

2つ目の点が個人的には結構大事でした。無料で使えて，日本語の資料があるツールとしては，PsychoPy Builderやlab.jsが挙げられます。これらのツールはjsPsychと違って，基本的にGUIでマウスでポチポチ実験を作成することができるツールです。GUIのツールは、最初の垣根は低いのですが、工夫し始めると一気に手順がややこしくなったり、コードを書いたりする必要が出てきたりするという印象があります。コードを書くとなった場合にはツールのベースにあるプログラミング言語（PsychoPyであればpython, lab.jsであればjavascript）について結局勉強する必要があります。

だったら，初めからコードでの実験の作り方を覚えたほうが長期的にはいいんじゃないかと思います。コーディングは最初の垣根がGUIより高いかもしれませんが、慣れてしまえば、GUIよりも楽に自由に実験を組めるようになります。その知識は他のプログラミング言語を勉強するときにも応用できるので、その際の学習コストも低くなります。私の場合は，PsychoPyを使ってコードを書いて心理学実験を作ってきたので，jsPsychにはすぐに慣れることができました。

とはいえ，この辺は作成する予定の実験の複雑さに左右されます。GUIツールでも全然事足りる場合はあるので，全く心理実験を作ったことがないという方は，まずはGUIツールでの作成から始めてみるのがいいと思います。

参考資料

本チュートリアルの作成に際し，以下の資料を参考にいたしました。作成者のみなさまには感謝申し上げます。

• jsPsych公式サイト
• ダウンロードしたjsPsychに同梱されているサンプルコード（examplesフォルダ内）
• 黒木先生の「ウェブブラウザで心理学実験と調査 jsPsych」
• 高橋先生の「キソジオンライン」
• 国里先生の「jsPsychを用いた認知課題の作成」
• 小林先生の「jsPsychチュートリアル」

黒木先生のサイトについては掲載のコードを見る限り，現在のバージョンと互換性がなさそうなので，注意が必要かもしれません。高橋先生のキソジオンラインは，jsPsychの解説資料ではありませんが，jsPsychで作成された心理学実験のコードがたくさんアップされています。jsPsychがある程度読み書きできるようになったら，とても参考になると思います。国里先生のページではRstudioという開発環境上でjsPsychベースの心理実験を作成する方法が紹介されています。Rstudioに馴染みのある方はここから始めてみてもいいかもしれません。小林先生のページにはこれら3つのサイトとは少し種類の違う実験課題のコードが掲載・解説されています。

おわりに

本記事は，本シリーズのまとめページとして概要を説明しました。正直に言うと，サイモン課題は，GUIツールで簡単に作成できる課題です（PsychoPy Builderでの作成，lab.jsでの作成）。

それでも，本シリーズが，なにかのきっかけにjsPsychで書きたい・書かないといけないという方のお役に立てれば大変幸いです。

---

1. ただし，オンライン実験を実施するためにはアップロードしておくサーバーが必要で，多くの場合，レンタルサーバーを借りることになるので，その実施には謝礼とは別にお金がかかります。 ↩

Reactで作る　◯×ゲーム

公式サイト 　　　https://ja.reactjs.org/tutorial/tutorial.html
公式の最終コード https://codepen.io/gaearon/pen/gWWZgR?editors=0010

変更するのは一つのファイル(index.js)だけ
デザインを変えたければindex.cssを変更する

プロジェクトディレクトリ/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Square(props) {
  return (
    <button 
      className="square" 
      onClick={props.onClick}
    >
      {props.value}
    </button>
  );
}

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)} 
      />
    );
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [{
        squares: Array(9).fill(null)
      }],
      stepNumber: 0,
      xIsNext: true,
    };
  }

  handleClick(i) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'x' : '0';
    this.setState({
      history: history.concat([{
        squares: squares,
      }]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext,
    });
  }

  jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) === 0,
    });
  }

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);

    const moves = history.map((step, move) => {
      const desc = move ?
        '移動' + move :
        'ゲームスタート';
      return (
        <li key={move}>
          <button onClick={() => this.jumpTo(move)} >{desc}</button>
        </li>
      );
    });

    let status;
    if (winner) { 
      status = '勝者：' + winner;
    } else {
      status = '次のプレイヤー：'  
                     +
               (this.state.xIsNext ? 'X' : '0');
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={current.squares}
            onClick={(i) => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{ status }</div>
          <ol>{ moves }</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

イメージ

ゲームスタートで新規ゲーム開始
ゲーム途中に移動ができる

Reactで作る　◯✖️ゲーム

公式サイト 　　　https://ja.reactjs.org/tutorial/tutorial.html
公式の最終コード https://codepen.io/gaearon/pen/gWWZgR?editors=0010

変更するのは一つのファイル(index.js)だけ
デザインを変えたければindex.cssを変更する

プロジェクトディレクトリ/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function Square(props) {
  return (
    <button 
      className="square" 
      onClick={props.onClick}
    >
      {props.value}
    </button>
  );
}

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)} 
      />
    );
  }

  render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [{
        squares: Array(9).fill(null)
      }],
      stepNumber: 0,
      xIsNext: true,
    };
  }

  handleClick(i) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'x' : '0';
    this.setState({
      history: history.concat([{
        squares: squares,
      }]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext,
    });
  }

  jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) === 0,
    });
  }

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);

    const moves = history.map((step, move) => {
      const desc = move ?
        '移動' + move :
        'ゲームスタート';
      return (
        <li key={move}>
          <button onClick={() => this.jumpTo(move)} >{desc}</button>
        </li>
      );
    });

    let status;
    if (winner) { 
      status = '勝者：' + winner;
    } else {
      status = '次のプレイヤー：'  
                     +
               (this.state.xIsNext ? 'X' : '0');
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={current.squares}
            onClick={(i) => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{ status }</div>
          <ol>{ moves }</ol>
        </div>
      </div>
    );
  }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

イメージ

ゲームスタートで新規ゲーム開始
ゲーム途中に移動ができる

はじめに

本記事は，「jsPsychによる心理学実験作成チュートリアル」の第7回の記事です。第6回では参加者情報の取得方法を紹介しました。そこで実験課題は完成しましたが，もう少し実験プログラムを作り込んで行きます。今回は課題の教示，課題の練習をこれまでのコードに追加します。

このチュートリアルシリーズの目的・概要等が気になった方はこちらの全体のまとめをご一読ください。

教示・長文テキスト

参加者が課題を行うにあたって，どのように進めればいいか説明する必要があります。といっても，これまで使い続けてきたhtml-keyboard-responseを使えばいいだけです¹。

show_instruction.html

<!DOCTYPE html>
<html>
<head>
  <script src="../jspsych.js"></script>
  <script src="../plugins/jspsych-html-keyboard-response.js"></script>
  <link rel="stylesheet" href="../css/jspsych.css"></link>
</head>
<body></body>
<script>

  var instruction = {
    type: 'html-keyboard-response',
    stimulus: '教示です',
  }

  jsPsych.init({
    timeline: [instruction],
  });
</script>

</html>

このコードについて特に説明することはありません。これを課題の前に入れれば，教示に続けて課題が実行されます。しかしながら，「教示です」なんて教示はありません。もっと課題の概要・取り組み方を説明しなければなりません。

本シリーズで作成してきたサイモン課題は，まず「キー押しの課題です」。具体的には，「LとRがランダムに提示されます」。そして，参加者がしなければならないのは，提示された刺激が「『L』なら左手人差し指で f キーを押し，『R』なら右手人差し指で j キーを押す」ということです。適切に改行しながらこれを反映すると，stimulus:の部分は以下のようになります。<br>で改行することができます。

var instruction = {
  type: 'html-keyboard-response',
  stimulus: 'これからキー押し課題を行ってもらいます。<br>「L」「R」がランダムに表示されるので，<br><br>「L」が表示されたら左手人差し指で f キー<br>「R」が表示されたら右手人差し指で j キー<br><br> を押してください。<br>準備ができたらいずれかのキーを押して課題を始めてください。',
}

これで教示としてはOKになりました。改行を2つ重ねていると空白行ができるので，段落などのまとまりを作って，見やすくしたりすることができます。しかし，実験を作っている立場からすると，1行で書くのは見にくくて不便です。

解決方法の一つは，いくつかの文字列に分割して，+で連結するようにします。+を使っている部分ではコード上で改行することができるので，コードを見やすくすることができます。

var instruction = {
  type: 'html-keyboard-response',
  stimulus: 'これからキー押し課題を行ってもらいます。<br>' +
            '「L」「R」がランダムに表示されるので，<br><br>' +
            '「L」が表示されたら左手人差し指で f キー<br>'+
            '「R」が表示されたら右手人差し指で j キー<br><br>' +
            'を押してください。<br>' +
            '準備ができたらいずれかのキーを押して課題を始めてください。',
}

課題の練習

実際の実験では，分析用のデータを取る（つまり本番）の前に，練習課題を行います。参加者の教示の理解を確認したり，反応のマッピングを生成したりするために重要です。そこで，練習課題用のブロックも作成しましょう。本番と異なるのは試行数だけなので，別々のリピート数で生成したtrial_types_practiceとtrial_types_mainを作成して，それぞれをtimeline_variablesに指定した変数を作成すれば大丈夫です。色々を省略しますが，以下のように書けます。

var trial_types = [
  {letter: 'L', pos: 'left', cond: 'cong'},
  {letter: 'R', pos: 'left', cond: 'incong'},
  {letter: 'L', pos: 'right', cond: 'incong'},
  {letter: 'R', pos: 'right', cond: 'cong'},
];

var trial = {
  type: 'html-keyboard-response',
  // 省略
}

// 練習と本番で別々のtimeline_variablesを作成する
var trial_types_practice = jsPsych.randomization.repeat(trial_types, 2);
var trial_types_main = jsPsych.randomization.repeat(trial_types, 10);

// それぞれをtimeline_variablesに指定したブロックを作成する
var simon_practice = {
    timeline_variables: trial_types_practice,
    timeline:[trial]
}
var simon_main = {
  timeline_variables: trial_types_main,
  timeline: [trial],
}

jsPsych.init({
  timeline: [simon_practice, simon_main],
  // データの保存とか
});

基本的にこれでOKです。分析の際は，internal_node_idの列を参照すれば本番の試行だけを取り出すことが可能です。もし，より明示的にどの部分が課題の練習/本番なのかをデータに残しておきたいのであれば，少し冗長にはなりますが，以下のように書けばいいでしょう。

コード例

// 練習と本番で別々のtimeline_variablesを作成する
var trial_types_practice = [
  {letter: 'L', pos: 'left', cond: 'cong', phase: 'practice'},
  {letter: 'R', pos: 'left', cond: 'incong', phase: 'practice'},
  {letter: 'L', pos: 'right', cond: 'incong', phase: 'practice'},
  {letter: 'R', pos: 'right', cond: 'cong', phase: 'practice'},
];

var trial_types_main = [
  {letter: 'L', pos: 'left', cond: 'cong', phase: 'main'},
  {letter: 'R', pos: 'left', cond: 'incong', phase: 'main'},
  {letter: 'L', pos: 'right', cond: 'incong', phase: 'main'},
  {letter: 'R', pos: 'right', cond: 'cong', phase: 'main'},
];

var trial = {
  type: 'html-keyboard-response',
  // 省略
  data: {
    letter: jsPsych.timelineVariable('letter'),
    pos: jsPsych.timelineVariable('pos'),
    cond: jsPsych.timelineVariable('cond'),
    phase: jsPsych.timelineVariable('phase') // phase情報を追加する
  },
  // 省略
}

trial_types_practice = jsPsych.randomization.repeat(trial_types_practice, 2);
trial_types_main = jsPsych.randomization.repeat(trial_types_main, 10);

// それぞれをtimeline_variablesに指定したブロックを作成する
var simon_practice = {
    timeline_variables: trial_types_practice,
    timeline:[trial]
}
var simon_main = {
  timeline_variables: trial_types_main,
  timeline: [trial],
}

jsPsych.init({
  timeline: [simon_practice, simon_main],
  // データの保存とか
});

サイモン課題の完成

教示・練習もできたので，あとは注視点と合わせてこれまでのコードに付け足せば，サイモン課題は完成です。

コード例

simon.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../jspsych.js"></script>
  <script src="../plugins/jspsych-html-keyboard-response.js"></script>
  <script src="../plugins/jspsych-survey-text.js"></script>
  <script src="../plugins/jspsych-survey-multi-choice.js"></script>
  <link rel="stylesheet" href="../css/jspsych.css"></link>
  <style>
    .text_left {
      position: absolute;
      left: 40%;
      top: 50%;
      transform: translateY(-50%) translateX(-50%);
      -webkit-transform: translateY(-50%) translateX(-50%);
    }
    .text_right {
      position: absolute;
      right: 40%;
      top: 50%;
      transform: translateY(-50%) translateX(50%);
      -webkit-transform: translateY(-50%) translateX(50%);
    }
  </style>
</head>
<body></body>
<script>

  // 参加者情報の取得
  var par_info = {};

  var par_id = {
    type: 'survey-text',
    questions: [
      {prompt: '参加者IDを入力してください', columns: 10, required: true, name: 'participantID'},
    ],
    button_label: '次へ',
    on_finish: function(data) {
      par_info.id = JSON.parse(data.responses).participantID // 一時保存
    }
  };

  var age = {
    type: 'survey-text',
    questions: [
      {prompt: '年齢を入力してください', columns: 3, required: true, name: 'age'},
    ],
    button_label: '次へ',
    on_finish: function(data) {
      par_info.age = JSON.parse(data.responses).age // 一時保存
    }
  };

  var gender = {
    type: 'survey-multi-choice',
    questions: [
      {prompt: "性別を選択してください", options: ['男性', '女性'], required: true, horizontal: true, name: 'gender'},
    ],
    button_label: '次へ',
    on_finish: function(data) {
      par_info.gender = JSON.parse(data.responses).gender // 一時保存
    }
  };


  // 教示
  var instruction = {
    type: 'html-keyboard-response',
    stimulus: 'これからキー押し課題を行ってもらいます。<br>' +
              '「L」「R」がランダムに表示されるので，<br><br>' +
              '「L」が表示されたら左手人差し指で f キー<br>'+
              '「R」が表示されたら右手人差し指で j キー<br><br>' +
              'を押してください。<br>' +
              '準備ができたらいずれかのキーを押して課題を始めてください。',
  }

  var go_practice = {
    type: 'html-keyboard-response',
    stimulus: 'まず課題の練習を行います。<br>' +
              '左手と右手の人差指を それぞれ f, j キーの上においてください。<br><br>' +
              '準備ができたらいずれかのキーを押して課題を始めてください。',
    post_trial_gap: 1000
  }

  var go_main = {
    type: 'html-keyboard-response',
    stimulus: 'まず本番を行います。<br>' +
              '左手と右手の人差指を それぞれ f, j キーの上においてください。<br><br>' +
              '準備ができたらいずれかのキーを押して課題を始めてください。',
    post_trial_gap: 1000
  }


  // 注視点
  var fixation = {
    type: 'html-keyboard-response',
    stimulus: "+",
    choices: jsPsych.NO_KEYS,
    trial_duration: 1000,
    post_trial_gap: 1000,
  }


  // サイモン課題
  var trial_types = [
    {letter: 'L', pos: 'left', cond: 'cong'},
    {letter: 'R', pos: 'left', cond: 'incong'},
    {letter: 'L', pos: 'right', cond: 'incong'},
    {letter: 'R', pos: 'right', cond: 'cong'},
  ];

  var trial = {
    type: 'html-keyboard-response',
    stimulus: function() {
      return '<div class="text_' + jsPsych.timelineVariable('pos', true) + '">' + jsPsych.timelineVariable('letter', true) + '</div>'
    },
    choices: ['f', 'j'],
    trial_duration: 1000,
    post_trial_gap: 1000, // ITI
    data: {
      letter: jsPsych.timelineVariable('letter'),
      pos: jsPsych.timelineVariable('pos'),
      cond: jsPsych.timelineVariable('cond')
    },
    on_finish: function(data) {
      data.key = jsPsych.pluginAPI.convertKeyCodeToKeyCharacter(data.key_press)
      if (data.letter == 'L') {
        data.correct = Number(data.key == 'f')
      } else {
        data.correct = Number(data.key == 'j')
      }
    }
  }

  trial_types_practice = jsPsych.randomization.repeat(trial_types, 2);
  trial_types_main = jsPsych.randomization.repeat(trial_types, 10);

  // それぞれをtimeline_variablesに指定したブロックを作成する
  var simon_practice = {
    timeline_variables: trial_types_practice,
    timeline:[trial]
  }
  var simon_main = {
    timeline_variables: trial_types_main,
    timeline: [trial],
  }

  jsPsych.init({
    timeline: [par_id, age, gender, instruction, go_practice, fixation, simon_practice, go_main, fixation, simon_main],
    on_finish: function() {
      jsPsych.data.addProperties(par_info);
      jsPsych.data.get().localSave('csv', 'data.csv');
    },
  });
</script>

</html>

試行間隔の時間（ITI）を設けるために，これまでずっとjsPsych.init({})にdefault_itiという項目を設けていましたが，これを削除して，適宜必要な部分にpost_trial_gapという項目を設定しています（具体的には，go_practice，go_main，fixation, trial）。default_itiだと画面が遷移するたびに指定した時間だけ空白の画面が挿入されます。しかし，参加者情報の入力などでは必要ないので，必要な部分だけにITIを設けるようにしました。

おわりに

これでサイモン課題実験が完成しました。お疲れ様です。ぜひ，身近な人に実施してみてください。

もちろん，チュートリアルということで，jsPsychの機能のほんの一部しか紹介していません。ウィンドウの全画面表示の方法すら紹介していません。しかし，ここまでやり遂げたみなさんなら，ダウンロードしたjsPsychに同梱されているexampleコードや，jsPsychの公式リファレンスを見ながら，ご自身の研究課題に合わせてコードを書くことができるはずです。

これからもがんばってください。

---

1. ただし，教示文の改行や配置（左寄せ・中央寄せ）にこだわりがあったり，図なども教示に表示したいという場合は，パワーポイントなどで教示用の画像を作ってimage-keyboard-responseで提示させたほうが楽かもしれません。htmlなので，自由なレイアウトが可能ですが使い方を勉強する必要があります。 ↩