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

Azure TextToSpeech APIでストリーム処理する – Node.js

AzureのSpeech ServiceでTTS（Text to speech）のAPIを使用して、受け取ったデータを逐次的にStreamで処理をする方法が判明したので紹介します。~~（なぜ、こんな書き方をするのかというと、MSが詳細なドキュメントを公開していないからです。MS仕事しろ！）~~

# 前提

AzureのSpeech Serviceを使える環境を用意してください。
Speech Serviceで合成音声(Speech Synthesis)の始め方はこちらをご覧ください。（C＃ですが・・・）

https://qiita.com/1mono2/items/aa66bf485ede8ec94152

# 結論

`SpeechSynthesizer.speakTextAsync`の引数に`PushAudioOutputStreamCallback`を継承したクラスを用意します。また、`SpeechSynthesizer`の引数には`AudioConfig`を設定してはいけません。

詳細は後からします。

### コード全体

“`jsx
import * as MsTt

React&Node.jsでアプリ作ってみた

# 概要
現在地から1km圏内の飲食店をランダムで選んでくれるアプリ

Node.jsでGoogleMapsAPIのPlacesにあるNearbySearchでレストラン探してフロントに投げる

# 背景
友人と遊んでいるときに飲食店選びで困ったので作ってみようと思って作ったアプリ

# 使ったもの
* React
* Node.js
* ChatGPT
* github copilot(educationで無料)
* GoogleMapsAPI

# 実装

https://github.com/sushi404/choice_shop

## 現在地取得
フロント
“` jsx
export function getUserLocation() {
return new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(
position => {
resolve({
lat: position.coords.latitude

Next.jsの環境構築 + Vercelへサクッとデプロイ

## はじめに
React，Next.jsに触れてみたいと思ったのでNext.js + TypeScriptの環境構築をしてみました。
ローカルの環境からVercelへデプロイするところまで行います。
環境はwindows10です。

Next公式ドキュメント：https://nextjs.org/docs
## Next.jsプロジェクトを用意
### Node.jsのインストール
ここからダウンロードして展開してインストール。
https://nodejs.org/en/download
### Nextプロジェクトを新たに作成
– “`node –version“`でNodeが動くことを確認
– 適当な場所にディレクトリを作成して移動
– “`npx create-next-app –typescript“`を実行して新規プロジェクトを作成
– 指示に従って必要なパッケージをインストール
– ※ –typescriptは，–ts オプションでも可

パッケージはそれぞれインストールするか選べます。
“`
Need to install the fol

Vercelでできること総まとめ(2023)

Vercel は Web フロントエンドアプリのホスティングサービスとして有名ですが、他にもたくさんの便利な機能・サービスがあります。

この記事を読んで、Vercel でできることをまるっと把握しましょう！

:::note

`2023/12/3` 時点の [Vercel の公式ドキュメント](https://vercel.com/docs) を元に作成しています。

個人的に知らなかったり、いいなと思った機能には :star: をつけています。
:::

## [基本的な機能](https://vercel.com/docs/fundamentals)

### [フレームワーク](https://vercel.com/docs/frameworks)

Vercel は [Next.js](https://nextjs.org/) のメンテナではありますが、幅広いフロントエンドフレームワークに対応しています。現在、38種のフレームワークに対応しているようです。

– [Angular](https://angular.io/)
– [Astro](https://astro.b

E2Eテストツール「playwright」

## はじめに

ありがたいことに、今いるチームにはテストチームがいるのですがシステムの規模が大きくなっていく中で、最近大変そうな様子を感じます。
E2Eテストツールを導入したら軽減できる部分もあるのかな？ということで **playwright** を試してみました。

## Playwrightとは

Microsoftが 2020年1月31日 に初回リリースがされたE2Eのためのテスト自動化ツールです。
Chromium、WebKit、Firefox などの最新のレンダリング エンジンをすべてサポートしています。

https://en.wikipedia.org/wiki/Playwright_(software)

一般的には劇作家という意味の単語でした。

https://ja.wikipedia.org/wiki/%E5%8A%87%E4%BD%9C%E5%AE%B6

## はじめかた
https://playwright.dev/docs/intro

“`
yarn create playwright
“`

インストールコマンドの選択はこんな感じにしました。

GraphQLとPrismaの連携

この記事は [セゾン情報システムズ Advent Calendar](https://qiita.com/advent-calendar/2023/sisco) 2023 2日目の記事です。

# はじめに
GraphQLはAPIに関わる部分で、開発者にとっての利便性を向上させてくれるツールだと考えています。
例えば、
– クライアント側からのリクエスト過多によるパフォーマンスを改善したい
– 強固な型安全性を担保したい
– Swagger的な役割のものが欲しい

といったニーズに応えてくれると思っています。
ただし、クライアント側、サーバー側両方との連携が要求されるため考慮することは多くなります。
サーバー側であれば、データベース連携がその1つです。
この部分をなるべくシンプルに連携するために、Prismaを使用して検証してみました。
本記事では、GraphQLの基礎について理解を深めるとともに、Apolloを用いてGraphQLサーバーを実装し、Prismaとの連携手順を知ることを目的とします。

## 前提と対象読者
以下の知識や経験があり、
–

Puppeteerでold Headless deprecation warningが出た時の話

久々にPuppeteerを使おうとしてプログラムを動かそうとしたらWarningで怒られました。

> 

## こんな感じで解消できます。

Node.js 21.2.0です。`headless: ‘new’`をつけて起動します。

“`js
const puppeteer = require(‘puppeteer’);
// import puppeteer from ‘puppeteer’;

(async () => {
const browser = await puppeteer.launch({
headless: ‘new’,
});

const page =

nodejsのソースコードのビルド

今現在(2023-08-01)raspbian はbullseyeベースなのでaptでnodejsをインストールするとnodejs12が入ります。
ただ、zenn-cliがnodejs12以下はサポート切ってたりで、bullseyeのnpmからzenn-cliをインストールしようとすると怒られます。一応zenn-cliは入りますが、警告だが、非推奨だかのメッセージが出ます。

よってraspberry piからapt->npm->zenn-cliという感じに怒られずにええ感じにインストールできない。
単純にnodejs関連のパッケージだけstable bookwormのレポジトリを向くようにしてもいいですが、それでも最新のLTSでないし、どうせ最新のLTS使わないならまあせっかく?なんでビルドしましょうと思ってやってみました。

## 前提条件

github cliインストール済み
tmuxインストール済み。
sysstatインストール済み（統計取るのに必須。特に取るつもりがないなら不要）。

## ソースコードの準備

“`bash
# gh repo clone用のディレクトリ

brewでNode.jsを導入後、npmが使えなくなった

## brew installでnodeの導入。
これでnpmも付随してインストールされるはず。
~~~terminal
brew install node
==> Downloading https://formulae.brew.sh/api/formula.jws.json
##################################################################################################################################################################################################### 100.0%
==> Downloading https://formulae.brew.sh/api/cask.jws.json
###############################################################################################

ブロックチェーンで元気玉を作って投げる

# はじめに
下記の仕組みを作ってみました。
– 元気玉をイメージした、ブロックチェーンで送信する際に複数の署名が必要な形式のトランザクションを利用した仕組み(元気玉トランザクション)
– 集まっている署名の数に応じて画像（今回は🍅）サイズが変動する仕組み(サイズ可変式トマト)
– 自身の管理していないコンテンツから、自身の管理しているコンテンツに影響を与える仕組み(外部コンテンツからの干渉)

# 背景
Symbolブロックチェーン界隈にはトマトを模したデジタルトークンをユーザが作成・配布し、デジタルトマトトークンをブロックチェーンのトランザクションとして投げつけたり(送信)、トマトを投げつけるようなゲームをプレイする事ができるお祭りがあります。(スペインのトマトを投げ合う収穫祭のラ・トマティーナを模したもの)
このお祭りに合わせて、自身の開発しているゲームにて複数人でトマトを大きくしてボスにぶつけて攻撃するというコンセプトでイベントをやってみたいと思い、今回の仕組みを作りました。

# 使ったもの
ブロックチェーン：Symbol
Webサーバ： Node.js+TypeScript

2023年度版フロントエンド開発環境構築徹底解説

この記事は[Nuco Advent Calendar 2023](https://qiita.com/advent-calendar/2023/nuco)の1日目の記事です。

# はじめに

2023年最新のフロントエンド開発環境についての紹介記事です。
分野別に、おすすめツール群と、その特徴などを紹介していきます。
デファクトスタンダードとみなせるようなツールや、最近盛り上がりを見せているものなどをラインナップしました。
これからフロントエンド開発を始めたい人はもちろん、長くご経験のある人にもプラスになる情報がきっとあるため、ぜひ参考にしてもらえると嬉しいです。

::: note
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、[こちら](https://www.recruit.nuco.co.jp/?qiita_item_id=1b97cb3d9f43c5828adf)まで。
:::

# フロントエンド開発おすすめツ

BunアプリをPM2で動かしてデーモン化する

実行しているプログラムを、ユーザーがログアウトしたり、シェルセッションを閉じてもプロセスを続行したいとか、アプリケーションがクラッシュしても自動的に再起動したいなどという需要は結構あります。

そんな場合に Node.js で良く使われるのは、デーモン・プロセス・マネージャーPM2 です。

https://pm2.keymetrics.io/

https://github.com/Unitech/pm2

PM2は、複数のプロセスを一覧管理し、その log や error log などをリアルタイムに監視もできるなどの豊富な機能を持つ優れたツールです。


# PM2 に Bun アプリを登録する

さて、今回はその PM2 に Bun アプリを登録しようという企画になります。

例えば先日書いた「[BunでWebSocketのデータ配信サーバ

socket.ioを型安全に使えるライブラリを考えている

自分のためにつくっているが、まだいろいろ考えないといけないことがある。

ひとまず、どういうものなのかをここに記す。

まず、serverが受信、clientが送信とする。
基本的なsocket.ioのコードだと、client側は以下になる。

“`ts
const socket = io(“http://localhost:3000”);
socket.emit(“eventName”, data);

“`

emit時に、必ず存在するeventに、正しい型のdataを送りたい。
一応、socketの初期化時にname spaceごとに型を与えて推測するようにできる。

[https://socket.io/docs/v4/typescript/](https://socket.io/docs/v4/typescript/)

個人的には、trpcやts-restのように、自動生成される型安全な送信用のクライアントがほしい、と考えた。

サーバー側の実装を考える。

“`ts
export type ServerAppRoute = {
data:

上腕二頭筋とサーボモーターが奏でる至高のプロテインシェイク

こんにちは、普段デザイナーをしている**ウエハラ シンペイ**です。

前回開発したChatGPTによるヘルシーレシピBotで、
食事改善に取り組めたのですが、目指すべきモテボディにはそれだけでは足りませんでした。

https://qiita.com/PEI__/items/2418a985f9b2539f26cf

### そう、チカラ is パワー「筋肉」ですね。


知識先行型ダイエッターの私が調べた限り、筋肉は１日のエネルギー代謝量が最も多いとされていて、筋肉をつけるほど太りにくい体になるらしいです。なので今回はマッスルボディを生み出すアプリケーションを作っていきます。

# プロテインはしっかり混ざってないとマズい
筋肉愛好家からプロテイン飲んどきゃなんとかなる勢まで、全員が悩んでいるプロテインの

audio/x-mulaw形式の音声をWavで保存する

Twilioの音声データは`audio/x-mulaw`形式、8000Hz, 8bit, 1チャンネルの固有の型を持っています。

特に`x-mulaw`形式がわからなく、死ぬほどハマったので共有します。

# 結論
`x-mulaw`形式の方法があるのでそれに従います。
“`jsx
const WaveFile = require(‘wavefile’).WaveFile;

// Base64エンコードされたオーディオデータをデコード
let decodedData = Buffer.from(base64String, ‘base64’);

let wav = new WaveFile();
// 8ではなく、”8m”
wav.fromScratch(1, 8000, ‘8m’, decodedData);

// μ-law形式としてWAVファイルを保存
wav.toMuLaw();
fs.writeFileSync(‘output.wav’, wav.toBuffer());
“`

自らWav Headerを作成する場合

BunとNodeを同じjsコードで自前ベンチしたらBunの圧勝だった

ここのところ Bun の記事を毎日書いてるのだけど、そういえば、速い凄いといいながら、まだ自前でベンチも取っていなかったなと反省して、軽く試してみた。

結果は、まぁBunの圧勝でした。

環境
————————————-
クラウド： Azure VM (これはオンプレでも何でも良い)
OS：　Ubuntu 20.04.6 LTS (GNU/Linux 5.15.0-1050-azure x86_64)
Bun：　v1.0.14 ( https://bun.sh/blog )
Node.js： v20.9.0

もちろん、これでなければいけないという事はありません。

コードはこれ。
————————————-

郵便局の郵便番号データ 18M のcsv(124,332行) を for で回しながら行数カウントするだけのスクリプトです。
“`javascript:read-zip-from-csv.js
console.time(‘csv read’); // 計測開始
const fs

Azure Static Web Apps に Next.js ver.14 をデプロイする

## やりたいこと
`Next.js ver.14.0.3` で作成した静的なWebアプリを `Azure Static Web Apps` にデプロイしたい。基本的には、ドキュメント通りやれば良く、GitHub Actions を通じてデプロイする流れ。エラーが発生したので、メモ残し。

> [静的にレンダリングされた Next.js の Web サイトを Azure Static Web Apps にデプロイする](https://learn.microsoft.com/ja-jp/azure/static-web-apps/deploy-nextjs-static-export?tabs=github-actions)

## エラー発生
GitHub Actions で build する際に、node のバージョンが古いと怒られてしまう。何も指定しないと node ver.16系が選ばれてしまうようだ。

Next.js 14系は、`Node.js 18.17+` が必要なので（[Next.js > Installation](https://nextjs.org/docs/g

Node.js, Express, Socket.io 使った簡易チャットの作成

Node.js, Express, Socket.io（双方向通信） 使って簡易チャットを作ってみる
前に作った WebSocket のやつでフロント、バック分かれるのやだなと思い Express 使ってます
あと Socket.io も使ってみたかったのでお試しでやってみました
完成したやつは github においてます
https://github.com/sueasen/chat-socket-sample

前に作ったやつはこちら．．．

https://qiita.com/sueasen/items/c839f2c3d864874876c3

見た目は某〇INE風、実行した環境とかは以下です

– Windwos11
– Node.js v18.17.1
– express v4.18.2
– socket.io v4.7.2
– nodemon v3.0.1

# プロジェクトフォルダ作成・移動
“`powershell
mkdir chat
cd chat
“`

# node 初期化
“`powershell
npm init -y
“`

# express,

【Express】passport-localが動かない

# 環境

* Dockerコンテナ内で作業
* Node.js 18.15.0
* express 4.18.2
* passport 0.6.0
* passport-local 1.0.0(たぶん)
* express-session 1.17.3
* ビューエンジンにはpugを使用

# やりたかったこと

* ログインに関する処理は`routes/login.js`に書き、
`app.js`に書く内容は最低限にしたい。

* `/login`にGETでアクセスするとログインページが表示され、
そこにあるフォームにユーザー名とパスワードを入力すると、
`/login/auth`(authって何？)にPOSTリクエストが送られる

* `/login/auth`にPOSTでアクセスすると、passportによってログインができる

…のですが、色々なサイトの見様見真似でコードを書いていたら、
ログインページではログインができているのに、**それ以外のページだとログインできていない**現象が発生しました。

# やらかしたときのコード

もともとは以下のようなコードになって

Node.jsのrequire.mainについて

# require.main
require.moduleは、モジュールオブジェクトで、Node.jsの起動時にロードされたエントリースクリプト表す。

# 例
Node実行時のディレクトリが /abusolute/path/to で、app.jsを実行する場合。

“`entry.js
console.log(require.main);
“`

Node.jsでapp.jsを実行
“`
node entry.js
“`
コンソールへの出力
“`
Module {
id: ‘.’,
path: ‘/absolute/path/to’,
exports: {},
filename: ‘/absolute/path/to/entry.js’,
loaded: false,
children: [],
paths:
[ ‘/absolute/path/to/node_modules’,
‘/absolute/path/node_modules’,
‘/absolute/node_modules’,
‘/node_mo