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

NestJS のチュートリアル、nest new ~ 基本的なCRUD の作成まで

# プロジェクトの作成

## NestJS CLI の導入

先ず、NestJS CLI をインストールします。

“`zsh
npm i -g @nestjs/cli
“`

## nest new の実行

次に、nest new コマンドを使い、プロジェクトを作成します。
今回は、tutorial-app というプロジェクト名を指定しています。

“`zsh
nest new tutorial-app
“`

実行すると、使用するパッケージマネージャーを聞かれます。
今回は、npm を選択します。

# CRUD の実装

## nest g コマンド の実行

nest g コマンドを実行し、BooksModule、BooksController、BooksService を作成します。

“`zsh
nest g mo

NestJS のチュートリアル、TypeORM を使ったCRUD の実装

# DB の環境構築
## docker-compose.yml

docker-compose.yml を作成し、コンテナの設定を記述します。

“`yml:docker-compose.yml
version: ‘3.7’
services:
mysql:
image: mysql:5.7
container_name: mysql
ports:
– ‘3306:3306’
volumes:
– /var/lib/mysql
environment:
MYSQL_ROOT_PASSWORD: password
MYSQL_DATABASE: develop
MYSQL_USER: develop
MYSQL_PASSWORD: password
hostname: mysql
restart: always
user: root
“`

## コンテナ起動

コマンドを実行しコンテナを起動します。
“`bash
docker-compos

NestJS のチュートリアル、テーブルのリレーションを作る

# UserTable の準備
User Entity を追加し、Book Entity とリレーションを作ります。
まずは、ID と 名前だけをもつUser Entity を準備し、対応するUserTable を作成します。

## UserEntity を作成する
src/entities ディレクトリにuser.entity.ts を作成し、User Entity を設定します。

“`ts:src/entities/user.entity.ts
import { Column, Entity, PrimaryGeneratedColumn } from ‘typeorm’;

@Entity()
export class User {
@PrimaryGeneratedColumn()
id: string;

@Column()
name: string;

@Column()
createdAt: string;

@Column()
updatedAt: string;
}
“`

## マイグレーション の実行
一度アプリを起動し、e

yarn でワークスペースにパッケージを追加できなくなった

表題の解決法メモ

“`sh
$ yarn workspace hoge add fuga
error An unexpected error occurred: “expected workspace package to exist for \”@babel/helpers\””.
“`

`@babel/helpers` の部分は人によって違うと思うが、ワークスペースにパッケージを追加しようとすると `expected workspace package to exist for …` のエラーが出て追加できなくなってしまった
[issue](https://github.com/yarnpkg/yarn/issues/7807)としても挙げられている

# 環境

– yarn 1.22.18
– node v16.14.0
– M1 MacBook Pro
– macOS Monterey 12.4

# 原因

https://github.com/yarnpkg/yarn/issues/7807#issuecomment-623223536
複数のパッケージが依存

【自分用メモ】Laravel 環境構築してみた

# Composerのインストール
https://getcomposer.org/

1. Donwloadを選択
1. Composer-Setup.exeをダウンロード&インストール
# Laravelの環境構築
ターミナルで、`composer create-project laravel/laravel (プロジェクト名）`を実行。
# 作成したプロジェクトディレクトリに移動
`cd (プロジェクト名)`を実行。
# 簡易サーバーの確認
1. `php artisan serve`を実行
1. URLを開く。トップページが表示されればOK。
# node.jsのダウンロード&インストール
https://nodejs.org/ja/

1. バージョン確認`node -v`
1. エラーが出る場合はVS Codeを再起動してみる。
# タイムゾーン設定と言語設定
config\app.phpで以下の通り変更。
‘timezone’ => ‘Asia/Tokyo’,
‘locale’ => ‘ja’,
# デバッグバーのインストール
`composer require barr

ChromebookにNode.js開発環境を構築する

## 概要
最近出先でプログラミングをする機会が増えてきたのですが、
持ち運びのできるまともな開発環境がMac mini(持ち運び？)くらいしかありませんでした。
そこそこ安価でそこそこ動作してくれるノートPCで簡単な開発環境を構築しようと考えて実行した、その備忘録です。

続き：[chromebookへのphp開発環境構築(Xampp)](https://qiita.com/kamekame85/items/2c00aa9766a0c406d3cc)

## 完成形
この記事の通りに作業すれば、以下の環境が整います
– Visual Studio Code
– Node.js
– crostini日本語対応
– ~~Docker~~（別記事に切り分けたので今はなし）

## chromebookである理由
モノはいいようではありますが・・・
– 安価
– Linuxベースであるため同価格帯で他OSより動作が軽い
– Chrome・Android・Linuxのアプリが標準で使用でき、汎用性が高い
– サンドボックス環境でアプリが動作するためセキュリティが強固

## 目次
1. Li

【node】恐怖、いれたはずのnodeがない…

## 起きたこと
node,nvm,npmをインストールし、使用できていたのに、ある日急にどのコマンドもないと言われた
「command not found」:sob:

## 確認したこと
ホームディレクトリ直下にてファイルの一覧を表示（実行結果は省略して一部のみ表示）

“`sh:ターミナル
xxx@DESKTOP-5QEHRDB:~$ ls -lah
drwxr-xr-x 5 xxx xxx 4.0K 5月 5 20:37 .nvm
“`

フォルダは存在していた！

## 原因

PATH通ってなかった！

## 解決策

`.bashrc`か`.bash_profile`にPATHを記述

“`sh:.bashrc
export NVM_DIR=”$HOME/.nvm”
[ -s “$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh” # This loads nvm
[ -s “$NVM_DIR/bash_completion” ] && \. “$NVM_DIR/bash_completion” # This loads n

【Node.js】用語の整理

# 用語の整理

npmとかnvmとかnodeとか…なんとなくごちゃごちゃってなってきたので整理する

## node.js
– JavaScript実行環境
– node,npm,npxをセットにしたもの
→nodeとnpmは基本的には同じバージョンにしておけばよい

## node
– JavaScript実行エンジン

## バージョンマネージャ

### nvm
– Node Version Managerの略
– Node.jsのバージョンを管理するためのツール
– Node.jsのインストール、アップデート、バージョンの切り替えができる

## パッケージマネージャ

### npm
– Node Package Managerの略
– Node.jsで外部パッケージをインストールして使うためのマネージャ
– package.jsonを読み込んで、npmのレポジトリに取りに行く
– インストールしたパッケージの、バージョンと依存関係を管理する
– パッケージのインストール・アンインストール・更新ができる

cf) npx
– npmパッケージを簡単に実行できるコマンド
–

Webpacker::Manifest::MissingEntryErrorを解決した話。（Mac ローカルでrails serverの起動編）

# 環境
OS: Mac
SHELL: zsh

# Webpacker::Manifest::MissingEntryErrorが出たぞ〜！
ローカル環境で初めてrails serverを実行したら以下のエラーが発生した。
“`
ActionView::Template::Error (Webpacker can’t find application.js in /Users/hogehoge/environment/sample_app/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacke

Node.js v14のOptional chainingについて調べてみた

## はじめに
仕事でNode.js v14を使っていますが、開発者が`?.`という記述を使っていました。イマイチ良く分からなかったので、整理しました。

## Optional chainingとは

オブジェクトのプロパティの値を明示的に確認せずに読み込むことができる。

## 具体例

### Optional chainingを使う場合

以下のように`user`と`user.name`が存在することを確認してから、`user.name.kana`を取得する必要がある。

“`js
let kana = null;
if (
user &&
user.name &&
) {
kana = user.name.kana;
}
“`

### Optional chainingを使う場合

上記のように、`user`と`user.name`の存在を明示的に確認しなくても、以下のように`user.name.kana`にアクセスできる。

“`js
const kana = user?.name?.kana;
“`

## 参考
https://developer.

Node.jsとwijmoとWebAPIでMongoDBへCRUDしてみる（2022）

MongoDBにCRUDするメモ。グリッドはwijmoを使用。
いろんなところで手間取った。。。

# 環境
* Windows 10 64bit
* Node.js（v18.0.0）
* MongoDB（v5.08）
* wijmo（トライアル版：5.20221.842）

# 事前準備
* wijmoのトライアル版を入手
* MongoDB Compassで、データベース「webtest」＆コレクション「tasklist」を作成しておく
* MongoDBであらかじめデータを登録しておく
　({name:”xxxx”,type:”xxx”,status:xx})
* Node.jsのプロジェクト用フォルダを作り、expressとmongodbをインストールする

# MongoDBの状態

# プロジェクトフォルダ構成
folder/

【Nuxt.js】DockerやNginxを使用した開発でもホットリロードを行う

# この記事について
Nuxt.jsで開発中、Nuxt.jsのみの開発ではホットリロードが自動でできるようになっているかと思いますが、DockerやNginxを使用するとホットリロードできなくなる場面がありましたので、対処法を記載したいと思います。

# 環境
|内容|バージョン|
|—|—|
|node|16.14.2|
|nuxt|2.15.8|

# 結論
`nuxt.config.js` や環境変数に以下を追加したことろうまく動作しました。

“`nuxt.config.js
export default {
// これでDockerやNginx使用時でもserverMiddleware以外はホットリロード可能となりました（実際にはポーリングによって定期的にソースの変更チェックを行っている）
watchers: {
webpack: {
ignored: /node_modules/,
poll: true,
},
},
}
“`

以下の環境変数の追加によってserverMiddleware側もホットリロード可能

【Nuxt.js】serverMiddlewareでエイリアスを効かせてimportする

# この記事について
[こちら](https://github.com/nuxt/nuxt.js/issues/4580)や[こちら](https://github.com/nuxt/nuxt.js/issues/7017)のIssuesように、Nuxt.jsのserverMiddleware側ではエイリアスが効かないようなので、ライブラリを使用してserverMiddleware側でもエイリアスを効かせられる方法をまとめました。

# 対象読者
* Nuxt.jsでserverMiddlewareの中でaliasを使用した実装を行う方
* Node.jsアプリケーションでaliasを使用したい方

# 環境
|内容|バージョン|
|—|—|
|node|16.14.2|
|nuxt|2.15.8|
|yarn|1.22.15|

# Nuxt.jsでエイリアス設定時のserverMiddlewareの挙動
以下のディレクトリ構造を想定します。

“`
sampleProject
├server
| ├hello.ts
│ └index.ts
├common
│ └array

Windows への Node.js（npm）のインストール

Windows10 のPCに[Node.js](https://nodejs.org/ja/about/) とパッケージ管理システム [npm](https://ja.wikipedia.org/wiki/Npm_(%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E7%AE%A1%E7%90%86%E3%83%84%E3%83%BC%E3%83%AB)) (Node Package Manager) をインストールして確認するまでの手順を備忘録としてまとめました。参考にして頂ければ幸いです。

– 前提条件（環境）
– インストーラーのダウンロード
– Node.jsのインストール
– インストール完了の確認

# 前提条件（環境）

今回インストールするハードウェアの Windows の仕様は次の通りです。

– Windows 10 Pro 21H2

# インストーラーのダウンロード

Node.jsの[公式日本語サイト](https://nodejs.org/ja/)にアクセスすると、OSに対応したインストーラが表示されるので、そのま

ReactのチュートリアルをElectronで動かす

# はじめに
「チュートリアル：Reactの導入」を一通り終えたとき、完成したコードをElectronで動かしたくなった。そこで、Parcelを使ってシンプルに構成してみる。`webpack.config.js`は書きたくない。:angry:

https://ja.reactjs.org/tutorial/tutorial.html

# 完成品
ビルドはしていない。
https://github.com/Hellokichi/electron-react-tutorial

# 環境
– windows 11 Pro
– node.js 16.15.0
– electron 19.0.0
– react 18.1.0
– parcel-bunlder 1.12.5

# ディレクトリ構成
“`
./
├ node_modules/
├ parceled/
│ ├ index.html
│ ├ src.js
│ └ src.css
├ dist/
│ └ react_tutorial 1.0.0.exe
├ electron/
│ ├ main.js
│ └ prelo

forループ内でawaitしたらESLintにtoo heavyweightって言われたから本当なのか試してみた　ESLintのno-await-in-loopルールの意味

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

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

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

Youtube DATA APIで再生リストへの追加をNode.jsから行うメモ

[こちら記事](https://blog.n-t.jp/post/tech/youtube-data-api-insert-playlistitems/) をもとにこんな感じでまとめてみました。

認証周りのコードを書いてないのであくまでも自分用メモです。

`YYYYYYYYY`に再生リストのID、`XXXXXXXXX`にYoutubeのVideoIdを入れれば動きます。

“`js
‘use strict’;

require(‘dotenv’).config();

const tokenAuth = require(‘../libs/tokenAuth’); //トークンの認証
const {google} = require(‘googleapis’);

const main = async params => {
const credentials = process.env.YOUTUBE_DS_CREDENTIALS;
const token = process.env.YOUTUBE_POS_BACKUP_TOKEN;

con

XMLをJSONに変換できるxml2js

とあるAPIで返ってくるレスポンスがXML形式だったため、jsonに変換したくて方法を探していたところ、
xmlをjsonに変換できる「xml2js」というモジュールがあることが分かったので、実際に使ってみました。

## xml2jsをインストール
まず初めにxml2jsをインストールします。
“`
$ npm install xml2js
“`

そして、xml2jsをrequireでインポートします。

“`javascript
const xml2js = require(‘xml2js’);
“`

この時、Typescriptを使っていたので、エディタ上で下記のようなエラーが出ました。
`ESLint: Require statement not part of import statement.(@typescript-eslint/no-var-requires)`

これを回避するには、`@types/xml2js`をインストールして、それをインポートします。
“`
$ npm install –save @types/xml2js
“`

“`ja

【typescript】WebRTCによるビデオ通話を簡単に繋げてみる

これらの記事を参考に、WebRTCのP2P通信を繋げていく。
https://html5experts.jp/mganeko/19814/
https://html5experts.jp/mganeko/20013/

## WebRTCって何？

WebRTC(Web Real-Time Communication)とは、ブラウザやアプリ間でリアルタイムに映像・音楽等を送受信するための技術。サーバーを経由しないP2P通信を行い、かつ通信プロトコルにはTCPではなくUDPを採用することで大量のデータをリアルタイムに高速で送受信することができる。

WebRTCを行うためのRTCPeerConnectionオブジェクトは以下のように作成する。

“`ts
let peer = new RTCPeerConnection();
“`

双方向のクライアントがこのオブジェクトを持つことで通信を行うが、そのためにはそれぞれのSDPを交換するプロセスを踏む必要がある。

## SDPの交換

SDP(Session Description Protocol)とは、ざっくり言うと「データの送り

npm proxy を .npmrc に書いて楽をする

# 前提確認
社内ネットワークなどでプロキシを使用している場合に，`npm` や `git` など様々なコマンドがそのままでは利用できない．この問題を解決する手段として，コマンドにプロキシを設定するやり方がある．

今回は `npm` での設定方法について記述する．

# コマンドラインでの設定
全てのプロジェクトに設定したい場合，以下のように設定すれば基本は問題ない（はず）．

“`bash
npm -g config set proxy http://: npm -g config set https-proxy http://: npm -g config set registry http://: “`

なお，これらの設定を解除するには，次の通り実行する．

“`bash
npm -g config delete proxy
npm -g config delete https-proxy
npm