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

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 `<マネー

log4jsで、ログファイル名を自動的にURLルート名にする

node.js & expressで簡単なAPIを作る際、ログ出力の設定はlog4jsで管理していると思います。
ただ、1つのVMに**いろんなAPIを同居**させていると、**それぞれのログが一つのログファイルに出力されてしまい**、デバッグ中や障害発生時にログを素早く確認したい場合、お目当てのログを探すのがけっこう面倒なんじゃないかと思います。

そこで、ログファイルのファイル名を、***自動的にそれぞれのAPIのURLルート名にして***、URLのルートパスごとにログファイルを別々に生成する方法を考えてみました。
(log4jsのconfig内appendersの、”type”: “multiFile”の使い方を説明している日本語サイトをあまり見かけず苦労したため、書き残しておきます。)

##環境
もろもろのバージョンは以下の通りとします。

“`sh:バージョン
ubuntu:18.04
node.js : 10.24.1
npm:6.14.12
express: 4.17.2
log4js : 6.4.1
“`

そして、今回のデモ用アプリ(logtest_apps)の

Web APIの設計 1/2

こんばんは。
1月に水野 貴明さんのWeb API The Good Partsを読んだので、アウトプットしていきます。
今回はWebAPIの概要とエンドポイントの設計について書いていきます。

###Web APIとは？
HTTPプロトコルを利用してネットワーク越しに呼び出すAPIです。
機能は分かっているけど、その中身の実際の動作は詳しく分からない(知らなくてもよい)機能のかたまりを外部から呼び出すための仕様です。プロトコルとしてHTTPを使用するため、そのエンドポイントはURIによって指定されることになります。このURIにアクセスすることで、サーバのデータを操作したりすることができるのです。
Web APIは、近年重要性が増しつつあり、様々な企業やサービスで導入、利用、公開が行われてきています。

###Web APIの設計
Web APIは、コードと同じく、美しく設計されるべきです。その理由は以下の通りです。
・ 使いやすい
出来るだけ多くの、そして立場が違う人にとって使いやすくすることが重要。
・ 変更しやすい
サービスの変更に伴い、できるだけ使用者に影響が内容変更できること

Firebase JavaScript SDK v9 + Authentication で認証を実装する

Firebase JavaScript SDK が、Version9で大きく変わりました。 バージョンアップに伴い、Authenticationの実装の仕方もかなり変わったため、メモを残しておきます。

## Firebase JavaScript SDK v9 の仕様

v9では、SDKの中から必要なモジュールだけを読み込んで利用する「Tree Shaking」という手法を採用しています。webpackなどで採用されている手法です。

https://firebase.googleblog.com/2021/08/the-new-firebase-js-sdk-now-ga.html

## JavaScript SDK v9 を利用した認証の実装

今回の変更を踏まえて、Firebase Authenticationの認証を実装してみました。

### ディレクトリ構成

今回のサンプルはこんな構成で作成しました。

“`bash
├── dist
│   ├── bundle.js
│   └── index.html
├── firebase.json
├── node_m

Webの勉強はじめてみた その30 〜GitHub認証とテスティングフレームワーク〜

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

## GitHub認証
GitHub上のログインの認証機能を、自分が開発するアプリケーションに利用する。

### OAuth の利用
その前に認可と認証について

:::note
アプリケーションの利用者が第三者のアプリケーションに権限を与えることで、 そのアプリケーションの機能や認証を第三者のアプリケーションでも利用できるようにする仕組み
:::

`OAuth2.0`は認証済みユーザーに対して権限を与える、認可のためのプロトコル。

“`
user => github => website => user
認証 認可 ログイン
“`

なんとなくこんな感じだろうか。

### ストラテジーモジュール
必要なものだけをインストールできるように部品に分けたモジュール。
今回はGitHubなので、`passport`の他に、`passport-github`, `express`内でログイン情報をセッション管理するための、`express-session`ラ

Step Functions Localのモック統合をJestで自動テストするためのプラクティス

# はじめに
2022年1月31日に、Step Functions Localでモックを使えるようになったことが発表された。

– [AWS Step Functions でローカルなワークフローを模擬的にテストすることが可能に](https://aws.amazon.com/jp/about-aws/whats-new/2022/01/aws-step-functions-support-workflows/)

これで、ますますLowCode開発が捗るようになるかと思いきや、[公式ブログ](https://aws.amazon.com/jp/blogs/compute/mocking-service-integrations-with-aws-step-functions-local/)とかでもAWS CLIを使っていて、せっかくのモックなのに自動テストのやり方に言及されていないので、少し深堀りしてプラクティスを考える。

本記事では、[以前の記事](https://qiita.com/neruneruo/items/500679bb9fb865e72d9e)で作ったステートマシン