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

ReactとNode.js、AWSで社内システムを構築するまで 1/2

こんばんは。natariです。

社内システムの構築プロジェクトが終わったので、日記風にどんなことをやったかを書いていきます。

まず、プロジェクトの概要ですが、社内でExcelで管理している出社状況データ(今日は○○さんはテレワークだよーとか、〇日はお休みだよーとか、部の出社率とかを管理するもの)のweb化でした。

上長からこんな技術使ってとか、こんな風に作ってという指定はありませんでした。

なのでまずは社内の集会などを利用して、どんなシステムを作ったらいいかという皆さんの要望を聞き出すヒアリングから開始しました。

大体20人くらいの方から意見を頂き、すべての意見を反映させることは出来ないので、要望の数が多いものをピックアップして、あとはExcelで管理していたデータをそのままweb上で再現することとしました。

ここで僕にとって幸福だったのは、使用技術の指定がなかったことです。ちょうどプライベートでReactやTypeScript、Node.js、AWSあたりを勉強していたので、SPAでWebアプリを作ってみようと思い、この4つの技術を使うこととしました。

SPAについて簡

Discord.jsでDiscordの新機能のTimeoutを実装する

#初めに
少し前にDiscordにTimeoutが実装されましたね
最近はテスト勉強などで忙しくて開発をしていませんでしたが今日から復活です！
Timeoutに対して詳しくはこちら
Docs
https://discord.js.org/#/docs/main/stable/class/GuildMember?scrollTo=timeout
released
https://github.com/discordjs/discord.js/releases/tag/13.5.0

#必要なもの
Discord.js v13.5.0以降
Node.js v16以降

#コード
“`js
const {Client,Intents} = require(‘discord.js’), client = new Client({intents: [ Intents.FLAGS.GUILD_MESSAGES,Intents.FLAGS.GUILDS]});
client
.on(‘messageCreate’, message => {
if(message.content.startsW

Lambdaで当日との日付の差分を算出する [ Node.js・Python ]

#はじめ
Lambdaで、当日の日付を`20220116`の形にし、5日後の日付`20220121`を引くと、`5`という数字が出せるようにすることを目的として、Lambdaを作成したため、まとめます。

#Lambdaコードの流れ

###当日の日付

1. 2022-01-16 11:41:21.282791（タイムゾーンはUTC）
– ↓UTCをJSTに変換する
2. 2022-01-16 11:41:21.282791（タイムゾーンはUTC）
– ↓タイムスタンプに変更
2. 1642765665851
– ↓年、月、日のみに変換。（時間、分、秒は、切り捨て）
2. 20210116

###5日後の日付

1. 2022-01-16 11:41:21.282791（タイムゾーンはUTC）
– ↓日付を5日進める
1. 2022-01-21 11:41:21.282791（タイムゾーンはUTC）
– ↓UTCをJSTに変換する
2. 2022-01-21 11:41:21.282791（タイムゾーンはUTC）
– ↓タイムスタンプ

みんなが「それな」と思える事柄を開発業務未経験エンジニアが作ってみた【個人開発】

2021/11/30ごろに、みんなの共感を集めるアプリ「SORENA」をβリリースしました。

SESでのお仕事をしながらアプリのβリリースまで行うことができました。

この記事では『SORENA』のサービス内容や使い方、技術とのご紹介をさせていただきます。
また、βリリースにあたってフィードバックも頂いたので、これからのアプリの課題も書こうと思います。

# 目次
[サービスの紹介](#サービスの紹介)
　-何をするアプリなのか？
　-メインページ
　-結果画面
[技術の紹介](#技術の紹介)
　-フロントエンド
　-バックエンド
　-ホストサービス
　-使用データベース
　-テーブル設計
　-主な使用技術
[悩んだポイント](#悩んだポイント)
　-カードスワイプ
　-node.jsのノンブロッキング処理
　-MySQLの自動的切断問題
[アプリの課題、将来的な実装](#アプリの課題、将来的な実装)
　-なぜ、βの状態でリリースしたのか？
　-これからのアプリの課題（フロント）
　-これからのアプリの課題（サーバー）

# サービスの紹介
###何を

[Node.js][PostgreSQL] too many connections for role の解決

# 設定

– PostgreSQL 13.5
– Node.js 14.16.1
– pg(node-postgres) 8.7.1

# 問題

– Node.jsからDBに対するクエリのレスポンスが返ってこない
– 以下のコードの`results`が返らない

“`javascript:model.js
exports.getUserByUserId = async function (user_id) {
var query = {
text: “select * from users where user_id = $1;”,
values: [user_id],
};
await pool.connect();
try {
results = await pool.query(query);
return results.rows[0];
} catch (e) {
console.log(e);
}
};
“`

– psqlでCUIから接続しようとすると以下のエラーで接続できない

“`
p

Webの勉強はじめてみた その21 〜Slack上で動くbot作成1〜

N予備校の「プログラミング入門Webアプリ」を受講しています。
今回は第3章7〜9節です。
講義内ではTODOのbotでしたが、復習も兼ねて自分で作りました。

学んだ用語

CRUD クラッド

:::note
ソフトウェアが情報の永続化をしようとしたときに出てくる操作、Create, Read, Update, Deleteの頭文字をとったもの。
:::

リファクタリング

:::note
ソースコードを見易くする。可読性の向上。
:::

テスト駆動開発

:::note
実装や修正よりも先にテストを用意し、テストに適合するようにリファクタリングを繰り返すことでコードの品質を高めていく開発手法
:::

とにかくほめてくれるbotを作る

要件

1. 「ほめて」 : あらかじめ用意された配列からランダムで発言
2. 「もっと ~」 : ~という内容を配列に登録。
3. 「ほめないで ~」 : ~(インデックス)番のメッセージを削除
4. 「見せて」 : 登録されているメッセージ

Node.js Express ミドルウェア

#【Node.js Express ミドルウェア】

##Expressで足りないものは、**ミドルウェア**でカバー
– リクエストレスポンスに対して、任意の追加処理を行う関数のこと。
– リクエストオブジェクトの変更
– レスポンスオブジェクトの変更
– リクエスト・レスポンスを用いた独自の追加処理　…etc

##ミドルウェアの実装
– 通常処理

“`
function (req, res, next) {
//何かの処理 （次の処理を呼べるように next ）
next();
}
“`

– 　エラー処理

“`
function (err, req, res, next) {
//何かの処理 （次の処理を呼べるように next ） ​
​next();
}
“`

##ミドルウェアの組み込み

“`
const express = require(“express”);
const app = express();

app.use((req, res, next) => {
//アプリケーションレベルのミドル

フロントエンドとNode.jsで繋いだ時のCORSエラーについて

フロントエンド(Angular)とバックエンドの繋ぎこみを行なった時にcorsエラーが表示され、それに対応した流れを書いていこうと思います。

####エラーの内容

“`
core.js:6498 ERROR Error: Uncaught (in promise): HttpErrorResponse: {“headers”:{“normalizedNames”:{},”lazyUpdate”:null,”headers”:{}},”status”:0,”statusText”:”Unknown Error”,”url”:”http://localhost:3000/some”,”ok”:false,”name”:”HttpErrorResponse”,”message”:”Http failure response for http://localhost:3000/some: 0 Unknown Error”,”error”:{“isTrusted”:true}}
at resolvePromise (zone.js:1213:1)
at resolvePro

Laravel Mix で ERR_OSSL_EVP_UNSUPPORTED が出た時の対策

npm run dev　を行った時、次のようなエラーが出ます。

“`text
{
opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ],
library: ‘digital envelope routines’,
reason: ‘unsupported’,
code: ‘ERR_OSSL_EVP_UNSUPPORTED’
}
“`

これは次のバージョンで発生します。

“`text
Node.js v17.3.1
Node.js v17.3.0
Node.js v17.2.0
Node.js v17.0.0
“`

次のバージョンでは発生しないことを確認しました。

“`text
Compiled Successfully
“`

“`text
v16.13.2
v16.10.0
v15.14.0
v15.0.0
v14.8.3
v14.8.2
v14.8.1
“`

Node.js on Dockerでエラー発生(Error: EACCES: permission denied, errno: -13)

# はじめに
DockerでNext.jsを使ってウェブページを作ろうとしたけど、`npx create-next-app {name}`の段階で`glob error`っていうワケワカランのが発生した。テンションが下がった。

# 環境
– Linux (KDE neon based on Ubuntu)
– Docker version 20.10.12
– image node:17.3-alpine

# 問題

“`
# コマンドをうちこむ
docker-compose run –rm node npx create-next-app nextjs-tutorial
Creating nextjs-tutorial_node_run … done
Creating a new Next.js app in /usr/src/app/nextjs-tutorial.

Using npm.

Installing dependencies:
– react
– react-dom
– next
#エラー❗❗❗なにこれ。
glob error [Error: EACCES

‘el’ is defined but never used no-unused-vars…のエラー解決方法。

Vue.jsでVue CLIを使った環境で学習していて、
npm run serveでサーバー立ち上げた際に問題が起こりました。

“`
kushiyama_makoto@MakotonoMacBook-Air udemy-vuejs4 % npm run serve

> udemy-vuejs4@0.1.0 serve
> vue-cli-service serve

INFO Starting development server…
98% after emitting CopyPlugin

ERROR Failed to compile with 1 error 14:40:38

error in ./src/App.vue

Module Error (from ./node_modules/eslint-loader/index.js)

Okta + OIDC(Node Express) 로그인 따라하기

#TL;DR
> [Express & Okta-Hosted Login Page Example](https://github.com/okta/samples-nodejs-express-4/tree/master/okta-hosted-login) 샘플 코드를 따라해보았습니다.
> 서버 설정과 Okta Admin 설정을 스크린샷 위주로 꼼꼼히 기록하였습니다.

#사전환경
– node.js 12

“`shell
# node.js 12 설치
$ curl -sL https://rpm.nodesource.com/setup_12.x | sudo bash –
$ yum install -y nodejs

# 설치확인
$ node -v
v12.2.29
$ npm -v
6.14.

Expressのテンプレートエンジンにejsを使う時、ejs内でexpressのlocalsを参照できる

## はじめに
Expressでテンプレートエンジンejsを使った実装をする時に、ejs内ではExpressのlocalsを参照できるという事を知ったので、具体的にどうなるのか？を少しまとめてみた。

## ejs内ではexpressのapp.localsやres.localsのlocalsを参照できる
[res.render(view [, locals] [, callback])](https://expressjs.com/en/4x/api.html#res.render)には、

> locals, an object whose properties define local variables for the view（ビューのローカル変数を定義するプロパティを持つオブジェクト）.

と書かれているので、あくまでres.render()の第二引数に渡す値のみがテンプレートエンジン内（ejs）で使えるのかと思っていたが、実際にはejs内では`locals`というオブジェクトに、res.render()の第二引数のオブジェクトと、expressのlocals（app.loc

fnm (Fast Node Manager) のインストール方法と使い方

これまで Windows で Node.js のバージョン管理は Nodist を利用していましたが、2019年3月30日のリリース以降更新されていません…:sleeping:

https://github.com/nullivex/nodist

そんな理由から別のバージョン管理ツールに乗り換えをすすめる記事をちらほら見かけるようになりました。

乗り換えなければと思いつつ、

* Node.js が利用できなくなると仕事にならない
* 種類が多くてどれを選んだらいいのかわからない
* インストールが大変そう

という理由からずっとスルーしていました…

しかし、以下記事と出会い、 fnm (Fast Node Manager) に乗り換えることにしました！

https://qiita.com/heppokofrontend/items/5c4cc738c5239f4afe02?0

fnm の詳細は以下をご覧ください。

https://github.com/Schniz/fnm

というわけで、 fnm のインストール方法を紹介します。

ちなみに Nodist は以下の手順

Express.jsにPassport.jsで、任意のフォルダ配下のみをBasic認証する　その2

## 概要
expressを使って特定フォルダのみパスワードを掛けたい。

こんどこそ、express-basic-authを使って。

“`JavaScript
const express = require(“express”);
const basicAuth = require(“express-basic-auth”);
const PORT = 3000;
const app = express();
//
app.use(“/admin”, basicAuth({
users: { ‘user’: ‘pass’ },
challenge: true,
}), express.static(“public/admin”));
//
app.use(“/”, express.static(“public/”) );
app.listen(PORT, () => {
console.log(“app listening on port ” + PORT + ” ” + new Date());
});

“`

## 結論
やったー。動いた！ばんざーい。

メモ：node.jsのjestでユニットテスト

[pythonのユニットテストpytest](https://qiita.com/DiveMasakazu/items/b242e92ab4aca99c6877)は軽く見たので、node.jsも見ておく。
現時点だとjestというのが一番良さそう。
[公式日本語版}(https://jestjs.io/ja/docs/getting-started)ぽいのや
[ここ](https://qiita.com/rnasahiro/items/2d6584a915745218442e)、[ここ](https://webbibouroku.com/Blog/Article/typescript-jest)
を確認しながら。

#インストール
単体だと`npm install jest`だが
`npm install typescript jest @types/jest ts-jest`で入れた。
実際の開発現場だと`–save-dev`してるのかも
27.4.5で入った。

`jest -init`コマンドを流すのだが

“`
C:\nodejs\jest>.\node_modules\.

Symbolブロックチェーンで不正な署名要求を検知し、注意喚起のメッセージを送る方法

現在Symbolブロックチェーン上で、全額振り込みのトランザクションに署名させる詐欺が確認されています。今回はそういった詐欺行為を検知し、注意喚起のメッセージをトランザクションに載せて自動で送信する方法を紹介します。

いつもはBrowser上のJavascriptで紹介していますが、今回は常駐させる必要があるのでNodeJS上で動かします。もちろんブラウザ上で起動させて、イベント期間中だけ入金したアカウントにチケットを配布させるローコードでデプロイレスなスマートコントラクトとして利用するなども可能です。ソースコードについては以下の記事を参考にさせていただきました。

https://qiita.com/VistielArch/items/9d9046d4a21f22debd8e

“`js

const sym = require(“symbol-sdk”);
const nodeURL = ‘https://node.xembook.net’;

//詐欺アカウント
const scamAddress = sym.Address.createFromRawAddress(‘

SORACOM LTE-M Button plusをトリガーに、LINE Notifyで位置情報を通知する

#はじめに
SORACOM LTE-M Button　powered by AWSを以前使っていたのですが、紛失。
しかし最近このLTE-Mボタンを使う機会ができたので、これを機にLTE-M Button Plusを買いました。

https://soracom.jp/store/5207/

そしてこのLTE-M ボタン Plusを使い、AWS lambda、そしてIFTTTを介してLINE Notifyの通知を使う事を実現してみました。

IFTTTのLINE Notifyの設定でgoogle staticmaps apiを叩くようにし、座標情報はLTE-Mボタンから取得。
これでボタンを押すとNotifyが届くと共に大まかな現在地のマップの静止画も表示されるようになりました

これで富士スピードウェイのどのあたりで連絡してきたか分かるはず? pic.twitter.com/UNlwXDll86

— norippy@車とIoTを楽しむおじさん (@Norio_Delux) January 12, 2022

調べてわかったのですが、このボタンはPowered by AWSのモデルと違いボタンを押した位置座標を大まかではあるものの取得できる機能があります。そこで、今回はtwitterの動画にあるように、LINE Notifyに文章を送るだけでなく、今の位置情報をGoogle maps APIの中のStatick map APIを使って一緒に今の位置情報を画像で送ってみました。

この記事ではこの実現方法をまとめます。

#開

Googleさんの zx をローカルインストールして「nodeコマンドで実行」／「ファイルを直接指定して実行」

この記事の内容は、昨年末のアドベントカレンダー用の記事でも扱った、[Googleさんの zx](https://github.com/google/zx) に関するものです。

●【Backlog 2021】 Googleさんの zx で Backlog API を扱う（JavaScript で課題を追加する） – Qiita
　https://qiita.com/youtoy/items/36ea84e09332d4e6815a

## 何をやるか
今回の記事で扱う内容は、以下のとおりです。

– `npm i zx` で zx をローカルにインストールして使う
– `node ●●.mjs` というような nodeコマンドを使った処理の実行
– `./●●.mjs` というようなファイルを直接実行する形での処理

## 下準備
冒頭の記事でも書いている、今回のセットアップの話をざっくり書きます。
なお、自分が試している環境は Mac で、Node.js のバージョンは 14.18.2 です。

Node.js のバージョンについては、公式ページに以下の指定がありますので、その点だけ

Express.jsにPassport.jsで、任意のフォルダ配下のみをBasic認証する

## 概要
expressを使って特定フォルダのみパスワードを掛けたい。

参考サイト、、、っていうかほぼ以下のページからゴニョゴニョした。
ありがとうございます。
Express.jsにPassport.jsで、任意のフォルダ配下のみをBasic認証する
https://qiita.com/hoshimado/items/272fba1aeb728e14f278

“`JavaScript
const express = require(“express”);
const PORT = 3000;
const app = express();
//
const passport = require(“passport”);
const passportHttp = require(“passport-http”);
passport.use(new passportHttp.BasicStrategy(
function (username, password, done) {
if(username==”user” && password==”pass”){