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

Node.js v14のOptional chainingについて調べてみた

## はじめに
仕事でNode.js v14を使っていますが、開発者が`?.`という記述を使っていました。イマイチ良く分からなかったので、整理しました。

## Optional chainingとは

オブジェクトのプロパティの値を明示的に確認せずに読み込むことができる。

## 具体例

### Optional chainingを使う場合

以下のように`user`と`user.name`が存在することを確認してから、`user.name.kana`を取得する必要がある。

“`js
let kana = null;
if (
user &&
user.name &&
) {
kana = user.name.kana;
}
“`

### Optional chainingを使う場合

上記のように、`user`と`user.name`の存在を明示的に確認しなくても、以下のように`user.name.kana`にアクセスできる。

“`js
const kana = user?.name?.kana;
“`

## 参考
https://developer.

Node.jsとwijmoとWebAPIでMongoDBへCRUDしてみる（2022）

MongoDBにCRUDするメモ。グリッドはwijmoを使用。
いろんなところで手間取った。。。

# 環境
* Windows 10 64bit
* Node.js（v18.0.0）
* MongoDB（v5.08）
* wijmo（トライアル版：5.20221.842）

# 事前準備
* wijmoのトライアル版を入手
* MongoDB Compassで、データベース「webtest」＆コレクション「tasklist」を作成しておく
* MongoDBであらかじめデータを登録しておく
　({name:”xxxx”,type:”xxx”,status:xx})
* Node.jsのプロジェクト用フォルダを作り、expressとmongodbをインストールする

# MongoDBの状態

# プロジェクトフォルダ構成
folder/

【Nuxt.js】DockerやNginxを使用した開発でもホットリロードを行う

# この記事について
Nuxt.jsで開発中、Nuxt.jsのみの開発ではホットリロードが自動でできるようになっているかと思いますが、DockerやNginxを使用するとホットリロードできなくなる場面がありましたので、対処法を記載したいと思います。

# 環境
|内容|バージョン|
|—|—|
|node|16.14.2|
|nuxt|2.15.8|

# 結論
`nuxt.config.js` や環境変数に以下を追加したことろうまく動作しました。

“`nuxt.config.js
export default {
// これでDockerやNginx使用時でもserverMiddleware以外はホットリロード可能となりました（実際にはポーリングによって定期的にソースの変更チェックを行っている）
watchers: {
webpack: {
ignored: /node_modules/,
poll: true,
},
},
}
“`

以下の環境変数の追加によってserverMiddleware側もホットリロード可能

【Nuxt.js】serverMiddlewareでエイリアスを効かせてimportする

# この記事について
[こちら](https://github.com/nuxt/nuxt.js/issues/4580)や[こちら](https://github.com/nuxt/nuxt.js/issues/7017)のIssuesように、Nuxt.jsのserverMiddleware側ではエイリアスが効かないようなので、ライブラリを使用してserverMiddleware側でもエイリアスを効かせられる方法をまとめました。

# 対象読者
* Nuxt.jsでserverMiddlewareの中でaliasを使用した実装を行う方
* Node.jsアプリケーションでaliasを使用したい方

# 環境
|内容|バージョン|
|—|—|
|node|16.14.2|
|nuxt|2.15.8|
|yarn|1.22.15|

# Nuxt.jsでエイリアス設定時のserverMiddlewareの挙動
以下のディレクトリ構造を想定します。

“`
sampleProject
├server
| ├hello.ts
│ └index.ts
├common
│ └array

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