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

p5.jsの関数まとめ part.7 randomGaussian()

この記事は Qiita p5js アドベントカレンダー8日目の記事です。

## これはなに
p5.jsが用意している関数について理解を深める記事です。
今回はMath、Random系に位置するrandomGaussian()について。

## randomGaussian()

### リファレンスより
> ガウス分布（正規分布）に当てはまる乱数を返します。理論的には、randomGaussian()が返す最小値や最大値はありません。むしろ、平均値から遠く離れた値が返される可能性は非常に低く、平均値に近い値が返される可能性は高いと言えます。0、1、2のいずれかの引数を取ります。
引数を取らない場合、平均値0、標準偏差1を返します。
引数が1つの場合、その引数は平均値です（標準偏差は1）。
引数が2つの場合は、1つ目が平均値、2つ目が標準偏差です。

まず`ガウス分布`が分からないので調べました。
[こちらの記事](https://ai-trend.jp/basic-study/normal-distribution/normal-distribution/)の説明がわかりやすかったで

bitcoinjs-libでNative Segwitのマルチシグアドレス(P2WSH)を作って送受金してみる

今回の記事ではJavascriptのビットコインライブラリであるbitcoinjs-libを使ってP2WSHの2-of-2マルチシグアドレスを作り、その後これに署名して送金してみます。検証のためRegtestモードでbitcoin-cliを使う場面があります。

事故っても私には責任が取れないので、mainnetで下記のコードを動かさないで下さい。また下記の鍵を再利用しないでください。
あと、もし間違っているところがあれば教えてください。

### ビットコインのマルチシグアドレスの形式

ビットコインでマルチシグを実現できるアドレス形式として古いものからP2MS、P2SH、P2WSHがあります。

– P2MS (raw multisig): 一番古い方法で、3-of-3が限界。入金時点でOP_CHECKMULTISIGを使うスクリプトを公開し、必要な署名を集めることで出金できる。アドレスは3から始まる
– P2SH: チェーンに公開するデータ量を削減したことで鍵を15個まで扱える。入金時にはredeem scriptのハッシュ、出金時はredeem scriptを公開し必要な署名を

SVGのパスについて詳しく調べてみる（SVG.js）

SVGのパス関係の知識が必要になってきたので仕様を確認していきます。本記事では直接HTMLなどでは書かずにSVG.jsを使っていきます（ただしパスの仕様自体はHTMLでやってもSVG.jsを使っても変わりません）。

https://github.com/svgdotjs/svg.js

以下のMDNやsvg.jsのドキュメントを見ていきます。

https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Paths

https://svgjs.dev/docs/3.0/shape-elements/#svg-path

# 使うもの

– SVG.js v3.1.1
– JSFiddle （例 : https://jsfiddle.net/yar6x4hk/202/ ）

# パスの描画の基本

表示の確認のためにまずはパスの確認用の描画のインスタンスの生成処理について触れていきます。パスを描画するためにはpathメソッドを使います。引数に各パス設定の文字列を指定します。

“`js
var draw = SVG().addTo(

Googleマップをメッシュ単位で地図色塗りする

## はじめに

[Location Tech Advent Calendar](https://qiita.com/advent-calendar/2021/location-tech)の８日目の記事です。

自分は現在、技研商事インターナショナルという会社で開発を担当しています。
弊社はGISやそれに関わる製品・サービスを提供していて、今回「位置情報に関することならなんでも！」ということで参加させていただくことにしました。
扱っているサービスでは、位置情報というよりは地図と情報を結びつけるといった側面が強いので、そういったアプローチのごくライトな内容を紹介します。

## 【前提】メッシュについて
### メッシュとは

緯度・経度を元に地図を均等に分割した区域のことです。（超ざっくり説明）
メッシュは細かさで「〇次メッシュ」と種類が分けられており、下記のようになっています。

| 種類 | 説明 | 一辺のサイズ |
| —- | —- | — |
| 一次メッシュ | 縦：経度1
横：緯度2/3 | 約80km |
| 二次メッシュ

three.js を使って簡単な 3D ルーレットを作った

## 概要

ブラウザ上で JavaScript を用いて 3D 表現が出来る、three.js というライブラリがあります。今回は、こちらの three.js を用いて簡単なアプリを作ってみた、という話をしようと思います。特に大きなものを作ったわけではないので、実際の仕様やコードについても説明を加えながら進めたいと思います。

参考: [threejs.org](https://threejs.org/)

（今回は NSSOL Advent Calendar 2021 に参加するということで、新規開発して記事まで書くぞと意気込んでおりましたが、気づけば投稿日まで短いということで、過去に作ったものの紹介をさせていただきます。）

## リンク

まず、作ったものの紹介です。GitHub Pages で公開しております。

↓実際のアプリ↓

https://yuichisemura.github.io/lunchNoCohoGaRoulette/

↓リポジトリ↓

https://github.com/YuichiSemura/lunchNoCohoGaRoulette

3D表現

Symbolでの安全なトークン交換の方法と各方法のメリット,デメリットのまとめ（と有効期限の延長方法）

#概要
仮想通貨ではトークン同士の交換がよく行われます．しかし，交換する相手が必ずしも信頼できるとは限りません．通常の送金トランザクションだけで交換しようとした場合，こちらがトークンを送っても相手が持ち逃げしてしまう可能性があります．

これを防ぐためには，通常の送金トランザクション以外でトークンを交換する必要があります．Symbolではモザイク（トークン）同士を安全に交換したいに利用できるトランザクションとしては次のようなものがあります．

|トランザクション|連署の最大猶予期間|必要な署名の回数|不成立時のペナルティ|
|:-:|:-:|:-:|:-:|
|アグリゲートコンプリート|6時間(アナウンス前)|2(作成者),1(連署者)|無(TX手数料も0)|
|アグリゲートボンデッド|約2日間|1|10XYM|
|シークレットロック，プルーフ|約365日|2(連署者は１も可)|有効期限満了までモザイクロック|

モザイクの交換を行いたい場合はこのようなトランザクションを生成していれば良いのですが，各トランザクションによって有効期間も連署に必要な署名の数も変わってきます．これらをまとめ

既にあるjavascriptコールバック地獄を単純に解消する方法

##コールバック地獄の解消法
コールバック地獄の解消法は下記などあるようですが
既にあるコールバック地獄に対しては変更が多く手を出しにくいと思います。

・Promise（async/await）
・Generator

そこで今回、既にあるコールバック地獄に対し
最小限の変更でネストを解消する案を考えてみました。

##コールバック地獄サンプル

“`subroutines.js
function init(callback) {
console.log(init.name);
return callback();
}
function subroutine1(callback) {
console.log(subroutine1.name);
return callback();
}
function subroutine2(callback) {
console.log(subroutine2.name);
return callback();
}
function subroutine3(callback) {
console.log(subro

【micro:bit 2021（2つ目）】 PC と micro:bit で送受の両方を行う通信： Node.js・MakeCode でのシンプルなシリアル通信2（USBケーブル接続）

この記事は、[2021年の micro:bit のアドベントカレンダー](https://qiita.com/advent-calendar/2021/microbit) の 9日目の記事です。

以下の記事で、「micro:bit から送信する、または micro:bit で受信する」という送受のどちらか片方を使ったプログラムの話を書いていました。

●【micro:bit 2021】 PC と micro:bit を通信させる方法： Node.js・MakeCode でのシンプルなシリアル通信（USBケーブル接続） – Qiita
　https://qiita.com/youtoy/items/889f8ee3a3bd884f5df8

今回は、「micro:bit　からの送信 ⇒ PC でちょっとした処理をして応答するような処理 ⇒ micro:bit での受信」という流れをの処理をするプログラムを作ってみます。

## 環境の準備
必要なものや、Node.js　のプログラムで必要なライブラリは、[前回の記事](https://qiita.com/youtoy/items/889

React 備忘録

https://prog-8.com/

##使い方
* インポート
* クラス定義
* メソッド定義（戻り値 jsx）
* エクスポート

“`javascript
import React from ‘react’;
class App extends React.Component {
render() {
　　const text =”定数”;
　　return (
{/*jsx*/}
);
}
}
export default App;
“`

##JSXとは
* JavaScriptの拡張言
* HTMLライクな記述
* 拡張子.jsx / js

##階層構造で書く
###React.Fragment
HMTLタグとして出力されない

“`jsx
return(

React入門

React入門

)
“`
###Rea

【PixiJS 覚書】第二回 PIXI.Graphics（と、PIXI.DisplayObjectの掘り下げ）

##今回の主題
前回は基本のキ、PIXI.Applicationのインスタンスの生成から、描画の土台となる`view`、`stage`、PIXI.Containerの仕組みなどをざっと流しました。

今回は、PIXI.DisplayObjectの派生クラスの一つであるPIXI.Graphicsについて具体的な使い方を見ていきます。
また、PIXI.Graphicsを通して描画オブジェクトの基本クラスであるPIXI.DisplayObjectの機能についても軽く触れます。

##PIXI.Graphics
####描画メソッドをざっくり
名前通り「Graphics（図形）」を扱うクラスです。

リファレンス：[PIXI.Graphics](https://pixijs.download/dev/docs/PIXI.Graphics.html)

どのような図形が描けるのかをリファレンスからざっと拾い出してみましょう。
名前が「draw（図形）」となっているメソッドが描画系のメソッドです

・drawRect　（四角）
・drawRoundedRect　（角丸四角）
・drawCircle

Blazor with LeaderLine

[LeaderLine](https://anseki.github.io/leader-line/)は、JavaScriptで様々な要素に矢印をひけるJavaScriptライブラリです。
今回はこのライブラリを使って、Blazorアプリケーションに彩を添えてみたいと思います:thumbsup:

**LeaderLine**

https://anseki.github.io/leader-line/

[LeaderLine](https://anseki.github.io/leader-line/)については、いくつか記事がありますので、こちらも参照してみてください。

**JSで要素同士に線や矢印を引けるライブラリ”LeaderLine”** (@RuRey0310 さん)

https://qiita.com/RuR

Next2D NoCode ToolでJavaScriptを使う[初級編]

NoCode Toolは、JavaScriptを使用した動的なアニメーション制御も可能です。
JavaScriptの制御はキーフレームと同じく、フレーム毎に追加が可能で、主にアニメーションやムービーを反応させたり、タイムライン上でDisplayObjectを制御させたりすることができます。

今日はタイムラインを制御するコードを紹介できればと思います。

# 事前の情報共有
NoCode ToolのJavaScriptのスコープ(`this`)はJavaScriptを実行するMovieClipをスコープとして設定しています。

“`javascript
this.play();
this.stop();
this.gotoAndPlay(1);
this.gotoAndStop(“EndFrame”);
“`
上記のように、スコープ(`this`)がないと正しく起動しませんのでご注意ください。

それ以外は通常のJavaScriptと何も変わらないため、これまでの記述でもES6記述でも動かす事が可能です。

# タイムライン制御を行う関数

## Play
ムービークリップのタイム

Jestでテスト用の環境変数を設定する

“`js
describe(‘もとの環境変数はprocess.env.EXAMPLE=”origin”だが、テスト1のときだけ”hogehoge”としたい’, () => {
const OLD_ENV = process.env;

beforeEach(() => {
process.env = { …OLD_ENV };
});

afterEach(() => {
jest.clearAllMocks();
});

it(‘テスト1’, () => {
process.env.EXAMPLE = “hogehoge”
// この中ではprocess.env.EXAMPLE = “hogehoge”
});

it(‘テスト2’, () => {
// この中ではprocess.env.EXAMPLE = “origin”
});
});
“`

JavaScriptのstaticを理解する

## staticとは

**class内で使用できる、静的なメソッドを定義する際のキーワード**のことです。
以下にように、`Person.hello()`と直接呼ぶことができます。

“`javascript
class Person {
static hello() {
console.log(‘hello’);
}
}

Person.hello(); // hello
“`

このように、インスタンス化を行わずに使用できるメソッドを**静的メソッド**または**staticメソッド**と言います。

## thisは使用できない
インスタンス化を行っていないので、`Person`からインスタンスは生成されていません。
よってこの状態では**staticメソッドの中でthisを使用することはできません。**

“`javascript
class Person {
static hello() {
console.log(‘hello ‘ + this);
}
}

Person.hello();

“`
出力結果↓

“`
hello

【JS】配列操作のまとめ（map, filter, forEach, find, findIndex）

# これは何？
Javascriptを書いていると、必ずと言っていいいほど配列操作が必要になってくる場面が多いため、復習がてらに`map, filter, forEach, find, findIndex`をピックアップして配列操作に必要な知識をまとめてみました！

# map()
配列の順番通りに各要素に対して一度ずつ呼び出し`新しい配列を生成`する

“` js
const numbers = [1, 2, 3, 4, 5];

const newNumbers = numbers.map(number => number * 2);

// 出力
console.log(newNumbers);
// [2, 4, 6, 8, 10]
“`

### 返り値
– 結果からなる新しい配列
– 何もreturnしなかった場合は`undefined`になる

“` js
// 何もreturnしなかった場合

const numbers = [1, 2, 3, 4, 5];

const newNumbers = numbers.map(number => {
numbe

冬なので色んな雪を降らせてみる

#canvasを使った雪#
canvasを使った場合、描画位置によってボタンが押せなくなったり、描画範囲が決まっているのでスクロール時の再描画など気を付ける。

See the Pen
Untitled by yu2mi (@yu2mi)
on

入社一か月の新入社員がagoraで楽しいオンラインオークションイベントを考えてみた！

#**はじめに**

皆さん、こんにちは。
映像配信系の会社に入り、1か月が経ちました。
今回はagoraを使ったオンラインオークションイベントを思いつきました！
agoraのオンラインオークションイベントは、たくさんのメリットがありますのでご紹介します。

#**オンラインオークションイベント**
主催者と出品者が基本的に配信をして、視聴者はリアルタイムでオークションに入札可能なシステム

メリットとして
・コロナ禍で密にならずにイベントが開催できる。
・通常オークションイベントでは会場が狭く、代表者のみが電話をしながら参加するが、その必要がない。
・オンラインのためいつでもどこでも参加できる。
・参加チケット有無もカスタマイズ可能で、一般の人でも気軽に参加できる。
・海外からの商品は輸入関税がかからずに出品できる。
・出品物を無理に一か所に集めなくてもよいので輸送料もかからないし、セキュリティ観点からも安心。
等があげられます！

世界のコレクターたちが、様々な世界の名作を落札する瞬間を目にすることができます！
超高級でなければ、自分も札を挙げて参加できるかもしれません！
入札応

Harmoware-VIS Layersリファレンス

#前提
Harmoware-VISについては別記事
「[Harmoware-VISの紹介](https://qiita.com/ucl_Harmoware_VIS/items/e861e0f651ffde647b6a)」
「[Harmoware-VIS はじめに](https://qiita.com/ucl_Harmoware_VIS/items/8cad0b3c7737a1996e81)」
「[Harmoware-VIS APIリファレンス](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca)」
をご覧ください。

#Layersリファレンス
Harmoware-VISのLayersのリファレンスを解説します。

---

##Base Layer properties.
以降で解説するHarmoware-VISの[`MovesLayer`](https://qiita.com/ucl_Harmoware_VIS/items/cc65d90488d2f0d66ae1#moveslayer)と[`DepotsL

Webの勉強はじめてみた その10 ～JavaScriptで診断ゲーム編1～

N予備校の「プログラミング入門 Webアプリ」を受講しています。
今回は第1章15節と16節です。

用語

:::note

• モックアップ: 機能の作りこみをせず、見た目だけを作ったもの
• JS Doc: インターフェースの定義を明示したコメント形式

:::

紙に書いたものを「ペーパーモックアップ」というらしい。
ツールも色々あるけれど、個人で使うだけならちょっと重いかも。

“`javascript
/**
* 名前の文字列を渡すと診断結果を返す関数
* @param {string} userName ユーザーの名前
* @return {string} 診断結果
*/
function assessment(userName){
//TODO 診断処理を実装する
return ”;
}
“`
JSDoc形式、初めて知りましたが、これは忘れずに使っていきたい。

正規表現

正直覚えられる気がしない。

https://developer.mozilla.or

フロントエンドエンジニアへ！スパゲッティ解消法！ (自分なりのNote）

1. ビューとロジックは分けます
2. ロジックから書きます
– よくやりがちなのが、実装をビューから書き始めること。
– まずはモデルのCRUDやそれを操作(フィルター、ソートetc)するメソッドを定義します
3. それをビュー側が使うようにします

## (2)で定義するクラスとその使い方

class Table {…} // tableを操作するクラス
class TableColumn {…} // columnを司るクラス
class TableRow {…}

class TableColumnText extends TableColumn {…}
class TableColumnNumber extends TableColumn {…}
class TableColumnDate extends TableColumn {…}
class TableColumnBoolean extends TableColumn {…}

// ロジックから書く

const table = new Table(data)

t