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

NodeJSで、opencvを触るまで

Node jsは偉大ですよね！

一つのプログラムでhttpサーバーもwebscketサーバーも、ラズパイを使えばSPIやシリアル通信まで行えてしまいます！

しかも速度だってc++とそこまで変わらないし（ほんまか）

もうJavaScriptはクソだって言わせない!

さて、Nodejsを布教するのはこれくらいにして本題に入ります。

# 本題
**Nodejsから、webカメラの画像を読み込みたい!!**

調べていてよくあるのが、nodejsで建てたサーバーにクライアントから画像データを送るという記事。

しかし、私はnodejsをうごかしているパソコンにつながったカメラの映像を取得したいのです。

しかし、なかなか最適な答えにたどり着けなかったので、記事にまとめておきます。

# 手法
プログラムからカメラの画像を取得するといえば、やはりopenCVでしょう。

opencv3をサポートしている[opencv4nodejs](https://www.npmjs.com/package/opencv4nodejs)を使用します。

早速npmからインストール

“`
npm i

JavaScript Modules CommonJS, EM, ES2015

# CommonJS
Used in node.js

“`mod.js
exports.foo = () => {}
“`

“`app.js
const mod = require(“mod”)
mod.foo()
“`

# AMD (Asynchronous Module Definition)

“`
define([‘jquery’] , function ($) {
return function () {};
});
“`

# ES2015(ESCMA6)
“`javascript:foo.js
export const a = {} // `equals exports.a = {}` of CommonJS
// or
module.exports = {a: {}}
“`

“`app.js
import {a} from foo // `equals const a = require(“foo”).a` of CommonJS
// or
import * as foo from “foo”
const a = foo.a
“`

fetchの呼び出し @Javascript & Node.js 実験室

fetchは、HTTP呼び出しで標準的に使っていますが、Content-Typeに従った呼び出し方をいつも忘れてしまうので、備忘録として残しておきます。

実動作の確認のためのソースコードを以下に挙げておきました。
　https://github.com/poruruba/fetch_laboratory

Javascriptからの呼び出しを中心に示しますが、同じコードがそのままNode.jsでも動作します。
ちょっとだけ、Lambdaでの動作も示しておきます。

# 呼び出し方法の種類

今回扱う呼び出し方法は以下の通りです。

・Get呼び出し
　HTMLのページ取得でおなじみです。パラメータをQueryStringに指定します。例えば、以下のような呼び出しです。
　http://localhost:10080/api?param1=abcd

・Post（Content-Type: application/json）呼び出し
　パラメータをBody部にJSONで指定するWebAPI呼び出しでは一番一般的ですね。

・Post（Content-Type: applicatio

僕「えっ？HTMLの生成はRailsにさせて、jqueryは画面に当て込むだけにする？」

## jquery+Railsのプロジェクト進行中僕

僕「今日も今日とて、業務システム開発案件の実装だわ。」

上司（５０歳独身）「おっ、僕。おはようさん！」

僕「上司さん。今日もハゲてますね。」
（おはようございます！今日も素敵なネクタイですね！）

上司（５０歳ハゲ）「ハハ。また建前と本音が逆になってるぞ。次やったら**最果て支社**に飛ばすからな。」

僕「あぁ。今回もフロント側がjqueryかぁ・・・たまにはvue.jsとかreactとか使ってみたいなぁ・・・」

上司「無視すんな。」

イケメン後輩「僕さん。そんなjquery嫌なんですか？なんでですか？」

僕「おっ。社内でも何にでも挑戦するともっぱら評判の**イケメン**じゃん。いやぁ、jqueryって何か知らんけど、vue.jsとかみたいにコンポーネント指向で共通化したコードを書けないし、状態の監視も厳しいし、ゴリゴリ書かないといけないんでしょ?」

上司「おい。無視すんな。」

イケメン「確かに。vue.jsとは思想が違いますからね。そもそも向こうは仮装DOMで、jqueryはDOM操作ですしね。確か

JavaScript DOM Event list

# `DOMContentLoaded`
When DOM objects are loaded. Unlike `load`, `DOMContentLoaded` doesn’t wait for stylesheets, images and subframes to finish loading.

“`javascript
window.addEventListener(‘DOMContentLoaded’, (event) => {
console.log(‘DOM fully loaded and parsed’);
});
“`

# `load`

“`javascript
window.addEventListener(“load”, event => {
// some process here
})
“`

JS Code Of Deep Freeze

# Code of Deep Freeze
“`javascript
function deepFreeze(o) {
Object.freeze(o);

var objIsFunction = typeof o === ‘function’;

Object.getOwnPropertyNames(o).forEach(function (prop) {
if (o.hasOwnProperty(prop)
&& o[prop] !== null
&& (typeof o[prop] === “object” || typeof o[prop] === “function”)
&& (objIsFunction ? prop !== ‘caller’ && prop !== ‘callee’ && prop !== ‘arguments’ : true)
&& !Object.isFrozen(o[prop])) {
deepFreeze(o[prop]);

【JS】ブラウザのレンダリングの仕組みについて

## 経緯
仕事で、フロント側のパフォーマンスチューニングをすることになり、ブラウザのレンダリングの仕組みについて勉強する必要がありました。
その内容を記事にまとめてみます。

内容に関しては、下記の書籍を参考にしています。
[Webフロントエンド ハイパフォーマンス チューニング](https://amzn.to/2FBhqOw)

**他に参考にした記事**
[JavaScript 長く使える系の知識](https://qiita.com/yamadar/items/bfdfc58cec49bf2690e1)
[実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのか](https://qiita.com/tsin1rou/items/d4c781a2f25e2b92fa5e#dom%E3%81%A8%E3%81%AF)
[[フロントエンド] ブラウザレンダリングの仕組みを理解して、ブラウザに優しいJavaScriptを書こう](https://www.yoheim.net/blog.php?q=20140703)
[Life of a Pixel](http

Javascript Regular Expression Memo

# javascript regular express flag table

| Flag | Description |
|:–|:–|
| g | Global search. |
| i | Case-insensitive search. |
| m | Multi-line search. |
| s | Allows . to match newline characters. (Added in ES2018, not yet supported in Firefox). |
| u | “unicode”; treat a pattern as a sequence of unicode code points. |
| y | Perform a “sticky” search that matches starting at the current position in the target string. |

# Sticky Flag
Bellow is sticky. Regexp holds lastIndex, and when reads

【JavaScript】オブジェクトを要素に持つ配列で、条件に当てはまる要素を全削除する方法

## はじめに
JavaScriptの配列操作で、条件に当てはまる要素を全削除する方法を備忘録として記載します。

対象は**オブジェクトを要素に持つ配列**です。

## 環境
“`yaml
OS: macOS Catalina 10.15.1
“`
## 結論

“`javascript
const array = [
{id: 1, n: 1, m: 2},
{id: 2, n: 1, m: 3},
{id: 3, n: 1, m: 2},
];

//上記配列からnが1, mが2のオブジェクトを全削除する。
//つまり、nが1, mが2「でない」配列に置き換える

const newArray = array.filter(item =>
!(item.n === 1 && item.m === 2)
);
“`

## 出力
“`javascript
array;
// => [ { id: 1, n: 1, m: 2 }, { id: 2, n: 1, m: 3 }, { id: 3, n: 1, m: 2 } ] 

newArray;
//

JavaScript でURLのクエリ文字列を取得する

JavaScript でURLのクエリ文字列を取得する。

## 例

### 現在開いているページのクエリ文字列を取得する

`location`オブジェクトの`search`プロパティを利用する。

“`js
const query = location.search;
“`

### 正規表現を使って、URLを表す文字列からクエリ文字列を抽出する

クエリ文字列がない場合、定数`query`の値は空文字となる。

“`js
const url = ‘https://example.com?a=123’;
const query = url.replace(/^.*?(\?|$)/, ‘$1’);
“`

Firebase Hosting でのサイト公開手順メモ

Firebaseで導入時に操作する手順を残しておきます。
→ [firebase公式サイト](https://firebase.google.com/)

## 0. 事前準備
以下はすでに導入済みのものとして説明は省略します。

– node.jsのインストール
– ブラウザからfirebase公式サイトへログインしてプロジェクト作成

## 1. firebase tool（firebase CLI）のインストール
下記のコマンドでインストールします。

“`terminal
npm install -g firebase-tools
“`

インストール終わったら以下のコマンドで、firebase CLIから使えるコマンド一覧が確認できます。

“`terminal
firebase
“`

こちらはバージョン確認

“`terminal
firebase –version
“`

## 2. firebaseへログイン（Googleアカウントへの紐付け）
インストール後Googleアカウントへと紐付けをおこないます。

“`terminal
$ firebase

js 並列処理 返り値

“`javascript
const funcA = () => ‘funcA ok’
const funcB = () => ‘funcB ok’
const funcC = async () => {
const result = await Promise.all([
funcA(),
funcB()
])
console.log(result[0], result[1])
}
funcC()
// Promise { }
// funcA ok funcB ok
“`

“`javascript
const funcA = () => ‘funcA ok’
const funcB = () => ‘funcB ok’
const funcC = async () => {
let resultA, resultB
const result = await Promise.all([
resultA = funcA(),
resultB = funcB()
])
console.log(resul

大量の点の 2 次元プロット（regl）

こんにちは。
大量の点の 2 次元プロットを [regl](https://github.com/regl-project/regl) (WelGL ライブラリ）をシンプルに利用して試してみました。1000万点をプロットしてもスクロール・ズームのレスポンスは良いようです。

“`scatter.html