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

Node.jsでCSVファイルを読み込む方法

# はじめに
`Node.js`でCSVファイルを読み込む実装をしたので、備忘録として記事にしたいと思います。
`TypeScript`で実装しているので、`Node.js` + `TypeScript`で、CSV読み込みを実装したい方の参考になれば幸いです。

# 必要なパッケージをインストール

`csv-parse`を使うので、以下をターミナルで実行してください。

“`bash
npm install csv-parse
“`

`Node.js`でCSVファイルを読み込むパッケージはいくつかあるそうです。
気になる方は以下をご参照ください。

https://qiita.com/t-yama-3/items/ab488c5a026de3cc92ab

# CSVを作成
“`
ts_demo // プロジェクトのルート
├ dist // コンパイルしたjsファイルを格納
├ src // tsファイルを格納
├ package.json // package.json
└ users.csv // 読み込む

VirtualBox 環境で node.js を実行すると、「Assertion failed: new_time >= loop->time, file c:\ws\deps\uv\src\win\core.c, line 327」のエラーが発生する

# はじめに

掲題の通り、node.js でのビルドや実行時にエラーになることがあるようです。
私が発生したときの環境は以下の通りです。

| | バージョン |
| —- | —- |
| VirtualBox | 7.0.10 |
| ゲストOS | Windows10 |
| node.js | 20.9.0 |
| npm | 10.1.0 |

ネットで検索すると、

・node.jsをバージョンアップすると直った。
・時計を同期したら直った
・WSLでやればOK

などと出てきましたが、今回はこれでは解決しませんでした。
よく見たら、上記の記事はエラー発生の行数も違うようですので（「line 327」ではない）、別件のようです。

# 解決方法
以下の掲示板にあった通り、VirtualBoxの設定で、「Enable Hardware Clock in UTC Time」を有効にすれば回避できるようになりました。

https://github.com/nodejs/help/issues/2470

![image.png](https://qiita-ima

14.仮想通貨自動売買プログラムを作る(1) | TypeScript入門講座

https://youtu.be/geYY9OJ7lH0?si=mNcJs21_bELxO6rW

Node16.20.2環境でhusky+lint-stagedを使ってlinterを自動化する(no use prettier)

# 背景
Gitへのコミット時に、linterのルールに則ってないコードを弾きたい。
業務でNode16.20.2指定の環境だったので、最新の導入記事が参考にならない。
また、巷の記事ではセットでprettierを使って自動整形をしているが、意図しない変更が加わるため無駄な変更を増やしたくない。
コードの整形はESlintでカバーできない範囲は手動で行いたいのでprettierは利用したくない。

# 使用モジュール(執筆当時の最新バージョン)
– husky@8.0.3(9.0.11が最新版)
– lint-staged@14.0.1(15.2.2が最新版)

ひとまずNode16に対応しているかで上記バージョンを選択

# 設定手順
### 1. モジュール類のインストール
“`sh
$ npm i –save-dev lint-staged@14.0.1
$ npm i –save-dev husky@8.0.3
“`

### 2. huskyのセットアップ
下記サイトが参考になった。ありがとうございます。

https://zenn.dev/g_okawara/art

Angularのインストール～最小限構成の設定手順

Angularのインストール、Angular Material導入、HttpClient導入手順を解説します。

## Angularの導入

### Angular の特徴

– TypeScriptをベースとしている
– SPA(single-page-application)を実現するフレームワークの一つ
– テンプレートシステム（html/CSS）の実現
– 双方向データバインディング（html – JavaScript）
– コンポーネント指向

### Node.js インストール

[Nodeダウンロードサイト](https://nodejs.org/en/download/)

### Angular インストール

[Angular setup](https://angular.io/guide/setup-local)

“`sh
npm install -g @angular/cli
ng version
“`

👇記事執筆時点の出力です。

“`text
_ _ _

npmとnpxの違い

日頃の業務開発で気づいたこと、わからなかったことを超簡潔にメモ的なことを残していくシリーズ。
その名も「(後で考える)」

# 今日のお題
`npm`と`npx`の違い

# 結論
`npm`はパッケージ管理。
`npx`はインストールなしでのパッケージ実行

# 解説
### npm
`npm`は`node package manager`でパッケージの管理を目的としている。
`package.json`に記載されているインストール済みのパッケージを指定して利用したい場合に使用する。
npmでインストールされたものはnpmを利用して実行される必要がある。
“`sh
$ npm install –save {xxxx}
$ npm run {xxxx}
“`

### npx
`npx`は`node package executer`で、パッケージの実行を目的としている。
npmとの大きな違いは、__パッケージをインストールせずに直接実行できる__ というところ。
特にプロジェクト作成時に一回だけ実行したい場合や、linter系のその場だけ実行するもの等が該当しやすい。
“`s

MacOS の PC 上に開発環境を構築する

AppleSilicon の Mac mini (macOS Sonoma) に Node.js + Next + Typescript の開発環境を構築する手順です。

次の順でインストールしていきます

## コマンドラインデベロッパツール (Command Line Tools for Xcode)

– バージョン確認

“`
m@mopnoMac-mini ~ % git –version
xcode-select: note: No developer tools were found, requesting install.
If developer tools are located at a non-default location on disk, use `sudo xcode-select –switch path/to/Xcode.app` to specify the Xcode that you wish to use for command line developer tools, and cancel the installation dial

【MacOS】シェルスクリプトでミリ秒単位まで取得する方法４種紹介 (gdate, python, perl, node.js)

# 概要

MacOSにてシェルスクリプトを使ってAPIコールを行うと以下のように出力されます（`curl`コマンドの進行状況）。
この時、TimeSpentがミリ秒で欲しいなと思い、シェルスクリプトで表示されるように実装しましたので紹介します。

“`
$ sh ./api_request_xxx.sh http://xxxx/api/
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 62083 100 60043 100 2040 4315 146 0:00:13 0:00:13 –:–:– 16347
“`

全部で4種類あります。

# 前提

以下みたいにすれば取得できるんじゃ？と思っていましたが、これではできませんした。

“`sh
START_TIME=$(date

WindowsでのAngular環境構築（Node.jsのインストール～Hello Worldまで）

## Node.jsのダウンロード
以下サイトで最新バージョンのダウンロード。
https://nodejs.org/en/download

Windowsの一番上をポチっと。

## Node.jsのインストール
画面に従いNextを押下していく。
※今回はすべてデフォルト。

## バージョンとnpmの確認

コマンドプロンプトで以下のコマンドで確認できる。
“`
Node –version
npm –version
“`

◆参考

Windows、macOS、LinuxにNode.jsとnpmをインストールする方法

## Angularの最新をインストール
以下のコマンドを実行する。
“`
npm install -g @angular/cli
ng version //確認
“`

バージョンはこの通り。
“`
Angular CLI: 17.2.2
Node: 20.11.1
Package Manager: npm 10.2.4
OS: win32 x64
“`

## 統合開発環境(IDE)のインストール
Visual

Mac（M1）のnodeバージョンアップ

## 背景
nodeのバージョンをあげずに放置していたらv16系だったので、バージョンをあげることにしました。
その際のまとめです。

## 現在のバージョン確認

### Homebrew

“`
$ brew -v
“`

### nodebrew

“`
$ nodebrew -v
“`

### Node.js

“`
$ node -v
“`

### npm

“`
$ npm -v
“`

## バージョンのアップデート

### Homebrew

“`
$ brew update
“`

終わったらちゃんと上がっているか先ほどのコマンドでバージョン確認。

### nodebrew

“`
$ brew upgrade nodebrew
“`

自分の場合はここでエラーが出ました。

“`
Error: Failure while executing; `/usr/bin/env cp -pR /private/tmp/d20240303-30797-co2iaz/nodebrew/. /usr/local/Cellar/nodebrew`

Playwright 入門

# はじめに
この記事では、E2E テストツールの Playwright の概要や基本的な操作方法について記載します。

https://playwright.dev/

# Playwright の概要
Playwright は、Microsoft で開発が行われている E2E テストツールです。2020年にリリースされました。
複数ブラウザ・プラットフォーム・言語で利用可能などの特長があります。

他の E2E テストツールとしては、Cypress、Puppeteer などがあります。
Playwright は、2023年の後半から利用者数が伸びているようです。


https://npmtrends.com/cypress-vs-playwright-vs-puppeteer-vs-selenium-webdriver-vs-testcaf

huskyのv8とv9の違いを確認しつつ、npm scriptsを理解する

# 概要
husky がずっとv4のプロジェクトがあるので、 Node.js のバージョンアップに合わせてアップデートをしようとしました。
2024/1/25にv9.0.1がリリースされていたので違いを確認しつつ、 npm について理解したことをまとめます。

# v8とv9の違い
Release Note

https://github.com/typicode/husky/releases/tag/v9.0.1

v9に変わり、インストール時のコマンドが一つで済むようになり、 .husky/pre-commit もシンプルになっています。

例えば、v8のインストール手順のコマンドは以下です。

“`bash
npm pkg set scripts.prepare=”husky install”
npm run prepare
npx husky add .husky/pre-commit “npm test”
“`

v9では上記のコマンドは以下で全て実行されます

“`bash
npx husky init
“`

他には、v9にあたり Node.js のv14とv16

passport.jsでユーザー認証を実装してみた

## はじめに
Passportは、認証や認可を簡単に実装できるNode.js用ミドルウェアです。
非常に柔軟なPassportはExpressベースのWebアプリケーションで利用できるため、ローカル認証やTwitter、FaceBookなどの外部認証にも使用されます。
今回はその中のローカル認証機能を実装していきます。

・使用するライブラリのインストール
“`zsh:zsh
npm install passport passport-local bcrypt express-session
“`

## ストラテジの設定
はじめに、ストラテジの設定を行います。新しく`config`フォルダを作成し、その下の`passport.ts`ファイルに設定内容を記述します。

“`typescript:config/passport.ts
import passport from “passport”;
import { Strategy as LocalStrategy } from “passport-local”;
import { PrismaClient } from “@

WebSocketをローカルで試す

仕事でwebsocketを使って試験をする必要があるということで、やり方を事前に調べておこうと思いました。

## ローカルでwsを立ち上げる
* まず、node.jsをインストールしておき、npm install wsにてwebsocketをインストールします
“`
// グローバルの場合は-g を付ける
npm install ws
“`

* 以下の処理を 例）server.jsとして保存します
“`js
const WebSocket = require(‘ws’);

// WebSocketサーバーを作成し、ポート8080でリッスンします
const wss = new WebSocket.Server({ port: 8080 });

// 接続時の処理
wss.on(‘connection’, function connection(ws) {
console.log(‘新しいクライアントが接続しました’);

// メッセージを受信した時の処理
ws.on(‘message’, function incoming(message) {
co

node.js で VRT – PlayWright で Webページにアクセスしてスクリーンショットを撮影し、reg-cli で差分レポートを出力する例

# 事前準備

## npm インストール

`package.json` の例

“`json
{
“devDependencies”: {
“playwright”: “^1.42.0”,
“@playwright/test”: “^1.42.1”,
“http-server”: “^14.1.1”,
“reg-cli”: “^0.18.1”
}
}
“`

`npm install`

## Playwright セットアップ

`npm init playwright@latest`

質問にはてきとうに Yes と答えておく

# localでWebサーバーを起動しておく

## HTML

見た目の違うページを2個用意しておく

例:

`example1.html`

`

Javascript Registry (JSR) とは

### 概要

JSRとはjavascriptのパッケージのためのレジストリです。npmやNodeとも互換性がありますが、npmを進化させたようなレジストリです。

### レジストリとは
パッケージ等を管理するストレージのようなものです。例えば `npm install lodash` をすると、通常はnpmに設定されているデフォルトのレジストリである `https://registry. npmjs.org/ ` からパッケージをインストールしようとします。

ここで注意すべきはパッケージ管理ツールとレジストリは別の概念であることです。`npm`コマンドはあくまでもパッケージ管理ツールであり、`npm`コマンドを使っていても実際にパッケージをインストールしてくるストレージは自由に設定可能です。この記事で紹介しているJSRは**レジストリ**であり、したがってnpmコマンドを使ってJSRからパッケージを取得することが可能です。

例えば企業などでは独自のレジストリを管理しており、npmコマンドなどでもデフォルトのレジストリが会社の管理するものになっているケースも多いと思います。

Node.js – npx なら package.json で管理している node モジュールのコマンドを直接実行できる

# 概要

npxをインストールしておけば、 package.json で管理している node モジュールを直接コマンド指定で実行できる

## インストール

“`
npm install -g npx
“`

## 利用例

たとえば次のような package.json がある場合

“`json
{
“dependencies”: {
“prettier”: “^3.2.5”
}
}
“`

次のように自由にサブコマンド、フラグなどを指定して実行できる

“`sh
npx prettier some_dir
“`

“`sh
npx prettier –cache other_dir
“`

# 問題の前提 – npm run

package.json の script にコマンドを書いておけば、パッケージ管理しているバージョンでコマンド実行が出来るが、

– scripts に書かずに単発のコマンド実行がしたい
– 様々なバリエーションでコマンド実行したい

という時に不便だった

# チャットメンバー募集

何か質問、悩み事、相談

pnpmで管理しているWebフロントエンドをGitHub ActionsでGitHub Pagesにデプロイする

# やりたいこと
`pnpm` でパッケージ管理をしている Web フロントエンドアプリケーションを、GitHub Actions を用いることで、`main` ブランチへ `push` されたタイミングで自動的にデプロイします。

# 前提
[こちらの GitHub レポジトリ](https://github.com/Yuki-Imajuku/pnpm-ghpages-deploy) も参照してください。

– Ubuntu (22.04.4)
– Node.js (20.11.1)
– pnpm (8.15.4)

“`txt:ディレクトリ構成
pnpm-ghpages-deploy/
├── .github/workflows/ghpages-deploy.yml
├── frontend/
├── .gitignore
├── LICENSE
└── README.md
“`

# プロジェクト作成
下記のコマンドでテンプレートの React アプリケーションを作成します。ビルドツールには Vite を採用しています。
“`sh
pnpm create vite@late

node js でdiscord のbot作成#2応答機能と作る

# 前回のコードの詳しい説明
“`javascript:index.js
const {Client,GatewayIntentBits, GuildTemplate} = require(“discord.js”)
const client = new Client({intents:[]})
client.on(“ready”,async (c) =>{
console.log(`${c.user.tag}でログインしました`)
})
client.login(“先ほどのトークン”)
“`

“`js
const {Client,GatewayIntentBits, GuildTemplate} = require(“discord.js”)
“`
まずはここです
`require`は読み込み先を指定するためみたいな感じです
`const`は一度定義したら二度と再定義できない変数です
“`js
const client = new Client({intents:[]})
“`
操作するためのクライアントを制作するためのものですintentsはオプションみたいな

ChatGPTのチャットの返答をfetchでStream受信しようとしたらSyntaxError: Unterminated string in JSONが出たことと解決法

# エラーに遭遇した状況
openAIのchatGPTにAPIで質問を投げて、取得した回答を表示するということをしようと思いました。
chatのapiにはstreamというオプションがあります。これを使うと回答全体の構築を待たずに先頭から流してくれるようになります。
以下の記事を参考にこれを試してみようと思いました。

https://zenn.dev/himanushi/articles/99579cf407c30b


# やったこと
まずフロントのページを用意しました。
![スクリーンショット 2024-03-01 160213.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3478898/c617569d-5745-905d-ff76-8