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

Elasticseach App Search に MongoDBのデータを書き写して全文検索調査に使う。

# はじめに
MongoDBにコレクションされたドキュメントに対し、全文検索したくなった。しかし、MongoDBに対して検索をしかけるのではちょっと速度面で難がある。また、検索のためのUIの作成もめんどくさい。

なにか簡単に実用的なツールを構築する手立てはないか、と模索していたところ、Elasticsearchに App Searchというものがある（あった？2020年に名称が変更になっているらしい）ことがわかった。

今回の先達情報はこちら。

https://qiita.com/tike/items/dc1ed4d0734080a00376

こちらの先達の手段で、AppSearch環境は作れる。本投稿では、PythonでMongoDBのデータを読み込み、AppSearchに書き写す機能の開発の説明に重点を置きながら、全文検索調査システムを構築する手順を紹介する。

# App Search のセットアップ

docker を使う。dockerで 4GB程度のメモリが使える環境であることが必要らしい。事前準備として、読者の環境でdovkerの環境を調整してほしい。また、ローカル環

Node.js 18 から実験的にグローバルスコープで利用可能になった fetch API を試す（鉄道遅延情報の JSON を取得してみる）

この記事は、最近の技術記事でも話題を見かける「Node.js の fetch API」に関するものです。

●「Node.js 18」がリリース ～fetch API、Web Streams APIがグローバルスコープで利用可能に – 窓の杜
　https://forest.watch.impress.co.jp/docs/news/1404310.html

以前のバージョンでも利用可能にはなっていた fetch API（以前のバージョンだと `–no-experimental-fetch` というフラグが必要だった）ですが、Node.js 18 からはグローバルスコープで利用可能になりました。これを試してみようと思います。

### 余談： ブラウザの Fetch API
なお、ブラウザでは以前から特別な対応なしに [Fetch API](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API) が利用可能でした。そのためブラウザで Fetch API を利用する話は、過去に以下の記事などで取り扱ったことがありました。

●

【React】Reactの始め方

# 【この記事に書くこと】
・Reactってそもそも何？　どうしてReactを使うのか？
・Reactをローカル環境で始める手順
# 【経緯】
Reactの入門書２冊ほど読んだので、学んだことをまとめたいと思い記事にしました。

# 【環境】
以下の環境でReactを試しています。
| OS | macOS Monterey 12.3.1 |
|:-:|:-:|
|ブラウザ |Google Chrome |
|テキストエディタ | VS Code |

# 想定読者
・JavaScriptに触れたことがある（初心者〜中級者）

# Reactってそもそも何？
ReactとはJavaScriptのフレームワークです。
フレームワークはざっくりいうと、あらかじめよく使う機能がまとめられたツールのことです。
例えば、どのWebサービスにもあるような画面遷移（トップページから各ページに飛ぶとか）、データベースにデータを登録するなどの機能がありますが、それらを毎回１から作るのは面倒ですよね？
　
Reactを使うことで、よく使う機能を０から作る必要がなくなります。

# React

WindowsでNodeのバージョンを切り替えて実行できるnvmをインストール

# はじめに
https://fumidzuki.com/knowledge/4533/#toc2

の方がまとめていただいている内容を端折っているだけのもの

# 環境
– Windows10 (21H2)

# 手順
1. インストーラーのダウンロード＆実行

https://github.com/coreybutler/nvm-windows/releases

から、nvm-setup.zip をダウンロード＆解凍して実行

1. Nodeとしてインストールできるバージョンの一覧取得＆インストール
※`コマンドは管理者実行で実行しないとＮＧ`

– 使用可能バージョンの一覧取得
“`shell
nvm list available
# availableを抜くと、インストールしているバージョンと、現在設定しているバージョンが閲覧可能
“`

– 指定バージョンのインストール
“`shell
nvm install [バージョン]
# nvm install 16.14.2 とか、上記で表示されたバージョンを指定
“`

– 使うバージョンの指定
“`s

Error の cause オプションによってエラーの再 throw 時にスタックトレースが失われるのを防ぐ【ES2022】

「エラーをキャッチして再度エラーを投げる」をやる場合、以下のように書くと元のエラー情報が失われてしまうためデバッグしづらいコードになります。

“`js
try {
const user = await fetch(userApiUrl);
} catch (error) {
throw new Error(“ユーザー情報取得APIでエラー”);
}
“`

メッセージに `error.message` や `error.trace` を連結して入れるのも手ですが、メッセージとしては読みづらく使いづらいです。

よってこれまでは、コード全体のエントリポイントなどでまとめてエラーをキャッチしスタックトレースが失われない形で処理するなどしていたかと思います。

# Error の cause オプション

ES2022 で入った機能で、このように `Error` の第二引数にオプションで `cause` を渡せるようになりました。

“`js
throw new Error(“エラー”, {
// ここに前のエラーを渡せる
cause: prev

2つのTransformStreamを合成する

Node.jsの最新リリースではWeb Streamがグローバルに追加されました。また、Denoでも最近のリリースで各種APIがWeb Streamに対応しました。

Web Streamには、

– 読み取り用のReadableStream
– 書き込み用のWritableStream
– 変換用のTransformStream

の3種類のAPIがあります。

この記事では、ストリームの変換に使うTransformStreamを合成して、1つのTransformStreamを作成する方法について解説します。

## TransformStreamの使い方

まずTransformStreamの使い方を、TypeScriptの型定義と共に解説したいと思います。

`ReadableStream`型は、細切れになったA型のchunkが流れてくるストリームです。`ReadableStream`型は`WritableStream`型へパイプすることができます。

“`ts
function pipe(
readable: ReadableStream,

Vue/Nuxt→React/Nextの共通点,差異,そして世界でのトレンド

教育関連のAIシステムをドイツで研究しているのですが、データ収集のためにインターフェースを作る必要が出てきました。そのために、React/Nextをやる必要が出てきたため、Vue/Nuxtの知識を再利用することを試みます。

# 日本と欧州でのトレンドが微妙に違う!

今ヨーロッパに留学しているのですが、ドイツではNuxtよりNextの方が圧倒的に優勢だそうです。一方、日本では、Nuxtの方もまだ耐えていると聞きます。

そのことを、Googleトレンドから定量的に見てみましょう：

東京とベルリンでの”Next.js”, “Nuxt.js”の２キーワードの割合比較です。（１年間）

## ドイツでは「Nextしか勝たん？」状態


## 日本でもNextが人気だが、Nuxtも頑張っている

ubuntu 22.04LTSで最新のnodejsぶち込む方法

ubuntu 22.04LTSでは
“`
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash –
sudo apt-get install -y nodejs
“`
をしても12ver止まりなので
12verから16or最新verにアップデートする方法
“`
sudo npm install -g n
“`
最新版のNode.jsのコマンド
“`
sudo n latest
“`
最新のLTS版のNode.jsのインストール
“`
sudo n lts
“`
今のnodeのver確認方法
“`
node -v
“`
今のnpmの確認方法
“`
npm -v
“`
最新のnodeやnpmこれで行けると思います。

AWS EC2でnode.jsのバージョンの下げ方

AWS EC2でnode.jsのバージョンが原因で、上手くいかない…。
そんな時の対処方法を記しておきます。
# 準備
SSHを使用してEC2に接続します。
“`
$ ssh ec2-user@255.255.255.255 -i .ssh/qiita-sample.pem
Last login: Wed Apr 20 20:13:54 2022 from qiita-sample.com

__| __|_ )
_| ( / Amazon Linux 2 AMI
___|\___|___|

https://aws.amazon.com/amazon-linux-2/
19 package(s) needed for security, out of 33 available
Run “sudo yum update” to apply all updates.
“`
nvmはnode.jsのバージョン管理ツールです。
“`
$ nvm –version
$ nvm 0.34.0
“`
# nvmの使い方
現在

node.jsのrequireについてよくわからなかったので調べて試してまとめてみた

# 今回の問題
node.jsでサーバー関係のアプリを開発をしていて先達のgithubコードを見ていて node　でヘッダ部分の定義にある require 文の使い方をよく理解していない自分に気づいた。
出くわした問題とそれについて少し調べ、自分なりの結論を得たので書き留めた。

### モジュールを使うということ
node.jsで別ファイルに定義されている変数や関数を利用する。

### モジュールを使ったコードの例（自分にしっくりくるもの）
mymath.js
“`javascript
module.exports.add = (a,b) => a+b
module.exports.subtract = (a,b) => a-b
“`
### 使う側
index.js
“`javascript
const ddd = require(‘./mymath’)

console.log(ddd.add(1,2))
console.log(ddd.subtract(1,2))

“`
“`
node index.js
“`
とする。
同じパスにおいてあれば、require

［きんとーんきほんのき !!!］今日から始める kintone カスタマイズ〈コピペで使えるおまけ付き！〉

# ［巻頭特典］ カスタマイズファイル 基本テンプレート

“`JavaScript:基本テンプレート（.js）
(function () {
“use strict”;

kintone.events.on(“イベントタイプ”, function (event) {
// 処理内容
return event;
});
})();
“`

:::note info
イベント名が PC 版，モバイル版で別々でスマホ版忘れそう。。。全部まとめて書いたらコード長い。。。
そんなときは、
　`const viewRecordLists = [‘app.record.index.show’, ‘mobile.app.record.index.show’]`
のように、PC 版 と モバイル版をセットにして、変数に入れておくと、それなりに纏められて、各イベントごとに使い回すこともできるのでおすすめです。
:::

kintone 本体に影響を与えないための **即時関数**，**Strict モード**で記述するための kintone カスタマイズ基本構文です。

Node.js x HerokuでWebアプリを作った

# はじめに
『[存在しないクイズ](https://sonzaisinai.herokuapp.com/ “存在しないクイズ”)』
というアプリを作りました。

▼URL
https://sonzaisinai.herokuapp.com

この世界に存在しないものを四択の中から選ぶクイズアプリです。
同じルームにいる人と対戦ができます。

▼ソースコード
[GitHub](https://github.com/

【TypeScript】TSyringeを用いて5分でDIコンテナを実装する

## はじめに

[TSyringe](https://www.npmjs.com/package/tsyringe)はMicrosoft社のDIコンテナライブラリです。TypeScriptだと[InversifyJS](https://github.com/inversify/InversifyJS)の方が有名ですが、TSyringeの方が後発であることと、シンプルで使いやすいことから、今回はTSyringeを紹介したいと思います。

実際に動作するサンプルコードは[こちら(GitHub)](https://github.com/toginn/tsyringe-tutorial)になります。

### まずはDIパターンのサンプルで確認してみる

次の簡単なサンプルに、TSyringeを用いてみましょう。

“`typescript
interface Database {}

class DatabaseImpl implements Database {}

/* DIパターンにより、Databaseに依存している */
class Application {
/* 初期化

ngrokでローカルに立ち上げたHTTPサーバをHTTPSで公開する

最近では、HTTPサーバを立ち上げるにも、HTTPSでないとChromeでエラーとなったり、他のWebAPIと連携することができない場面が多くなってきました。また、SSL証明書もオレオレ証明書ではだめで、正規のSSL証明書である必要があったりします。
さらに、HTTPSであったとしても、ポート番号が443である必要がある場面が増えてきました。単に、静的なWebコンテンツであれば、GitHubにコンテンツをアップして、GitHub Pagesの機能を使って公開することはできるのですが、Node.js等を使ったWebAPIはできなかったりします。

そこで、ngrokを使うことで、ローカルに立ち上げたHTTPサーバを、正規のSSL証明書でかつポート番号443で公開することができ、WebAPIサーバとしても振舞えるようにします。

# ngrokアカウントの作成

まだの場合は、ngrokアカウントを作成します。以下のページからSign upします。

https://ngrok.com/

作成済みの場合は、Loginします。

# ngrokのダウンロード

ngrokを動作させるOSに

JavaScript(Node.js)における標準入力と文字列解析の方法メモ

JavaScript(Node.js) で簡単な競プロ的課題をやることになったが、なかなかJavaScriptでは標準入出力を行うことがないため調べた。
個人的に使いやすいと感じた使い方を記しておく。

# 結論

“`js
process.stdin.setEncoding(“utf8”);

let lines = [];
const reader = require(“readline”).createInterface({
input: process.stdin,
});

// 改行イベント
reader.on(“line”, (line) => {
lines.push(line);
});

// 標準入力終了時イベント
reader.on(“close”, () => {

// 分割代入で利用する
const [firstLine, …restLines] = lines;
const [n, m] = firstLine.split(” “).map( v => parseInt(v, 10));
console.log(n, m

私の王子さまはどこにいるの？めめに似てる人を教えて～！！（TeachaBleMachineを使った機械学習モデルを作ってみました）

こんにちは。
今回はコロナ自粛期間中にドハマりしたSnow Manの目黒蓮くんこと【通称めめ】を
身近に発見したい！というただ、それだけの気持ちで画像認証できるものを作りました。

せっかくなので、Snow Manの誰に似ているのかも試してみてください！
※Snow Manを知らない方は[こちらをクリック](https://www.johnnys-net.jp/page?id=profile&artist=43)

## まずは実際にSnow Man判定してみてください！
　注)　URL内のボタンを押した後　結果が出るまでしばらくお待ちください！

https://codepen.io/nagaharahitomi/full/ZEvmPXQ

## TeachableMachineの設定
今回は身近なめめを探したかったので、
身近＝会社の人をターゲットに作りました。
（最近仕事が忙しくて友達に会えてない！！！！）

:::note info
会社で会う人はスーツ姿！！
てことで、スーツ姿のSnow Manの写真をTeachableMachineに設定！！
:::

Cloud Functions にシンプルな Node の関数をデプロイする

# 概要

GCP の Cloud Functions を使おうと思って色々調べていたら、サクッとシンプルなファンクションをデプロイしたいだけなのに意外とシンプルな解に辿り着けませんでした。

なので**ここではシンプルな使い方を書きます。**
同時に微妙なハマりどころの解決方法も記載します。

そして Express をデプロイする方法についても書きます。
これくらいならギリギリシンプルです。多分。

ググると Firebase が云々とかの情報が多く、「シンプルにファンクションをデプロイしたいだけなんだ…Firebase は関係ないんだ…」と思いました。

Firebase 使わずに Cloud Functions を使うケースってそんなにないのかな。

もちろん TypeScript です！
ギリギリシンプル！

# 使うもの

– gcloud コマンド
– @google-cloud/functions-framework

特別なものはこれだけです。
gcloud は手元のマシンで使えるようになっている前提で書きます。

## @google-cloud/funct

Node.js v12 -> v16にyumでアップデートしてみた。(CentOS 7)

# Node.js v18がリリース
node.jsのv18（LTS予定)が、リリースされました。

前回インストールしたv12のサポートが2022-04-30で終了するということで、v18にアップデートしようと思ったのですが、ちょっと旨くいかなかったので、取りあえずv16(LTS)にアップデートしてみたいと思います。

以前、v12をインストールした記事は以下。

https://qiita.com/daichi_pd/items/239a7e3eea74c5be6dc9

## セットアップ用スクリプトを利用する

今回は、nodesourceで準備されているシェルスクリプトを利用してアップデートします。
（アップデートでは無く、新規インストールも以下の方法でインストールできると思います。）

curlがインストールされてない場合はcurlをインストールしておきます。
（すでにインストールされている人は飛ばしてください）

“`sh
yum -y install curl
“`

CURLを利用して、スクリプトをダウンロードして、実行します。
“`sh
curl -sL ht

JavaScritptの非同期処理の流れを図に整理してみた。

JavaScriptを使ったPluginを作成しているときに、想定している戻り値が返って来ずに、悩んでいたところ、Promise/aysnc/awaitについて、理解ができていない部分があったために、図にして、流れを整理してみました。

## JavaScriptのコードの基本的な流れ

上記に関数A、関数B、関数Cと順に並んだコードがあるとします。
基本的に、コンピューターは、コードを処理するときに、関数Aから順番に処理していきます。
最近では、複数の処理をできるコンピューターもあります。片方で、関数A→関数Bを処理し、もう一方で、関数A’→関数Cの処理を実行するなど、マルチで処理できるようにアレンジできます。

しかしながら、JavaScriptは、シングルスレッドと言われる単一の流れとなるので、基本的にマルチスレッドではできま

Nodeのコアモジュール名についている「node:」プレフィックスとは何か

## これはなに

Node.js 18 がリリースされましたね！

https://nodejs.org/ja/blog/announcements/v18-release-announce/

変更の中には、`node:test`というコアモジュールが追加されていたりしますが、そもそも`node:`ってなんなんだと思ったので、調べてみました。

## `node:`って何？

Node.js のコアモジュールを`require` / `import`する際に、`node:`プレフィックスをつけ、Node のコアモジュールであることを明示できるものです。
以下のような感じです。

“`js:CommonJS
// 以下2つは同じ
const fs = require(“fs”);
const fs = require(“node:fs”);
“`

“`js:ESM
// 以下2つは同じ
import fs from “fs”;
import fs from “node:fs”;
“`

Node.js のコアモジュールに対してつけることができ、 **`node:`をつけるつ