Node.js関連のことを調べてみた2021年10月19日

[Vue]d3.jsを用いてTSVデータをVue3で描画するまでの方法

– フロントエンド開発においてAPIではjson、コンテンツではmarkdownをfetchして加工したり描画することが多い。
– Vue2利用の際も当てはまるが、最近Nuxt3のBetaが発表されたことも相まって、そこで導入されているVue3やViteの注目率や利用率が日に日に上昇。
– そこで今回はデータ形式としてよく使うTSVのVue3での描画処理を記録していく。

## 環境
– Mac OS 11.2.3
– Node.js v14.16.0
– Vue 3.2.16

## 前提
– 利用するサンプルプロジェクトとして以下を満たしていることとする。
– Vue3の利用
– Vite2の利用
– 以下で上記を満たすサンプルを用意することが可能。

“`bash
npm init vite@latest sample — –template vue
“`

## 手順

### TSVデータの用意
– 描画対象のTSVデータとして以下を用意して任意のディレクトリに入れておく。

“`text:data/members.tsv
id name score
1 t

obnizでビールの飲み頃温度を教えてくれるIoTを完成させたい！

**させたい！**という願望含む、現状**未完成**の投稿で恐縮です。
絶賛**迷走中**ですので、**お力添えいただければ幸いです！**

プログラミングを習い始めて半月が経ち、obnizを使ってIoT入門しました。
天敵のプリン体を避けビールを絶っていますが、時には飲みたくなり、
そんな特別な時には**最高の状態のビールを飲みたい！**私利私欲のためのIoT製作です。

ビールの飲み頃温度は夏なら4～6℃、冬なら6～8℃とされています（喉越しはさておいて）。
冷蔵庫で長く缶ビールを冷やしておくと冷えすぎて、本来のビールの美味しさが半減されてしまいます。
出典：[サントリー](https://www.suntory.co.jp/customer/faq/001711.html)
そこで、**冷蔵庫から出して温度を測りながら、飲み頃と言われている4℃以上になったら
飲み頃サインをLEDが光って教えてくれるもの**を目指して作っています。

##現状

npm経由でfirebase cliをM1Macにインストールしてもエラーになる

# はじめに
なんかエラーになるんだけど、日本語で直接言及しているのが見当たらなかったのでメモ

# 解決方法
Node16にあげてからインストールしてください。
14系は駄目でした。

以上！

clasp login時エラー

clasp login時以下のエラー表示。

“`shell
node[3450]: ../src/api/callback.cc:125:void node::InternalCallbackScope::Close(): Assertion `(env_->execution_async_id()) == (0)’ failed.
“`

nodeのバージョンが
v.16.2.0だったのを
現在の安定版
v.14.18.1
にしたら解決。
https://nodejs.org/en/download/

### 参照

https://qiita.com/Hide-Zaemon/items/cbb4497237843a729994

TypeScript + Nexus + Prisma で GraphQL ( for MySQL ) 環境を構築したった

# はじめに

はじめまして。全然関係ないけど、最近は Vue を裏切って React 書いてます。

さて、前回、[TypeORM を使って Node.js の GraphQL 環境を構築しました](https://qiita.com/les-r-pan/items/8f11d90eb0538cac2812)が、ぶっちゃけ TypeORM と GraphQL との親和性があまり良くなくて、結局、その後の開発がそこまでドライブしませんでした。
そんな中、今のチームで Node.js で GraphQL の API サーバを新たに構築する必要があり、参考になる既存資産もあったので Nexus + Prisma でやってみました。

以下の記事を大いに参考にさせていただいております。

https://zenn.dev/queq1890/articles/2a7967cb679357

# 実際にやってみた

## Prisma

https://www.prisma.io/

> Next-generation Node.js and TypeScript ORM

と謳っています。
公

パスワードのセキュリティ（ハッシュ化）

##はじめに
セキュリティ関係気になったので調べてみた。

—

##簡単なパスワードのイメージはこんな感じ

—

##昔のセキュリティでは
とりあえずパスワードをハッシュ値にしておけ！
みたいな時代があったらしいが色んな攻撃方法が出来てこれだけでは不十分らしい。

—

####例えば

—

**レインボー攻撃**
レインボーテーブルと呼ばれる、ハッシュ値からパスワードを特定するための逆引き表を用いて、パスワードを高速に解読する手法。

こんな攻撃されたらハッシュ化してるだけやとリスクある。

—

##現状の対策

—

###saltの付与

—

ハッシュ値にするメッセージをm、ハッシュ値の関数をh(x)、saltをsとしたときに、ハッシュ値＝h(m||s)として、saltを追加したメッセージをハッシュ化す

angular.jsonを書き換えてassetsフォルダのようなビルドと関係ないフォルダを作りたい

自分なりに調べたので備忘として残しておきます。
# angular.jsonとは
一言でいうとAngularアプリの設定を行うファイルとのこと。
ビルドの設定やフォルダ構成、sourceMap等の有効化など色々な設定を行っている。

# ビルドのオプションをいじって任意のフォルダを作成する
[参考サイト](https://angular.jp/guide/workspace-config#asset-config)

デフォルトではAngular.jsonのassetsプロパティに定義されている通り、**assetsフォルダ**の中身がdist/appフォルダ下に展開される。

“`angular.json
“assets”: [
“src/assets”,
“src/favicon.ico”
]
“`
これを詳しく書くと以下のようになる

“`angular.json
“assets”: [
{
“glob”: “**/*”,
“input”: “src/assets/”,
“output”: “/assets/”
},
{

Instagramにアップロードした画像をランダムにESP32に表示する

Instagramにアップロードしてある画像を、手元に置いておくLCD付のESP32に表示させます。
ついでに、ランダムに表示画像を切り替えさせるのと、日時も表示するようにして、卓上時計 兼 写真立てに仕立てます。

ソースコードもろもろを以下のGitHubに上げておきました。

poruruba/InstagramGallery

https://github.com/poruruba/InstagramGallery

とはいっても、ほとんど以下で紹介されている通りに実行すれば実現できました。（非常に助かりました。ありがとうございました！）

APIを使って自分のInstagram投稿写真を取得する方法【Instagram Basic Display API】

APIを使って自分のInstagram投稿写真を取得する方法【Instagram Basic Display API】

#Facebookにアプリを登録する。

InstagramにAPIでアクセスするには、Facebookにアプリとして登録する必要があります。

##Facebookに開発者アカウントを作成する

Faceboo

socket.ioでCORSを設定する

socket.ioのCORSはv3以降は有効にする必要があるようです。

## サーバ側

「socketio」の引数で「cors」を設定します

“`server.js
const socketio = require(‘socket.io’);
const http = require(‘http’);

// origin は function を設定できるようです
// ですので、正規表現を使用し、パターンマッチをさせることもできます。
const socketOptions = {
cors: {
origin: function (origin, fn) {
const isTarget = origin !== undefined && origin.match(/^https?:\/\/www\.test\.net/) !== null;
return isTarget ? fn(null, origin) : fn(‘error invalid domain’);
},
credentials: true
}

Heroku + Node.js でウェブアプリ開発した時のメモ書き

初めてHerokuを使ってみました。いろいろ新しい発見があったため、メモを残しておきます。

# 成果物

https://peaceful-dawn-16357.herokuapp.com/

技術文章を入力してボタンをクリックすると、誤字や、修正した方が良い箇所を教えてくれます。

趣味＋勉強を兼ねて開発してみました。


レポジトリはこちら。

https://github.com/Nick-smallworld/techtext-lint

# 構成

* インフラ
* [Heroku](https://jp.heroku.com/)
* 言語
* [Node.js](https://nodejs.org/ja/)
* フレームワーク
* [Vue.js](https://jp.vuejs.or

複数ノードでsocket.ioを使用する

**ALB配下に「socket.io」を使用しているインスタンスを複数立ち上げる際の対応**
※シングルインスタンスで動作していることが前提となります。

https://socket.io/docs/v4/

## シングルインスタンスのみ考慮されている状態の場合

`unknown sid “xxx”` のようなエラーがレスポンスに戻ってきたりします。
「socket.io」は標準で複数インスタンスに対応していません。

※「socketio-sticky-session」を使用すればいけるかもしれませんが、私は試していません。
※「@socket.io/redis-adapter」はメッセージを共有することは出来るそうですが、**「handshake」**時の動作には対応していません

## 対応方法

AWSのALBなら**「Stickiness」**で、「socket.io」の**「handshake」**に対応が出来ます。
※詳しくは

フォロー中のTwitter最新記事をしゃべらす(その２)

#はじめに
●「フォロー中のTwitter最新記事をしゃべらす」の記事のIFTTT/firebase版です。

#環境
●Windows10 HOMEのPCにWSLのubuntuをインストールして使用してます。
●ubuntuでnpm,node.js,firebaseなどをインストールする
●WSLのubuntuでpulseaudioでPCのスピーカを使うようにする
●Windows側でpulseaudioサーバのインストールが必要です
　https://www.cendio.com/thinlinc/download の 「Client Bundle」のリンクからダウンロードできます
●音声出力はGoogle Translate Text to Speechを使用しています。

#プログラム(nodejs)
var firebase = require(“firebase”);
var iconv = require(‘iconv-lite’);
require(‘date-utils’);

var value1 ;
var form

[メモ] Node.jsで開発するにあたっての基礎知識まとめ

# はじめに

この記事は自分がNode.js未経験の状態からNode.jsのプロジェクトに携わって学んだことを忘れない様にメモしておくための記事です。
今はプロジェクトを離れてNode.jsに関わっていないため、思い出すためのメモとしてまとめました。
各ツールの役割を解説する事で、開発時に知識として必要なキーワードを効率よく知る事を目的としています。
私自身常に最新の情報を追えていた訳ではないので、情報としては古い可能性があるかもしれませんのでご注意を。

また、ツールの導入の仕方はバージョンアップによって変わる事があり、都度公式の最新の情報をチェックすべきであり、かつ今回の趣旨ではないため省略します。
実際こちらの記事を記載中にバージョンアップによって色々と変わったツールが散見されました。

# より詳しい情報が欲しい方には

私はある程度自力で試行錯誤しながら学んだ後でこの本に出会ったので、本の内容の半分くらいは既に知っていましたが、知識を固めるのに非常に助かりました。
また、最初にこの本を読んでいたらもっと効率よく必要な知識を学べたと感じました。
ガチガチな技術書より実践的

LINE Bot のカルーセルテンプレートを Firebase Functions で実装する方法について

## 概要

3~4年も前に[公式のスタートガイド](https://firebase.google.com/docs/functions/get-started?hl=ja)ぐらいしか使ったことがなかったため、Firebase Functionsをちゃんと触るのは今回が初めてで、LINE Botも簡単なメッセージ返答ぐらいまでしか触ったことがなかったことと、FirebaseとLINE Botの組み合わせも初めてだったので色々とハマったことをまとめようかと。

## やったこと

　　　

最初は、FirebaseとLINE Botの組み合わせで定期的に何かをつぶやくBotを作りたいなと思い、つぶやく内容をスクレイピングで取得する

anyenv + nodenvでNode.jsのバージョンを上げる

個人の忘備録ですが、`anyenv`と`nodenv`でNode.jsのバージョンを管理してる方の役にも立てばと思います。

## 手順

### [STEP1] anyenvアップデート用のプラグインをインストールする

**既に、`anyenv-update`をインストールしてる方は不要**ですが、`anyenv`上に構築してる`nodenv`をアップデートするために、`anyenv-update`というプラグインが必要になるので、まずはインストール。

これを使うと、`nodenv`以外にも、`anyenv`が管理してる`*env(rbenv等)`を一括でアップロードすることができます。

https://github.com/znz/anyenv-update

“`terminal
$ mkdir -p $(anyenv root)/plugins
$ git clone https://github.com/znz/anyenv-update.git $(anyenv root)
“`

### [STEP2] nodenvを最新にする
上記がインストールされたら以下

C#とNode.jsを連携する

###C#とNode.jsを連携する

####EdgeJsを利用する
EdgeJsを利用しNode.jsからC#通信ができます。その逆もできます。.net4.6のみ。まだ.netCoreには未対応のようです。

#####Node.js側

“`
const edge = require(‘edge-js’);

const helloWorld = edge.func(‘cs’, function () {/*
async (input) => {
return “.NET Welcomes ” + input.ToString();
}
*/});

helloWorld(‘Node.js’, function (error, result) {
if (error) throw error;
console.log(result);
});
“`
#####C#側
NodeJsからC#のメソッドを実行しデーターを渡します
Angular CLIインストール時のWARN解消

## はじめに

Angular CLIインストール時にWARNが出たので調べてみました。

2021年10月時点

## 環境

“` shell
$ node -v
v14.18.1
$ npm -v
8.1.0
“`

Node.js(安定最新版) + npm(最新版)

## Angular CLIのインストール

“` shell
$npm i @angular/cli
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘@angular/cli@12.2.10’,
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’
npm WARN EBADENGINE },
npm

React + Express + Docker の環境構築

Reactで作成した画面からExpressで作成したAPIを呼び、取得したデータを画面表示するところまでを構築していきます。
React/Expressはそれぞれ別のDockerコンテナで動作させます。

# ディレクトリ
“`
app/
　├── docker/
　│ ├── docker-compose.yml
　│ └── Dockerfile
　├── backend/
　└── frontend/
“`
`docker/` の2ファイルはホスト側で作成しますが、その他の `backend/` と `frontend/` 内のファイルは全てコンテナ側で作成していきます。

# Docker
`Dockerfile` と `docker-compose.yml` を作成し、コンテナを起動します。

## ファイル作成
React、Express で共通で使う Dockerfile を1つ作成します。

“`:Dockerfile
FROM node:14
“`
今回はひとまずnodeが動けば良いので何も設定していません。

次に docker-compose.ym

Azure Web PubSub と Node.js を組み合わせた軽いお試し

この記事は、以下の続きにあたる内容です。

●Azure Web PubSub を試してみるための下調べ（JavaScript を利用する方向で） – Qiita
　https://qiita.com/youtoy/items/c1c9c2893e0e0fe29703

記事執筆時点でプレビュー版の「[Azure Web PubSub](https://azure.microsoft.com/ja-jp/services/web-pubsub/)」を使ってみる話で、Node.js のプログラムと組み合わせてみたという内容になっています。

## サンプルプログラムを使ったお試し
[前の記事](https://qiita.com/youtoy/items/c1c9c2893e0e0fe29703)でも引用していた以下の記事の

Sequelizeを使う際のurl設定について

Node.jsのORマッパーを実現するライブラリである、sequelizeを使って、RDBMSに接続する際のurlの設定方式についてのメモ。

# 前提
– postgreSQLはDockerにてローカルに起動

“`
docker run –name postgres -e POSTGRES_PASSWORD=postgres -e POSTGRES_DB=sample_db -p 5432:5432 postgres:12
“`

– Version

“`
“sequelize”: “^6.6.5”
“`

# 確認結果

– OK

“`js
const url = process.env.DATABASE_URL || “postgres://postgres:postgres@localhost:5432/sample_db”;
“`

– OK (port番号を省略)

“`js
const url = process.env.DATABASE_URL || “postgres://postgres:postgres@localhost/sampl