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

arraybuffer 画像を FormData で Node.js サーバにアップロード

LINE WORKS のトーク Bot を使って送信した画像をLINE WORKSのストレージからダウンロードして、 Node.js サーバーにアップロードするサンプルです。
LINE WORKSのストレージからダウンロードした画像はarraybufferの形です。
axiosを利用します。

#### ダメなコード

“`
import Axios from ‘axios’;
const FormData = require(‘form-data’);

……

try {
const lwResponse = await Axios.get(
‘http://storage.worksmobile.com/openapi/message/download.api’,
{
headers: {
consumerKey: consumerKey,
authorization: ‘Bearer ‘ + accessToken,
‘x-works-apiid’: apiId,
‘x-w

型定義リポジトリをGitHub Packagesで社内限定公開する(yarnでもnpmでも)

サーバーサイドと、クライアントサイドで共通して利用する型定義リポジトリを作ります。

型定義を社内のリポジトリで共通して使用します。`DefinitelyTyped`的な使い方が理想です。

では作っていきましょう。

なお先人がいらっしゃったので参考にしています。

https://zenn.dev/odiak/articles/950f05a34e9c84

# 手順
初期化
“`
npm init
“`

TypeScriptとPrettierを追加
“`
yarn add -D typescript prettier
“`

tsconfig.jsonはこんな感じにしてます(ほぼ参考記事コピペ)
“`json
{
“compilerOptions”: {
“target”: “ES2017”,
“module”: “CommonJS”,
“declaration”: true,
“strict”: true,
“outDir”: “./dist”
},
“include”: [“./src/**/*”],
“ex

Next.js学習まとめ

# Next.jsの学習まとめ

### Create Next App
“`zsh
npx create-next-app nextjs-sample
“`

### ルート管理
ReactRouterではそれぞれのコンポーネントでルートを管理していたが、
Pages内のフォルダディレクトリで管理できるようになるメリットがある。
PagesフォルダはNextCreateApp時に追加されるので、これを使用する。
また、ルーティング管理のために特別な名称があり、
index.** というファイル名は”/”を表しており、
_**.**というようにアンダーバーから始まる場合はルーティングされず
ルーティング不要なファイルに使用されている。(_app.jsなど)
[**].**とした場合はパラメータを表し、
[…**].**とした場合は複数のパラメータを受け取る。

|階層1|階層2|階層3|
|—-|—-|—-|
|Pages|_app.js|
||index.js|
||main|index.js|
|||content.js|
|||[articleId].js|

node.jsのモジュールについてまとめ

# node.jsのモジュールについて
この記事ではnode.jsのモジュールについてまとめてみた。
## httpモジュールについて

まずはhttpモジュールを使う。

“`node.js
const http = require(“http”);
“`

webサーバーを立てる。

“`node.js
const server = http.createServer();
“`

リクエストイベントを登録して、クラインアント側のリクエストを監視する。

“`node.js
server.on(“request”,(req, res) => {
console.log(“誰かこのサーバーにアクセスしてきました。”)
})
“`

ここで少し補足を加えると、クライアント側からサーバーに対してリクエストがあった場合、server.on()の第二引数のコールバック関数が呼び出されます。

コールバック関数の引数である(req,res) => {} のreqについて説明すると、引数reqにはサーバーにアクセスしてきたクライアント側のデータや属性が格納されています。

– r

WindowsでbuildするとError: EPERM: operation not permittedが発生する問題への対応

## 何が起きていますか？

Windowsでフロントのビルドを行うと頻繁に下記エラーが発生する

“`bash
$ yarn clean && npm-run-all build-prod:* && yarn rev-update
$ npm-run-all -p clean:*
$ node ./tasks/javascripts/clean
$ rimraf ./xxx ../xxx/
2 js files deleted
$ cross-env NODE_ENV=production webpack -p –config ./webpack.config.production.js

# 問題のエラー
Error: EPERM: operation not permitted, open ‘C:\xxx’

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: “bu

ESLintでParsing error…となった時の対応　parserOptionsを設定する

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/n550ac679fbfa

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です。**

## 補足
ソースコード全体は以下。

https://github.com/yuta-katayama-23/node-express/commit/7d68ac256e4ece0ce980bf40628f0e5d7a860b0c

M1 Mac インストール済みのnodeを削除してnodenvを導入する

:::note warn
クローズ予定の[技術ブログ](https://www.yurikago-blog.com/)に投稿した過去の記事です。
投稿日: 2021/06/23
:::

M1 Mac にインストールされていた Node.js を全てアンインストールして、nodenv をインストールした手順をまとめました。

## 検証環境

– macOS Big Sur 11.4
– Homebrew 3.2.0
– nodenv 1.4.0

## Homebrew で追加した Node.js をアンインストール

brew で yarn をインストールした際、意図せず node がインストールされていました。

– `/usr/local/bin/node`
– pkg でインストールした既存の node パス
– `/opt/homebrew/bin/node`
– brew でインストールされた node パス
– node コマンドはこちらを参照していた

原因は yarn の依存パッケージに node が登録されているためでした。対策として、いったん yar

Googleクローラーが画像の遅延読み込みを認識できるかどうか検証する

:::note warn
クローズ予定の[技術ブログ](https://www.yurikago-blog.com/)に投稿した過去の記事です。
投稿日: 2020/01/03
:::

クローラーが遅延読み込みを認識できない場合、ウェブページは本来の評価より低い評価を受ける可能性があるため対策が必要です。

認識の有無を確認する方法は [Google が提供](https://developers.google.com/search/docs/guides/lazy-loading?hl=ja) してくれています。

> 実装の設定が済んだら、正しく機能することを確認する必要があります。その方法の 1 つとして、Puppeteer スクリプトを使用し、実装をローカルでテストできます。

この [Puppeteer スクリプト](https://github.com/GoogleChromeLabs/puppeteer-examples/blob/master/lazyimages_without_scroll_events.js) を実行する手順をまとめました。

## 検証環境

Node.jsに初めて触れてみた

## 背景
今までバックエンドの言語に触れたことがなかった。（そもそも駆け出しエンジニア。笑）
自分で以前作ったアプリでは、
MBaaSのFirebaseでバックエンドの処理を代行してもらってた程度。

そんな状態ではいかんぜよ。。
ということで、Node.jsの基本を学んだので、
復習もかねて、アウトプットしてみる。

## 前提
* Node.js(v16.14.2）
* VSCode
→適当なディレクトリでtest.jsを作成しておく

## Node.jsを学ぼう
それでは、いってみよう～！
### 【1】簡単な計算をしてみよう
以下のように、aに10を、bに5という数値を入れて、
console.logにてa+bの結果を表示させてみる。
“`test.js
let a = 10;
let b = 5;
console.log(a+b);
“`
VSCodeでターミナルを開き、`node test.js`を実行。
そうすると、以下のように結果を表示してくれる。
“`ターミナル
C:\example\example> node test.js
15
“`
#### 重要

asdfでPHPやNode.jsをインストールしたかった

# はじめに

複数言語のバージョン管理ができる[asdf](https://asdf-vm.com)でPHPやNode.jsをインストールしたかったというお話。
結論、 PHPプラグインのAppleシリコン対応がまだ不十分なのでHomebrewでPHPをインストールしつつ、Dockerでマルチバージョン環境を作るのが良さそう。

## 環境

Mac mini m1

# asdf

https://asdf-vm.com

“`bash
brew install asdf
echo -e “\n. $(brew –prefix asdf)/libexec/asdf.sh” >> ${ZDOTDIR:-~}/.zshrc
“`

# Node.js

“`bash
brew install gpg gawk
asdf plugin add nodejs https://github.com/asdf-vm/asdf-nodejs.git

asdf list all nodejs lts
asdf global nodejs lts
“`

で現時点で最新のLTS(16.x

GitHub ActionsでmainとdevelopブランチへのPull Requestに対して自動テストを設定する

# 概要

Github Actions （以降、「Actions」と略記）を用いてNode.jsでCI（Unit Testを自動実行してPassしている状態を保つ、を意図）する方法を記載する。

次を目的とする。

* masterとdevelopブランチに対するPull Requestが作成された際に、**Request元のブランチ**に対して「`npm run test`」が実行されるようにする

なお、本記事の記載内容は、次の公式ドキュメントに記載の内容とほぼ同じである。本記事は「実際にやってみると、こういう手順になる」を示すことを目的とする。

* Building and testing Node.js – GitHub Docs
* https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

また、先のドキュメント「`Building and testing Node.js`」は、Node.jsでのCIに特化したサンプルを提供してくれている

Botを使ってみた（Node.js + Bot Framework Emulator）

## 背景
日々業務でスキルアップを目指す中、
Botに触れる機会がありつつも、その裏側に触れたことがなかった。

嬉しい事に最近、Botを学ぶ機会があったので、
復習もかねて、実施した事をアウトプットしてみる。

## 前提
* Node.js(v16.14.2）
* VSCode
* VSCode拡張機能で、Teams Toolkitをインストール
* Bot Framework Emulatorをインストール
* サンプルのアプリケーションを作成（以下参照）
1. VSCodeのTeamsToolkitで、「creat a new Teams app」を選択
2. Capabiliiesで、「Bot」を選択
3. Programming Languageで、「JavaS

Nuxt で定期的に変更される Sitemap ファイルの生成方法

## 初めに
現場で SEO 対策の業務を行なっているのですが、Nuxt で動的に変更されるような Sitemap の生成方法がなかなか難しかった（記事もあまり見つからなかった）ので、ハマったこととどう解決したのかなどを記事にまとめようと思います。

そもそも、なんで動的に変更される Sitemap ファイル生成が必要になったかですが、[Sitemap に記載する URL が 50,000 件を超える Sitemap はファイルを分割する必要があります。](https://developers.google.com/search/docs/advanced/sitemaps/build-sitemap?hl=ja#:~:text=1%20%E3%81%A4%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88%E3%83%9E%E3%83%83%E3%83%97%E3%81%AB%E5%AF%BE%E3%81%97%E3%81%A6%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AB%E9%96%A2%E3%81%99%E3%82%8B%E4%B8

npm run compile:scssでエラー

# 背景
SalesforceのCommerce CloudにStripeを導入する過程（下記①）で、
下記コマンドを打つというものがあったが、ここでエラーにはまった。

“`
npm run compile:scss
“`

# やったこと
– 当初はNode推奨版のv16.15.1をインストールしていた
– その後v8.11.1にダウングレードして試したもののうまくいかない
– 下記②の記事を参考にし、Nodeのバージョンをv12.16.0にアップグレード
– その上で下記③の記事を参考に、以下の「node_modulesを消す、npmのキャッシュクリア、node_modulesを入れ直す」というnpmのエラーでは鉄板(？)らしい対処法を試した
“`
rm -rf node_modules && rm package-lock.json && npm cache clear –force && npm cache clean –force && npm i
“`
– その後以下コマンドを再度試したら、うまくいった
“`
npm run compile:scss
“

MacにNode.jsをpkgでインストールしたらbrew doctorで警告が出たので再インストール

# はじめに

MacでNode.jsを使いたくて、[公式ホームページ](https://nodejs.org/ja/)からpkgをダウンロード、インストールしました。その後、`brew doctor`を実行したら、node関連のファイルの影響で警告が出ていたので、homebrewから再インストールしようとやってみました。

# Node.jsのアンインストール

必要に応じて`sudo`で実行してください。

まず始めに、npmのアンインストール。

“`
$ sudo npm uninstall –location=global npm
$ rm -rf .npm
$ npm -v
“`

最後に、「zsh: command not found: npm」と出力されたら成功。

次に、Node.jsのbomファイルから削除対象のファイルを取得して削除。それ以外の関連するファイルも削除。

“`
$ lsbom -f -l -s -pf /var/db/receipts/org.nodejs.node.pkg.bom | while read i; do sudo rm /u

Node.js(Express)で書いたJSONデータの受け渡しプログラムをHeroku上で動かしてみる

Node.js(Express)でGETリクエストに応答するだけのプログラムを作れたので、次はクライアント側からPOSTしてなんやかんやするプログラムを作ります。
JSONデータのPOSTを受け取って、そのままJSONデータを返してもらいましょう。
# 結論
どハマりするポイントもなくすんなり書けます。
JSONデータを受け取る、JSONデータを返すができればDB連携のあるプログラム作成も目前感がしてちょっとした進歩感が出てきて嬉しい。

##### 環境
Win10+VSC@1.68
Node.js@16.14.2+Express@4.18.1
##### やろうとしたこと
– Herokuサービス上でNode.js(Express)アプリケーションを動かす
– JSONデータをポストしてJSONデータを返してくれる実装

## やってみる
Herokuにアプリをデプロイするのはこっち参照

https://qiita.com/shichisan21/items/b163e33669763ca6fffc

POSTされたJSONデータを返すプログラムの作成メモはこっち

https

HerokuでNode.js(Express)で書いたHello worldプログラムを実行したい！

サーバ上でWEBアプリ動かしてみようかな！できればMySQLとかのDBとも連携もしたい！
と思ったのでそれらを使えるサーバにデプロイする事にしました。

AmazonのAWSも無料で使えるので検討しましたが、無料期間が限定(12か月)されているのと利用できるサーバ時間の長さでまずはHerokuを使ってみる事に。

# 結論
__Heroku？なにそれおいしいの？状態からでも結構簡単にWEBアプリをデプロイできました。__
実際に手を動かす時間よりは調べている時間の方が長かったかも。

##### 環境
Win10+VSC@1.68
Node.js@16.14.2+Express@4.18.1

##### やろうとしたこと
– Herokuサービス上でNode.js(Express)プログラムを動かす
## やったこと
まずは小さな小さな成功体験から。

Herokuに登録します。超簡単成功体験。
日本語でしっかり書かれているのは嬉しいです。

https://jp.heroku.com/

Herokuとは何か？については端折ります。
ざっくり言うとWEBアプリを動かせるサーバ環境を

GraphAPIを使ってファイルをダウンロードする（Node.js）

`@microsoft/microsoft-graph-client`を使ってファイルをダウンロードするときにめんどくさかったのでメモ。

https://docs.microsoft.com/ja-jp/graph/api/driveitem-get-content?view=graph-rest-1.0&tabs=http

“`js
const fs = require(‘fs’).promises;
const Blob = require(‘cross-blob’);
const zlib = require(‘zlib’);
const { PassThrough } = require(‘stream’);

async main () => {
/**
* 大きいファイル、小さいファイル、テキストファイルなど、ファイルの種類によって返ってくるクラスが変わる
* @type {PassThrough|Blob|zlib.Gunzip}
*/
const content = await client.api(‘/drives/{drive-id

Node.jsで組んだプログラムにcurlコマンドでJSONデータをPOSTしようとしてハマった

Node.js(Express)で組んだプログラムにcurlを使ってJSONデータをPOSTしようとしました。
結果どハマりしたのでメモ。

# 結論
解決してない。なんたる出オチ。
もし同じようにハマってる人がいたら俺の屍を越えてゆけ・・・！
僕は他の方法でJSONデータをPOSTする事にしました。

##### 環境
Win10+VSC@1.68+Node.js@16.14.2+Express@4.18.1
VSCのターミナルはPowerShell使用

##### やろうとしたこと
– expressで書いたプログラムにJSONデータをPOSTしてJSONデータを返す
– VSCのターミナルからcurlコマンドでJSONデータをPOST

## やったこと
さっくりExpressの公式ドキュメントを参考にPOSTデータを受け取るプログラムを書きます。
POSTして、プログラム側で受け取ったデータの中身はreq.bodyに入っている模様。
なので公式ドキュメントのreq.bodyについての項目を参照。

http://expressjs.com/ja/api.html#req.bo

【Windows10】Please update your version of Node.と言われたとき

#### Windows10でPlease update your version of Node.と言われたとき、つまづいたので備忘録

現象
“`
npx create-react-app . –template typescript
npx: 67個のパッケージを14.129秒でインストールしました。
You are running Node 12.18.1.
Create React App requires Node 14 or higher.
Please update your version of Node.
“`

検索すると、下記を実行するように記載されているが、Windowsだとエラーになる。
“`
npm cache clean -f
npm install -g n

npm ERR! code EBADPLATFORM
npm ERR! notsup Unsupported platform for n@8.2.0: wanted {“os”:”!win32″,”arch”:”any”} (current: {“os”:”win32″,”arch”