JavaScript関連のことを調べてみた2020年07月29日

jsPsychで直前のトライアル（画面）での反応に基づいて何かする方法

[jsPsych (de Leeuw, 2015)](https://www.jspsych.org/)は、心理学のオンライン実験を行うときに便利なJavaScriptライブラリです。詳しい使用方法は、@snishymさんの[jsPsychによる心理学実験作成チュートリアルまとめ](https://qiita.com/snishym/items/1e0511f8622282993ed1)をご覧ください。すばらしくまとまっています。

この記事では、実験中の反応に基づいて何かをする方法について解説します。例として、ある画像に対して反応したあとに、その反応時間を参加者にフィードバックすることを考えてみます。

jsPsychのexamplesフォルダにはたくさんのサンプルプログラムが入っていますが、この中のjspsych-image-keyboard-responseを変更してみましょう。このファイルを別名で（同じ場所に）保存します。そして次のオブジェクトを作成してください。

“`javascript
var feedback = {
type: ‘html-keyboard-re

JavaScript: date-fnsでタイムゾーンを扱う

この投稿ではJavaScriptの日時ライブラリ[date-fns]でタイムゾーンを扱う方法を説明します。

[date-fns]: https://date-fns.org/

## 基本知識

date-fnsはJavaScriptの[Date]を扱うヘルパー関数のセットなので、そもそも`Date`についてよく知っておく必要があります。

[Date]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

### JavaScriptの`Date`にはタイムゾーンを表すデータが無い

JavaScriptの`Date`オブジェクトはタイムゾーンを表すデータを持ちません。

実行環境のタイムゾーン設定を変更したとしても、`new Date()`はUTC時刻になります:

“`bash
$ TZ=Asia/Tokyo node -e ‘console.log(new Date())’
2020-07-29T00:27:44.573Z

$ TZ=UTC node

【はじめてのIoT】サイリウムを自動的に光らせてみた【ラブライブ】

#はじめに
　「推しが複数いるとき、どの色にすればいいか悩む・・・」
　「サイリウムで盛り上げたいけど、もっとライブに集中したい」
　「夢中になりすぎて、サイリウムの色を変えるのを忘れてしまう」

ライブに行った時、このように思ったことはありませんか？
__私はあります。__

私はラブライバーなのですが、箱推し（みんな好き）です。
なので全色光らせたいけど、持つのは２本が限界だし・・・
「次はオレンジだ！」とか考えてるとライブに集中できなかったり・・・

ということで、今回は__自動的に光るサイリウム__を作ってみました！

#理想イメージ
ライブと言っても、今はコロナの影響もあって、無観客ライブが増えてきました。
今回もYoutubeのライブをイメージして、曲が始まるとサイリウムが自動的に光ることをゴールにします！
[](https://gyazo.com/d5111f46d64d7f1ff2613dfa29822187)
Y

好きなキー好きなBPMでパプれるスピーカーをline botとobnizで作ってみた

#はじめに
好きな曲とか聞いていて「__あーこれ音域低めだし歌えるんじゃね？ﾖﾕｳｯｼｮ__」って思ってカラオケ行ったら全然音域足らなかったみたいな経験ありませんか？
僕はかの有名な__パプリカ__で実際ありました、裏切られた気分になりますよね。
原曲キーで歌わないにしても、どれぐらいのキーが程よいのか分かりませんよね。

そこで、自宅でも自由にパプってあらかじめ自分にあったキーを探しておけるスピーカーをobnizとline botで作ってみました。
コードはGistに載せてあるので、是非コピーしてハンズオンして__ｴﾋﾞﾊﾞﾃﾞｨパプろうぜ！__
(Gist: https://gist.github.com/canonno/2209c7d68870b99d256cb4bac110b37d)

#完成デモ
##メロディの送信
obnizの圧電スピーカは周波数を引数として関数を実行する必要がありますﾒﾝﾄﾞｸｻｲｨｨｨ
ということで、lineから「ドレミ」のような身近な表記でobnizに音を送信できるようにしました。
ピアノの白鍵が「ドレミ」、オクターブは数字を付けて「ド1レ1ミ1」、

2020.7.28

JavaScriptの繰り返し処理について、

“`javascript

for ([①初期化式]; [②条件式]; [③加算式]) {
// 繰り返す処理の内容
}
“`

初期化式

for文の中で使用する変数を定義している。
定義した変数は②条件式③加算式で使用されることで
「今何回目の処理か」を判定している。

②条件式

この条件式の返り値が　trueで有ると処理が行われる。

③加算式
初期化式として定義した変数の増減を記述できる。
i = i+1とすれば1周ごとに1が加算されて、処理が実行される。
i = i + 1の省略形として以下のような選択肢がある。
**i += 1**
**i++**

以下に実例を記載する。

“`JavaScript
num = 1;
for (let i = 1; i <= 10; i += 1) { console.log(`${num}回目の出力`) num += 1 } ``` 上記のコードでは10回処理が行われる。 numの値によって出力される文字が変わってくる。 上記のような簡単なコードなら ①初期化式

【obniz×LINE Messaging API】音と光を使い侵入防止システムを製作する

#目的
私の実家では、夏場に玄関を開放し風通しを良くしていると、野良猫が侵入し、食べ物が被害にあいます、そこで今回はobnizで侵入防止システムを製作したいと思います。(効果は保証できません)

#できたもの
距離センサーの50㎝以内に入り5秒経過したら、LEDとスピーカーで警告し、システムが作動したことをLINE Messaging APIを使用してプッシュ通知します。映像ではわかりませんが、スピーカーから11khzの音を鳴らしてます。
[](https://gyazo.com/5ac30db12fc0d8c7a56c5524c93deb7a)
#構成

##全体像
今回製作したシステムの全体像です。
[](https://gyazo.com/f5fd16ce04cfc91781

ReactでAPIを使用する際によく見る”fetch(URL).then”のメソッドチェーンについて

#背景
Reactからjson形式のAPIを利用する方法として下記のような方法が挙げられている。 (Reactに限った書き方ではないが)

“`js:useApi.js

1 fetch(‘http://example.com/api/’)
2 .then((response) => response.json())
3 .then((response) => {
4 console.log(response.hoge);
5 })
“`

しかし、データ(response.hoge)のみを利用するのであれば、

“`js:useApi.js
2 .then((response) => response.json())
“`

は不要なのでは？と思い、コメントアウトしたところ、

“`js:useApi.js
4 console.log(response.hoge);
“`

がundefinedとなった。
2行目の有無で3行目の引数の中身が変わっているような挙動だ。

#調べた結果
Promiseの.then(というより、アロー関数)には、

React Native × Typescript のインストールをやってみた

##### 0. Prepare Today’s environment
Windows 10
Node v12.18.2
Android Studio 3.5
→Android StudioはAndroid SDKとAndroid Virtual Deviceを使用するため。

##### 1. Install react-native-community/cli
「react-native-community/cli」はReact Native × Typescriptのテンプレートを提供してくれて便利。

“`
$ npm install -g @react-native-community/cli
npm WARN deprecated @hapi/joi@15.1.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/address@2.1.4: This version has been deprecated and i

Kindle Library の蔵書をAlgoliaで検索する

## これは何

Kindleの蔵書一覧を全文検索サービスのAlgoliaで検索可能にするスクリプトです。
[こちらの記事](https://qiita.com/taka_hira/items/8a9181c0733de2c9f8ee)を参考に、蔵書一覧をCSV出力する代わりに Algolia でインデックスし、検索可能にしてみます。

[InstantSearch.js](https://www.algolia.com/products/instantsearch/)でフロントエンドを作ると簡単なWebアプリケーションにもなります（[サンプル](https://kindle-library.sample.tatsuroh.com/)）。


## 前提条件

あらかじめAlgoliaアカウントを作成し、API Keyを取得する必要があります

D3.js y軸の方向を変える

d3.jsでy軸を表示すると思っていた軸と上下が逆さまだったため、改善方法をメモ。

#つまずいたコード
以下、適当なデータを使って棒グラフをつくっていきます。すでに何かしらのコードを書いていて早く修正したい人は読み飛ばしても大丈夫です（最後のまとめにコードがあります）。

## 棒グラフとy軸の表示（デフォルト）
とにもかくにもsvg領域を作成します。

“`js:bar.js
var width = 640;
var height = 240;

var svg = d3.select(“#bar”)
.append(“svg”)
.attr(“width”,width)
.attr(“height”,height);
“`

次に適当なデータを作成してスケールを作成します。

“`js:bar.js
var xlabel = d3.range(1,20,1);
var ylabel = [150,145,167,149,152,159,174,163,158];
var xoffset = 30; //y軸の値が隠れないようグラフ全体を少しずら

kintoneからGoogleMapsAPIを呼び出して、緯度・経度から住所を取得してみた（リバースジオコーディング）

# やってみたこと
kintoneアプリに緯度と経度を入力してレコードを保存すると、GoogleMapsAPIを呼び出して、「住所」フィールドに取得した住所をセットするアプリを作ってみました。

# 準備１：kintoneアプリの作成
まずはkintoneアプリを作成しましょう。

| フィールドの種類 | フィールド名 | フィールドコード |
|:—————:|:———–:|:————–:|
| 数値 | 緯度 | 緯度 |
| 数値 | 経度 | 経度 |
| 文字列（1行） | 住所 | 住所 |

# 準備２：APIキーの取得
[Google Maps Platform](https://cloud.google.com/maps-platform/user-guide/)に記載の手順で、GoogleMapsのAPIキーを取得しましょう。
３つのポイントがありますので、

JavaScriptでラジオボタンの情報を取得する

「addEventListener()」を使った、チェックによるイベント処理の方法です。
「addEventListener()」とは、さまざまなイベント処理を実行することができるメソッドです。

+ 入力がされた
+ クリックがされた
+ ページが読み込まれた

などが発生した場合に「addEventListener()」を使って処理を実行できます。

##書き方
“`javascript
対象要素.addEventListener( 種類, 関数, false )
“`

■第1引数にイベントの種類を指定

■第2引数に関数を指定

■第3引数にイベント伝搬の方式を「true / false」で指定
通常はfalseを指定しておく。

##ラジオボタンが押されたらvalueの情報を取得する

“`html:html

ラジオボタン1

DataTablesの特定行全体をリンクにする

# 概要

DataTableに関しては[こちら](https://qiita.com/nissuk/items/7ac59af5de427c0585c5)をご覧ください
DataTableは簡単にリッチなテーブルを作れるとあって使っている人も多いのではと思います
今回、こちらのテーブルの行をクリックした時に、そのデータに対応した詳細画面に飛ばしたいという要望が来たので、その時の解決策をメモしておきます

# 解決策

DataTableライブラリ上で行をカスタマイズするには

“`javascript

‘createdRow’: function( row, data, dataIndex ) {
// 任意のコードを記述
　// $(row)にて行を構成するHTML要素にアクセス可能
},
“`
でできるみたいです
createdRow以外にもcreatedCellもあるみたいですね

行全体をクリック可能にするためにはtr要素にclick時の挙動を記述して、カーソルが行の上に来た時に変化できるようにCSSを追加しておけば良さそうです

“`javascript

$

再帰処理で求める順列(nPr)【JavaScript】

# この記事について

プログラミングクイズを解くにあたり、再帰処理を使うとスラッと解けそうな気がする問題がいくつかありました。
そのなかでも「順列」は特に使いこなせるようになりたかったので調べて記事にまとめました。

**以下の説明をしています。**
– 順列とは何か
– 順列を出力するサンプルコード

**以下は説明しません。**
– 公式 $nPr=\frac{n!}{(n-r)!}$を使った順列総パターン数の計算方法

# 順列とは何か
そもそも順列ってなんでしょうか？

## 結論

順列(`nPr`)は、「**n個の物の中からr個を取り出して一列に並べたもの**」です。
`nPr`の`P`は`permutation`の略で、そのまま「順列」という意味です。
例えば3匹の動物から2匹を取り出して一列に並べると、以下のような順列になります。

![image](https:

[Rails][Turbolinks] inline Javascript が実行されない 解決法

Javascript周り の取り扱いが難しい `Turbolinks`。

# 起こったこと
ページ毎に任意の`Javascript` を実行したいが
普通に書いたら以下エラー。

ページ遷移でも同様。

“` js:ChromeDeveloperConsole
Refused to execute inline script because it violates the following Content Security Policy directive:
“script-src ‘self’ https: ‘unsafe-inline’ ‘nonce-UiVx2CiP0HHN9jOOSEG43g=='”.
Note that ‘unsafe-inline’ is ignored if either a hash or nonce value is present in the source list.
“`

`Content-Security-Policy (CSP)` (Cross Site Scripting (XSS) や data injection

JavaScript で wait

# 何をしたいの

JavaScript で wait をしたい。段階的に何かを表示するとかの演出に使うかもしれない。
setTimeout の入れ子とか、再帰的に書くのとかを回避するとか、Exponential Backoff したかったりする場合とかにも使える。

# どう書くの

“`JavaScript
const wait = (msec)=>{
return new Promise((resolve)=>{
setTimeout(()=>{resolve(msec)}, msec);
});
};
“`

# どう使うの

素直に Promise を利用して次のように記述できる。

“`javascript
const waitBehavior1 = () => {
const before = Number(new Date());
wait(1250).then((waitLength) => {
const after = Number(new Date());
console.log(after – before);

javascriptを使って簡単な計算機を作るpart6 入門者向け

#計算機を作る

##今回作る機能
###ボタン切り替え機能
1.演算子入力をボタン切り替え機能を使って、計算する。
2.演算子入力した後で、別の演算子を入力するとその演算子を使った計算に切り替わるようにする。
3.CLEARボタン押すことで、リセットできる。

今回は、押した演算子ボタンの計算行いたかったので計算の関数を多少改変した。

今回の記事では、どのボタンを押したか分かりやすく、ボタンの背景色をピンクにしている。

苦戦したのは、CLEARボタンを押すことで演算子ボタンを初期化する機能。

[getElementsByClassNameで指定したクラスを全部消す](https://cre8cre8.com/javascript/remove-classes-with-pure-javascript.htm)

上記のサイトで解決することができた。

###該当するコード

“`js:caluculate.js
//ボタン切り替え機能の関数
var btns = document.getElementsByClassName(‘symbol-btn’);
for (var

fadeIn()を使うには先に非表示を

#jQuery fadeIn()を使えない？

動的に追加した要素をフェードインさせたい。
fadeIn()は要素が非表示になっている状態でないと使えない。
これを忘れててフェードインできないできない、と悩みました。

解決策は2パターン。

* パターン1
CSSで対象要素を非表示display:none;にしておく。

* パターン2
hide()で一度非表示にする。

今回は動的に要素を追加するためパターン2を採用。

“`js
$(‘body’).append(`

`);
$(‘div’).hide().fadeIn();
“`

画像が読み込まれたか監視するjavascriptをnpmに公開しました

#　やりたかったこと
「シンプルjavascriptで画像の読み込みを監視し、
読み込み終わったらイベントを発火する」
という画像読み込みの監視クラス

# 使い方
npm
https://www.npmjs.com/package/load-image.js

“`
$ npm install load-image.js
“`

“`javascript
import loadImage from ‘load-image.js’;

const PATH_IMG = “/assets/img/”;
let callbackEvent = () => {
// fadein event
}
new loadImage({
targetImageUrl : [
PATH_IMG + `mv/background.jpg`,
PATH_IMG + `mv/title.png`,
PATH_IMG + `mv/image.png`,
],
callback: callbackEvent
});
“`

【Nuxt.js】Nuxt文法編：asyncData

? この記事はWP専用です
https://wp.me/pc9NHC-ut

# 前置き
非同期通信で使うasyncData
まとめました??‍♀️

・非同期通信とは
・Promiseとは
・asyncDataの役割と書き方(Promiseとasync/await)

分かるところは飛ばしてくださいね ✈️

# 非同期処理とは
こちらのツイートが分かりやすいかと思います?

Q. 非同期処理ってなんですか？

A.
コンビニの店員さんが、「温めますか？」と言った後、温めてる間に別のお客さんの会計やりつつ、温め終わったら商品くれるやつ

— いちくん@25歳独学未経験でWeb制作エンジニアになったひと (@ichikun0000) July 16, 2020

結果を待たずに
すぐに処理ができるということです?‍♀️?

温めた商品が手元にくる前に
会計を先に済ませることができる
というわけです！

これが同期処理なら
温めてる間はずっと店員さんが
レンジの前にいて、
温め終わってからでしか会計できません。

コードでいうなら…
⬇️の例でご覧ください??

# Promise
## Promiseとは

? 続きはWPでご覧ください?
https://wp.me/pc9NHC-ut