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

【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

Next.jsで配列内のJSONデータで必要な部分のみ出力したい

## はじめに
もっと良い方法があるかもしれないですが、調べた中で上手くいったコードをメモがてら記載

## コード

“`index.js
const [qiita, setQiita] = useState(”);
const fetchQiita = async () => {
// データを取得
const response = await fetch(`/api/qiita?query=${keyword}`);
let qiita = await response.json();
　// 配列を1つ出力して別の変数に格納
const listQiita = qiita.map(article =>
<>

{article.title}

{article.body}

);
　// useStateの変数にセットする
setQii

【超簡単】Next.jsでBasic認証を導入してみた

## はじめに
Next.jsでBasic認証を導入しようと思いましたが、TypeScriptで記載されたサンプルしか見つけられなかったため、JavaScript版を作成しました。

## Next.jsでBasic認証を導入する方法

以下を`pages`フォルダ配下に作成する

“`/pages/_middleware.js
import { NextRequest, NextResponse } from ‘next/server’

export function middleware(req) {
const basicAuth = req.headers.get(‘authorization’)

if (basicAuth) {
const auth = basicAuth.split(‘ ‘)[1]
const [user, pwd] = Buffer.from(auth, ‘base64’).toString().split(‘:’)
if (user === process.env.NEXT_PUBLI

Next.jsでError: EPERM: operation not permitted発生時の対処法

## 操作内容

“`bash
npm run build
“`

“`package.json
{
“private”: true,
“scripts”: {
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”
},
“dependencies”: {
“buffer”: “^6.0.3”,
“next”: “latest”,
“react”: “17.0.2”,
“react-dom”: “17.0.2”
}
}
“`

## エラー内容
“`bash
Error: EPERM: operation not permitted,
“`

## 原因
以下コマンドでローカルでサーバを起動していたため

“`
npm run dev
“`

## 対処法
ローカルサーバを止めて、再度以下を実行する
“`bash
npm run build
“`

Node.js Express + React の Proxy 設定について

# この記事について
Node.js Express をキャッチアップし、アウトプットしようと簡単なWebアプリを作成したとき、Proxyの設定に少々つまづいたので備忘録。

# やりたいこと
– Github APIを利用し、Githubのクローンを作成したい（ユーザー情報閲覧、フォロー、フォロワー、リポジトリ、ユーザー検索機能のみ）。
– ServerサイドでAPIを作成（Node.js Express）。
– ClientサイドはReactで作成。

# バージョン
“`
$ node -v
v14.17.0

$ npm -v
6.14.13

express: 4.18.1
react: 18.1.0
“`

# 想定
– React project ・・・`http://localhost:3000`
– Express project ・・・`http://localhost:5000`

ユーザーは`http://localhost:3000`にアクセスすることでReactによって描画されたブラウザを閲覧できる。
アプリケーション内でGithubユーザーの検索や、フ

【初心者】npmという名のバージョン管理ツールとは

## 目的

npmとかnodebrewとかNode.js使うと色んなコマンドが出てくるが
npmっていったい何者なのかとなったので調べた。
ちなみに環境はmac。

## npm

node package managerの略。
Node.jsのパッケージのバージョンを管理するシステムのこと。

Node.jsにはたくさんのパッケージ（便利な機能がまとまったもの）が存在し
それを一つ一つインストールするのは大変なので、コマンドでインストールできるようにしてやるぜ、的なもの。

npmはNode.jsをインストールすると一緒にインストールされる。
ちなみにnpm以外にもNode.jsのパッケージバージョン管理システムは存在する。

yarnもその一種。

## では一体、nodebrewは?

nodebrewはNode.js（言語）自体のバージョン管理ツール。
Node.jsのバージョンを上げたりできる。

nodebrew以外にも以下のようなNode.jsのバージョン管理ツールが存在する。

* n
* nvm
* nodist

nodebrewを使うにはmacにあるhome

【公式ハンズオン】Node.js+PrismaをServerless Frameworkを使用してAWS Lambdaにデプロイする

:::note
この記事は、Prisma公式の「Deploying to AWS Lambda」の和訳（意訳）です。
翻訳元とライセンスについてはページ下部に記載しています。
:::

このハンズオンでは、Serverless Frameworkを使用して、AWS LambdaにサーバレスなNode.jsのREST APIをデプロイする方法をお伝えします。

AWS LambdaはAWSのサービスの一つで、これを使うとサーバ管理不要のサーバレス環境でコードを実行できます。一方で、REST APIをLambdaにデプロイするためには、S3でファイルをホスティングしたり、API GatewayでAPIをHTTPで公開する必要もあります。

Serverless Frameworkを使えば、CLIでワークフローを自動化し、AWSリソースのプロビジョニングも行うことができます。

今回作成するREST APIでは、Prisma Clientを使用してデータベースのレコードの取得・作成・削除を行います。具体的には、それぞれの関数はRESTリソースのエンドポイントを表し、Prisma Client

Error: listen EADDRINUSE: address already in use :::3000 の対処

## 以下のエラーの対処方法について。

“`shell
Error: listen EADDRINUSE: address already in use :::3000
at Server.setupListenHandle [as _listen2] (node:net:1334:16)
at listenInCluster (node:net:1382:12)
at Server.listen (node:net:1469:7)

“`

localhost:3000 のaddress が使用済みということなので該当プロセスを終了すれば良い。

### 該当プロセスの調査
“`
# nodeで稼働中のプロセスを調査
ps aux | grep node

# port3000を利用してるプロセスの調査
lsof -i :3000
“`

後者の`lsof -i :3000`の方が確実。

### 該当のプロセスIDを指定してkill

“`shell
kill -9 [該当のPID]
“`

-9 は強制終了命令(killシグナル)を送る

MacにNodeをインストール、バージョンを切り替える方法とNodeのバージョンについて

Macにnodeをインストール、バージョンを切り替える方法について備忘録としてまとめます。

## 実行環境:

Mac OS ver.12.1
M1チップ

## インストール方法

nodebrew を使用してインストールします。
homebrew を利用するため、インストールしてない場合は[こちら](https://brew.sh/index_ja “Homebrew”)からインストール。

### nodebrew のインストール
“`shell
brew install nodebrew
“`

### nodeのインストール

#### 最新版のnodeのインストール
LTS versionのインストール。
“`shell
nodebrew install-binary latest
“`

#### 安定版のインストール
(2022/05時点ではv18.1.0)
“`shell
nodebrew install-binary stable
“`

#### 現在提供されているバージョンの確認
“`shell
nodebrew ls-remote
“