Node.js関連のことを調べてみた

vercelサーバーにUpした静的ページにBasic認証を設ける方法

# Vercel使ってますか！？

セットアップも便利でGithubとの連携も容易な[Vercel](https://vercel.com/)ですが、Basic認証の方法を忘れそうなので、備忘録のために残しておきます。

https://vercel.com/

## ソースファイルをGithubに連携


このサンプルのプロジェクトをGithubに連携します。
Githubの連携は割愛します。

## middleware.jsを作成

src/middleware.jsを作成します。
package.jsonにBasic認証の関連するパッケージも追加しておく必要があるのでお忘れなく。

“`
# ターミナル or bashで
yarn add @vercel/edge basic-auth static-auth
“`

“`j

npm -v すら実行できなかった際の対応

`npm -v` を実行すると以下のエラーが出た。
なんの操作をしてこのようになったのか記憶がない…

“`bash
$ npm -v
ERROR: npm v10.2.5 is known not to run on Node.js v13.13.0. This version of npm supports the following node versions: `^18.17.0 || >=20.5.0`. You can find the latest version at https://nodejs.org/.

ERROR:
/Users/IsamuUmetsu/.nodebrew/node/v13.13.0/lib/node_modules/npm/lib/utils/exit-handler.js:19
const hasLoadedNpm = npm?.config.loaded
^

SyntaxError: Unexpected token ‘.’
at wrapSafe (intern

JS&TS用に画期的なログ出力ライブラリを作ったので報告

# 何を作ったの？
今回自分が作ったライブラリはこちらになります。

https://www.npmjs.com/package/log4debug

このリンクだけだとまだ分からないと思うので説明していこうと思います。
## どういうライブラリ？
簡単に言うと従来のconsole.logを改造する様なライブラリです。
まず以下のコードを見てみてください
“`typescript
import log4debug from “log4debug”

log4debug.set(log4debug.defaultTemplate)

console.log(“This Package is JavaScript and TypeScript’s Logger”)
“`
これ普通にログ出力されると思いますよね？
実はこれlog4debug.setをやることによって、console.logが改造されて以下のようにログが出力されるんです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/26

Voltaを使用したNode.jsバージョン管理

## はじめに

Voltaを使用してみて、Node.jsのバージョン管理が楽になったので、
インストール方法と、コマンドを簡単に紹介します。

## Voltaとは
VoltaとはNode.jsのバージョン管理ツールです。
「高速」「信頼性」「ユニバーサル」が代表的な特徴として挙げられています。

[Volta](https://volta.sh/)

## Voltaの魅力
* Windows, Mac両方の環境で使用可能
* プロジェクトごとに自動でバージョンを変更可能
* インストール、操作が簡単

## インストール
:::note warn
Node.jsや他のバージョン管理を利用している人はアンインストールが必要です。
:::

最新のインストーラをダウンロードする。
[https://docs.volta.sh/guide/getting-started](https://docs.volta.sh/guide/getting-started)

:::note warn
Windowsの場合設定画面から開発者モードをオンにする必要があります。
「設定」→「プライ

express routing

# express routing

## 基本

“`
app.METHOD(PATH, HANDLER)
“`

– app : expressのインスタンス
– METHOD : post, get, put …（HTTPメソッドを小文字にしたもの）
– PATH : サーバ上のパス（URLのパス？）
– HANDLER: URLがPATHとマッチしたしたときに実行するメソッド

## 基本サンプル

– 基本はHTTPメソッド毎に、処理（メソッド）を割り当てる

“`
// GET メソッドルート
app.get(‘/’, function (req, res) {
res.send(‘GET request to the homepage’)
})

// POST メソッドルート
app.post(‘/’, function (req, res) {
res.send(‘POST request to the homepage’)
})
“`

– すべてのHTTPメソッドを割り当てる

“`
// 共通処理を仕込んでメソッド毎の処理はnex

expressの備忘

# express

## 参考

– [Express](https://expressjs.com)

## インストール

“`
# package.jsonの作成
# entry point: (index.js) はお好みで。”app.js” もよくある。
npm init

# –save でpackage.jsonに追加されるので、後で構築しやすくなる。
# これはモジュールのみnode_modulesにインストールされる
npm install express –save
“`

## Hello Wolrd サンプル

– 000.HelloWolrd_index.js

“`
const express = require(‘express’)
const app = express()
const port = 3000

app.get(‘/’, (req, res) => res.send(‘Hello World!’))
app.listen(port, () => console.log(`Example app list

express middleware

# express middleware

– [express middleware](http://expressjs.com/en/resources/middleware)

## [body-parser](http://expressjs.com/en/resources/middleware/body-parser.html)

各ハンドラを実行する前に、request ボディを解析して、req.body プロパティで使えるようにする

– 使い方

“`
var app = require(‘express’)();
var bodyParser = require(‘body-parser’);

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json({type: “application/*+json”}));
“`

– json parser
– リクエストされたデータがjson形式にする。req.body で参照可能。
– typeプロパティを指

Node.jsまとめ

# Node.js まとめ

## 参考

## リスト

– [Node.js本家](https://nodejs.org)
– [Node.js日本ユーザグループ](https://nodejs.jp/)
– [npm](https://www.npmjs.com/)
– Nodeのパッケージマネージャ

“`bash
# Nodeで作成する前に実行してpacakge.jsonを作成しておく
npm init
# npm でパッケージを追加
npm install [package name] –save
npm install [package name] –save-dev

# どこかから持ってきた環境でpacakge.jsonがあれば以下で必要なパッケージがインストールされる
npm install
“`

– [NodeSchool](https://nodeschool.io/ja/)
– NodeでNodeを学習

– [Express](http://expressjs.

SQLLineageを作ってみた（ベータ版リリース🎁）

# はじめに :writing_hand:
**SQL Lineage**という言葉をご存じでしょうか。

“リネージュ”か”リネージ”か日本語特有の問題が出ますが、とりあえず私は”リネージ”でいきます。
英単語のlineageは、系統とか血統という意味です。ゲームで20年以上前から、リネージュというのがありますが、同じ単語です。
スペルが難しいので私は、”LINE”と”AGE”が組み合わさって、祖先にさかのぼる系統図の線をイメージして覚えてます。

さてそのリネージですが、SQLと合わせて、**SQL Lineage**というものがあります。with句を使ったりした複雑なSQLで、最終的なselectで使う列って、おおもとはどこから来てるんだっけ？というのを図示するものです。

そのツールはいくつか出てるのですが、使い勝手とか、機能過多とか、見た目とかでしっくりこなさすぎるので、作ってみることにしました。有償のサービスもあるけど、これそんなに難しい話じゃなくない？という安易な考えもあり。

# 要件・技術 :point_up:
– クライアント
– 要件：ブラウザで動く

playwright Test generatorの使い方

# playwrightとは
Playwrightは、Microsoftによって開発されたオープンソースの自動化ライブラリで、Webアプリケーションのテストを支援します。

複数のブラウザ（Chrome、Firefox、Safariなど）に対応していて
ヘッドレスモード（画面表示なし）とヘッドモード（画面表示あり）の両方で動作します。

Playwrightを使用すると、Webページの自動操作やテストケースの作成が簡単になります。

# playwright の使い方
playwright codegenは、ユーザーがブラウザで行った操作を自動的にテストコードとして生成する機能です。

このコマンドを使用すると、特定のWebサイトを開きながらユーザーのアクション（クリックや入力など）を記録し、そのアクションを模倣するPlaywrightのテストスクリプトを生成できます。

生成されたテストコードは、Playwrightのテストとしてそのまま利用することができます。
テストの作成を効率化ができます。

## playwright のインストール

インストールにはnodejsが必要です。

Windows上Subline Text3 javascript実行させる

概要
—
Subline Text3上で、.jsファイルをビルド実行させる方法を説明します。

Node.js を[インストール](https://nodejs.org/en/download)
—

– Node.jsバージョンなど選択してダウンロードします。
– ダウンロードしたファイルをクリックして、インストールします。
– ライセンス同意して次のボタン押して、インストールまで進みます。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaw

Node.js: 現在時刻を改ざんして、日時が絡むテストを簡単にする方法

時間に依存する機能を持つアプリケーションのテストは、しばしば複雑で時間を要する作業です。「24時間後にログアウトしていること」といったテストのために1日待つのは辛いものがありますね…。

システムの時計を変更することなく、特定の日時でコードが正しく動作するかをテストする方法はないでしょうか。

ここでは、`libfaketime`を利用してNode.jsのアプリケーションで時間を自由に操る方法をご紹介します。

### libfaketimeとは

`libfaketime`は、プロセスに報告される現在日時をマシンのシステムクロックとは異なる値に偽装することを可能にするライブラリです。これは、**システムコールに介入**し、ユーザーが定義した日時を返すことで実現します。システム全体の日付を変更せずに、特定のプロセスだけのシステム日付を変更することが可能です。テスト環境で時間を操作し、特定の時点でのアプリケーションの動作を確認するのに非常に便利です。

### Dockerを使用したlibfaketimeのインストール

Node.jsのアプリケーションで`libfaketime`を使用

GitHub ActionsでのJavaScriptヒープメモリエラーの解決方法

## はじめに
GitHub Actionsでのテスト実行中にJavaScriptヒープメモリエラーが発生した経験を共有します。エラー内容、その原因、そして解決策について詳しく解説します。

## エラー内容
以下が発生したエラーメッセージです。

“`
FATAL ERROR: Reached heap limit Allocation failed – JavaScript heap out of memory
“`

このエラーは、JavaScriptプログラムが実行中にメモリ制限に達したことを示しています。

## 原因
JavaScriptヒープメモリエラーの原因は、プログラムが使用するメモリ量が多すぎるか、無限ループなどが原因でメモリが不足している可能性があります。

## 解決策
1. ヒープメモリサイズの調整
GitHub Actionsのワークフローで実行されるNode.jsのプロセスに対して、ヒープメモリのサイズを増やします。
“`yaml
env:
NODE_OPTIONS: –max-old-space-size=4096

【OpenSSL】localhost を https 化する 自己証明書の作成方法

自己証明書（通称オレオレ証明書）の作成方法です :smiley:

## 1. CA用の秘密鍵を生成
このコマンドは、2048ビットのRSA秘密鍵を生成し、`localCA.key` というファイルに保存します。

“`bash
$ openssl genrsa -out localCA.key 2048
“`
– openssl genrsa: RSA 秘密鍵を生成するコマンド
– -out: 生成した秘密鍵の出力ファイル名 (例: localCA.key)
– 2048: 秘密鍵の長さ (ビット単位) (例: 2048ビット)

## 2. 秘密鍵と識別情報から証明書署名要求 (CSR) の作成
このコマンドは、以下の情報を設定した CSR を生成し、`localCA.csr` というファイルに保存します。

“`bash
$ openssl req -batch -new -key localCA.key -out localCA.csr \
-subj “/C=jp/ST=Osaka/L=Osaka-shi/O=\”Example Inc\”/OU=Foo/CN=

Nodeのビルドインオブジェクトを拡張する

## 目的
配列の`remove`メソッドなど、JSのビルトインオブジェクトには存在しないメソッドを拡張して定義したい

## 問題点
こんな感じで関数を定義してもいいけど、
“`typescript
function remove(array: T[], removeElement: T): T[] {
return array.filter(element => element !== removeElement)
}

remove([‘a’, ‘b’, ‘c’], ‘b’) // [‘a’, ‘c’]
“`
やっぱり配列のメソッドとして拡張ができた方が、使いやすいし読みやすい。
swiftなら`extension`で、Kotlinなら関数の前にレシーバータイプを記述することで拡張関数を定義できる。
しかしTypescriptにはそのような文法はない。

## 解決策
まず配列のアンビエント宣言を追加し、型チェックができるようにする。
その後配列のprototypeオブジェクトに任意の名前で関数を代入する。
“`typescript
export {}

d

Reactに星評価UIを実装する

## Reactに星評価UIを実装する

Reactで簡単に星評価UIを実装する方法を紹介します。この記事では、`react-icons`パッケージを使用して星のアイコンを表示し、`react-bootstrap`パッケージを使用してスタイリングを行います。

完成イメージ

#### ユーザによる星評価：
– ユーザが星をクリックして評価を変更できます
– 通常はクリック可能な星アイコンを表示します

#### 星評価表示：
– ユーザの評価を表示するだけであり、評価を変更することはできません
– 通常はクリック不可能な星アイコンを表示します

### 1. `react-icons`のインストール

まず、`react-icons`パッケージをインストールします。

“`bash
npm ins

SequelizeのonUpdateはPostgreSQLで機能しない

## 今回、罠にハマった問題
データベースがPostgreSQL、ORMにsequelizeを使った環境で、migrate機能を使ってテーブルを作成しました。
データの更新日時を記録したかったので、updated_atのカラムを追加したのですが、UPDATE文を発行してもupdated_atは更新されませんでした。

“` migration.js
updated_at: {
allowNull: false,
type: Sequelize.DATE,
defaultValue: Sequelize.literal(‘CURRENT_TIMESTAMP’),
onUpdate: Sequelize.literal(‘CURRENT_TIMESTAMP’)
}
“`

（onUpdateがあるので日時は自動更新されそうな雰囲気ですが）

## 原因
PostgreSQLには、データの変更時に日時を更新する機能が備わっていない為、Sequelizeのmigrationファイルで設定してもデータベースには何も反映されていないと考えられます。

## 解決

Mongo リストの合計数、条件付き範囲のクエリー

“`javascript:user.js

$project: {
_id: 1,

totalQuestClearCount: {
$reduce: {
input: { $ifNull: [“$quests”, []] },
initialValue: 0,
in: {
$cond: [{ $eq: [“$$this.storyId”, 0], $eq: [“$$this.totalClearCount”, 1] },
{ $add: [“$$value”, 1] },
“$$value”
]
}

Azure Static Web Apps(Node.js) で、ストリームなChatGPTを構築する

# はじめに
ChatGPTなシステムを作るときに、Azure Static Web Appsは最善の方法の１つですが、これまではストリームができないという課題がありました。(.NETならできるんですが）

と、つい最近以下のアナウンスが出ました。
[Azure Functions: Support for HTTP Streams in Node.js is now in Preview](https://techcommunity.microsoft.com/t5/apps-on-azure-blog/azure-functions-support-for-http-streams-in-node-js-is-now-in/ba-p/4066575)
これで、Node.JSのFunctionでStreamが扱えるようになったので、その動作をざっくり検証してみます。（Pythonも早くできるようになるといいですよねぇ)

上記ブログにもありますが、以下の前提条件が必要です。古い場合は適宜更新してください。
> – Version 4 of the Node.js programmin

nvmコマンドでNodeのバージョンを簡単に切り替える方法

## 概要

– nvm(Node version manager)とは、Node を複数バージョン管理するためのユーティリティです
– この記事では、nvm を使用して Node のバージョンを追加・切り替方法について記載します
– [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating)の GitHub をベースに記載しています
– バージョンを簡単に切り替えられことによって、異なるバージョンでの動作確認や、異なるバージョンでの開発が可能になります

## 手順

1. nvm をインストールする
“`bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
“`
2. 環境変数を設定する
– 下記コマンドをそのまま実行する
“`bash
export NVM_DIR=”$([ -z “${XDG_CONFIG_HO