JavaScript関連のことを調べてみた2019年11月13日

QualityForwardのAPIを使って更新履歴を取る

[QualityForward](http://bit.ly/2KgiwCh)はテスト管理をクラウドで提供しています。そして、多くのクラウドサービスと同様にAPIを提供しています。現在、下記のデータを取得または新規作成、更新、削除できます。

– プロジェクト
– テストケース
– テストサイクル
– テストフェーズ
– テスト結果
– テストスイート
– テストスイートバージョン
– ユーザ

現在、非公式ながらNode.js用ライブラリ `qualityforward-node` を作っていますが、その使い方の一例として、テストスイートの更新履歴を管理してみます。

## コード例

コードは下記のようになります。テストスイートを取得し、それをCSV化しています。

“`js
import * as dotenv from ‘dotenv’;
const { parse } = require(‘json2csv’);

dotenv.config();
import { QualityForward} from ‘qualityforward-node’;

(async ()

スマホとPCでビデオ通話できるWebページを作ってみた

ブラウザ上でスマホ<->PC間のビデオ通話を試したので、過程等々を記録します。
WebRTCに触れるのは初めてでしたが、SkyWay公式のサンプルコードが最高で、ほとんど手を加えることなく実現できました。

同じ初学者の方が全体感を掴む助けになれば幸いです。

## 技術要素

* WebRTC: ブラウザ上でリアルタイム通信する技術
* SkyWay: WebRTCを簡単に使うためのプラットフォーム
* skyway.js: WebRTCを簡単に使うためのJavascriptライブラリ
* nginx: Webサーバ
* ngrok: ローカル環境を簡単に外部公開できるサービス

## 確認環境
PC: ubuntu18.04.3 LTS (Bionic Beaver) / Chrome 78.0.3904.97
iPhone: 12.4.1 / Safari
iPad: 13.1 / Safari
android: 7.1.1 / Chrome 70.3538.64
(バージョン古いですが。。。)

## 全体の流れ
* SkyWayのアカウントを作成
* SkyWayにログイ

E2EテストをCIでも気軽に利用しよう 〜 Cypress x Docker Compose

# はじめに : Cypressの紹介

[Cypress](https://www.cypress.io/)は、無料で利用できるOSSのEnd-to-End(E2E)のテストツールです。以下のように自分のブラウザを利用してWeb UIテストを実行します。


以下のようなコードを元に、実際にブラウザで動かしながら、直感的にテストをすることができます。JavaScriptでテストコードを記述できるので、利用しているJSerも多いです。

“`javascript
describe(‘The Login Page’, function () {
beforeEach(function () {
// reset and seed the database prior

【正規表現】関数でも使える、置換に便利な参照記号$n

元々は、初級者向けに作った軽いネタです。正規表現におけるパターンマッチングのことは触れていても、案外置換における便利な記号リテラル（参照記号）のことに触れていない記事が多かったのでおさらいしてみました。

#PHP
PHPには正規表現を用いた関数としてpreg_xxxxxというのがあります。代表的な関数としては

“`PHP
preg_match(パターン,対象文字列) //検索に用います
preg_replace(パターン,置換文字,対象文字列) //置換に用います
“`

などがあります。では今回はこのpreg_replace関数についてです。そして、この関数は、エディタと同じように参照記号`$n`を使用することができます。なお、今回は正規表現の記法はある程度熟知しているものとして話を進めていきます。

## 実例
たとえば、住所録を整理していて、住所の表記揺れを修正したいとします。とりあえず、丁目は置いといて「xxのxx」や「xx番xx」を「xx-xx」に修正したい場合は参照記号を用いれば効果的に修正ができます。

“`PHP:PHP
$ary_addr = [
“兵庫県尼

Materialize CSS(v1.0.0)とmaterialize-select2を併用してみたときの気づき

### 概要
* Materialize(マテリアルデザインフレームワーク)を導入したWebページで、**v0.100.2→v1.0.0へアップデートしつつSelect2を導入し、プルダウン検索させたい**というのがきっかけでした。
* で、実際にやってみたら変な引っかかり方をしたので覚書がてら投稿しようと思いました。

### この時の実装要件
* Materializeをv0.100.2からv1.0.0にアップデートする(今更感ありますが)
* そして、MaterializeっぽいSelect2を実装したかった

### 登場人物
* Materialize
* https://materializecss.com/
* materialize-select2
* https://github.com/nikitasnv/materialize-select2

### 遭遇した現象
前提として、こんな感じのselectがhtmlに実装されていることとします。

“`index的な.html

元記事を表示

ベジエ曲線でオブジェクトを動かす

# ちょっと長い前置き
そう、まだゲーム業界の片隅に足を突っ込んだころ・・・
某絵本型カートリッジのゲームを作る会社(今は倒産してもうないけど)にいた。
そのころ、ミニゲームでイルカがボールを飛ばして的にぶつけるものを作っていた。
高校のころ、シューティングゲームでcosとsinを駆使していたからきっと三角関数使えばできる！
という今思えばわけわかんない自身に満ち溢れていた・・・
まぁ、三角関数だと落ちる場所がずれて全然ダメで悩んでいると、上司が「ベジエ関数使え」と。
そう、ライブラリにベジエ関数なるものが！
使ってみると便利で超感動したものです。
そして、あれから20年近くたった。
気晴らしにググったら、同じようなことできるもの発見！
実は過去何度か探したのに見つからなくて超うれしかった。

# やってみた
というわけで以下のサイトをもとに、ベジエ曲線でオブジェクトを動かしてみた。
[[JavaScript] 3次ベジェ曲線をCanvasに引いてみたい | CreateJS, EaselJS](http://www.kuma-de.com/blog/2015-12-22/7065)

元記事を表示

100囚人問題をJavaScriptでシミュレート

# 100囚人問題

[100 prisoners problem](https://en.wikipedia.org/wiki/100_prisoners_problem)(100囚人問題)というのは、

> 1から100まで連番の囚人番号が振られた100人の死刑囚(prisoner)に、最後のチャンスが与えられた。
>
> – いま、100個の引き出し(drawer)のある棚には、1から100までの連番が書いてある紙が、1枚づつランダムに入っている。
> – 囚人は一人に付き50回まで、引き出しを開け中の番号を確認してから閉じることが許されている。
> – 囚人は一人づつ順にこの棚を確認し、100人全員が自分の番号が書かれた紙がある引き出しを当てることができたときのみ、生存することができる。
> – ただし、最初の一人が引き出しを開けた後は、囚人同士でコミュニケーションをとることは一切できない。
>
> さて囚人たちにとって、最適な手段をとるにはどうすればよいか。

という問題です。

以降の説明は、上記リンク先のWikipedia記事にも書いてある内容への詳細な説明になりま

元記事を表示

マルチカーソルで、VSCodeのスニペットをもっと便利に。

## ある日の弊社
社長「お〜い、やめ太郎」

ワイ「なんでっか、社長？」

社長「今度作るショッピングサイトの件なんやけど」
社長「**ドラッグ＆ドロップ**機能を実装することになったから」
社長「それをやめ太郎にお願いしたいんや」
社長「やめ太郎、やったことあるか？」

ワイ「どどど**ドラッグ！？**」
ワイ「あるわけないやないですか・・・！」
ワイ「そんなもの販売して万が一・・・」

ハスケル子「やめ太郎さん、**違いますよ**」
ハスケル子「**ドラッグ＆ドロップ**でしょ」
ハスケル子「マウスで掴んで移動させるやつです」

ワイ「ああ、そっちか」

社長「やめ太郎、できるか？」

ワイ「もちろんですわ」
ワイ「前職でも**ドラッグやってました**から、余裕ですわ」

社長「よっしゃ、よろしく頼むわ！」

## レッツJavaScript
ワイ「確か**ドラッグ＆ドロップ**を実装するときは」
ワイ「マウスを動かしたときにマウスポインタの座標を取得できるようにして」
ワイ「その座標の数値を元に、DIV要素なり画像なりを移動させてやればええんや」

ワイ「せやからまずは、こうや

元記事を表示

AtCoder供養

JSのES6でAtCoderをやろうとしたら、「letもconstも使えません　分割代入でなんかエラー出てるぞ」と言われて萎えたのでコードを供養します

はじめてのBFS…

迷路をツリー構造に格納しーの、キューを使って探索してます
やり方がまったくわかりませんでした

“`javascript
const maze = ‘######## #.#….# #.###..# #……# ########’.split(‘ ‘)
const [r, c] = [maze.length, maze[0].length]
const [sr, sc] = [1,1]
const [gr, gc] = [1,3]

// SAMPLE DATA STRUCTURE
// const root = {
// r: 1,
// c: 1,
// children: [
// {
// r: 2,
// c: 1,
// children: [
// …
// ]
// }
// ]
/

元記事を表示

JavaScriptのDateインスタンス生成用ラッパー

JavaScriptで特定の日時のDateオブジェクトのインスタンスを生成する方法には、いくつかあって、以下のように文字列を入れたり、年・月・日…を数値として渡す方法などがある。

“`javascript
new Date(‘December 17, 1995 03:24:00’);
new Date(1995, 11, 17, 3, 24, 0);
“`

しかしながら、文字列を渡してインスタンスを生成する場合罠があって、例えば以下のようなフォーマットの場合、ChromeやFirefoxなら正常にインスタンス生成できても、Safariだとエラーになるということがある。

“`javascript
new Date(‘2019-11-08 11:25’)
// Firefox → Date Fri Nov 08 2019 11:25:00 GMT+0900 (日本標準時)
// Chrome → Fri Nov 08 2019 11:25:00 GMT+0900 (日本標準時)
// Safari → Invalid Date
“`

以上から、文字列から直接Dateオブ

元記事を表示

Promiseのresolveとrejectの両方を呼び出したらどうなってしまうのか？

`Promise`は次のサンプルコードように、失敗したら`reject`を、成功したら`resolve`を呼び出すような書き方をする。

“`js
new Promise((resolve, reject) => {
// …
if (err) {
reject(err)
} else {
resolve()
}
})
“`

このサンプルコードは、正常系と異常系でif分岐されており、`resolve`と`reject`が両方呼ばれる可能性はない。

もしも、`resolve`と`reject`の両方を呼び出したらどうなるのだろうか？

“`js
new Promise((resolve, reject) => {
reject()
resolve()
})
“`

普通はこんなことはしないだろうが、`Promise`の仕様を知っておくのは良さそうだ。

## 実験1: `resolve`→`reject`の順で呼んでみる

実験してみよう。まずは、`resolve`→`reject`の順で呼び出してみよう。

“`js
new P

元記事を表示

canvas要素の描画を任意のタイミングで切り替えたい

##はじめに
canvas要素を最前面に配置したかったが、アプリ起動時からcanvasを展開すると裏の要素の操作ができなくなってしまいます。
なお描画するエフェクト（紙吹雪）は[jsdo.it](http://jsdo.it/)にあったものを利用しました。
（現在は閉鎖されてしまっているようです）

##環境
– Mac OS X EL Capitan 10.14.5

##解決策
紙吹雪を描画する関数内では`setInterval`関数が用いられおり、それによって継続的な動作が行われていました。以下が実際のコードです。

`setInterval(draw, 20);`

20msごとにdraw関数を呼び出す処理が行われています。この処理を止めるためには、`setInterval`に対応する`clearInterval`を用いました。

描画を停止することでcanvasを消し、下の要素への操作が可能になりました。

##実装例

今回はアプリ内で任意の箇所をクリックした時に描画を停止できるよう、外部の関数として停止処理を実装しました。

“`js
var carryout;

元記事を表示

カリー化関数と部分適用の使いどころを考える

複数の引数を取る関数が、以下のように特定の変数だけ変わる偏った呼ばれ方をすることが想定される場合、

“` javascript
someFunc(hoge,piyo,1);
someFunc(hoge,piyo,2);
someFunc(hoge,piyo,3);
someFunc(hoge,piyo,4);
someFunc(hoge,piyo,5);
“`

こんな感じにカリー化した関数があると、
部分適用した関数を利用してすっきりと書ける。

“` javascript
const curriedSomeFunc = (hoge,piyo) => (num) => {
someFunc(hoge,piyo,num);
}
const partiallyApplied = curriedSomeFunc(hoge,piyo);
partiallyApplied(1);
partiallyApplied(2);
partiallyApplied(3);
partiallyApplied(4);
partiallyApplied(5);

“`

普通は通常の関数のみ

元記事を表示

はじめてのGAS

ExcelからGoogle Spreadsheetに移行した。
これからは、GAS（Google Apps Script）による自動化をバリバリやってみようと思う。
ここでは、初めてのGASの作成の模様を、自分用メモとして書く。

# 目標
以下のようなスプレッドシートがあったとする。

これを

– １行目の背景：濃い青
– １行目の文字色：黄色
– 以下偶数行目の背景：薄い青
– 以下奇数行目の背景：中くらいの青

のように設定を与えると、ずーっとシマシマに塗っていくというものだ。
こうなって欲しい。
![SnapCrab_NoName_2019-11-12_17-49-4_No-00.png](https://qiita-image-store.s3.ap-northe

元記事を表示

もうJavaScriptの配列操作で悩みたくない人生を生きるために

JavaScriptで配列を操作する時、覚える文法が多くて嫌になりませんか？（だよねーまじ面倒だわーという声が聞こえる・・・）
今日は1日かけて配列を復習したので、備忘録を兼ねてまとめていきます！！

***配列とは***

“`
let arr1 = [1,2,3,4,5];

let arr2 = [
{name:”takashi”,age:12},
{name:”kiyoshi”,age:22},
];

console.log(ar1[3]); //4
console.log(ar2[0]); //{name:”takashi”,age:12}
“`
簡単にいうと、変数の塊のことを指す。
私レベルの雑魚エンジニアになると、[ ]で囲むところを、{ }で囲んで、ずっと間違いに気がつかなかったりする・・・。

***空の配列を作る***

“`
let arr = new Array();
console.log(arr); //[]
“`
***空の配列に同要素を詰め込んでみる***

“`
let arr = new Array(5).fill(“hoge”);

元記事を表示

[Firebase]Storage上のファイル名一覧を表示する

#前提条件・環境
– [Firebase を JavaScript プロジェクトに追加する](https://firebase.google.com/docs/web/setup?hl=ja)で、SDKの追加と初期化が完了している
– Storageのデフォルトパケット作成済
– ファイルアップロード済
– バケットURL指定済
– SDKのインポートはCDNを使用

#手順
## 1. ルールの書き換え
ListAPIの使用にはFirebase Storage Rules バージョン２が必要なため、Storageにルールを加えます。デフォルトではFirebaseにログインしないと読み書きできないので、必要に応じて書き換えます。今回はテスト用に特に制限を設けません。

“`
rules_version = ‘2’;
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read;
}
}
}

“`
## 2. SDKインポート

“`java

元記事を表示

JavaScriptで関数型指向

## 自己紹介

松田尚也(24)
３年目エンジニア

### 最近やったこと・やっていること
– スマホアプリ向けバックエンドの開発(Node.js)

### 得意・好き
– JavaScript
– Node.js
– CI/CD (Azure)
– 認証/認可 (OAuth2.0/OpenID Connect)
– ビール(アサヒビール派）

—

## What is 関数型指向?

—

## Q 関数型指向ってどんなイメージ？？？
– Javaでのラムダ + Steam関数
– 第一級関数（関数の戻り値に関数を扱うことができる言語・関数）
– haskell、F#、Scala等の関数型言語でないと書けない
– カリー化とかとか。。。
⇓
これらは、関数型指向プログラミングを行う上での `要素`であって関数型指向の本質ではない

—

## What is 関数型指向?

関数型プログラミングとは、
**純粋関数**を**宣言的**に評価することである。

純粋関数は、外部から観測可能な**副作用を回避する**ことで**不変性**を持つプログラムを生

元記事を表示

redirect_toで間接的にpostリクエストを出す方法

#はじめに
redirect_toを用いてpostリクエストでリダイレクトしたいが、仕様上不可能とのこと。
ただどうしても、上記形を取りたい！という方向けに、**”力ずく”**で間接的にpostリクエストを出す実装方法を考えましたので記します。

##流れ
まず仕様上、redirect_toで直接postリクエストを出すことはできないので、getリクエストを出すこととします。
下記はトーナメント方式のアプリを実装時に、1回戦で負けた際に2回戦の試合結果を自動的にデータベースに保存するという流れを取っています。1回戦で敗北した際に、first_round_controllerのrecordアクションから、second_round_controllerのloseアクションをgetリクエストでリダイレクトさせています。

“`ruby:first_rounds_controller.rb
class FirstRoundsController < ApplicationController def record (省略) difference = @RRecord.poi

元記事を表示

コピペで作るTypeScript + React Native + React Navigation + Redux + Firebaseのユーザー認証

このテンプレートはReact Navigation公式サイトの[ユーザー認証のページ](https://reactnavigation.org/docs/en/auth-flow.html)がベースになっていて、そこにfirebaseとreduxを組み込んだ感じになります。

ついでにクラスコンポーネントから関数コンポーネントへの変更もしています。

## 準備

テンプレートの作成

“`
react-native init MyApp –template react-native-template-typescript
“`

## npm install

react-native-gesture-handler、react-native-reanimated、react-native-screensは直接使っているわけではありませんが、react-navigationが依存しているようなのでインストールします。

“`
yarn add firebase \
react-native-gesture-handler \
react-native-reanimated \

元記事を表示

【初心者】JavaScript　配列を操作するメソッド(push,forEach,find,filter,map)【備忘録１４】

##11/10～11/11に勉強したこと
###push
既にある配列の最後に新しい要素を追加するメソッド。
【例】

“`js

const numbers = [1,2,3];
console.log(numbers);

numbers.push(4);
console.log(numbers);

“`

【出力】
[1,2,3]
[1,2,3,4]

【！】
numbers.push(4)を書く際に「=」を付けないように気を付ける！

###fouEach
配列の要素１つずつ取り出し、全要素に繰り返し同じ処理を行うメソッド。
【例】

“`js

const numbers=[1,2,3];
numbers.forEach((number)=>{
console.log(number);
)};

“`

【出力】
1
2
3

【！】
-　{console.log…}の箇所で改行をすることで見やすくなるので癖づける。
-　forEachの後の()の中のことをコールバック関数と呼ぶ。
-　一番最後の「;」を忘れやすいので、()や{}を書いたときに先に「;」を書

元記事を表示