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

ChromiumではないMS Edgeで要素ドラッグしようとするとタッチジェスチャーが動作してしまう件の回避

#概要
– 最新のChromium版のMicrosoft Edgeではない、古いEdge
– タッチディスプレイで、タッチ操作

という条件で、HTML内の要素ドラッグをしようとすると、全体のタッチジェスチャー（？）が効いてドラッグできません。

上記キャプチャのURLはこちら。
https://gijgo.com/draggable

#解決法
CSSで、ドラッグしたい要素に “`touch-action: none;“` を指定するだけ！

ひとまず、DeveloperToolで追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24420/de2db7a5-13bb-d9c

jest の spy を使ったテストでテスト順番に依存して落ちたり落ちなかったりする問題の解決

spy で toBeCalled() を使ったテストで、テストの順番に依存してうまく動いたり動かなかったりする現象があって、ハマりそうだったので記録しておきます。
テスト対象は TypeScript の関数ですが、型がある以外は JavaScript に読み替えても同じだと思います。

テスト対象の関数が以下のようにあるとします。

“`typescript

export const targetFunction = (flag: boolean) => {
if (flag) {
console.error(‘出力です’)
}
}
“`

### 失敗するパターンのテスト
“`typescript

import { targetFunction } from ‘~/plugins/axios’

const spyConsoleError = jest.spyOn(console, ‘error’)
spyConsoleError.mockImplementation(() => {
})

describe(‘spy resetの動作テスト’, () =

knex.js + postgresql migration メモ

knex.js を postgresql で利用する際の migration について、こうやるといいんじゃないかな的な話題をまとめていきます。(随時更新予定)

# bigint な primary key

64bit にしたい場合。

“`javascript
exports.up = function(knex) {
return knex.schema
.createTable(‘xxxx’, function (table) {
table.specificType(‘id’, knex.raw(‘BIGSERIAL PRIMARY KEY’));
});
};
“`

# enum の up / down

up / down の行き来によって enum 型定義だけ残るので強制的に消しに行ってます。

“`javascript
const drop_type_stmt = ‘drop type if exists xxx_type’;

exports.up = function(knex) {

Javascript　コーディング問題（手助け求めます）

#　Javascript のコーディング質問
Javascriptにて

**あなたは現在価格mドルの土地の購入するために、年利i(0 < i < 100)%の金融商品にpドル投資しました。何年後に土地の購入ができるでしょうか？howLongToReachFundGoalという関数を再帰によって作成してください。なお、毎年得られた利益は同商品に再投資するとし、土地の価格は経過する年数が偶数(0を含む)の時は2%、奇数の時は3%上昇します。また、人の寿命は80歳未満と仮定し、80年以上かかる時は80としてください。** という内容の元プログラムを組んでいます。 問題に直面しているのですが、一定数の入力だと正解の出力より１多い数値を出してしまうのですが、改善方法がわからず行き詰まってしまっています。 （例） 入力：5421,10421,5 正解の出力：27 自分の出力：２８ どなたか分かる方手助けお願いします。 ``` function howLongToReachFundGoalHelper(capitalMoney, goalMoney, interest, x){

React ContextでuseReducerを使ってみる

#はじめに
今回は**Context API**を用いた既存のプロジェクトにHooksの一つである**useReducer**を用いてreducerを追加していきます。ドキュメントを読んでもいまいち理解できない方向けの記事にしましたので細かい説明は省いています。そのままコピペしてみても良いかもしれません。

#useReducerとは何か
（ContextAPIを用いて作られたグローバルなstateに対して）**reducer**を設定できるReact Hooksの一つです。つまりContextでreducerを使えます。ただ、そもそもreducerとは何か。

#reducerとは何か
もともとは**Redux**において出てくる考え方で、**グローバルな**stateの状態を管理する場所です。**ローカルな**stateの更新はstateを設定したコンポーネント内で出来ますが（下の図参照）、reduxで作成するグローバルなstateはコンポーネント側が直接変更することは出来ません。各コンポーネントはreducerに対して、『この処理を行いたい』という申請を送ると、reducerが代

JavaScript基本文法(初学者向け)

## コンソールにテキストを表示
`console.log()`　
引数として（）内にコンソールに表示したい情報を渡します。変数を渡すことも可能。

## 変数の宣言
`let name = ‘sasaki’`
`const name = ‘ken’`
変数の宣言は`let`を使用。後で書き換え可能の宣言は`let`、
書き換え不能の宣言は`const`を使用します。

## 条件分岐
“`
if (条件式1) {
// 条件式1がtrueのときの処理
} else if (条件式2) {
// 条件式1がfalseで条件式2がtrueのときの処理
} else {
// 条件式1も条件式2もfalseのときの処理
}
“`
条件式は（）で括ること。
条件に対しての処理は{}で括ること。
複数の条件が必要の場合は、elseの後にifを書きます。

##　配列
“`
let list = [‘Ruby’, ‘Ruby on Rails’, ‘JavaScript’, ‘HTML’, ‘CSS’];
“`
配列定義する場合は[]内に記述　。
要素番号は0からスタートで、

Google Apps Script で公開したWebアプリケーション内で Web Woker や ES Modules を使う

「CORSか SOP違反か」何とかしたいですよね。
※本記事は「xxx.gs」ではなく「xxx.html」に書く方のJavaScriptの話です。

#外部スクリプトが使えない
GASで作ったWebアプリで下記のようなコードを書いてもエラーになります。

“`xxx.html

“`

開発コンソールで確認してみると「CORS」だの「SOP」だのといった文言のエラーメッセージが出ていると思います。
CORSはオリジン間リソース共有、SOPは同一生成元ポリシーのことで、ざっくり言うと「他のWebサイトから持ってきてはいけない」というエラーです。

つまり、他所から持って来ていないように見せれば解決します。

#失敗例 ContentServiceを使ってみる
GASにはHTMLを表示するHtmlServiceに対してプレーン

Puppeteerを2系から3系にアップデートしたらError: Failed to launch the browser process!

Puppeteerメモです。

Heroku上で利用していたPuppetterのバージョンを2系->3系にアップデートしたらエラー発生。

## Puppetterのバージョンを2系->3系にするとChromiumのバージョン違いで動かないっぽい

### Heroku上のログ

“`
Error: Failed to launch the browser process!
2020-05-27T21:22:10.217234+00:00 app[web.1]: /app/node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome: error while loading shared libraries: libgbm.so.1: cannot open shared object file: No such file or directory
“`

### Heroku上でインストールされているChromiumを更新する

> https://github.com/puppeteer/pup

Firebaseの技術を使ってWebページをもう少し進化させる

今回、FirebaseのRealtime DatabaseとCloud Storageの仕組みを使って今までのwebページの機能を増やしました。

Firebaseの全体図と各機能の理解については
以下が非常に参考になりました。
https://www.topgate.co.jp/firebase01-what-is-firebase

#Firebaseとは
Firebase は Google が提供しているモバイルおよび Web アプリケーションのバックエンドサービスです。クラウドサービスの形態では BaaS に位置付けされます。 Firebase を使うことで、バックエンドで動くサービスを作成する必要も管理する必要がなくなり、開発者はアプリケーションの開発に専念できます。

#Realtime Databaseとは
Firebase に元から含まれているオブジェクト型のデータベースです。リアルタイムでクライアント全体の状態を同期させることができ、オフラインで動作するときはデータをキャッシュしてオンラインになった時に自動的にデータを同期します。

#Cloud Storage fo

昔、WEBのカラーコードを調べる時によくこういうモノで調べてました。

体内リズムが崩れてしまった、taokaです(´・ω・`)。
昔、WEBのカラーコードを調べる時によくこういうモノで調べてました。
今ではプラグインやデベロッパーツールで簡単にカラーコードが分かってしまいます。

**※履歴を溜めてごめんなさい**

https://taoka-toshiaki.com/qiita-no5/

“`html






利率や税率をJavascriptで計算させる（指定小数位の切り捨て）

#利率や税率計算って、小数点以下を考慮しなきゃですよね
Javascript ですと、 Math 関数が使えます。
日本円の計算ですと

“`Javascript:sample.js
Math.floor( 価格 * 税率);
“`

みたく、安直にやると困ることが起こります。
要は **Javascript は割り切れない商を、求められる最後の小数位が変わる**　のです。
例えば
“`8 / 3 = 2.66666666666666666666666666666666666“`
ですが、Javascriptだと
“`8 / 3 = 2.6666666666666665“`
になるんですね。
やっかいなことに、四捨五入でもないんです。
専門的に言うと **JavaScript ECMAScript 2016 (ES7) が採用する IEEE 754-2008 の浮動小数点演算精度** というみたいです。
テストデータによっては、期待値になるので、見つけにくいバグです。

#結論
最後に切り上げられるのを防止するため、`割られる数と調整値の積`と`割る数の商A`を求め、あとで

Vue.jsでAPIのBasic認証をした

#はじめに
Vue.jsによる開発においてAPIのBasic認証の実装をしました。
エラーについての検索をした際に類似のケースで苦しんでいる方が国内外問わず多くいらっしゃったので、本記事では私が嵌ったエラーと解決策の一例について書いていきます。
当記事の使用言語はVue.jsとNode.jsです。

###課題の切り分け

実装に当たって私が悩んだ点は大きく分けて下記二つとなります。
・CORSの不一致
・非同期処理の中でBasic認証が出来ない（404エラーが返ってくる）

#####◎CORSの不一致
APIのBase URLに対してGETでデータの取得を初めて求めた際に、

“`
Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Origin ‘http://localhost:8080’ is therefore not allowed

Vue.jsでつくったサイトにfirebaseでユーザ認証してこっそり人の顔年齢を試して遊ぶ

### 概要
Vue.jsで作ったサイトをFirebaseにユーザー認証をお願いして、ログインしないと入れないページにして、人の顔年齢（Computer Vision API）で遊んで、freenomとNetlifyで独自ドメインで公開する
### できたもの
写真を入れると年齢をかえしてくれます。
### 環境
“`
macOS Catalina
Visual Studio Code 1.45.1
Node.js: v13.11.0
npm:6.14.5
Vue:@vue/cli 4.3.1

“`
### 大まかな流れ
Vue.jsとFirebaseでユーザー認証ありのプロジェクトをつくる
　　　↓
Computer Vision APIをつかって顔認識のぺーじをつくる
　　　↓
freen

JavaScript リンク集

ゴミの大量生産とか、怒られるかも…。
分類がおかしいかも。

# 有名なライブラリー

– [jQuery](https://jquery.com/)

# 脱 jQuery

– [You (Might) Don’t Need jQuery](https://github.com/nefe/You-Dont-Need-jQuery)
– [You Don’t Need jQuery – Qiita](https://qiita.com/tatesuke/items/b9548dd484b01b139b74)
– [2019年になってもまだjQueryを使用している理由 | コリス](https://coliss.com/articles/build-websites/operation/javascript/still-using-jquery-in-2019.html)
– [jQuery不要論について考える](https://www.deep-rain.com/programming/javascript/658)
– [そろそろなぜjQueryを使うのが難しいのかをちゃんとま

[備忘録]　GASのdoPost()にJavaScriptからJSONを渡す方法

（とりあえずまずは備忘録として残します。あとでちゃんと書き直すかも）

#はじめに
簡易的なデータベースとしてGoogle Spreadsheetにデータを記録していく仕組みを作ろう！
ということで、WebページからGoogle Application Script (GAS) で作ったWebアプリケーションにJSONを投げ、Google Spreadsheetに書き込むという仕組みを思いつく。
同じWebアプリケーション上に入力用のWebページも用意したいので、順当にdoGet()で入力ページを表示、doPost()でJSONデータを受け取ることにした。

#はまったこと
CORS (Cross-Origin Resource Sharing) にガッツリはまった。
JavaScriptからJSON投げると、GASのWebアプリケーションにさえ到達しない。
全く無反応。
Chromeのデベロッパーツールでコンソールを確認すると、

>Access to fetch at ‘https://script.google.com/macros/s/XXXXXXXXXXXX/exec’ fr

改行のあるjson文字列をjavascriptでパースするときに気を付けること

webアプリに入門しようと思って掲示板を作っていた際に投稿内容をjsonで受け取ってjavascriptでパースしようとした際にコメント内容に改行が含まれていて数時間詰まりました。既出だとは思いますがメモとして書き残しておきます。

>[JSONで改行を処理する方法](https://qa.codeflow.site/questions/42068/how-do-i-handle-newlines-in-json)
>>（文字列内の “\”をエスケープする必要があります（それを二重の “\”に変換する）。そうしないと、JSONデータではなく、JSONソース内の改行になります。）

サーバー側で

“`go
// go言語です
s := “{\”name\”:\”hoge\”,\”comment\”:\”fug\r\na\”}”

rep := regexp.MustCompile(`[\(\r\n\)\n]`)
s = rep.ReplaceAllString(s,”\\n”)
“`

このように置換することで解決しました。

はじめてのThree.js 4章 日記

[はじめてのthree.js](https://www.amazon.co.jp/dp/4873117704)

#新たに知った知識
– multimaterialはジオメトリのそれぞれの面に独自のマテリアルを適応する
– materialにはneedUpdateプロパティがあり、変形していくならばtrueにする必要がある
– sideプロパティはdoubleにすることでパフォーマンスに影響が出てくる
– arrowhelperプロパティで法線ベクトルが可視化できる(サンプルはコメントアウトしてある)
– ゴスパー曲線

#気づいたこと
– linebasicmaterialは結構使えそう
– materialプロパティのwireframeはメディアアートっぽくなる
– かっこいい表現求めるならshaderは必須(早く覚えなければ)

#wow moment
– multimaterialのルービックキューブ
– [太陽](https://www.shadertoy.com/view/4dXGR4)

#まだ解決していない点
– idとuuidの違いと使用用途
– 高度なプロパティ

配列の中にオブジェクトがある場合のデータの入れ替え方法

# 二つの配列かつ中にオブジェクトがある場合
二つの配列かつ中にオブジェクトがある場合にデータが片方に存在しない場合にデータを入れ替えたいって言う需要ってありますよね。
はい、最近ありました。

と言うわけで、結構忘れがちなので、備忘録も込めて記載します。

“`javascript
const ArrayObject1 = [{id:1,name: ‘shuichi’},{id:2, name: ‘takesi’},{id:3,name: ‘tabasa’},]
const ArrayObject2 = [{id:1,name: ‘ichiro’},{id:2, name: ‘ziro’},{id:3,name: ‘saburo’},]

// idが同じ場合に名前を入れ替える
console.log(ArrayObject1.map((obj1) => {
if (obj1.id !== null) {
ArrayObject2.map((obj2) => {
if (obj1.id === obj2.id) {
obj1.name = obj2.

[JavaScript] DOM 要素の照合

# 概要

* ある DOM 要素を照合する API の忘備録です。

* 以下の３メソッドについて解説してます。
1. element.contains(element)
2. element.closest(selector)
3. element.matches(selector)

## element.contains(element)

* 要素A と 要素B の親子関係を調べます。

“`HTML

8^-^8