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

Day.jsをいい感じに共通化する

Day.jsは、軽くてMoment.jsと互換が効くのでよくプロジェクトで使っています。
そこで困ってくるのがlocaleやtimezoneの共通化ではないでしょうか？
Day.jsをimportする度に設定するのは、抜け漏れしそうですしね。

僕の場合は以下のようにして、Global設定（共通化）しています。

## React

“` index.tsx
import dayjs from “dayjs”;
import utc from ‘dayjs/plugin/utc’;
import timezone from ‘dayjs/plugin/timezone’;
import “dayjs/locale/ja”;
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.tz.setDefault(‘Asia/Tokyo’);
dayjs.locale(“ja”);
“`

## NestJS

“` src/util/dayjs.ts
import dayjs from ‘dayjs’;
import utc from ‘day

Next.jsアプリケーションをIISにデプロイしたかったのでIIS上でホストしてみた

Next.jsをデプロイするならVercelが推奨されているけど、
どうしてもIISでやりたいっていう人向け。

IIS拡張モジュール「HttpPlatformHandler」を使うと、
IISからnode.exeを起動してHTTP要求をNodeプロセスに処理させることができます。
下記サイトを参考にさせていただきました。
https://nodejs.keicode.com/nodejs/using-platformhandler-to-host-nodejs-on-iis.php

##事前準備

IIS拡張モジュールが必要なのでインストールします。
https://www.iis.net/downloads/microsoft/httpplatformhandler

あとは、Next.jsアプリを普通に作成して、ビルドまで済ませておきます。
私はcreate-next-appで作りました。

IISのWebアプリケーションで
http://localhost/nextapp
というURLでアクセスできるようにしたいので、
next.config.jsにbasePathの指定を入

Netlify にデプロイする時、node.js のバージョンを指定する

Nuxt で作っていたWebサイトを久々に改修していて、yarn install 等をやり直して Netlify にデプロイした際、失敗した。
Netlify のログを見てみると、

“`
error chalk@4.1.2: The engine “node” is incompatible with this module. Expected version “>=10”.
error Found incompatible module
“`

chalk@4.1.2というモジュールについて、node.js と互換性がないと言われていた。（[chalk](https://www.npmjs.com/package/chalk)は、ターミナルのスタイリングをしてくれるモジュールらしい。）

というわけで、node.js のバージョンを指定する。

プロジェクトのルートディレクトリに、以下のコマンドで、.nvmrcファイルを作成する。
.nvmrcファイルは、node.jsのバージョンのみが記載されており、このファイルを置いておくと Netlify が認識してくれる。

“`sh

Error : npm does not support Node.js v10.19.0

>Error : npm does not support Node.js v10.19.0

上記エラーが出る場合、Nodejsのバージョンを上げることによって解決する。

“`
$ curl -fsSL https://deb.nodesource.com/setup_12.x | sudo -E bash –
$ sudo apt install -y nodejs
“`

Node.js/Expressを使用して簡単なWebAPIを構築

# はじめに

https://github.com/microsoft/Web-Dev-For-Beginners/tree/main/7-bank-project

Microsoftの出している**Web-Dev-For-Beginners**という教材に取り組んでいた時のことです。
銀行を模したWebアプリを作るレッスンの中で、[銀行API](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/7-bank-project/api/translations/README.ja.md)のページに以下のような記載が。

> しかし、このような API の構築方法に興味があるのであれば、このシリーズのビデオを見ることができます: [https://aka.ms/NodeBeginner](https://aka.ms/NodeBeginner) (ビデオ 17 から 21 では、この API を正確にカバーしています)。

> また、こちらのインタラクティブなチュートリアルもご覧ください: [https://aka

imageminをrequireして怒られる

## はじめに

`imagemin`をnode.jsで実行すると怒られた。

“`js:imagemin.js
const imagemin = require(‘imagemin’)
const imageminMozjpeg = require(‘imagemin-mozjpeg’)
const imageminPngquant = require(‘imagemin-pngquant’)

imagemin(…略)
“`

“`
const imagemin = require(‘imagemin’)
^
Error [ERR_REQUIRE_ESM]: require() of ES Module
Instead change the require of index.js in imagemin.js to a dynamic import() which is available in all CommonJS modules.
“`

「`import`で読み込んでね」と怒られている。

`import`で読み込んで実行する

【Chrome拡張】続編：Qiitaの記事を見ているエンジニアとリアルタイムに交流できる拡張機能作った

**本記事は、MMOBrowser(ver0.1.0)の追加機能を使ったQiitaの利用シーンを紹介する記事になります。
MMOBrowserの概要・利用方法は[こちらの記事](https://qiita.com/Hylia221/items/6142bdc527cc6b3c9fe5)をご参照ください。**

# こんなことを思ったことはありませんか
– Qiitaで見つけた面白い記事の感想を共有したい…
– 自分が投稿した記事を見ている人に感想を聞きたい…
– 記事にあるコードや数式が分からないのでエンジニアに質問したい…

## そんなときにはMMOBrowserを活用しよう！
MMOBrowserを導入することで、ブラウザ上に同じWebサイトにアクセスしている人たちのマウスカーソルが表示され、自由にコミュニケーションを取ることができるようになります（下図）。
Qiit![qiita.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264364/72ce56bb-632d-10b5-a0

Notionで作成したテーブルに対して追加/検索/更新/削除を行う

# 前回のあらすじ
Notionでテーブルやトークンなどを準備して、テーブルにあるデータを取ってくる検証を行いました。

# 今回やったこと
Notionで作ったテーブルに対してデータを追加/検索/更新/削除がひととおりできるようAPIを検証してみました。

以下の公式情報を参考にしています。

https://developers.notion.com/reference/intro

# 環境
・AWS Lambda(Node.js 14.X)
・Notionのテーブルイメージ
　カラム構成はキー(key)・値(value)・タイムスタンプ(timestamp)です。
・各カラムのNotionにおけるタイプについて、キーはtitle、値はrich_text、タイムスタンプはnumberにしています。


# 書いたもの

### 準備

“

Node-RedでOpenCVするまでのメモ

色々試行錯誤が必要だったのでメモ

#環境
Ubuntu20.4.3LTS
Node-Red

#使いたいのはこちら
https://github.com/justadudewhohacks/opencv4nodejs

#Install
opencv4nodejsにOpenCVの自動Build Scriptが入っているのですが失敗するので、別々にインストールします。

##事前にインストールが必要な物
* git
* cmake
* gcc(これは入っていた)
* g++
Proxyを使う場合はnode、apt-get、gitのProxy設定が必要。

##OpenCV
opencv-4.5.3.tar.gz を github からダウンロード。
https://github.com/opencv/opencv/releases

“`
$ tar xf opencv-4.5.3.tar.gz
$ cd opencv-4.5.3
$ mkdir build
$ cd build
$ cmake .. -DCMAKE_INSTALL_PREFIX=/usr/local
$ make

Webの勉強はじめてみた その32 〜AJAXとWebSocket〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第4章9,10節です。

## AJAX
Asynchronous JavaScript + XML
クライアント-サーバー間で、非同期に通信が行える。

:::note
複数ページで実装していたサイトを単一のページで複数の機能(AJAXやWebSocket)を表現したアプリケーションを、シングルページアプリケーション(SPA)という。
:::

“`javascript:app.js
const serverStatus = require(‘./routes/server-status’);
app.use(‘/server-status’, serverStatus);
“`

“`javascript:app/entry.js
const loadavg = $(‘#loadavg’);

setInterval(() => {
$.get(‘/server-status’, {}, (data) => {
loadavg.text(data.loadavg.toString());

Websocketでシンプルなチャットアプリを作るチュートリアル

今回はNodejsのwsライブラリを使ってシンプルなチャットアプリを作ってみました。

# 作るものの詳細
・クライアントから受信したメッセージを全クライアントに配信(Websocketを使用)
・WebサーバーにはExpressを使用する
# 私の環境
・Node.js: v15.6.0
・ライブラリ: Express, WS
・OS: Windows11

# プロジェクトを作成
“`:./project_root
npm init
“`
Enter連打で大丈夫です。

# Webサーバーを構築する。
“`js:index.js
//ここからexpress

//expressの設定
var express = require(‘express’);
var app = express();

//expressのルーターを設定
app.get(‘/’, (req, res) => {
//index.htmlを返す
res.sendFile(__dirname + ‘/index.html’);
});
//expressのエラー処理
app.use((er

Javascript/Node.jsのimportやらrequireやらのまとめ

JavascriptとNode.jsを行ったり来たりしていると、import、export、exports、require、module、defaultの単語が頭の中でぐちゃぐちゃになりがちです。
備忘録として、使い方を残しておきます。

ちなみに、Javascriptにおいて、webpackやbrowserify、babelといったbundlerを使ったrequireの使用は述べていません。純粋なNode.jsや、ブラウザ上のJavascript上での動作を想定しています。

#Javascript編

#import/exportを使わない方法

① インラインスクリプト

“`html:index.html


“`

CSRF攻撃対策についてNode.js Expressでアプリを構築して実例で理解する

## はじめに
Node.jsのExpressでテンプレートエンジンejsを使って実装するWebアプリを実例に、CSFR攻撃を受ける脆弱性がある状態と対策を講じた場合の実装を見ていく事で、CSRF攻撃について理解を深めてみようと思う。

## CSRF（クロスサイト・リクエスト・フォージェリ）攻撃とは？
悪意のある人が用意した罠により、Webアプリのユーザ（利用者）に意図しないリクエストを送信させ、利用者の意図しない処理をWebアプリに実行させることが可能な状態になっている＝脆弱性がある時に、それを利用されてユーザが意図していない処理が勝手に実行されてしまうような攻撃を CSRF（クロスサイト・リクエスト・フォージェリ）攻撃という。（問題は、ユーザ本人の意図したものではない悪意のあるリクエストをWebアプリが受け入れてしまう事）。

詳細は以下のサイトを参照。

https://www.ipa.go.jp/security/vuln/websecurity-HTML-1_6.html

※IPAのサイトを見ると、認証の仕組みを持つWebアプリ（ログインしているユーザ）に対する攻撃のみが

【実用編】【DB】discord.js v13 ユーザーごとにプロフィールを作成する

## 前書き
私がメインで開発している「[ヒトリン](https://discord.com/api/oauth2/authorize?client_id=876116418037444630&permissions=545460846583&scope=bot%20applications.commands)」というボットにて、最近ユーザーごとにプロフィールを作成する機能を追加したため紹介します。

## どのようなものか
MongoDBを使用し、ユーザーごとに様々な情報を格納したデータを作成し、プロフィールを作成する。
今回は、MongoDBの使用方法からプロフィールを作成しコマンドで表示させるところまでのフルフルバージョンを紹介する予定でござんす。

## MongoDB

https://www.mongodb.com/

上記のリンクからMongoDBのサイトへリンクしサインインまたは新規登録を完了してください。
ほとんど英語ですが頑張ってどんどん次に進みましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-

IFTTTのレシピの節約方法（１つのレシピでPCの音楽、Youtube音楽、youtube動画を操作）

#はじめに
[「WSLのUbuntuでPC内の音楽データをGoogleHomeで操作する」](https://qiita.com/kobbeko/items/04954bc47e407c07d9e7)
[「WSLのUbuntuでyoutube音楽をGoogleHomeで操作する」](https://qiita.com/kobbeko/items/db08ac856d9051fd4812)
[「WSLのUbuntuでyoutube動画をGoogleHomeで操作する」](https://qiita.com/kobbeko/items/d7ee4359af5397e342f5)
を１つのIFTTTのレシピで操作する方法です。
IFTTTが有料になり、IFTTTのレシピ数を節約するのが目的です。
●GoogleHomeで下記の音声入力を行う。
音楽　あいみょん：PC内の音楽ファイルを再生する
音楽　YT　あいみょん：youtubeの音楽を再生する
音楽　動画　あいみょん：youtubeの動画を再生する
音楽がIFTTTのトリガーコマンドです。
その後の入力文字にYT、動画があった場合、プログ

AWS Lambda (Node.js) 上で discord.js を使おうとしてつまずいた

# 何につまずいたのか
ざっくり言うと、 Node.js で記載した AWS Lambda の関数上で最新版の [discord.js](https://discord.js.org/) を使おうとしたら使えなかった。

# なぜ使えなかったのか
[AWS Lambda で使える Node.js のバージョン](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/lambda-runtimes.html)が現状 v14 系までなのに対し、[最新版の discord.js は v16.6.0 以上でしか動かない](https://discord.js.org/#/docs/discord.js/stable/general/welcome)。

# 現状の打開策
どうしても使いたいなら古いバージョンの discord.js （ [12.5.3](https://www.npmjs.com/package/discord.js/v/12.5.3) がギリギリ Node.js v14 系に対応している模様）を使うしかない。ただし、**非推奨に

Webの勉強はじめてみた その31 〜クライアントのフレームワーク〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第4章7,8節です。

## モジュールバンドラー
:::note
複数ファイルのJavaScriptを1つにまとめられる
Node.jsのコアモジュールをブラウザでも利用できる
:::

### webpack
モジュールバンドラーとして`webpack` を使用。
`babel-loader`も同時にインストール。

“`
yarn add webpack@4.26.1 webpack-cli@3.1.2 @babel/core@7.1.6 @babel/preset-env@7.1.6 babel-loader@8.0.4 –dev
“`

`babel-loader`
– 最新のJavaScriptで書かれたコードをブラウザが実行できるバージョンにコンパイルするモジュール

`webpack`の設定ファイル

“`javascript:webpack.config.js
module.exports = {
context: __dirname + ‘/app’,
entry: ‘./ent

Renovateでライブラリの更新を自動化する


## Renovateとは

時間の経過とともに古くなっていくライブラリの更新を自動化してくれるツール

具体的には以下のようなことをしてくれます。

– リポジトリをスキャンして依存関係を検出する
– 依存関係の更新があるかどうかを確認する
– 依存関係を更新するためのコミットとマージ/プルリクエストの作成

様々なプラットフォーム、マネージャーに対応しています。

## Renovate良いポイント

– renovateを適用したいリポジトリを選択できる
– プルリクを受けるスケジュールを作成できる
– issueに可視化できるダッシュボードが追加される
– リリースノートを表示してくれるので変更点が一目でわかる
– 似たようなパッケージをグループ化してプルリクしてくれる
– ba

Node.jsのESmodule設定でcloudinary機能が使いたとき import cloudinary from ‘cloudinary’ 思った通りに機能しない。

## 結論

Node.jsでESmodule設定でもCloudinaryを使用するなら下記のようにCommonjsを使う。
v2がないと駄目っぽい？

“`php:app.js
import { createRequire } from ‘module’;
const require = createRequire(import.meta.url);

…

const cloudinary = require(‘cloudinary’).v2; // ok
// import cloudinary from ‘cloudinary’ // No

“`

使用方法をちゃんと読みましょう（教訓）

https://www.npmjs.com/package/multer-storage-cloudinary

## import cloudinary from ‘cloudinary’ だと機能しない？
機能しないと思います。（私は機能しませんでした。）

### やりたいこと
ReactからformDataを使って送ってきた画像をCloudinaryに保存して、画

corepack prepare npm@latest–activateができないのでpython3でスクリプト書いて対処。

## 動機

Nodejs 16.9.0以上で標準搭載されたらしいcorepackでpnpm、yarn、npmを実行していたのですが、corepackのパッケージマネージャーを指定するコマンドで最新バージョンを簡単に指定できないようなので簡易的にPython3でスクリプトを書きました。

– なお、この件につきましたはこのようなissueが上がっています。 –latestオプションの検討

https://github.com/nodejs/corepack/issues/72

近いうちにlatestオプションが追加されるかもしれません。それまでのつなぎとして…

「なんでjsじゃないんだ…?Nodejsなのだからjsで書こうよ…（´・ω・｀）」という声が聞こえてきそうですが、遺憾ながらこのスクリプトは私のdotfilesを構築している時に書いた別目的の既存コードを改変した副産物なのでご了承ください…

jsで書くには「引数処理を標準モジュールでできるか？」が不明のためちょっとやる気がでない現状です。

## ちょっとした解説

やってることはただnpm search `<マネー