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

Node.js関連のことを調べてみた2021年12月08日
目次

nodejsでベクトルタイルサーバーを作る(mbtilesからpbfを配信する)

## はじめに
ベクトルタイルの生産、スタイル、ホスティング、最適化、消費の各分野で少しずつノウハウを積み重ねていますが、ここでは**ベクトルタイルのホスティング**について書きたいと思います。

UNVTツールには、@hfuさんが数年前に開発した [un-vector-tile-toolkit/onyx](https://github.com/un-vector-tile-toolkit/onyx) というパッケージがあり、nodejsでのベクトルタイル配信を実現しています。タイルのホスティングにはtileserver-glやGitHubページなどいろいろ選択肢がありますが、nodejsサーバーを使った場合の利点については、以下のように考えています。

* シンプルで反応が早い。スケーラブル。
* 性能のよいサーバーにも適用できるし、ラズベリーパイのような小型PCでも実装可能。
* mapboxのnpmモジュールを使うことで、mbtilesからpbfを配信できる。
* 大容量サイズのデータ配信が容易(このツールは大容量のデータを配信したい場合に向いている。少しのデー

元記事を表示

[Nest.js] クエリパラメータをPipeを使って変換する方法

この記事は [株式会社サイバー・バズ Advent calendar 2021](https://qiita.com/advent-calendar/2021/cyberbuzz) 8日目の記事です。

# 概要
[Nest.js](https://docs.nestjs.com/)を使っている時に、`front`から受け取った`Request`を使ってゴネゴネしている時です。

すると、、

**「あれ、、、落ちる。。」**

**「想定した型と合っていない。。。」**

ということがありました。

その時の話です。

# 例
検索処理を例にあげます。

“`typescript:dto/searchItem.dto.ts
class SearchItemDTO {
minPrice: number
maxPrice: number
page: number
limit: number
}
“`

“`typescript:item/item.controller.ts
@Get()
async getItems(@Query() searchItemDTO

元記事を表示

良いbotを作るためのasync/awaitとイベントループの基本(後編)

Advent Calendar8日目は昨日に引き続き黒枝です。本日は昨日の記事の後編です。

前編では非同期処理の基本的な背景を確認しました。本日の記事では、具体例を見ることで理解を深めていきましょう。

また、2つ目の具体例では実践的な例として、強力なライブラリであるpybottersをサンプルとして紹介させていただいています。pybottersは`async/await`を取り入れて、特にソケット通信周りをすっきりとロジックに組み込む事ができる優れたライブラリです。

https://github.com/MtkN1/pybotters

pybotters製作者のまちゅけんさんによる非同期処理についての解説はこちら

https://zenn.dev/mtkn1/articles/c61e77c1d221aa

## おさらい
まずは昨日のおさらいとして、非同期処理の大事な部分を確認しておきます。

1. asyncはイベントループに制御を返す宣言である。
2. asyncは非同期処理(主にawaitを伴って定義された関数)の呼び出しに付与したときのみ働く。

それでは、具体例を

元記事を表示

【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

元記事を表示

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”
});
});
“`

元記事を表示

【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

元記事を表示

Vercelの料金プランを理解する。

## 概要

現在Vecelの料金体制について調べており、自分用にまとめたのでシェアします。

公式サイトの[Limits](https://vercel.com/docs/concepts/limits/overview#serverless-function-size)を参考にこの記事を書いています。

## この記事の目的

– Vecelの料金プランを理解する。
– 情報共有すると同時に、理解に誤りが無いかの確認。

※ 私の認識が間違っていた場合、コメント欄にてご指摘いただけると助かります?

## 解決したい課題

不安を払拭する。(読者の方も、私自身も。)

– 莫大な料金がかからないか…?
– 無料プランのままだと、運用したサービスが止まってしまわないか?

## プラン別一覧表

### 基本的な制限

| | Hobby | Pro |
| :—- | :—-: | :—-: |
| 商用利用 | X | O |
| デプロイ回数/日 | 100 | 3000 |
| CLIからのデプロイ回数/週 | 2000

元記事を表示

ImageMinimizerWebpackPluginがSquooshに対応したのでらくらく画像一括置換

# ついにImageMinimizerWebpackPluginがSquooshに対応!

12/6にメジャーアップデートがあり、ついにSqooshに対応した。
https://www.npmjs.com/package/image-minimizer-webpack-plugin

じつは今までもこのページにはSqooshの使い方が書いてあったのだが、v2ではライブラリが搭載されておらず、**GitHubからmasterをプルした場合のみ使える**状態で、ずっとアップデートを待っていた状態だったのだ。

## 特定ディレクトリ内の画像を一括で変換するだけの処理を作ってみた

### 要件

– `/src/assets/images` 以下の画像を `/public/assets/images` に吐き出す
– サブディレクトリも対象とし、階層構造を維持する
– `png`, `jpg`ファイルが対象
– Webpにロスレスで変換する。 その際のファイル名は `xxx.png.webp`, `xxx.jpg.webp`
– 読み込み元の画像が削除されても対応できるようにする
– 変

元記事を表示

【Angular/node.js】ng new しようとしたところ、Node.js version v16.1.0 detected. The Angular CLI requires a minimum Node.js version of either v12.20, v14.15, or v16.10. Please update …で実行できない。

#前提
Angularアプリを新規作成するべく、`ng new app-name`のコマンドを打ったところ、下のようなエラーがでました。

“`
Node.js version v16.1.0 detected.
The Angular CLI requires a minimum Node.js version of either v12.20, v14.15, or v16.10.

Please update your Node.js version or visit https://nodejs.org/ for additional instructions.
“`

OS:MacOS BigSur(11.6)
Node.js:nodenv(brew)

# 試したこと
エラーに書かれている通り、とりあえずnodeのバージョンをv16.10を切り替えてみました。

“`
$ nodenv local 16.1.0
“`

“`
$ nodenv versions

12.2.0
12.18.3
14.15.5
* 16.1.0 (set by /Users/***

元記事を表示

Node-RED 2.1の新機能: HTTP Requestノードのログ機能強化

# はじめに
Node-REDのHTTP Requestノードを使うと、他のWebサービスの情報を取得したりREST APIを呼び出したりということが簡単にできます。しかし、これらを多用するようになると、「なぜか反応が悪い」「どこかで固まっているようだ」などのトラブルに見舞われることも増えてきます。

このような時は、ログなどを使って何が原因なのかを調べることになるのですが、今までのNode-REDではあまり詳しいログを出力することができませんでした。このため、たとえば[フレームグラフを出力して調査する](https://nodejs.org/en/docs/guides/diagnostics-flamegraph/)などの手のかかる方法で調査をする必要があります。

Node-RED 2.1では、HTTP Requestノードのメトリックログ機能が強化され、HTTP要求を行った際の詳細なタイミングのログが取れるようになりました。これによって、例えばDNSの名前解決が遅いのでHTTP要求に時間がかかっている、などの詳細な分析が簡単に行えるようになります。

以下にて、これまでのログ出

元記事を表示

【Volta + GitHub Actions】ワークフロー内での Node.js のバージョン管理を自動化するアクションを作った話

本記事は [GitHub Actions Advent Calendar 2021](https://qiita.com/advent-calendar/2021/github-actions) の7日目の記事です?

# 作ったきっかけ
プロダクトを運用していると、定期的に言語やライブラリのバージョンアップ対応が必要になると思います。Volta を使用している場合、Node.js のバージョンを上げる時に必要な作業はこの辺りでしょうか。

– volta pin コマンドを実行して、Node.js のバージョンを上げる
– GitHub Actions で Node.js のバージョンを指定している箇所を修正する
– etc…

複数箇所に Node.js のバージョンが記述されていると、いざバージョンを上げよう!となった時に修正すべきファイルが増えてしまうので、一元管理する方法を検討していました。
そこで、今回は Volta + GitHub Actions を使っている場合に Node.js のバージョンアップ業が少しだけ楽になるアクションを作りました。

#Volta と

元記事を表示

良いbotを作るためのasync/awaitとイベントループの基本(前編)

こんにちは。暗号通貨のボッターとして活動している黒枝と申します。

Advent Calendarの7日目と8日目の枠をお借りしています。

この記事ではPythonやNodejsで利用することのできる`async/await`を用いた非同期処理について、その背景や実際のところ何を実現したいのかについて考えてみたいと思います。

この記事の目標は次のような状態を、根っこの部分を知ることで抜け出すことです。

「あれ、なんでこれ動かないんだろう…あ、await取ったら動いた。よくわからないけどまあいいか」

シングルスレッドで扱う非同期処理は安定したウェブアプリケーションを書くために非常に有効ですが、理解が浅いとアプリケーションの動きを阻害してしまいます。

本稿では、この機能をイベントループという仕組みに触れながら、前編と、後編の二回に分けて解説を試みています。

コンセプトの掘り下げを本題のため、どのようにパラレルな呼び出しをするかや、どうやって複数の非同期処理を待つのかといった実用面はカバーしていません。また、コードの中では個人的に理解の深いNode.jsのコードを合わせて取り上げ

元記事を表示

【Node.js 2021】 WAVファイルを Node.js で再生する(Mac で node-wav-player を利用する)

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

内容はタイトルの通りで、以下のものに関する記事です。

●node-wav-player – npm
 https://www.npmjs.com/package/node-wav-player

## 音の再生に必要なもの(Mac の場合)
node-wav-player のページ上部に、以下のような記載があります。

![環境.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b5ff75db-decd-8955-a498-a007a7c26f97.jpeg)

自分の場合 Mac を使っているので「afplayコマンド」が必要になるようです。
例えば、以下の記事に afplayコマンドに関する記載があります。

●afplayコマンドをつかってMacにてターミナルからコマンドで音楽ファイルを再生する ?

元記事を表示

Google AnalyticsのAPIでリアルタイムの閲覧者数が分かるノードを公開してみました。 #noderedjp

こんばんわ、この記事は[Node-REDアドベントカレンダー](https://qiita.com/advent-calendar/2021/node-red)6日目の記事です。

Google AnalyticsのAPIを使うノードが無かったので作ってみました。

https://flows.nodered.org/node/node-red-contrib-google-analytics

## Webサイトなどの現在の閲覧者数がリアルタイムで分かります。

他のAPIなども触れたら良かったのですが、とりあえずアルファ版ということでリアルタイムの数字だけ取ってみました。

ちなみに、GA4のリアルタイムは過去30分間のユーザーという値になります。

例えば僕のQiitaの実際のアナリティクス画面で見ると13人が見ているらしいです。

> ![](https://i.gyazo.com/a07d64b9a1364cbb051ece55fb7cebf8.png)

これをこのノードを使うことでこんな感じで取得できます。

> ![](https://i.gyazo.com/4fbe

元記事を表示

Windowsでnodeのプロセス終了させる方法

JSフレームワークで「Port 3000 is already in use.」的なエラーが出てしまった時用のショートカット。
検索してもLinaxの解決方法ばかりで、若干探しにくいので備忘録的に書きておきます。

##実行コマンド
コマンドプロンプト等で実行。

“`
//エラーでalreadyになっているポート番号を最後に入れる
netstat -aon | findstr 0.0:3000

//下記は帰ってくる値の例 最後の数値をコピー
//TCP 0.0.0.0:3000 0.0.0.0:0 LISTENING 15856
“`

“`
//先ほど表示された数値を入れて実行
taskkill /pid 15856 /F
“`

###Linaxでの解決方法
“`
lsof -i:3000

//上のやり方と同様に帰ってきた数値を記入 5298部分
kill -9 5298
“`

元記事を表示

Javascriptのテクニック集①

# これは何?
気になった・実際に使ってみたいと思った Javascriptのテクニックをまとめてみました!!

## 参考にした記事
https://dev.to/irmerk/modern-javascript-techniques-4chc

—-
## 配列の初期化
配列のlengthプロパティを0にすることで、配列の中身を空にすることができる。

“` js
let array = [0, 1, 2, 3, 4]

array.length = 0
console.log(array); //[]
“`

また、他の配列の初期化方法として、単に[]を代入する方法がある。

“` js
let array = [“a”, “b”, “c”];

array=[];
console.log(array); //[]
“`

lengthを0にする場合との違いは、`再代入するのか`・`ただ、配列の中身を変更するのか`である
`let`ではなく、`const`を使用すると分かりやすい。

“` js
// lengthの場合
const array1 = [0, 1,

元記事を表示

?テストツール dredd? openapi の内容でテストを実行する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2291204/8682712f-2deb-d190-7bd3-d4d3b427b46a.png)

前職で使っていたツールの dredd について書いてみたいと思います。

dredd 公式サイト:
[Dredd — HTTP API Testing Framework — Dredd latest documentation](https://dredd.org/en/latest/index.html)

公式サイトより、issue のほうがいろいろ情報あるかも:
[Issues · apiaryio/dredd](https://github.com/apiaryio/dredd/issues)

dredd は openapi の仕様書をもとに、テストを自動で行ってるツールです。
(※api blueprint で書かれた仕様書でもOK)
すでに、openapi の仕様書を管理しているプロジェクトであれば、すぐに導入してテスト自動

元記事を表示

WoTとCHIRIMENについて

この記事は、 [大阪工業大学 Advent Calendar 2021](https://adventar.org/calendars/6716)の6日目の記事です。
(大阪工業大学 Advent Calendarは)初投稿です。
せっかくなので私が研究している分野であるWoTと使用しているCHIRIMENについて書いてみようと思います。

## WoTとは?
今回WoTについて2つのことを覚えていってください。
##### 1つ目が「”World of Tanks”の略ではない」ということです。
WoTとは、Web of Thingsの略で「モノのWeb」という意味です。IoTはInternet of Thingsの略で「モノのインターネット」という意味なのでその派生形だと思ってください。

※WoTについて詳しく知りたい人は”WoT”で検索するのではなく”Web of Things”で検索してください。そうしないとトップに”World of Tanks”の攻略記事しか出てこないので…

##### 2つ目が「WoTとは一体何なのか?」ということです。

IoTでは、様々なモノ同士が

元記事を表示

WebエンジニアのためのSymbol開発チュートリアル(Symbol Bootcamp for Developers)

株式会社CauchyEでエンジニアをしている松岡靖典と申します。NPO法人NEMTUSの設立メンバーでもあります。個人的にもNEM/Symbolを用いた開発に興味を持って色々と活動しています。

この記事では、NEM(NIS1)の次期バージョンとして2021年3月にとうとうローンチされたSymbolを用いたWeb開発を行うにあたり、Symbolブロックチェーンから必要な情報を参照したり、トランザクションを送信したりする方法の概要やコツのようなものをお伝えできればと思います。

## 本記事の実装について

以下レポジトリにてソースコードを共有しています。必要に応じてご参照ください。記事中のソースコードは一部のみが示されていてimport元の実装が明示されていない部分も多々あるので、必要に応じてこちらのレポジトリの内容を参照しながら内容を確認頂くとよいかと思います。

https://github.com/public-archive-service/sdk-typescript

## ノード

Symbolでは全世界に分散化された多数のフルノードが存在し、それらのフルノードではRes

元記事を表示

ベクトルタイルを使って星の海を探検する

ガイア計画というものを知りました。

https://ja.wikipedia.org/wiki/%E3%82%AC%E3%82%A4%E3%82%A2%E8%A8%88%E7%94%BB

https://www.cosmos.esa.int/web/gaia/home

欧州宇宙機関 (ESA) が打ち上げた専用の探査機で全天球の天体を観測してデータを蓄積するプロジェクトで、現在のデータ量は1.8TB、観測された天体の数は約1,900億個だそうです。このデータを利用して全天球の星の地図を作ってみました。 

### データのダウンロード

ガイア計画のデータは以下でアーカイブされていて、自由に利用できます。日本にもミラーサイトがあり国立天文台のウェブサイト jvo.nao.ac.jp からデータをダウンロードできます。今回は作業時点で最も新しい [EDR3](https://www.cosmos.esa.int/web/gaia/earlydr3) (Early Data Research 3) を使いました。

https://gea.esac.esa.int/archive

元記事を表示

OTHERカテゴリの最新記事