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

jest で uuid がインポートされているファイルを読み込むとエラーになってしまう。

## 環境
– nodejs: 14.17.6
– uuid: 8.3.2
– nextJs: 12.1.0
– typeScript: 4.6.2

## エラー内容
uuid パッケージが ECMAScript　に対応していないのが原因かな？？
“`sh
● Test suite failed to run

Jest encountered an unexpected token

Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel c

Express.jsを勉強しなおしたログ（環境構築する上で、判断に困ったところなど）

この記事は、今更ながらExpress.jsを勉強しなおした時のログです。
具体的なやり方は、いろいろと優秀なドキュメントがありますゆえ、あまり書いていません。
一方で、判断に迷ったり困ったところをメモしています。
（似たようなパッケージがあって、どれを使えばいいのかの比較など）

とりあえずの環境構築までを書いています。

Express.jsを使っている方は、目次を適当に見て、気になったところだけ見ていただけると何か見つかるかもしれません。
Express.jsを勉強中という方は、ざっと読み通しておくと、なにか救われるかもしれません。

くらいの温度感で書いています。

## Express.jsって

Webアプリフレームワーク。
[StateOfJavaScript2021](https://2021.stateofjs.com/en-US/libraries/back-end-frameworks)を見た感じ、JavaScript系のWebフレームワークでは、一番使われているっぽい。

## なぜ学習するのか？

ウェブアプリを作るときに、[Laravel](https:/

TypeScriptでuuidをインストールしているのにCannot find module ‘uuid’

# はじめに

この記事は2022年8月にまとめていた「細かいつまずいたことをメモしておく(8月編)をそれぞれ投稿した内容になります
解決方法が最新でない可能性もありますのでご了承ください

# 問題

TypeScriptの環境で以下のコマンドでuuidをインストールしているのにエラーが消えなかった

“`
# 以下をインストールしたがエラーは消えなかった
$ npm install uuid@8.3.2
$ npm install uuid
$ npm install -g uuid
“`

# 解決方法

TypeScriptを利用しているなら以下のコマンドで定義ファイルをインストールする必要がある

“`
$ npm install –save-dev @types/uuid
“`

Reactのnpx create-react-appでパーミッションエラー

# はじめに

この記事は2022年9月にまとめていた「細かいつまずいたことをメモしておく(9月編)をそれぞれ投稿した内容になります
解決方法が最新でない可能性もありますのでご了承ください

# 問題

DockerでNode.jsの環境を作成してコンテナ上で
`npx create-react-app my-app`としたところ

“`
/tmp/npx665626933.sh: 2: create-react-app: Permission denied
“`

というエラーが発生した

# 解決方法

以下のコマンドで成功した

“`
$ npm install -g create-react-app && create-react-app my-app
“`

# 問題再び

TypeScript環境をつくろうと以下のコマンドをコンテナ上で叩いた

“`
$ npx create-react-app app –template typescript
“`

そしてやはりエラーがでてしまった

“`
https://www.google.com/search?q=

npm run devでERR_OSSL_EVP_UNSUPPORTEDでビルドに失敗する

# はじめに

この記事は2022年9月にまとめていた「細かいつまずいたことをメモしておく(9月編)をそれぞれ投稿した内容になります
解決方法が最新でない可能性もありますのでご了承ください

# 問題

`npm run dev`をしたところ以下のエラーが発生した

“`
ERR_OSSL_EVP_UNSUPPORTED
“`

Webackのビルドがうまくいかない

# 解決方法

“`
export NODE_OPTIONS=–openssl-legacy-provider
“`

としたところビルドができるようになった

# 参考

https://stackoverflow.com/questions/69394632/webpack-build-failing-with-err-ossl-evp-unsupported

Node.js (NestJS) で csv ファイルを読み込む（４つのライブラリ比較）

## はじめに

Node.js (NestJS) で csv を読み込むには、使用できるライブラリが４つほどあります。
備忘と比較のため、ここではそれぞれのコードを記載していきます。

|項番|名称|参考サイト|
|—|—|—|
|1|csv-parse|[npmjs – csv-parse](https://www.npmjs.com/package/csv-parse), [CSV for Node.js](https://csv.js.org/)|
|2|csv-parser|[npmjs – csv-parser](https://www.npmjs.com/package/csv-parser), [OpenBase – csv-parser](https://openbase.com/js/csv-parser/documentation)|
|3|csv|[npmjs – csv](https://www.npmjs.com/package/csv), [初心者のためのCSV読み込み・JSON変換まとめ！](https://www.sejuku.net/bl

5分ではじめるAuth0アプリ

IDaaSとして有名な認証サービス「[Auth0](!https://auth0.com/jp)」を触ってみました。その過程のメモ書きです。
スムーズに行けば５分くらい(?)でアプリのファーストコールができそうです。

以下、手順です。

* Auth0 のアカウントを作成する
* ダッシュボードの情報を確認する
* ダッシュボードからApplicationを登録
* サンプルアプリをダウンロード
* npmコマンドで関連ファイルをダウンロード
* server.js の configを書き換え
* 起動

前提条件・環境は以下としました。

* node.js + Express でローカル起動
* Macを利用
* Auth0が配布している[サンプルアプリ](!https://github.com/auth0-samples/auth0-express-webapp-sample)を利用

## Auth0のアカウントを作成する

Auth0のトップページにアクセスして「Sign up」をクリックします。
https://auth0.com/jp

macbookを買い換えたのでツールのセットアップをするin2022年8月

# はじめに
MacBook Pro (13-inch, M1, 2020)を購入しました。
今更ながらM1デビューという事で、ツール周りの最低限のセットアップをしていきます。

:::note
ちなみに初めてApple公式の整備品から購入しましたが大変満足しております
▼参考価格18万円程度
チップ：M1
メモリ：16GB
SSD：1TB
:::

# ツール/パッケージのインストール手順
今回は以下のツールをインストールします。
自分用備忘録のため偏りがありますが、参考になる項目があれば幸いです。
(足りないものは必要になったら入れていきます〜〜)

▼M1開発民はほぼ必須(たぶん)
Rosseta2：M1チップでもIntelチップ用のツールを使えるようにする
HomeBrew：macパッケージ管理ツールの重鎮

▼お好み
Python
Node
AWS CLI
AWS CDK
Docker

では、ターミナルを開き、コマンドを実行してインストールしていきます！

## Rosseta2をインストール

“`text:コマンドを実行
sudo softwareupdate –i

#プログラミング #Javascript #nodejs # #twitter の #推しNHKドラマを3つ貼る見た人もやる を集計

本内容を利用した場合の一切の責任を私は負いません。

# 概要
7月末にNHKが下記のtweetをしたのでAPIを使って集計してみた。

NHKスクエアが
こんな企画をご用意しました✨
「#推しNHKドラマを3つ貼る見た人もやる」

画像を参考に、
引用ツイートで
「好きなNHKドラマ」の作品名を3つ呟いて投稿してください！

もちろん、同じ作品3つでも良いですよ…！ pic.twitter.com/4q9aXmAHOX

— NHK スクエア【公式】 (@NHK_DVD) July 30, 2022


# バージョン
・node-v10.16.0-win-x64
・needle@3.1.0
・columns　Version: 2.2.2

# 集計ルール
・NHKのtweetの日以前に作成されたユーザーのtweetが対象
　(=新しいユーザーは除外。)
・1アカウントの最新のタグ有りtweetのみ対象
　(=複数の場合は最新のみ。)
・タグの直前直後の空行を除く3行を、1行当たり20文字分
　直前直後は直前が優先で、直前が無いか空行のみの場合のみ直後を採用する。
・#等記号と空白を無視
　#等記号は

2分でPCにWebリモコンを実装できるライブラリ「rcjs」でラズパイ操作してみた

Raspberry PIでIoT製品のプロトタイプをしてると、ディスプレイに繋げずにラズパイを操作したい状況が出てきます。

そんな時のために使えるお手軽Webリモコンを実装できるnpm形式のpackage「rcjs」を開発して、webリモコンを作ってみました。

**※npmには既にrcjsというパッケージが存在していますが、今回作ったものは僕のGithubからでのみnpm installできます。**

## 使い方
### Install
“`bash
npm install –save TakutoYoshikai/rcjs
“`

“`javascript:index.js
const Remocon = require(“rcjs”);

const remocon = new Remocon();

remocon.addButton(“button title”, function() {
//do something
});

remocon.start(3000);
“`

do somethingのところに好きな処理を実装します。shellコマンドを

Firebase + React.jsでCloud Functions For Firebase を使ったプロジェクトの雛形作成

# (1)導入と環境構築
firebaseをフロントエンドから扱う際にsdkを利用してアプリ開発するサンプルはたくさんあったけれど、実際にはそれ以外にもメールやslackなどの外部サービスや、裏で処理させたくなる場合が多く実務ではcloud functionsを使ったバックエンドの実装も行うことが多いがそのサンプルがなかなか見当たらなかったので、自分用のアウトプットと参考になる人がいればと思い記事を書いてみることにしてみました。

またEmulatorを活用してローカルでfirestoreを扱いながら開発を進める方法も見てきます。

**(2)Firebase Emulatorを使ってREST APIを自作してFirestoreにデータを保存させる。**
https://qiita.com/sugimo-ne/items/71dbaa7108dfee487810

## 概要
Cloud Functions For FirebaseでバックエンドのREST APIを作成しつつ、
フロントエンドをReactで作り、
Firebaseで自分のAPIを簡単に作成する方法と
自作のREST

Node(vue)にyarn add axiosしたのにno moduleエラーがでる

# はじめに

この記事は2022年2月にまとめていた「細かいつまずいたことをメモしておく(2月編)をそれぞれ投稿した内容になります
解決方法が最新でない可能性もありますのでご了承ください

# 問題

Node.js(Vue)に`axios`をいれるため`yarn add axios`として呼び出したところインストールしているはずなのに`no module axios`とエラーが出た

# 解決方法

“`
import axios from “axios”;
↓
import axios from ‘axios’;
“`

と変更したらなおった。原因は謎ではあるがこういうパターンもあるみたい

./bin/webpack-dev-server: Permission deniedが時々起きる (chmod・chownが効かない)

# はじめに

この記事は2021年1月にまとめていた「細かいつまずいたことをメモしておく(1月編)をそれぞれ投稿した内容になります
解決方法が最新でない可能性もありますのでご了承ください

# 問題

なぜかファイルが権限で読み込めなくなる現象が時々おき
。一回治ると以降起きないが、Gitからダウンロードしたときにコンテナをあげると起きたり、起きなかったり

Dockerfileで`chmod +x ./bin/webpacker-dev-server`をしても同じエラーがでてしまいchown, chmodが効いていない

# 解決方法

これはローカルにある./bin/webpacker-dev-serverがコンテナのユーザーが変更されていたので起きていた
変更が起きたタイミングはWSL2のフォルダをWindowsのデスクトップにダウンロードしてからWSL2ni再度戻したときでした
また、Gitに権限がrootになっているファイルををあげていたのでクローンも当然root権限になっていた

権限を変更する必要がある

“`
$ sudo chmod -R ユーザー名:グループ名

create-react-app でTypeScript を使う

## 環境
– OS: Window 10
– Node.js: v16.16.0

## 手順
作業用ディレクトリで、以下のコマンドを実行すればOK
“`
npx create-react-app my-app –template typescript
“`

## 参考文献
https://create-react-app.dev/docs/adding-typescript/

Windowsでnvmをインストールし、Node.jsとyarnも入れた手順

# 実行環境
Windows10 バージョン20H2

## 必要ソフト
ChromeとVScodeを使用する前提での構築になります。

### Chromeのインストール
バージョン: 104.0.5112.81（Official Build） （64 ビット）
[Google Chrome インストール](https://www.google.com/intl/ja_jp/chrome/)

### VScodeのインストール
Version: 1.70.1
OS: Windows_NT x64 10.0.19042

[VScode インストール](https://azure.microsoft.com/ja-jp/products/visual-studio-code/)

### nvmのインストール
version: 1.1.9

[nvm インストール](https://github.com/coreybutler/nvm-windows/releases)

# 構築手順

1. 管理者権限でコマンドプロンプトを開く
スタート→ windows システムツール → コマ

動的に.protoファイルを読み込む@grpc/proto-loaderを利用して、Node.jsでgRPCを動かしてみた

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

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

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

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

https://github.com/yuta-katayama-23/node-grpc/commit/778ac0d00777b29930aa14ec0bbdcf7cc4022c47

discord.js v14を使用した簡単な応答botの作り方

# discord.js v14を使用した簡単な応答botの作り方
## はじめに
どうもはじめまして、だらけ(darakeee)です。
今回はdiscord.js v14を使用して簡易的な返答Botを作っていこうと思います。

こちらは、JavaScript と discord.js を利用した Discord Bot 開発のチュートリアル記事を想定して書いております。

もし説明が間違っていたり、分かりづらかったら教えてください。

DeveloperPortalで必要な操作は別の記事を書いたので、こちらをご覧ください。

https://qiita.com/darakeee/items/bb923e1c0cde6c552f9f

## 動作環境
– npm 8.14.0
– node.js 18.4.0
– discord.js 14.1.2
– dotenv 16.0.1

※discord.jsは「16.9.0」以前は対応していないので注意。

## ファイル構成
> discordBot/
　├ node_module/
　├ src/
　│　 └ index.js
　├

npmについてくるnpxコマンドをもっと活用しようぜ

Node.jsのパッケージマネージャであるnpmには`npm`コマンドのほかに`npx`というコマンドがついてきます。`npx`は便利さのわりにあまり活用されていない気がしたので書いた記事。

# `npx`コマンドとは？?
`npx`はnpmのパッケージで定義されたコマンドを起動するコマンドです。npmのパッケージでは`package.json`の`bin`を設定することでそのパッケージをインストールしたときに同時にインストールするコマンドを定義することができます。`npx`ではパッケージ名を指定することでそのパッケージで定義されたコマンドを実行できます。

# 利点1 – ローカルインストールしたパッケージのコマンドの起動が楽?
npmで配布されているCLIアプリを使うとき、`npm install`に`-g`フラグを付けてグローバルにインストールしろ、という指示になっていることが多いです。

“`console:グローバルにインストール
$ npm install -g npm-check-updates
“`

これによりコマンドがシステム全体にインストールされるので、パッ

Super! Build a simple Nuxt.js environment.

This time, instead of Create Nuxt App, we will build a minimal Nuxt.js development environment by manual installation.

:::note info
**development environment**

– **Docker**（[Node.js Dockerイメージ](https://hub.docker.com/_/node)）
→ `$ docker run –name “Container Name” -p “Port Number （Host（Device））”:3000 –interactive –tty –detach node:16.17`

– **Node.js** Version：16.17.0
– **Yarn** Version：3.2.2
:::

### :one:　Update Yarn （package manager） to the latest version.

1. Run `$ yarn set version

超！シンプルな Nuxt.js の環境を構築する。

今回は Create Nuxt App ではなく、手動インストールで最小限の Nuxt.js の開発環境を構築していきます。

:::note info
**開発環境**

– **Docker**（[Node.js Dockerイメージ](https://hub.docker.com/_/node)）
→ `$ docker run –name “コンテナ名” -p “ポート番号（ホスト側）”:3000 –interactive –tty –detach node:16.17`

– **Node.js** Version：16.17.0
– **Yarn** Version：3.2.2
:::

### :one:　Yarn （パッケージマネージャ） を最新版にアップデートします。

1. `$ yarn set version stable` を実行します。

### :two:　Yarn をプロジェクトに導入します。

1. `$ corepack enable` を実行して、Corepack を有効化します。
→ Corepack とは、Node.js Ver