f@ctor

JavaScript関連のことを調べてみた2021年02月16日

JavaScript関連のことを調べてみた2021年02月16日
目次

閲覧者のユーザーエージェントを三角関数で判定可能か？

# 概要
先日ふと自分のPCの[フィンガープリント](https://contents.saitolab.org/fingerprint/)を取ってみたところ「IPアドレス」など様々な項目が並ぶ中に「**Math.tan**」という変な項目を見つけました。

「なぜ三角関数が出てくるの？」と気になって調べてみたところ、**三角関数の値はブラウザやOSの実装により微妙に異なることがあり、特定の式をブラウザに計算させることで利用者を識別する手段になり得る[^1]**という話でした。

面白そうだなと思ったので、本記事ではその手法で実際どの程度までブラウザ/OSを判別できるのか調査してみました。

# 検証方法

今回は様々な文献[^1][^2]の情報を参考に、以下の式を各OSの各ブラウザに計算させました。

– `tan(-1e300)`
– `cosh(10)`

（これら以外も10数種類ほど試したのですが、判別に使えたのはこの2つのみでした）

##### 試したOSとバージョン
– macOS Catalina (ver.10.15.6)
– Windows 10 (OSビルド 19

元記事を表示

useReducerの処理の流れ

学習の備忘録として残しています。

データをコンポーネントが受け取ってブラウザに表示するための方法としてReact Hooksを使用し、コンポーネントにstateを注入する方法がある。
useStateとuseReducerの２つ。

# useReducerを使う場面
複数の値にまたがる複雑なstateロジックがある場合や
前のstateに基づいて次のstateを決める必要のある場合。

# 処理の流れ
全体像

“`react:jsx

const initialState = {count: 0};

function reducer(state, action) {
switch (action.type) {
case ‘increment’:
return {count: state.count + 1};
case ‘decrement’:
return {count: state.count – 1};
default:
throw new Error();
}
}

function Counter

元記事を表示

Kinx – Case-When/Switch-When サポート

# はじめに

こんにちは。皆さん、お元気でしょうか。

さて、**「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」** でお届けしているスクリプト言語 [Kinx](https://github.com/Kray-G/kinx)[^1] で、`case-when` という構文をサポートしました。また、`switch-when` という書き方もサポートしました。今回はそのお話しです。

[^1]: **「はっきり言ってライオンズびいきでお送りしている文化放送ライオンズナイター**」というフレーズが特徴的な文化放送ライオンズナイターを思い出すのは私だけでしょうか？小学生の頃よく聞いていた。「はっきり言って♪」という歌声の後にアナウンサーの「ライオンズ、びいきです。」というのがコマーシャル明けの定番フレーズだった。今時の人は知らないか。西武球場にもよく行ったなー。

* 参考
* 最初の動機 … [スクリプト言語 KINX（ご紹介）](https://qiita.com/Kray-G/items/ca08b6fb40d15dd0ec76)

元記事を表示

JavaScriptの連想配列の配列で特定のvalueが配列の何番目（index）で出現するかを知る

例えば、’school’が何番目のオブジェクトの中にあるのか知りたい場合。

“`javascript
const genres = [
{route: ‘jobs’, name: ‘仕事’},
{route: ‘life’, name: ‘日常’},
{route: ‘relationship’, name: ‘人間関係’},
{route: ‘dozi’, name: ‘どじ’},
{route: ‘shame’, name: ‘恥かいた’},
{route: ‘school’, name: ‘学校’},
{route: ‘love’, name: ‘恋愛’},
{route: ‘marriage’, name: ‘結婚生活’},
{route: ‘game’, name: ‘ゲーム’},
{route: ‘disease’, name: ‘病気’},
{route: ‘heart’, name: ‘心’},
];

const genreRoutes = genres.map((obj) =

元記事を表示

【React Native】簡単なAPI連携のアプリケーションを作成する　②住所検索の実装

# はじめに
本記事は下記の記事の続編になります。
[【React Native】簡単なAPI連携のアプリケーションを作成する　①準備編](https://qiita.com/kazuki_yoshida/items/d5f47e4d39a9e54f091d)

## 本記事で説明すること
* axiosの導入・利用
* APIへのリクエスト(住所検索)
Reactで同じようなことをやっている方がいらっしゃいました。
→[React、Reduxとaxiosを使って郵便番号から住所を取得する](https://qiita.com/oda3104/items/317a1309183d50061a6e)

## 環境
* axios：0.21.1

## 今回使用するAPI
* [郵便番号検索API](http://zipcloud.ibsnet.co.jp/doc/api)

## Githubリポジトリ
https://github.com/pbyoshida/postal-app

# 実装
それでは前回のソースから手直しを始めていきます。
## axiosの導入
まず

元記事を表示

【SHOWROOM】配信中のギフトをリアルタイムに画面に降らせる方法

# はじめに
この記事は[【SHOWROOM】配信中のコメント・ギフトログをリアルタイムに取得する方法](https://qiita.com/TYoichiro/items/535137094d6ca413b10f)の続きになります

コメントログとギフトログは取得して表示する事ができたので、次はギフトを画面に視覚的に降らせてみようと思います

# アニメーション
よく配信者が使っている[すこアニ](http://sr-com.net/suko_ani/)では見た感じ動き（アニメーション）に[Matter.js](https://brm.io/matter-js/)が使われているっぽいですが、私が使い方を知らないので今回は有名な[GSAP](https://greensock.com/gsap/)を使って再現してみたいと思います

すこアニを使ってギフトを降らせるアニメーションの配信例
![gif3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310163/8e4d7b0a-9aae-a1ee-f76

元記事を表示

新人「先輩、変数のスコープについてホントにちゃんと理解できてます？?」

# とある職場にて
※この物語は実話をもとにしたフィクションです。
※初Qiita記事です。お手柔らかにお願いいたします笑

2021.02.16追記 変数のスコープの話…というよりは参照渡しとかの話題なのでタイトル変えたほうが良いかもですね

## 関数内でグローバル変数を書き換えられてしまう?
おれ「おーい新人くん」

新人「え？なんですか？(すっとぼけ)」

おれ「こんなコード書いちゃいけないでしょ」

※Qiita用にコードは簡素化しています

### 【例1】Python

“`python
foo = {“foo”: 123}

def bar(v):
v[“bar”] = 12345

bar(foo)

# ↓変わらず{‘foo’: 123}が出力される？
print(foo)
“`

新人「えっ、なにがいけないんですか？」

おれ「引数に渡したグローバル変数に対して関数内で新しい要素を追加するこの関数だけど…
この書き方では関数内で要素の追加処理自体は行われるけど、グローバル変数fooには影響を及ぼさないぞ。」
<

元記事を表示

[フロントエンド+a] 2021年版 VSCodeプラグイン(拡張機能)と設定

パソコンを変えた時用の備忘録です。それぞれに軽く説明も

##プラグイン(拡張機能)一覧
###1. Auto Close Tag
![Auto Close Tag](https://github.com/formulahendry/vscode-auto-close-tag/raw/master/images/usage.gif)

>[Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
Visual StudioIDEまたはSublimeTextと同じように、HTML / XML終了タグを自動的に追加します
コピーしてHTMLタグを使用する際に煩わしい時もありますが、あった方が捗ります。

—

###2. Autoprefixer
![Autoprefixer](https://cloud.g

元記事を表示

文字起こしツールを作った（無料でとりあえず動かしたい人向け）

#はじめに
色々書かれてると逆にわからなくなるので、本当に音声認識ができる最低限のソースです。
コピペで動きます。
８行。

#精度について
比較のために、pythonのspeechrecognitionライブラリも使ってみましたが、今回使っているwebspeechapiの方が精度よかったです。（日本語・日常会話でざっくり試しただけ）

pyaudioが自分のPCと相性悪くてテスト版にしないとインストールできないとか無駄に手こずるところもあるので、オフライン利用じゃなければwebspeechapiおすすめ。

#使用ツール
・VScode＋liveserver

VScodeに下のコードを貼って、ローカルサーバ立ち上げれば動きます。
#コード
“`webspeechapi.html