Node.js関連のことを調べてみた2022年05月27日

Windows への Node.js（npm）のインストール

Windows10 のPCに[Node.js](https://nodejs.org/ja/about/) とパッケージ管理システム [npm](https://ja.wikipedia.org/wiki/Npm_(%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%83%84%E3%83%BC%E3%83%AB)) (Node Package Manager) をインストールして確認するまでの手順を備忘録としてまとめました。参考にして頂ければ幸いです。

– 前提条件（環境）
– インストーラーのダウンロード
– Node.jsのインストール
– インストール完了の確認

# 前提条件（環境）

今回インストールするハードウェアの Windows の仕様は次の通りです。

– Windows 10 Pro 21H2

# インストーラーのダウンロード

Node.jsの[公式日本語サイト](https://nodejs.org/ja/)にアクセスすると、OSに対応したインストーラが表示されるので、そのま

ReactのチュートリアルをElectronで動かす

# はじめに
「チュートリアル：Reactの導入」を一通り終えたとき、完成したコードをElectronで動かしたくなった。そこで、Parcelを使ってシンプルに構成してみる。`webpack.config.js`は書きたくない。:angry:

https://ja.reactjs.org/tutorial/tutorial.html

# 完成品
ビルドはしていない。
https://github.com/Hellokichi/electron-react-tutorial

# 環境
– windows 11 Pro
– node.js 16.15.0
– electron 19.0.0
– react 18.1.0
– parcel-bunlder 1.12.5

# ディレクトリ構成
“`
./
├ node_modules/
├ parceled/
│ ├ index.html
│ ├ src.js
│ └ src.css
├ dist/
│ └ react_tutorial 1.0.0.exe
├ electron/
│ ├ main.js
│ └ prelo

forループ内でawaitしたらESLintにtoo heavyweightって言われたから本当なのか試してみた　ESLintのno-await-in-loopルールの意味

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/nc00ff7e03539

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です。**

Youtube DATA APIで再生リストへの追加をNode.jsから行うメモ

[こちら記事](https://blog.n-t.jp/post/tech/youtube-data-api-insert-playlistitems/) をもとにこんな感じでまとめてみました。

認証周りのコードを書いてないのであくまでも自分用メモです。

`YYYYYYYYY`に再生リストのID、`XXXXXXXXX`にYoutubeのVideoIdを入れれば動きます。

“`js
‘use strict’;

require(‘dotenv’).config();

const tokenAuth = require(‘../libs/tokenAuth’); //トークンの認証
const {google} = require(‘googleapis’);

const main = async params => {
const credentials = process.env.YOUTUBE_DS_CREDENTIALS;
const token = process.env.YOUTUBE_POS_BACKUP_TOKEN;

con

XMLをJSONに変換できるxml2js

とあるAPIで返ってくるレスポンスがXML形式だったため、jsonに変換したくて方法を探していたところ、
xmlをjsonに変換できる「xml2js」というモジュールがあることが分かったので、実際に使ってみました。

## xml2jsをインストール
まず初めにxml2jsをインストールします。
“`
$ npm install xml2js
“`

そして、xml2jsをrequireでインポートします。

“`javascript
const xml2js = require(‘xml2js’);
“`

この時、Typescriptを使っていたので、エディタ上で下記のようなエラーが出ました。
`ESLint: Require statement not part of import statement.(@typescript-eslint/no-var-requires)`

これを回避するには、`@types/xml2js`をインストールして、それをインポートします。
“`
$ npm install –save @types/xml2js
“`

“`ja

【typescript】WebRTCによるビデオ通話を簡単に繋げてみる

これらの記事を参考に、WebRTCのP2P通信を繋げていく。
https://html5experts.jp/mganeko/19814/
https://html5experts.jp/mganeko/20013/

## WebRTCって何？

WebRTC(Web Real-Time Communication)とは、ブラウザやアプリ間でリアルタイムに映像・音楽等を送受信するための技術。サーバーを経由しないP2P通信を行い、かつ通信プロトコルにはTCPではなくUDPを採用することで大量のデータをリアルタイムに高速で送受信することができる。

WebRTCを行うためのRTCPeerConnectionオブジェクトは以下のように作成する。

“`ts
let peer = new RTCPeerConnection();
“`

双方向のクライアントがこのオブジェクトを持つことで通信を行うが、そのためにはそれぞれのSDPを交換するプロセスを踏む必要がある。

## SDPの交換

SDP(Session Description Protocol)とは、ざっくり言うと「データの送り

npm proxy を .npmrc に書いて楽をする

# 前提確認
社内ネットワークなどでプロキシを使用している場合に，`npm` や `git` など様々なコマンドがそのままでは利用できない．この問題を解決する手段として，コマンドにプロキシを設定するやり方がある．

今回は `npm` での設定方法について記述する．

# コマンドラインでの設定
全てのプロジェクトに設定したい場合，以下のように設定すれば基本は問題ない（はず）．

“`bash
npm -g config set proxy http://: npm -g config set https-proxy http://: npm -g config set registry http://: “`

なお，これらの設定を解除するには，次の通り実行する．

“`bash
npm -g config delete proxy
npm -g config delete https-proxy
npm

Do not access Object.prototype method ‘hasOwnProperty’ from target object no-prototype-builtinsの対処法

## はじめに

eslint実施時に以下のエラーが出たため、その時の対応をまとめました。

“`bash
Do not access Object.prototype method ‘hasOwnProperty’ from target object no-prototype-builtins
“`

## 問題のコード

“`js
const hasProperty = entry.hasOwnProperty(‘Key’);
if (hasProperty) {
// 処理
}
“`

## 改善したコード

以下のように`Object.prototype`を使うことでエラーが出なくなりました。

“`js
const hasProperty = Object.prototype.hasOwnProperty.call(entry, ‘Key’);
if (hasProperty) {
// 処理
}
“`

## 参考
https://stackoverflow.com/questions/39282873/object-hasownproperty-yi

【typescript】socket.ioでサーバー-クライアント間のやり取りを簡単に行う

## socket.ioって何？

socket.ioとは、Node.jsサーバーとクライアント間の“`WebSocket“`通信を簡単に行うためのライブラリ。

単純に“`WebSocket“`を使うだけではなく必要に応じて“`polling“`等の別の最適な形式に切り替える機能や、ルーム機能・全クライアントへのブロードキャスト処理等が含まれている。

これを用いてクライアント・サーバー間の送受信処理を作成してみる。

以下のようにnpm installし導入する。

“`
npm install socket.io
npm install socket.io-client
“`

## まずはhttpモジュールからサーバーを立てる

まずはNode.jsのサーバーとしてhttpオブジェクトを用いる。以下のようにimport、サーバーの作成を行う。

“`ts:server.ts
import http from ‘http’;

const server: http.Server = http.createServer();
“`

## socket.ioでs

Nodeのバージョン管理にfnmを導入した

# 経緯
Nodeのバージョン管理にfnmを導入してみました。
ぶっちゃけ何でも良いと思っていましたが、
リポジトリによっては `.node_versions` とか`.nvmrc`とか色々あって面倒なのでどちらでも自動切換え&自動インストールしてくれる**fnm**にしてみようと思ったわけです。
あとRust製で速いらしいし。

# 環境
– WSL2 (Ubuntu20.04)

# 手順
[公式のREADME](https://github.com/Schniz/fnm)に全部書いているので、その通りにやればいけます。

`curl -fsSL https://fnm.vercel.app/install | bash`するか
or
何かしらのパッケージ管理ツールでinstallしてshellにちょっと追記する。
例えばbashの場合は`.bashrc`に`eval “$(fnm env –use-on-cd)”`を書くだけです。
どこかの記事で「`.bashrc`に関数を追加する」みたいな手順も見かけましたが、自分の場合は特に追加せずとも自動インストールが動きました。

WS

JavaScriptで一定時間待つ処理を入れたい

## はじめに
Lambdaの関数のテスト目的であえて一定時間待つ処理を入れたかったので、その方法を調べました。

## コード

“`js
exports.handler = async event => {
console.log(‘start timer’);
await delay(5000);
console.log(‘After 5 seconds’);
};

const delay = time => {
return new Promise(resolve => setTimeout(resolve, time));
};
“`

## 参考
https://masteringjs.io/tutorials/fundamentals/wait-1-second-then

Jestでuuidを固定してテストしたい

## はじめに
Jestでuuidを含むテストコードを書く際に、uuidが毎回違う値が生成されてしまうため、固定する必要があったのでその方法を整理しました。

## 結論

以下コードにより、uuidを固定してテストができます。
以下の例だと、uuidを123と固定してテストを実施できます。

“`js
import * as uuid from “uuid”;
jest.mock(“uuid”);
describe(“someTest”, () => {
const uuidSpy = jest.spyOn(uuid, “v4”);
uuidSpy.mockReturnValue(“123”);
}
“`

## 参考

https://dev.classmethod.jp/articles/mocking-uuid-generation-in-jest/
https://stackoverflow.com/questions/51383177/how-to-mock-uuid-with-jest

Vue 3.0 composition apiによるAWS サーバーレス開発　シリーズ①　環境設定

# フロント:Vue.js-cli 3.0 + axios + vue-datepicker + json server

まずフロント側から着手、なんせまず動かすことが大事。
## 事前作業
Node.js , Vue.js 3.0 cli,Git,json_sever,vs_codeのインストール(いずれ最新のもので良い)
## コマンドプロンプトで環境設定
“`
mkdir vue-app
cd vue-app
vue create develop
“`
Manually select featuresを以下のように選択
>select Babel,Router,Vuex,CSS Pre-processors,ESLint+error only,Unit Testing:Jest,E2E:Cypress;

残りはすべてEnterキーで完了させる。
“`
cd develop
npm install axios –save
npm install –save sass-loader node-sass
npm install @vuepic/vue-datepic

Node.js update 手順 for Mac

Macにインストールして普段使用しているNode.jsのバージョンが古くなったのでアップデートした時の備忘録。
# 使用するミドルウェア
“`
Homebrew ・・・　Mac OS のパッケージマネージャー
nodebrew ・・・ Node.js のバージョン管理ツール
Node.js ・・・ JavaScript 実行環境
npm ・・・ Node.js のパッケージマネージャー
“`
# 現状のバージョン確認
### Homebrew
“`
$ brew -v
Homebrew 3.3.16
“`
最新版は[こちら](https://github.com/Homebrew/brew/releases)　// 3.4.11(2022/05/22時点)
### nodebrew
“`
$ nodebrew -v
nodebrew 1.1.0
“`
最新版は[こちら](https://formulae.brew.sh/formula/nodebrew)　// 1.2.0(2022/05/22時点)
### Node.js
“`
$ node -v
v14.17.0

$

node(ts)でlambdaを非同期で起動

# はじめに
@aws-sdk/client-lambdaを使った具体例があまり見つからなかったので、自分の再利用時用に簡単な例をという感じでの記事です。

※ローカル実行したサンプルです。

# 環境
– node:v16 (ts)
– @aws-sdk/client-lambda
– LambdaClient
– InvokeCommand
– InvokeCommandInput

“` yarn add @aws-sdk/client-lambda“`

# 実行権限　（未検証）
※ローカルで試したので検証していないですが、AWS上で実行する場合は、実行元に下記のようなロールが必要なはず。
“`
{
“Version”: “2012-10-17”,
“Statement”: [
{
“Sid”: “PermissionToInvoke”,
“Effect”: “Allow”,
“Action”: “lambda:InvokeFunction”,
“Resource”: “arn:aws

【TypeScript】EventEmitterを継承してクラスを作る

typescriptにおいてEventEmitterを継承したクラスを作成します。

## EventEmitterとは？

Node.jsの標準モジュールの一つ、Eventsから読み込めるクラス。イベントリスナー(イベント実行時に動く関数)の登録を行い、イベントの実行をトリガーとして登録した処理を実行することができる。

## EventEmitterを使ってみよう

EventEmitterをimportし、インスタンスを作成します。

“`typescript
import { EventEmitter } from “events”;
const emitter = new EventEmitter();
“`

イベントリスナーの登録処理は“`eventEmitter.on“`もしくは“`eventEmitter.addListener“`で行います。ちなみにこの二つは[同じものだそうです](https://github.com/nodejs/node-v0.x-archive/blob/master/lib/events.js#L188)。

“`typesc

【Electron】メモ

## メモ
WEB技術でデスクトップアプリケーションを開発できるFWのElectronについて、メモしました。

## 目次
– IPC通信について：メインプロセスとレンダラプロセス
– IPC通信とは何か？
– `main.js`の説明
– `ipcMain.handle()メソッド`
– `renderer.js`の説明
– `ipcRenderer.invoke()メソッド`
– `preload.js`の説明
– アプリケーションの実行方法

## IPC通信とは何か？

### メインプロセス側： `main.js`
`ipcMain.handle()`メソッドを使用します。

`ipcMain`モジュールはメインプロセスで、レンダラプロセスから送信されるメッセージを受信して処理します。
基本的にメインプロセスは受け身で受信したら送信元のレンダラプロセスに対して返信するみたいな動きになります。

### レンダラプロセス側： `renderer.js`
`ipcRender.invoke()`メソッドを使用します。
メインプロセスに対して、同期、非同

Node.jsのsokect.ioを使ってのPUSH通知を作ってみた

こんにちは、wattak です。

50の手習いで Web アプリを作ってみよう、と色々と調べておりまして、自分の備忘録もかねて作ってみた実装をこちらに投稿しようと思います。
## 今回のプログラム
任意のタイミングでサーバーからクライアントへ PUSH する仕組みを持つ環境を Node.js を使って構築してみました。

なお PUSH の仕組みは記事のタグにも記載しましたが socket.io の仕組みを使っております。
## 処理概要
以下のようなイメージで構築しようと考えております。

1.クライアントから接続要求
2.サーバーにてクライアント情報を追加
3.クライアントから受付要求
4.サーバーにて登録処理して応答
5.以後、任意のタイミングでサーバーからクライアントへ PUSH 通知

「任意のタイミング」については PUSH 用に RestAPI を用意し API コールのタイミングで通知を行うことにしました。
## 処理イメージ
ポンチ画レベルのシーケンスで恐縮ですが1.～5.の処理イメージを描いてみました。
![qiita_image.jpeg](https://qi

Reactnative/Expoでレシート印刷の receiptline を使ってみた

　今回はNode.js用にOFSC（一般社団法人オープン・フードサービス・システム・コンソーシアム）で開発されたレシート記述言語 ReceiptLineをReactnative/Expoで使えるようにしてみた方法の紹介です。
　発端は下記の記事で面白いなと感じた事で、その後色々調べてみると最近iPad等のタブレットを利用した各種POSレジソフトが普及しつつあるので、スマホやタブレット用のレシート印刷アプリのニーズが在りそうに思ったことと、結構POSレジソフトはプリンターの対応機種を限定しており、AppleのAirPrint対応機種も最近増えてますが古いプリンターは対応できない等の問題が有りそうなこと等です。
[　リンク：Qiita 簡単レシート印刷 receiptlineと20行のJavaScriptでレジプリンターをインスタントカメラにしてみた](https://qiita.com/dopperi46/items/1d2b92ba6a4cb6f79c19)
　この記事の主な内容はこんな感じです。
１．レシート記述言語receiptlineとは何？
２．node.js用のモジュールを

M1 macbookでnodebrew installできないとき

## いつも忘れること
– M1　macbookに変えてから、npm使っているとたまに下記サイトのようなエラーに出会う。

https://zenn.dev/catnose99/scraps/6c9e7ebabb6221

– それ自体は、Node.jsのバージョンを変えると動くという話なので、nodebrewでバージョンを変えれば良い
– しかし、目的のNode.jsをインストールしようしてできない、ということをいつも繰り返している

## 結局こちらにお世話になる

https://zenn.dev/naoki_oshiumi/articles/967ce342172ab8

– ということで備忘録。
– M1 macbookにして、 `nodebrew install v15.8.0` みたいなことができない時は　`nodebrew compile v15.8.0` みたいな感じにすると環境に必要なバージョンのNode.jsを作ることができる。
– このコンパイルは記事にもある通り1時間くらいかかると思う（M1頑張ってくれ）
– あとは `nodebrew use v15