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

Vue.jsとReact.jsのプロジェクト作成から公開準備（※コーディングは含みません。）

# Vue.jsとReact.jsのプロジェクト作成から公開準備
Javascriptで使用できるフロントエンド側のフレームワーク、VueとReactのプロジェクト作成コマンドを忘れないためと、ビルドしてからの流れについての説明が見当たらず、せっかく個人開発でやってみても誰にもリリースすることがないように記す。
なお、今回はそれぞれポートフォリオをフロントエンド側でのみ、作成したという程で作成しました。

## 動作環境
– MacBook Air (Retina, 13-inch, 2018)
– BicSur 11.3.1
– 1.6 GHz Dual-Core Intel Core i5
– 6 GB 2133 MHz LPDDR3
– Node.js
– v13.8.0
– @vue/cli 4.5.13

## 各プロジェクトの作成

### Vue.js
“`terminal
vue create vue-portfolio
“`

### React.js

“`terminal
npx create-react-app r

LaravelにReactとTypeScriptを導入する

## 前提
Laravelでプロジェクトを作成していて、nodeはインストール済みの想定で進めていきます。

## TypeScriptをインストールする
webpack.mix.js（webpackのラッパーライブラリ）を下記のように編集する

“`
mix.ts(‘resources/ts/index.tsx’, ‘public/js’)
.sass(‘resources/sass/app.scss’, ‘public/css’);
“`

先ほどの編集内容を反映させる

“`
npm install
“`

プロジェクト内にnode_modulesディレクトリが作成されていればOK。
一旦下記コマンドでビルドする。

“`
npm run prod
“`

package.jsonにwebpack.mix.jsで編集した内容の不足分が記載される（typescriptとsass）

## Reactをインストールする

“`
npm i -D react react-dom @types/react @types/react-dom
npm install

NestJSでHMR(Hot-Module Replacement)でホットリロードする

NestJSは`nest new`したあとに`nest start:dev`するだけで、ホットリロードする開発環境を整えることができます。しかし、これはファイルの変更を監視し、変更が検知されたら再度ビルドしているだけなので、プロジェクトが大規模になるとTypeScriptのビルドの処理が重くなります。
そこで、WebpackのHMR(Hot-Module Replacement)を利用すると、変更のあったモジュールだけを入れ替えることができるので、大きなプロジェクトでもホットリロードの時間を大幅に短縮することができます。

> この記事は、ほとんど公式ドキュメントの意訳です。
> **ドキュメント** : https://docs.nestjs.com/recipes/hot-reload
> **ライセンス** : https://github.com/nestjs/docs.nestjs.com/blob/master/LICENSE

**注意**

* Yarn v2(berry)を使用している場合は、そのままでは動きません。上記リンクより公式ドキュメントをご確認ください。
*

gyp: No Xcode or CLT version detected!のエラー対処

## 事象
ReactにTypeScriptを導入しようと思い、npm install関連のコマンドで環境構築していた時に下記のようなエラーと遭遇しました。

“`
gyp: No Xcode or CLT version detected!
“`

## 解決策
Xcodeはインストール済みだったのでアップデートを促すエラーかなと思いアップデートを試しましたが変わりませんでした。
そのため、下記のように削除してからインストールし直しました。

“`
$ sudo rm -rf $(xcode-select -print-path)

# CommandLineToolsのディレクトリを削除
$ sudo rm -rf /Library/Developer/CommandLineTools

# Xcodeを設定とかをリセットする
sudo xcode-select –reset

# Xcodeを再インストール
$ Xcode-select –install

# 再度npmでインストールしてみる
npm install 【インストールしたいパッケージ】
“`

すると.

nodenvでインストール済みのバージョンリストを表示させる

## nodenvでインストール済みのバージョンリストを表示させる

検索してもなかなか出てこなかったので自分用にメモ
↓でいけました。現在利用しているバージョンについても教えてくれます。

“`
nodenv versions
system
14.4.0
* 15.10.0 (set by /Users/barabara/.anyenv/envs/nodenv/version)

“`

helpコマンドを使えば各コマンドについての説明がちゃんとありました。

“`
nodenv help
Usage: nodenv []

Some useful nodenv commands are:
commands List all available nodenv commands
local Set or show the local application-specific Node version
global Set or show the global Node version

MySQLで”Unknown column ‘xxx’ in ‘where clause'”が出たときの対処法

#MysqlでSELECTを使うときの注意点

##対象者
– これからSQLを学ぶ方
– 少し触ったことのある程度の方

##今回の気づき
例えばmysqlを使用してデータを抽出したいと考えます。

“`sql
SELECT * FROM users WHERE id=xxx
“`

その際、このようなSQL文を組み立てるとは思うのですが、idの部分に入ってくるものは変数で管理したいですよね？？

そしたら変数で管理してみましょう！
諸事情により、環境はNodeでExpressを使用します。随時自分が学習してる言語で応用してみてください！

“`node.js
const express = require(‘express’);
const app = express();

app.listen(3000, () => console.log(‘Server is listening on 3000’);
//このとき入ってくるindexは”a6f87ff4d4a04fa7a7a77acc1e3a6bd1″と定義します。
app.get(‘/users/:index’,

node.js + puppeteer + axios でポケモンカードの画像（漆黒のガイストのカードリスト）をスクレイピングしてみる

## はじめに
sveltekitでホームページつくりました。良かったら見てください。
[安全にインターネットを楽しもう](http://safetyinternet001.ddns.net/)
[Twitter](https://twitter.com/safetyinternetz)

## やりたいこと
・公式のカードページから画像をスクレイピングしたい
・最新弾である[[漆黒のガイストのカードリスト]](https://www.pokemon-card.com/card-search/index.php?mode=statuslist&pg=732)の画像を全部保存したい

## 必要なもの
・node.js
・puppetter
・axios

## 手順
まずは`npm init -y`でさくっと環境をつくる。

“`bash
npm init -y
npm i puppeteer
npm i axios
touch index.js
“`
で、今後 node index.jsで起動していきます。

## まずはページを表示するだけ
“`JavaScript
cons

Visual Studioでnpmを使う方法

マイクロソフトの公式ドキュメントを参考
[参考URL](https://docs.microsoft.com/ja-jp/visualstudio/javascript/npm-package-management?view=vs-2019)

## Node.jsプロジェクトの場合
### 1.「新しいnpmパッケージのインストール」をクリック


### 2.パッケージを検索し、「パッケージのインストール」をクリック

画像はjQueryをインストールしている。

## .Net Coreプロジェクト

WEBアプリ『ひとこと日記ver2』概要

この記事は、関口 厚がポートフォリオ用に開発したWEBアプリの紹介記事です。

#アプリの概要
アプリ名：**[ひとこと日記ver2](https://diary-app.sekiguchiportfolio.net/)**
日々の記録をテキスト形式で保存する、シンプルな**日記アプリ**です。
コードはGithubにてご覧いただけます。(**[フロントエンドのコード](https://github.com/Sekiguchi-Atsushi-WEB/vuecli-app)**・**[バックエンドのコード](https://github.com/Sekiguchi-Atsushi-WEB/express-app)**)

#作成環境
・インフラ：**AWS**
・バックエンド：**node.js** ＋ **Express**
・フロントエンド：**Vue.js**
・データベース：**MySQL**

**●各バージョン**
node.js v12.18.2, Express 4.17.1, Vue.js 2.6.12, Veu-CLI 4.4.6, MySQL 8.0

#アプリで

【Node.js】ダウンロードアプリ版のアンインストール、nvmでの再インストール（mac版）

#### Node.jsのインストールはどのように行いましたか？
[公式サイト](https://nodejs.org/ja/)からアプリをダウンロードしてインストールするのは簡単な方法ですが、あまりオススメしません
理由はバージョンコントロールが面倒になるからです。**nvm**または**nodebrew**を使ってインストールする方法がオススメです。

既にダウンロードアプリ版でNode.jsをインストールしてしまった方向けに、
既存のNode.jsのアンインストールから、nvmで再インストールする方法について紹介します。

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

#### npmのアンインストール

npmのアンインストール

~~~bash
npm uninstall -g npm
~~~

ホームディレクトリに移動して`.npm`フォルダの削除

~~~bash
cd ~
rm -rf .npm
~~~

`node`コマンドのフルパスを探してこちらも消しておく

~~~bash
which node
rm -rf /usr/local/bin/node
~~~

消えて

PharoからOracle/MySQLに接続するnode.jsのapiサーバーを構築する

## はじめに
いままでSqueak4.4とPharo7でWebアプリサーバーを構築していましたが、DBXTalkのインストールが失敗するためOracleデータベースへの接続にはperlのDBI/DBDライブラリを利用していました。
ただし、perlを呼ぶOSProcessはWindowsでは動かないためLinux版Pharoでしか開発／テストが出来ず、WindowsPCで開発してLinuxサーバーで運用というスタイルが取れないのがこれまでの悩みでした。

今回Pharo8へのマイグレーションを行う際に、データベースへのアクセスをnode.jsに代行させるようにしたらすべて解決出来たので共有します。
ついでにMySQLの接続もサポートしました。

## 概念図
PharoでSeaside3をWebサーバーとして起動します。
node.jsはapiサーバーとして機能します（今回はWindows10PCに立てましたがWindowsでもLinuxでも好きな環境に立てて下さい）
![Metacello new.png](https://qiita-image-store.s3.ap-north

M1 MacでのZeroMQ (Node.js) 導入

フロントエンドの開発をやっている中で、既存のプロジェクトをクローンしてきた時に問題が起こりました。 `yarn` したら途中でエラーになる。どうやら `zmq` ライブラリがコンパイルできていないようです。M1 Macに変えたばかりなので「もしかして`zmq`はM1対応してないのかな〜」とも思いましたが、もしそうだとしたらお手上げなので地道に調べることにしました。

###結論

事前に依存ライブラリをインストールする！

###エラーメッセージ
エラーメッセージは次の通りです。

“`zsh
error /Users/{myName}/develop/vue/o-GreenCheck/frontend/node_modules/zeromq: Command failed.
（略）
Building libzmq…
/Users/{myName}/develop/vue/o-GreenCheck/frontend/node_modules/zeromq/build/Release/../../script/build.sh: line 60: cmake: command no

プログラミング初心者向け！トイドローン「Tello」をScratchで飛ばす

仕事でTelloを使って職場を撮影するというミッションを与えられたので、先ずはプログラム制御できるようにScratchと繋いでみました。途中ちょっとつまずいたので備忘録がてら記事にしていきます。

##Telloとは
中国のスタートアップ企業Ryze Techが開発・販売しているトイドローンです。
価格の割に性能がよく、ホバリングや姿勢制御などある程度のことは自動でやってくれる上に軽くてカメラの性能も結構良い感じです。
こんな見た目です。

[Tello公式ホームページ](https://www.ryzerobotics.com/tello)

また、Telloには専用のSDKが用意されており、PythonやScratchなどで制御することができます。
今回は**[初心者でも簡単にプログラミングができるScratch](h

DOMやwindowに依存しているPrismのプラグインをNode.js上で動かす方法

Prism.jsのline-numbersプラグインなどは、ブラウザ上での動作を前提とした設計でDOMやwindowに依存しているため、Node.jsのようなサーバーサイドで`require`しても動作しません。

## 解決策

ではどうやったら動くか？解決策は次の通りです。

### DOMに依存している問題の解決策

DOMに依存しているコードが動くようにするために、`jsdom`を使います。

### グローバルオブジェクト`window`に依存している問題の解決策

line-numbersプラグインなどは、`window.Prism`が`undefined`だとプラグインのロードをやめてしまいます。この解決策としては、`vm`モジュールを使い、擬似的にグローバルオブジェクトとして`window`があるサンドボックス環境を作り、その中で、プラグインコードを`eval`してやるようにします。要するにPrismにブラウザ環境だと思わせるようにするということです。

### 上の解決策を講じたコード

次が上の解決策を施したコードです。

“`loadPlugin.ts
impo

【Node.js】WatsonサービスをSDKを使わずに呼び出す

# はじめに

Node.jsでIBMの提供するWatsonサービスをSDK（[ibm-watson](https://www.npmjs.com/package/ibm-watson)）を使わずに呼び出すコードを備忘録のために残します。

IAM認証せずにWatsonサービスを呼び出すので、外部のpublicなインターネットに接続のできないIBM CloudのIaaS環境からWatsonサービスを呼びたいとき、Watsonサービスをさくっと触りたいときなどに有効な方法です。

※アプリケーションがSDKを使ってWatsonサービスを呼び出す仕組みになっているが、実行環境でIAM認証出来ない（publicなインターネットに接続できない）場合には、IamAuthenticatorの代わりに、BasicAuthenticatorを使えばよいです。

今回はWatson DiscoveryというAI文書探索サービスのquery APIを呼び出すサンプルです。

# セットアップ

今回はHttpクライアントとして、[axios](https://www.npmjs.com/package/a

(入門)Node.jsで初めてのWebサーバーを立ち上げる　Windoows10環境

node.js　で サーバーを作成します。

環境
node v12.18.1 npm 6.14.4
windows10

nodeは以下のサイトを参考にして、インストールします。
https://qiita.com/satoyan419/items/56e0b5f35912b9374305

nodeのバージョン管理は以下のサイトを参考にします。
https://qiita.com/satoyan419/items/56e0b5f35912b9374305

vscodeでフォルダを作成して、
app.jsファイルに以下のコードを記入します。

“““js:app.js
// モジュールをロードする　DOMの代わり
const http = require(‘http’);

// サーバーを作る
var server = http.createServer(
(request,response)=>{
response.end(‘hello’);
}
);
// ポート番号:3000で受け付け開始
server.listen(port =3000);
“

Webアプリケーション開発におけるフロントエンド、バックエンド分離環境

# 目的
* PoC業務で、数年ぶりにWebアプリケーション開発を行うことになって、開発環境、特にフロントエンド開発環境の進展、変貌に驚いた。
* 動的コンテンツはJSP, Ajaxで止まっており、テンプレートにjavascript, JSPタグを必至に埋め込んでいた自分にとって、これは纏めないと速攻忘れそうだ。

# 開発環境の構成

* フロントエンドとバックエンドはREST APIで分離されている。
* フロントエンドはローカル環境（Windows10, Mac)で開発可能
* フロントエンド開発においてバックエンドはスタブで代用可能


# この開発環境の利点
* フロントエンド、バックエンドの開発環境、開発体制を分離できる。(REST APIのみ取り決め)
* フロントエンド開発はjavascriptダミー

node.js+Vue.jsアプリのWindowsサービス登録方法

#winserを使用してnode.js+Vue.jsアプリをWindowsサービスに登録する
node.jsアプリのWindowsサービス登録にはwinserモジュールが使えますが、vue-cliを使ったアプリをWindowsサービスに登録する場合にはwinserコマンドがそのまま使えませんでした。
winserがラッピングしているNSSMを使ってWindowsサービス登録ができたので、その方法を紹介します。

#手順
### 1. winserを導入
“`dos
$ npm install winser
“`
導入されると/node_modules/winserディレクトリができる
### 2. NSSMを起動
<アプリ名>にはWindowsサービスとして表示したいアプリケーション名称を入れる

“`dos
$ C:\<アプリディレクトリ>\node_modules\winser\bin\nssm.exe install <アプリ名>
“`
以下のような画面が表示される
![image.png](https://qiita-image-store.s3.ap-northeas

DynamoDBクライアントでセッション再利用されるのか実験してみた　その２

[前回](https://qiita.com/sakai-y/items/7d34c7c211f7a0fc99d4)の追加実験です。
`Promise.all()`したらどうなるのかやってみました。

# 実験1
まずは[前回の実験3](https://qiita.com/sakai-y/items/7d34c7c211f7a0fc99d4#%E5%AE%9F%E9%A8%93%EF%BC%93)の状態に、環境変数`AWS_NODEJS_CONNECTION_REUSE_ENABLED`を`1`にセットした状態で、別々のインスタンスでセッションが共有されることを確認します。

“`javascript
import { DynamoDB } from ‘aws-sdk’;
import { execSync } from ‘child_process’;

process.env.AWS_REGION = ‘ap-northeast-1’;
process.env.AWS_NODEJS_CONNECTION_REUSE_ENABLED = ‘1’;

const TableName

openapi3-tsについて調べたことをまとめたい！

## 序

いろいろと前提を書き連ねますが、読むのが面倒な人は本まで飛んでください！

### 記事内容について
この記事は「筆者(orifuji)が[openapi3-ts](https://github.com/metadevpro/openapi3-ts)を試してみるシリーズ」の最初の投稿となります

今回は主にライブラリの仕様調査、およびOAS自体の説明を行います
これで脱稿とするよりも、知見の増加・認識の更新に合わせてしばらくは編集を続けようと思っています

次回は実際に使ってみて、OpenAPI Specificationに則ったjsonないしyamlなファイルをアウトプットするところまでを扱います

最終的には、わたし自身のユースケースに沿ったラッパーライブラリを実装します

### 筆者の属性
– TS初心者
– 会社のプロダクトではTSがWeb Frontendに採用されています
– ただ、自分はServerメインのため知見はさほどないです
– OpenAPI Specification知識はある
– 前職で新規プロジェクト開発に際して