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

【Harmoware-VIS】移動体アイコンを複数レイヤーで表示

#Harmoware-VIS とは

https://qiita.com/ucl_Harmoware_VIS/items/e861e0f651ffde647b6a

#移動体アイコンを複数レイヤーで表示

Harmoware-VIS で移動体を表示する [`MovesLayer`](https://qiita.com/ucl_Harmoware_VIS/items/cc65d90488d2f0d66ae1#moveslayer) は、Harmoware-VIS で移動体データが複数管理できないため、重複させることが出来ません。
その問題を解決するため、一つの移動体データ内で移動体の type を識別することで、 [`MovesLayer`](https://qiita.com/ucl_Harmoware_VIS/items/cc65d90488d2f0d66ae1#moveslayer) 内で複数のアイコンレイヤーを重ねることが出来ます。

移動体データの type 定義の例

“`json
[ //移動体データの配列
{“type”: “train”, //この移動体のty

【Harmoware-VIS】独自のActionを追加する

#Harmoware-VIS とは

https://qiita.com/ucl_Harmoware_VIS/items/e861e0f651ffde647b6a

#独自のActionを追加する

Harmoware-VIS を使用したアプリで独自の`Action（reducer）`をマージしたい場合は以下のようにします。
React.jsの作法と同じです

“`index.js
import { render } from ‘react-dom’;
import { createStore } from ‘redux’;
import { Provider } from ‘react-redux’;
import { getCombinedReducer } from ‘harmoware-vis’;
import * as React from ‘react’;
import App from ‘./containers’;
import reducer from ‘./reducers’; //独自のreducerをimport

// importした独自のreducerを

【Harmoware-VIS】OBJフォーマットのデータをアイコンに設定

#Harmoware-VIS とは

https://qiita.com/ucl_Harmoware_VIS/items/e861e0f651ffde647b6a

#OBJフォーマットのデータをアイコンに設定

３ＤアイコンとしてＯＢＪフォーマットのデータを使用する場合の手順

[`@loaders.gl/obj`](https://www.npmjs.com/package/@loaders.gl/obj)をインストールします。

“`console
npm i @loaders.gl/obj
“`

[`@loaders.gl/obj`](https://www.npmjs.com/package/@loaders.gl/obj)の`OBJLoader`を`registerLoaders`で登録します。

“`javascript
import {registerLoaders} from ‘@loaders.gl/core’;
import {OBJLoader} from ‘@loaders.gl/obj’;
registerLoaders([OBJLoader]);

【Harmoware-VIS】シミュレーションの再生速度の値を変更

#Harmoware-VIS とは

https://qiita.com/ucl_Harmoware_VIS/items/e861e0f651ffde647b6a

#シミュレーションの再生速度の値を変更
Harmoware-VISでのシミュレーション時の再生速度（[`secperhour`](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#secperhour-number)）のデフォルト値は180です。
１時間分のデータを180秒で再生します。

この再生速度を変更するには以下のコードを使用します。

“`javascript
this.props.actions.setSecPerHour(720);
“`

上記の例で設定すると、１時間分のデータを720秒で再生します。
ちなみに実際と同じ速度で再生する場合は3600を設定します。

---

また「`secperhour`」の他に「[`multiplySpeed`](https://qiita.com/ucl_Harmoware_VIS/item

【Harmoware-VIS】デフォルト表示の３Ｄ建築物を非表示にする

#Harmoware-VIS とは

https://qiita.com/ucl_Harmoware_VIS/items/e861e0f651ffde647b6a

#デフォルト表示の３Ｄ建築物を非表示にする
[HarmoVisLayers](https://qiita.com/ucl_Harmoware_VIS/items/ea97c5e0e112a3d0ecca#harmovislayers) コンポーネントのpropsのmapboxAddLayerValueにnullを設定します。

“`javascript

“`

mapboxAddLayerValueのデフォルト値は以下です。

“`javascript
mapboxAddLayerValue: [{
“id”: ‘3d-buildings’,
“source”: ‘composite’,
“source-layer”: ‘building’,
“filter”

Harmoware-VIS css リファレンス

#前提
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)」
「[Harmoware-VIS Layersリファレンス](https://qiita.com/ucl_Harmoware_VIS/items/cc65d90488d2f0d66ae1)」
「[Harmoware-VIS Control component リファレンス](https://qiita.com/ucl_Harmoware_VIS/items/7315ccff187ca608c0db)」
をご覧ください。

音声認識をして特定の言葉をカウントしたい

#おもてなしを見える化するIoTがつくりたい！！

普段は居酒屋で働いており、プログラミングとは無縁なのですが、
おもてなしが見える化するIoTをつくりたい！！と思い、一念発起！
お休みの日にプログラミングを学びながら、日々挑戦をしています！

#やりたい企画を具体的に描く
最終的にはクラウドファンディングを行い、
共感してくださる仲間とともに、おもてなしを向上させていきたいと思っています。
今まではぼんやりと「おもてなしが見える化するIoT」というぼんやりしたものだったのですが、
「お見送り」に焦点を絞り、
・スタッフの「ありがとうございました」を計測する。
・お客様の「ありがとう」を計測する。
・その数をスプレッドシートにデータとして見える化する。
というステップで**実装

【Node.js 2021（2つ目）】 Node.js での UDP・TCP通信をシンプルに試す（2021年12月）

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

内容は、以下の記事を書く中で使った「zigsim-ws」の中で利用されている「dgram」が気になって調べたり試したりしたことを、記事として書いた形です。

●【IoTLT 2021】 ZIG SIM から送られるデータを p5.js Web Editor上で活用してみる – Qiita
　https://qiita.com/youtoy/items/caca41a68ab3bff6ffa6

## zigsim-ws のプログラムと UDP通信
zigsim-ws は、プロトタイピングに役立つスマホアプリの「ZIG SIM」を、ブラウザ（HTML＋JavaScript のプログラム）との間で通信させる時に利用するものです。
軽く補足をすると、ZIG SIM がデータを送る時に用いる通信が UDP・TCP で、ブラウザ上の JavaScript のプログラムでは直接は扱えないものになるので、それら

Harmoware-VIS Control component リファレンス

#前提
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)」
「[Harmoware-VIS Layersリファレンス](https://qiita.com/ucl_Harmoware_VIS/items/cc65d90488d2f0d66ae1)」
をご覧ください。
#Control component リファレンス
Harmoware-VIS の Control component のリファレンスを解説します。

---

##MovesInput
MovesInputでは、

【JavaScript関数ドリル】中級編のunion関数の実装のアウトプット

## 課題内容

【中級】union関数の実装

## 方針
– 仮引数で受け取った複数のarrayをループ
– さらにarrayの中身をループ
– 新しいarrayに要素をひとつずつpush（同じ要素が含まれていない場合のみ）
includesメソッドで判定していく

“`js
function union (…arrays){
let result = [];
for (let i = 0 ; i < arrays.length ; i ++){ let currentArray = arrays[i] for (let j = 0 ; j < currentArray.length ; j ++){ // console.log(currentArray) if(!result.includes(currentArray[j])){ result.push(currentArray[j]); } } } return result; } conso

Node.js(Express)の開発環境を整備する　ESLint / Prettier / Visual Studio Code / ホットリロード

## はじめに
自分でちょっとしたWebアプリを作ったりする事があるが、その時の開発環境は結構適当だったりした。ただ、今後の事を考えるとちゃんと静的解析とかを入れ込んだ開発環境を作れるようになっておくほうがいいと思い今回ちゃんとした環境の構築をやってみたので、その備忘録を残す。

行った設定は、

– Expressサーバのホットリロード対応
– webpack
– ESLint × Prettier
– VS Code

の4つ。

※以下の記事では、webapckでのバンドルをbuildという言い方をしている部分がある（buildツールとしてwebapckが紹介されるのでいいと思っている）。

GitHubのコードは以下（Step2の章の部分がこの記事でやった内容になっている）。

https://github.com/yuta-katayama-23/node-express

## Express serverのホットリロード
特に難しい事はなく、webpackの[watch](https://webpack.js.org/api/cli/#watch)と[nodemon](h

いろんなJavaScriptのテストフレームワークを試してみる！

[Ateam Brides Inc. Advent Calendar 2021](https://qiita.com/advent-calendar/2021/ateam-brides)の9日目は
株式会社エイチームブライズの@oekazumaが担当します。

# はじめに
今回試すJavaScriptのテストフレームワークは[Jest](https://github.com/facebook/jest)、[AVA](https://github.com/avajs/ava)、[Mocha](https://github.com/mochajs/mocha)、[tape](https://github.com/substack/tape)、[Jasmine](https://github.com/jasmine/jasmine)、[uvu](https://github.com/lukeed/uvu)です。

今回使用したコードはこちら
https://github.com/oekazuma/test-runner-compare

テストするコードは簡単な計算をするプログラムを用意し

【Next.js11】next/scriptで外部スクリプトの実行順序を制御する

## はじめに
WEBサイトでは外部スクリプト、例えば広告計測用のGoogle/Yahoo/Facebookタグを入れていることがほとんどだと思います。今回広告計測用ではありませんが、ある外部スクリプトを必ず読み込んでからでないと、実行できない処理があり、Next.js11のnext/scriptで解決できたのでご紹介します。

また、外部スクリプトは読み込みパフォーマンスがLCP低下の要因となり、ユーザーエクスペリエンスを損ねてしまう可能性があります。そんなときに、Next.js11のnext/scriptを使えば、スクリプトの実行順序を制御でき、問題を改善できるのでオススメです。

## next/script とは
2021/6/16に発表されたNext.js11の新機能です。

> With `next/script`, you can define the `strategy` property and Next.js will automatically prioritize them to improve loading performance:

> – `before

Webブラウザの判定 ~社内で大不評の【誰得？】シリーズ~

[パーソンリンク アドベントカレンダー](https://qiita.com/advent-calendar/2021/personlink)9日目です！?

# 内容
“`
const UA = window.navigator.userAgent.toLowerCase();

if (UA.indexOf(‘msie’) != -1 || UA.indexOf(‘trident’) != -1) {
console.log(‘IE’);
} else if (UA.indexOf(‘edge’) != -1) {
console.log(‘Edge’);
} else if (UA.indexOf(‘chrome’) != -1) {
console.log(‘Chrome’);
} else if (UA.indexOf(‘safari’) != -1) {
console.log(‘Safari’);
} else if (UA.indexOf(‘firefox’) != -1) {
console.log(‘Firefox’);
}

[Svelte] 動的にHTMLタグを切り替えたい（dynamic elements）

## はじめに

この記事は[Svelte Advent Calendar 2021](https://qiita.com/advent-calendar/2021/svelte) 9日目の記事です。

React に疲れてきて Svelte に移りたい今日この頃です。
Svelte いいですね。ローカル変数をいじくり回しているだけで状態変更やリアクティブな動作が発動するのは書いていて気持ちがいいです。
とはいえ、他と比べると後発ということもありライブラリ等はあまり充実おらず、ちょくちょく自作の必要があるのは大変だったりします。

そんな中、Svelte を触っていて動的に HTML タグを切り替えたいと思い、公式ドキュメントを見ていたものの記述がありませんでした。
コンポーネント自体を切り替える機能（[dynamic components](https://svelte.dev/tutorial/svelte-component)）はあるものの、HTML タグはコンポーネントとして用意されていないので、HTML タグの切り替えはできないことがわかりました。
これに関して、Issue

ググり力、それはエンジニアには必須の能力である

**ググり力**、それはエンジニアにとっては **必須の能力** になりつつあると思います。
さて、皆さんは自分のググり力で欲しい情報にちゃんとたどり着けると言えますか？

@Yametaro さんからのお題です。

“`
ある日、コードレビュー中ワイ
ワイ「さぁ、今日も同僚のコードをレビューしていくでぇ」
ワイ「まずは新卒のT君のコードを読んでいこか」
ワイ「どれどれ…」
ワイ「ん？なんやこの??っていう書き方は…？」
ワイ「ググってみよか…」
ワイ「JavaScript ??と入力して、検索ボタンをポチッとな」
ワイ「…あれ？それらしい検索結果が出てこんな…」
ワイ「ぐぬぬ、記号関係はググりづらいこともあるんやな…」
ワイ「これじゃあ今日はもう、酒飲んで寝るしかないやないか…」

〜飲酒、そして就寝へ…〜
“`

では JavaScript で ?? の検索方法はどうしたらいいのか？ ここに１つの解答を示しておきます！
**「javascript double question mark」と検索すること** です。

![javascript_??](https://raw.g

動画 → GIFアニメーションをサクッと作成

#はじめに
JavaScriptベースの動画編集サービス・[Double TONE – https://doubletone.jp](https://doubletone.jp)を作っており、**2021年12月1日にオープンベータ版として、一般公開しました！**(PC / Mac版のGoogle Chromeのみで動作します)

#簡単なサービスのご紹介
– [Double TONE – https://doubletone.jp](https://doubletone.jp)
– サービス名：Double TONE（ダブルトーン）
– ブラウザ上で動作する動画編集サービスです
– 基本的な編集作業はブラウザ上で完結します
– レンダリングもブラウザ上でやります
– 動画や写真などの素材もアップロード不要です
– SNSに直接アップロードできます
– ユーザー登録はありません
– もちろん**無料**です

以下の記事にサービスの照会を記載しています。
[JavaScriptベースの動画編集サービスを作ってます – https://qiita.com/taukuma/items/eb

p5.jsの関数まとめ part.8 line()

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

## これはなに
p5.jsが用意している関数について理解を深める記事です。
今回はShapeのline()について。

## line()
文字通り、canvasに線を描画するための関数です。

### リファレンスより
> スクリーンに線（2点間の直接の経路）を描画します。パラメータを4つだけ指定して呼び出すと、デフォルトで1ピクセルの幅で2Dの線を描画します。この幅は、strokeWeight()関数を使って変更することができます。線は塗りつぶすことができないので、fill()関数は線の色に影響を与えません。したがって、線に色をつけるには、stroke()関数を使います。（DeepL翻訳）

stroke()なんかも話題に出そうとしていたのですが、リファレンスがご丁寧でした。

ちなみにfill()とは矩形（rect()）の中の色を指定するときに使ったりします。
line()はそもそも線なので、fill()は使えないよということが書かれています。
（rect() の枠線の色を変えたいときにはstroke(

【TypeScript】neverを使って実装漏れを型エラーで検知する

本記事は[Advent Calendar 2021「タイムリープTypeScript 〜TypeScript始めたてのあの頃に知っておきたかったこと〜」](https://qiita.com/advent-calendar/2021/timeleap-typescript)9日目の記事です。

## 概要

個人的にTypeScriptを始めた頃に用途を知っておきたかった型No.1の `never` について紹介します。
neverは値が存在しないことを表現することができる型です。
「値が無い型をいつ使うんだ？」と私も当初考えていましたが、値が存在しない型というのを逆に考えると「never型に値が代入されるコードを書くと型エラーになる」ということです。

この「代入されると型エラーになる」という仕組みを使うと実装漏れを型エラーで指摘してくれるようになります。特にこの恩恵はスキーマ駆動で型を自動生成しているときに感じることが多いです。

## 例

neverの使い方が一番わかりやすいのはEnum型もしくはUnion型の値を判別して処理を行う場合でしょう。

特定の状態を表すステータスと

JavaScript ⇄ AWS (API Gateway & Lambda) でデータやりとり

# はじめに
下の記事で、JavaScriptを使ってフォトシャワー表示をするフロントエンドを記述していました。
[フォルダ内の写真をフォトシャワーで表示してみる
](https://qiita.com/tomtom_pudding/items/be8b26dff40ece88d0b9)

今回は、AWS S3に保存されている写真を取得して表示をしてみたいと思います。つまりこんなイメージです。
JavaScriptの正式なロゴってこれであっているのだろうか…

# JavaScriptとAWS API Gatewayをつないで情報をLambdaへ送信
API Keyを用いたアクセスキー認証で行います。
LambdaとGatewayの連携、API Keyの取得方法に関しては以下の記事がとてもわかりやすいです。さすがはクラスメソッド様。。。
[