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

React による シングルページWebアプリケーション (SPA) の開発

# demoru.net でのサービス公開イメージ


demore.net とは、弊社で提供している SPA 体験サイトです。

# SPA とは何か？ (アプリ利用者の目線)

Actor (アプリ利用者) にとって シングルページWebアプリケーション (以下 SPA) とは、いくつかの JavaScript ファイルと css ファイルで構成されている、ブラウザ上で動作するアプリです。

SPA は通常、ユーザ認証を行なってユーザを特定し、Web API を用いたさまざまな情報サービスを提供します。サーバサイドのデータベースやディスクスペースを利用することもありますが、これらのデータアクセスも例外はありますが Web API を用いています。

SPA ではない、従来のサーバサイドの Webアプリ は、ボタンやリンクをクリッ

Docker for Node.jsデベロッパのための大切な５つのセキュリティ

リモートのアルバイトで始めた仕事が、長期化、長時間化。
Slackでの開発者との仕事で、文字が小さくスレッドやチャンネル迷子は相変わらず日常茶飯事。

**Slackの中で、最初に覚えたマークダウンはまた、コードを`インライン表示`すること**
\` バッククォート`

最近、Qiitaでのありがたい編集のフィードバックで覚えた
**コードブロックの書き方**
(空行)
\`\`\`
code….
\`\`\`
(空行)

コーディングとは程遠いですが、新しいトリックを覚えるのはシンプルに楽しいなと思えた瞬間でした。

さて、今回はこちらの翻訳のご紹介です。

https://snyk.io/blog/docker-for-node-js-developers-5-things-you-need-to-know/

こちらに関連し以前ご紹介した
[安全なNode.jsのためのDockerイメージ構築のステップバイステップのチュートリアル](https://qiita.com/bricolageart/items/a509594a5b4c349e90b7)の翻訳も、ぜひ参

ワイ「Denoってなんぞや？」

# ?「やあ」
ワイ「前回はNode.jsについて知見を得たな」
ワイ「どんどん最強ぷよぐらまに近づいてまうで＾＾」
?「やあ」
ワイ「急になんやこの恐竜」
ワイ「某J民か？」
?「あんなのと一緒にしないでよ」
?「僕は**Deno**だよ」
ワイ「誰だよ（ピネ」
?「**Node.js**の親戚みたいなものさ」
ワイ「Node.jsくんにも親戚がおったんか」
ワイ「初耳やわ（ﾊﾅﾎｼﾞ」

# ?「Denoについて」
?「Node.jsのついでに知ってもらおうと思って」
?「今ここにいるんだ」
ワイ「ほーん　しゃあない聞いたるわ」
?「……」
?「**Deno(ディーノ)** はRyan Dahlによって作られた比較的新しいJavascript/Typescriptランタイムだよ」
ワイ「誰やその人」
?「**Node.js** を作った

クリップボードを共有するPWAアプリの作成

WindowsとAndroidでテキストを共有したいことがよくあり、最近はMacやiPhoneとも共有することが増えてきたので、クリップボードのテキストを共有するPWAアプリを作成します。
PWAにすれば、アプリっぽく使えるのと、後程示すショートカットが便利だったりします。


以下のGitHubにソースコードを上げておきます。

poruruba/ClipShare

https://github.com/poruruba/ClipShare

#テキストの共有方法

単に、Node.jsサーバを立ち上げて、テキストを保持するようにし、HTTP Post呼び出して、Set/Getするようにしているだけです。
ソースコードを載せますが、大したことはやっていません。
一応、セキュリティを考慮して、APIKeyがあっていないと受け付けないようにするの

imagemin-mozjpegのバージョンを最新にしたらrequire()のエラーが出てはまった

## 事の発端は軽い気持ちでバージョンを上げただけ

1年ぶりぐらいに手元の開発環境をアップグレードしようと思い何も考えずにバージョンをアップデートしたことが始まりでした。

## imageminのビルド時だけエラーが出始める

エラーの内容を適当にコピペして海外サイトとかを徘徊したが、原因が掴めず・・・。

“`lang=”bash”
const imageminMozjpeg = require(‘imagemin-mozjpeg’)
^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/techthree/projects/tech-three/pug_sass_webpack/node_modules/imagemin-mozjpeg/index.js from /Users/techthree/projects/tech-three/pug_sass_webpack/imagemin.js not supported.
Instead change the re

Nest.jsに関するTips

内容はZennにて記しています。

https://zenn.dev/yu_ta_9/articles/130370e67cc56f

AWS API Gateway – IAM アクセス許可により API へのアクセスを制御する

## はじめに
lambda や API の実態と認証のロジックを切り離したい。
そしたらもっとシンプルにバックエンド開発ができる。
API はすべて API Gateway を通る構成なので、API Gateway をリバースプロキシのように扱い、そこでアクセス制御をしたい。

## API Gateway で IAM アクセス制御を設定すると…

> AWS サービスがリクエストを受信すると、リクエストで送信した署名を計算したときと同じステップが実行されます。続いて AWS は、計算された署名とそのリクエストで送信した署名を比較します。署名が一致すると、リクエストが処理されます。署名が一致しない場合、リクエストは拒否されます。

https://docs.aws.amazon.com/ja_jp/general/latest/gr/signature-version-4.html

この「**署名**」を作る処理がとても面倒だったので、メモを残しておきます。

## 準備

##### 1. API Gateway で認可の設定を 「AWS IAM」 に設定する

![imag

OAuth2.0のAuthorization Code Grantでstateが必要な理由を理解する　実際の実装もやってみた

## はじめに
https://qiita.com/yuta-katayama-23/items/b074e85504fc05ac76dc

https://qiita.com/yuta-katayama-23/items/4214114a21c11ec4f934

ではAuthorization Code Flowを体感するためにNode.jsのExpressでデモ用のWebアプリを作成して、実際にアクセストークンを取得しAPI実行までをやったみた。

その際には、

> ※今回はあえてCSRF対策やPKCE対策に必要になるパラメータを省略している。CSRF対策やPKCE対策については今後記事を執筆予定。

と書いたように、推奨されているセキュリティ対策のための実装をしていなかったので、今回はまずCSRF対策のために何をすべきか？について、仮にそれをしなかった場合に何が起きるか？を理解しつつ、実際にCSRF対策の実装をやってみたいと思う。

※本記事中で筆者の理解に誤りがあればご指摘頂けると幸いです。

## Authorization Code Flowにおけるstateとは？
s

無限に時間がかかるサーバー

“`
const express = require(‘express’)
const app = express()
const port = 9999

app.get(‘/’, (req, res) => {
res.header(‘Access-Control-Allow-Origin’, ‘*’)
res.header(‘Access-Control-Allow-Methods’, ‘GET,PUT,POST,DELETE’)
res.header(
‘Access-Control-Allow-Headers’,
‘Content-Type, Authorization, access_token’
)
setTimeout(() => {
res.send(‘Hello World!’)
}, 1000000000)
})

app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
“`

npmセキュリティ10のベストプラクティス

こんにちは！
IT用語には、Acronym　、頭文字の略称がたくさんありますよね。
便利ですが、時々　いい間違えや、会話がこんがらがることがあります。

Linuxコマンドのrpmと、
npmの字面が、rpmと似ていて、「全然、違うし！」と自分で、思わずツッコミをいれたくなったことが何度かありました:joy:。

npm　→　Node Package Manager
rpm　→　Red Hat Package Manager

今回はこちらの翻訳から、お届けします。
https://snyk.io/blog/ten-npm-security-best-practices/

#npmセキュリティ10のベストプラクティス
オープンソース アプリケーションのセキュリティ
Liran Tal, Juan Picado
リラン・タル、フアン・ピカド
2019年2月19日

npmの脆弱性が心配？
フロントエンドとバックエンドどちらのデベロッパにとっても、npmのセキュリティのベストプラクティスを考慮に入れることは重要です。[オープンソースのセキュリティ](https://snyk.io/b

Node.js Expressの例を通じて、Webアプリのセッションについて理解する

## はじめに
Webアプリケーションが快適に利用できるのはセッションが存在するから、とよく言われると思う。前回の記事[Node.js Expressの例を通じて、WebアプリにおけるCookieについて理解する](https://qiita.com/yuta-katayama-23/items/068900da9271c4d1be1c)ではCookieが必要でそのCookieのおかげと言っていたのに、どういう事？となるかもしれないが、セッションについて理解を深めていく事でCookieとセッションの関係性についてもスッキリすると思う。

そこで今回は、セッションとは何か？について理解しつつ、実際にNode.jsのExpressでセッションを実現する実装をやってみたのでその備忘録を残す。

## セッションとは何か？
簡単に一言で言ってしまうと、「論理的な意味での開始から終了までの一連の連続した操作（クライアントとサーバ間でやり取りされるひとまとまりの操作）を表す単位・概念」の事。

ここでポイントは「一連の連続した操作」や「ひとまとまりの操作」と言っているように、1回だけでなく連続で行

私のnode古すぎ？node10.から最新にした話

#はじめに
環境
OS：ubuntu20.04
npmは8.3.1
　
　これまで使っていたnodejsが古すぎて使えないとnpmから言われてしまったので、新しいnodeを導入することになりました。aptやnpmじゃないインストール方法を全く知らなかった筆者が、右往左往しながらnodeを追加するまでの備忘録を書きます。

#npmコマンドを使ったある日

“`shell
npm does not support Node.js v10.19.0
“`

ある日突然、nodejsが古いと指摘された。これまで普通に使えた気がするんだけどな。ただ調べてみると最新版がv17であるのに、今使ってるのがv10では確かに古いか。

#普通にnodeをアップデートしようとする
nodeはaptコマンドからインストールしていたので、ap

Node.js Expressの例を通じて、WebアプリにおけるCookieについて理解する

## はじめに
Web アプリケーションが快適に利用できるのは Cookie のおかげとよく言われると思う。今回は、そんな Cookie が何をしてくれているものなのか？について理解しつつ、実際に Node.js の Express で Cookie の実装をやってみたのでその備忘録を残す。

## Cookie とは何か？
簡単に一言で言ってしまうと、「クライアントの状態をテキストで保存する仕組み」の事。

ここで言うクライアントというのは Web アプリなどを開くブラウザの事だと思ってよく、Cookie は Web アプリなどを利用しているユーザに関する状態を保存するためも仕組みと言い換えられるだろう。

具体的にどのような動きをするか？だが、以下の図に示したようにサーバを起点にしてクライアントにテキスト情報が送られ、これをクライアントはそのままサーバに送り返すという事をする。やっている事はこれだけ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372684/797e20da-0

Discord.js(v13系)で指定チャンネルにメッセージ送信メモ

呼びかけてリプライさせるなどではなく、別のプログラムから

Webhook使う形でも良いのですが、毎回Webhook URLを発行するのも手間になってきたので、調べてみました。

## client.channels.cache.get().send()

こちらの記事にある記載で出来ました。

https://scrapbox.io/discordjs-japan/%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%9F%E3%83%81%E3%83%A3%E3%83%B3%E3%83%8D%E3%83%AB%E3%81%AB%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%92%E9%80%81%E4%BF%A1%E3%81%97%E3%81%9F%E3%81%84

`client.channels.cache.get(‘送信するチャンネルのID’).send(‘メッセージ’)`

なかなか長いメソッド

## 送信のサンプルコード

以前書いたメモのサンプルコードがそのまま使えました。

https:/

Nest(Node.js), Vue3, MySQL(Prisma), GraphQLで動かしてみる

##　環境構築
– Docker-compose

## Nest.js
– dockerコンテナ内で`npx nest new {APP_NAME}`　で新規プロジェクトを作成
– prismaの設定
– `yarn add -D prisma`
– `yarn add @prisma/client`
– `yarn init`　で、生成されたファイルにテーブルの定義をしていく
– 定義後に`npx prisma migrate dev`でデータベース作成
– Nest.jsにデータを読み込ませるために、テーブルを更新したら、毎回マイグレーション後に`npx prisma generate`をする
– GraphQLの設定
– [参考　Nest/GraphQL/schema-first](https://docs.nestjs.com/graphql/quick-start)

### error: GraphQLのversionは15系じゃないとうまく動かなかった
– リファレンス通りに実行すれば問題ない

## Vue3 (Vite)
– dockerコンテナ内で

NodeJSからAPI Gateway SDK Javascript版を使ってみる

“`Node.js
// eval(fs.readFileSync(“apiGateway-js-sdk/lib/axios/dist/axios.standalone.js”, ‘utf-8’));
const axios = require(‘axios’); //npm install axios
eval(fs.readFileSync(“apiGateway-js-sdk/lib/CryptoJS/rollups/hmac-sha256.js”, ‘utf-8’));
eval(fs.readFileSync(“apiGateway-js-sdk/lib/CryptoJS/rollups/sha256.js”, ‘utf-8’));
eval(fs.readFileSync(“apiGateway-js-sdk/lib/CryptoJS/components/hmac.js”, ‘utf-8’));
eval(fs.readFileSync(“apiGateway-js-sdk/lib/CryptoJS/components/enc-base64.js”, ‘utf-8

Node.jsのworker_threadsモジュール（スレッドプール）

# はじめに
node.jsでマルチスレッドを実現するworker_threadsについて、実例を交えて説明します。

# 参考
– ハンズオンNode.js

https://github.com/oreilly-japan/hands-on-nodejs/blob/master/ch04/samples.txt

# worker_threadsモジュール

例として、http\://localhost:3000/10へのアクセスに対して10番目のフィボナッチ数を返すような簡易Webアプリケーションを構築していきます。
パフォーマンスを担保するために生成するスレッドをプールして使い回すような仕組みにしたいです。
以下の３ファイルで実現できます。

~~~thread-pool.js
‘use strict’
const { Worker } = require(‘worker_threads’)

module.exports = class ThreadPool {
// 空きスレッド、キューを初期化
availableWorkers = []
queue = []

【JavaScript】Promiseと非同期処理について

こんばんは。今回はJavaScriptの非同期処理について書いていきます。

##非同期処理とは？
非同期処理とは、ある処理を実行をしている際に、他のタスクが別の処理を実行できる方式をいいます。
DBから値をとってくるなど、他の処理と比べて時間がかかる処理があった場合、この非同期処理の仕組みがないと、DBから値をとってくる処理が終わるまで待っていなければなりません。
非同期処理の場合、DBから値をとってくる処理を行ってるとき、別のイベントが発生すると、一旦DB処理を中断してそのイベントを処理します。そしてまたDB処理を再開します。

しかし非同期処理にも不便な点があります。例えばDBから値を取得し、そのデータをreturnする関数があったとします。普通にこの関数を実行すると、DBから値を取得する処理が行われている間にreturnが実行され、正常に値が返されなくなってしまいます。
そのような問題を解決するための方法はいくつかありますが、今回はPromiseを使った方法をご紹介します。

##非同期処理を順番に実行する
非同期処理を順番に実行する場合、Promiseを使うと便利です。

discord.js v13 のみでスラッシュコマンドを登録する

## はじめに

スラッシュコマンドとは，下の図のようなコマンドのことであり，v13系のdiscord.jsでbotに実装できるようになりました．
従来botがコマンドを受け取るには，サーバー（ギルド）に書き込まれる文章を監視し続け，任意のコマンドを含む文字列を取得した場合はプログラムを実行させることでコマンドのような機能を実装していました．
しかし，スラッシュコマンドが導入されることでユーザーは使いやすく，開発側は（実装方法にもよるが）プログラムが読みやすく書きやすくなりました．
しかし，たいていのスラッシュコマンドの記事では，登録はREST APIを自分で叩いて行う方法が紹介されています．
（[公式のガイド](https://discordjs.guide/interactions/registering-slash-commands.

Node.js: Cognito から Access Token を取得

AWS の Cognito から JWT Access Token を取得する方法です。

ライブラリーのインストール

“`bash
sudo npm install amazon-cognito-identity-js
“`

“`js:get_token.js
// —————————————————————
//
// get_token.js
//
// Feb/19/2022
// —————————————————————
‘use strict’

console.error(“*** start ***”)

var cognito = require(‘amazon-cognito-identity-js’)

const dotenv = require(‘dotenv’)

dotenv.config()
const user_pool_id = `${process.env.US