f@ctor

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

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

Deno Deep Dive – Denoでのアプリケーション実装Tips / Node.jsとの比較

## 概要

本記事ではNode.jsに代わるサーバサイドJavaScriptランタイムであるDenoについて、実際のアプリケーション実装で得られた知見をご紹介します。

まずはDenoの概要について説明し、アプリケーションを実装する上でのDenoの便利な使い方やAPI、各種ツールについて解説していきます。最後に筆者がDenoによる開発を経てNode.jsによる開発と比較した際のDenoの優れている点/不足している点を挙げていきます。

## Denoとは

DenoはNodejsの開発者であるRyan DahlがNode.jsの反省を活かして作り出したJavaScriptランタイムです。

https://deno.land/

特徴としては以下のものがあります。

– TypeScriptが**out of box**、つまり設定なしで実行できる
– ES Modules対応で依存モジュールはURLによってインポートする
– 権限管理が厳密
– フォーマッタやテストランナなどの便利機能がランタ

元記事を表示

【2022年版】Raspberry Pi 4とChinachuで録画サーバーを立てる

# はじめに
Chinachuを使って、ここ2年ほど録画サーバーを運用していました。2022年1月に、Raspberry Piの新しいOS「Bullseye」の安定版がリリースされました。OSのアップデートでは、MicroSDを書き直す必要があり、その再構築をした記録です。

以下の記事を参考に、2022年の環境での違いなどを交えつつ書いていきます。
[Raspberry Pi 4+Chinachu v0.10.1-gamma.0 地デジ録画サーバー構築](https://qiita.com/tomtwinkle/items/99fe34140fa5b1a70e7b)
[知識0からRaspberryPi4で録画機を作る！](https://zenn.dev/ryomm/articles/332bf27f8561da)

# おねがい
他の記事でも言われていることですが、自己責任でサーバーの構築をしてください。
趣味の範囲で、個人的な利用をお願いします。
テレビ番組のコピーや配信は違法になることがあリます。よく注意をして使ってください。
生じた損害に対して、筆者は一切の責任を負いません。

元記事を表示

Express で レスポンスに “Content-Type” ヘッダを自前セットする方法どれを選べばいいの

# 概要

Express 4 で、HTTPレスポンスヘッダーに “Content-Type” をマニュアルでセットする方法のハンズオン記録です

– “Content-Type” ヘッダをセットする書き方はよく見かけるアプローチだけでも
**res.type,　res.set,　res.header,　res.setHeader,　res.writeHead** がある
– それぞれの書き方、結果について実際にやってみた
– 例として、HTTPレスポンス時 の HTTPヘッダー **Content-Type** が
`Content-Type: text/plain; charset=utf-8` となるようにコードをかいてみる

## 先に、全体像 → Express で HTTPヘッダをセットする方法一覧

**「”Hello” を “Content-Type: text/plain;” ヘッダつけてレスポンスする」いろんなやり方**

メソッド コード例 説明

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

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

![Untitled (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539175/fd9cf1b9-6262-6ab0-964b-20cbd1f4b2cb.png)

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について」
![logo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/379533/2a04d4c0-7418-5070-e5f0-01407108cc08.png)
?「Node.jsのついでに知ってもらおうと思って」
?「今ここにいるんだ」
ワイ「ほーん　しゃあない聞いたるわ」
?「……」
?「**Deno(ディーノ)** はRyan Dahlによって作られた比較的新しいJavascript/Typescriptランタイムだよ」
ワイ「誰やその人」
?「**Node.js** を作った

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/94d92292-2e5d-b27d-1fe7-a842b7dc008f.png)

以下の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コマンドを使ったある日
![npminstallreact.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1161923/574155e8-f720-b13c-bc93-6abf0b171713.png)

“`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 = []

OTHERカテゴリの最新記事