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

FixedMidashiで縦スクロールした時にIEの時だけヘッダが上下にがたつく挙動の対処法

　業務で複数の行および列が固定されたテーブルを作成するにあたり、[FixedMidashi.js](http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html)を使用しました。大変使いやすいライブラリですが、IEで縦スクロールを行ったときに上部ヘッダが一瞬上下にがたつくため、その対処法を記載します。

## 発生条件
1. ブラウザ ⇒ IE（私はIE11を使用しています。下のバージョンで現象が発生するかは未確認です）。
2. 縦スクロールが**一番上**にある状態でマウスホイールでスクロール

## FixedMidashiを用いたテーブルの用意
まず[FixedMidashi公式ページの使用方法](http://hp.vector.co.jp/authors/VA056612/fixed_midashi/manual/index.html#usage)に従ってテーブルを作成しました。
※業務では**divモード**を使用したので、**divモード**で記載します。

　・tableタグをdivタグで

Flash Advent Calendar 7日目 – 俺のWeb Workersがこんなに遅いわけがない外伝 –

今日は、らくさんのこの記事の外伝となります。

まずは、本家の記事を読んでいただければと思います。

[本家「俺のWeb Workersがこんなに遅いわけがない」](https://lab.sonicmoov.com/development/javascript/web-workers-with-transferable-objects/)

# 目次

* おさらい
* worker用のJSファイルを作らない
* buffer以外のobjectやarrayの転送で遅延するケース

# おさらい

遅くなる例

“`JavaScript
const typedArray = new Uint8Array(1024 * 1024 * 256);
worker.postMessage({ “data”: typedArray });
“`

原因は`postMessage`の第2引数にbufferをセットせずに送信した結果
複製されたデータを転送するのに異常な時間がかかる事です。

この回避策として、下記の実装のように第2引数の配列の`buffer`を設置します。
コピー無しで転送さ

【Javascript】Javascriptで読み上げ【そのままコピペOK】

#結論
“`html

CLICK ME

```

```css:style.css
.dot {
position: absolute;
width: 10px;
height: 10px;
}

#black {
width: 100px;
h

Reactでブラウザから音声を録音してFirebaseにアップロードしてみた(iOS未対応)

## 経緯
最近は音声を投稿するSNSが増えてきているなぁと感じてきており、私が知っている限りでも10個は直ぐに思い出せます。
そこで、いつか音声サービスを作ってみたくなるかもしれないので、興味本位で調べてみました。

## 動作確認
WindowsのChrome

### 開発情報
- react
- firebase
- react-audio-player

## デモ動画
YouTubeで確認できます。

## コード
```react:App.js
import React, { useEffect, useState, useRef } from "react";
import firebase from "firebase";
import ReactAudioPlayer from "react-audio-player";

// configは、自分のfirebaseの設定を指定してください。
const config = {
apiKey: "",
authDomain: "",
databas

Sequelizeでビット演算を使った検索を行う

以下のようなテーブルがあるとします。
statusの値は10進数ですが、アプリケーションではビット演算で管理されてることがわかると思います。

```
id:1, status:1 // 1つめのフラグが立っている
id:2, status:4 // 3つめのフラグが立っている
id:3, status:1023 // 全てのフラグが立っている
```

## SQLでの書き方

3つめのフラグが立っているかどうかのクエリーは以下になります。

``` xxx.sql
SELECT * FROM xxx WHERE (status & 4) = 4;
```

idが2,3が出力されます。

## Sequelize.whereを使った書き方

``` xxx.ts
Model.findAll({
where: sequelize.where(sequelize.literal('status & 1023'), 1023)
})
````

## 参考
https://github.com/sequelize/sequelize/issues/5207
https://lam

GMMをJavaScriptで実装した

# はじめに

「[色々な機械学習処理をブラウザ上で試せるサイトを作った](https://qiita.com/norimy/items/669c19ecf2256b3ecae5)」中で実装したモデルの解説の九回目です。

今回はGMMの実装について解説します。

デモは[こちら](https://ai-on-browser.github.io/)から。（TaskをClustering/Anomaly Detection/Density Estimationにして、ModelのGaussian mixture modelを選択）
実際のコードは[gmm.js](https://github.com/ai-on-browser/ai-on-browser.github.io/blob/master/model/gmm.js)にあります。

なお、可視化部分については一切触れません。

# 概説

GMM（Gaussian Mixture Model）はクラスタリング、密度推定、異常検知に使われるモデルです。

複数の正規分布をいい感じに変形させて、データの密度を推定することがGMMの目的

Javascriptエラー問題集

##事前準備

ターミナル上で下記コマンドを実行してcloneする。

```
git clone https://github.com/Shu-Hos/ajax_app_error.git
cd chat-app_error
bundle install
yarn install
rails db:create
rails db:migrate
```

###問題１
新規投稿をしてもイベントが発火しません。
まずはこちらを解決しましょう！

###問題2
新規投稿をしようとすると添付画像のエラーが表示されます。
次はこちらの問題を解決してください。


ヒント

エラーの英文のしっかりと確認しましょう。
formText.valu

Javascriptで括弧の中身の文字列を取得するメモ【2020】

[Javascriptで括弧の中身の文字列を取得するメモ](https://qiita.com/fuku2014/items/76880d70f68e1585d401)のアップデート版。

()の中身を取り出したい時。

```javascript
let str = "aaa(bbb)ccc";
console.log(str.match(/\((.+)\)/)[1]);

// output: bbb
```

{}の中身を取り出したい時。
([1]をなくせば様々な情報がセットで手に入ります。)

```javascript
let str = "aaa{bbb}ccc";
console.log(str.match(/\{(.+)\}/)[1]);

// output: bbb
```

{}で囲まれた複数の要素を取り出したい時。
(/gがあれば複数取得できます。)

```javascript
let str = "aaa{bbb}ccc{ddd}";
console.log(str.match(/\{.*?\}/g));

// output: (2) ["{bbb}",

モダン JavaScriptとは、初心者がまとめてみた

#はじめに
脱初心者にむけてアウトプットをしていこうと思って、
記事を書いております。
私は、まだ現場に出たことのない完全にど素人です。
間違ったことがありましたら、ぜひコメントいただけると幸いです。

#対象読者
JavaScriptの基本的な文法を学んだ後に、VueやReact,
Angularを学ぼうと決めている方、
モダンな(流行しているもの) JavaScriptの開発について知りたい方。

#モダン JavaScriptとは？
私が知っている範囲内で説明すると
1. React、Vue、Angular、Riot等の仮想DOMを用いるライブラリ/フレームワーク。
2. パッケージマネージャ(npm,yarnなど)を使っている。
3. 主にES2015以降の記法を使っている
4. モジュールバンドラー(Webpackなど)を使用している
5. トランスパイラ(Babelなど)を使用している。

以上の5つがそれぞれ含まれている場合、モダンなJavaScriptの開発と言えるでしょう。
一つ一つ簡易的に紹介していこうと思います。

##仮想DOMとは
React、Vue、An

firebase authentication(JavaScript SDK)サインイン時のエラーハンドリング

Firebase Authentication(JavaScript SDK)でメールアドレス、パスワードを利用してサインインする場合に、throwされるエラーをまとめました。

[ドキュメント](https://firebase.google.com/docs/reference/js/firebase.auth.Auth#error-codes_12)に記述されてますが、以下のエラーがthrowされるので、エラーに応じて適切に処理することになります。

- メールアドレスの形式がおかしい
- errorCode: `auth/invalid-email`
- message: The email address is badly formatted.
- ユーザが無効になっている
- errorCode: `auth/user-disabled`
- message: The user account has been disabled by an administrator.
- ユーザが存在しない
- errorCode: `auth/user-not-fo