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

Swagger-nodeのSwagger定義ファイルを自動的にマージさせる

Swagger-nodeを使って、よくRESTfulサーバを立ち上げるのですが、エンドポイントの追加作業が煩雑になりがちです。

普段はこんな感じで、エンドポイントを追加しているのではないでしょうか。

・既存のapi/swagger/swagger.yamlにエンドポイントを追加
・各エンドポイントに以下を追加
　　x-swagger-router-controller: ソースファイル名
・各メソッドに以下を追加
　　operationId: オペレーションID
・ソースファイルに、以下のexportsを追記

“`js
module.exports = {
オペレーションID: 関数名
};
“`

上記の作業において、課題がいくつかあります。

・swagger.yaml に、複数のエンドポイントの定義が混在しているためメンテナンスしづらい
・ソースファイルを置いているフォルダ(api/controllers/)に、複数のエンドポイントのソースファイルが混在し散らかる。

そこで、以下をやってくれるユーティリティを作ろうと思います。

＜準備＞
・api/contoll

ヒープ領域制限によりビルドが通らない場合

環境
インスタンス：t3a.nano
OS: AmazonLinux2
node.js:v14.3.0

上記環境でnpm run serveを実施してVueアプリの動作確認をした後に
npm run buildでビルドを実行したところ

“`
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory
“`
のエラーが表示されてビルドが通らなかった。

ビルドするためのメモリが足らないと判断できるため
スワップ領域を確保したうえで
https://qiita.com/nakamto/items/5e78e9caceeff6b9e2b4

“`
$ export NODE_OPTIONS=”–max-old-space-size=1024″
$ npm run build
“`
※1024は確保できるメモリ量に応じて変更してください。
max-old-space-sizeの値を指定することでビルドが通りました。

メモリの少ない

ビデオチャット中に左シフトキーを押している間だけミュート解除し会話できるアプリをつくった

Google MeetやZOOMでビデオチャットをしているとき、マイクに雑音が入らないよう自分の発言中以外は基本的にミュートしているのですが、
ミュート解除を切り忘れたり、別画面を開いているとすぐにミュート解除できなかったりで、面倒だったのでキーボードの特定のキーを押している間だけミュートを解除してくれるアプリ「[**Cough Switch**](https://github.com/narikei/cough-switch)」を作成しました。

トランシーバーやレコーディングスタジオのトークバック機能のようなイメージです。


## AppleScriptでマイクの音量を操作する
Macの場合、 `システム環境設定 > サウンド > 入力` でマイク設定を操作することができます。
この入力音量を0にするとミュートされます。

Puppeteerを2系から3系にアップデートしたらError: Failed to launch the browser process!

Puppeteerメモです。

Heroku上で利用していたPuppetterのバージョンを2系->3系にアップデートしたらエラー発生。

## Puppetterのバージョンを2系->3系にするとChromiumのバージョン違いで動かないっぽい

### Heroku上のログ

“`
Error: Failed to launch the browser process!
2020-05-27T21:22:10.217234+00:00 app[web.1]: /app/node_modules/puppeteer/.local-chromium/linux-756035/chrome-linux/chrome: error while loading shared libraries: libgbm.so.1: cannot open shared object file: No such file or directory
“`

### Heroku上でインストールされているChromiumを更新する

> https://github.com/puppeteer/pup

Vue.jsでAPIのBasic認証をした

#はじめに
Vue.jsによる開発においてAPIのBasic認証の実装をしました。
エラーについての検索をした際に類似のケースで苦しんでいる方が国内外問わず多くいらっしゃったので、本記事では私が嵌ったエラーと解決策の一例について書いていきます。
当記事の使用言語はVue.jsとNode.jsです。

###課題の切り分け

実装に当たって私が悩んだ点は大きく分けて下記二つとなります。
・CORSの不一致
・非同期処理の中でBasic認証が出来ない（404エラーが返ってくる）

#####◎CORSの不一致
APIのBase URLに対してGETでデータの取得を初めて求めた際に、

“`
Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Origin ‘http://localhost:8080’ is therefore not allowed

新人に負けない本棚管理サイト　その４（データベース検索編①）

# 目次

[新人に負けない本棚管理サイト　その１（プロローグ）](https://qiita.com/moootoko/items/9a2282b018c1e78da04b)
[新人に負けない本棚管理サイト　その２（環境構築編）](https://qiita.com/moootoko/items/615b0d135b6914d2c83c)
[新人に負けない本棚管理サイト　その３（トップページ作成編）](https://qiita.com/moootoko/items/1aff180e4dd8d3b153d2)
新人に負けない本棚管理サイト　その４（データベース検索編①）

# 目標

– データベースに問い合わせしてデータを取得する
– 取得したデータを画面に表示する　←今回はここまで
– 検索できるようにする

# データの準備

使用するデータベースは**MariaDB**です。
セットアップ方法はその２を参照してください。

## テーブル作成

“`sql:CREATE_TABLE_Books.sql
CREATE TABLE Books(
title

Vue.jsでつくったサイトにfirebaseでユーザ認証してこっそり人の顔年齢を試して遊ぶ

### 概要
Vue.jsで作ったサイトをFirebaseにユーザー認証をお願いして、ログインしないと入れないページにして、人の顔年齢（Computer Vision API）で遊んで、freenomとNetlifyで独自ドメインで公開する
### できたもの
写真を入れると年齢をかえしてくれます。
### 環境
“`
macOS Catalina
Visual Studio Code 1.45.1
Node.js: v13.11.0
npm:6.14.5
Vue:@vue/cli 4.3.1

“`
### 大まかな流れ
Vue.jsとFirebaseでユーザー認証ありのプロジェクトをつくる
　　　↓
Computer Vision APIをつかって顔認識のぺーじをつくる
　　　↓
freen

プログラミング素人のIoTサービス開発 -ログイン認証-

#はじめに
2020年3月からプログラミングの勉強を始めて、7月までにWebサービス制作に挑戦しているプログラミング素人の制作記録です。

#自分の技術レベル
・ProgateでHTML/CSS、JavaScript、Node.JSを受けた
・Expressフレームワークでget通信とpost通信を扱えるようになってきた
・JSのPromeseの概念が少しだけ理解できてきた
・obnizを触ったことがある
　https://note.com/hiromae/n/n4850983a3f92

#目標制作物＆必要な技術ロードマップ
熱くなる季節に向けて、熱中症予防のための温度検知サービスの制作に取り組んでいます。

身近な問題をIoTで解決できないか考えてみた
https://note.com/hiromae/n/n0e4a88bb501c

■現在構想しているサービス像
制作のために今後身につける必要がある技術が山ほどあります。
![2020-05-27_22h07_42.png](https://qiita-image-store.s3.ap-northeast-1.amazona

JavaScript thisの挙動の不思議

thisの挙動や関数スコープのことについて。

実行環境 node v14.2.0

# thisの挙動(通常関数)

“`js
function hoge() {
console.log(this);
}

function foo() {
“use strict”;
console.log(this);
}

hoge(); //globalオブジェクトが出力
foo(); //undefinedが出力
“`

ほぼほぼ同じ関数ですが結果が変わってきます。
hoge関数は、globalに紐付けせずに実行してもglobalオブジェクトを参照し出力します。デフォルトでglobalオブジェクトが紐付けされているということです。

しかし、strictモードでは関数がどのオブジェクトにも紐付けされていなければ、この値は未定義になります。したがって、strictモードだとデフォルトでオブジェクトの紐付けは行われないということです。

# thisの挙動(アロー関数)

“`js
console.log(this); //{} が出力
var hoge = () =>

Javascriptで電話番号のバリデーションと変換（E.164）に便利なライブラリの紹介

# 今回したいこと
– 日本の電話番号(03-1234-5678)などを、E.164表記(+81312345678)に変換したい
– ついでにバリデーションも出来るといいかも

# 環境
– Node.js

# ライブラリ
– [google-libphonenumber](https://github.com/ruimarinho/google-libphonenumber)

Googleが提供している電話番号をバリデーションと自動フォーマット可能な[libphonenumber](https://github.com/google/libphonenumber)のnpm版である[google-libphonenumber](https://github.com/ruimarinho/google-libphonenumber)を使用します。

# google-libphonenumberの使用方法
## インストール

“`
npm install google-libphonenumber
“`

## 例１）’202-456-1414’を’US’のE164表記に変換

PuppeteerのBrowserFetcherクラス

今回はPuppeteerのBrowserFetcherクラスについて書いていきたいと思います。

## BrowserFetcherクラス
BrowserFetcherはChromiumとFirefoxの異なるバージョンをダウンロードして、管理することができます。

BrowserFetcherはChromiumのバージョンを（”533271″にたいな）指定するrevision string上で操作します。revision stringは[omahaproxy.appspot.com](https://omahaproxy.appspot.com/)から得ることができます。と、言いたいところなのですが、確認したところ、存在しないものが多いので、[こちら](https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html)の方を見てください。

Firefoxの場合、BrowserFetcherはFirefox Nightlyをダウンロードして、（”75″にたいな）バージョン番号を操作します。Fi

[保存版]最新Node.js for Raspberry Pi Zero / 1 (ARMv6向け)

# ARMv6のサポート終了
2019年4月頃、Node.jsのVer.12のリリースとともにARMv6のビルドが提供されなくなりました。ARMv6を使うデバイスはだいぶ少なくなりましたが、ここにありますよ！Zero WHが！！
[RFC: Consider retiring the PI1s ARMv6 (downgrading support to “experimental”) · Issue #1677 · nodejs/build · GitHub](https://github.com/nodejs/build/issues/1677#issuecomment-486204349)
どうやら非公式ビルドというものを用意してくれているようです。ありがたや。
# Node.js unofficial-builds project
[Node.js Unofficial Builds Project](https://unofficial-builds.nodejs.org/)
[GitHub – nodejs/unofficial-builds: Unofficial bina

NestJSとGraphQLで開発用の環境を作成する

# NestJS と GraphQL で開発用の環境を作成する

#### 目次

1. NestJS のアプリケーションを作成
2. GraphQL の依存関係を構築する
3. mysql（docker）を用意する
4. mysql の依存関係を構築する

## 1. NestJS のアプリケーションを作成

[NestCli](https://docs.nestjs.com/cli/usages)を用いて NestJS のアプリケーションを構築する。

cli を install していない時は、上の URL から cli を install してアプリケーションを作成します。

“`termianl
$ nest new nestjs-graphql
$ npm run start:dev
“`

[localhost:3000](http://localhost:3000)で下記画面が表示されることを確認します。

![localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/144

WSL 2 デビューするときの初期設定

# はじめに

こんにちは。今回 MacBook Pro を新調したのですが、最近 Windows の最新動向が気になるので、 Windows も使えるようにしたいと思い、[Bootcamp](https://support.apple.com/ja-jp/HT201468) をセットアップすることにしました。その際、とても詳しくて役に立ったのはこの記事です :heart_eyes:

> https://ascii.jp/elem/000/004/011/4011143/

Mac で Windowsが使えるようになったその勢いで、[Windows Insider Program](https://insider.windows.com/ja-jp/getting-started/) にも登録し、話題の WSL 2 をいち早く試すことにしました :v:

> 今回は MacBook Pro 13 (macOS 10.15.4) + Bootcamp + Windows 10 Home の組み合わせですが、純正の Windows 端末でもやることは同じだと思いますのでご参考になさってく

Puppeteerのpuppeteerクラス

# puppeteerとは
他の記事とかでも書いてあると思いますが、一応説明をしておくと、puppeteerはDevToolsプロトコルを使ってChromiumもしくはChromeを管理する高レベルAPIを提供するNodeライブラリです。

今回はこのpuppeteerが面白そうだったので、このライブラリを調べたり使ったりしたことを残していきたいと思います。今回はpuppeteerクラスをやっていきたいと思います。

## puppeteerクラス
このクラスはChromiumインスタンスを立ち上げるためのメソッドを提供してくれます。この辺りは設定云々のところなので実証していくところはないです。

メソッドは`connect`、`createBrowserFetcher`、`defaultArgs`、`executablePath`、`launch`の5つ。それぞれ説明していきます。

### connectメソッド
実際のURLを指定するかWebsocketのURLを指定してブラウザインスタンスにつなげるメソッド。
このメソッドは存在しているChromiumインスタンスに**のみ**

【解説しながら】ターミナル上で動作するメモアプリをnodeで作ってみる。Part1

今回の記事は【作成】・【解説】の二部構成になっています。
初学者が理解るように丁寧に解説して行きつつ、完成を目指していきます。
解説は良いから作り方だけ見せてくれやって言う方は、【作成】だけを見ていくことをおすすめします。
細かい説明を知りたい方は【解説】を読んで頂くと良いかと思います。
序盤は解説が多くなりますがご了承ください。
今回は、expressを使わずに実装していきます。
## ? 対象
– nodeを始めたばかりの人・なんとなく触ってみたい人
– ES6.ECMAScriptを基礎的なところまで理解している人

## ? まずはディレクトリを作成しましょう♪　【作成】
任意のフォルダに今回はmemoというディレクトリを作ります。

“`:ターミナル
% mkdir memo
% cd memo
% touch app.js
“`
上記のコマンドは、メモディレクトリを作成→メモディレクトリを指定→app.jsを作成という流れになってます。

app.jsが動作するか、適当にコードを書いてみたいと思います。

“`javascript:app.js
console.

Node.jsで簡易サーバをつくる

# install

“`bash
$ sudo apt install nodejs npm
“`

“`bash
# 実行
$ node demo.js
“`

# webserver using http module

– Node.jsはモジュールをrequire()で呼び出す

– createServer() メソッドを使ってWebサーバーを構築する

– 最後にlisten()でポート番号を指定すれば「localhost:8080」にブラウザからアクセスする

– createServer()の中身は、最低限の記述としてヘッダー情報とコンテンツを次のように記述する
– writeHead()は、responseオブジェクトのメソッドで、ヘッダー情報をレスポンスに書き出す。第１引数には**ステータスコード**を指定し、第２引数に**ヘッダー情報**を連想配列でまとめたものを指定する。

“`javascript
var http = require(‘http’);
var server = http.createServer(function(request

たぶん10分で試せる。Azure Static Web AppにWebサイトをデプロイして独自ドメイン設定とFunctionsでAPI公開まで

AzureにStatic Web AppsというJAMstack向けなサービスが登場した模様で、プレビュー段階だけど試せたのでメモ残しておきます。

**無料らしい**（大事）

> 参考: [Azure App Service に Static Web Apps が登場！](https://k-miyake.github.io/blog/appservice-static-webapps/)

NetlifyやVercel同様に静的ホスティングだけじゃなく、Functionsも利用できるのが良いですね。

ドキュメントに[GitHub Actionsと連携して〜](https://docs.microsoft.com/ja-jp/azure/static-web-apps/github-actions-workflow)みたいなことが書いててなんでだろう的なこと思ったけどそういえば買収されてましたね（忘れがち）

## 作るもの: 静的サイト & API

AzureのStatic Web ApssにVue.jsで作った簡単なアプリをデプロイします。(いつまで置いてるか分からないの

Node.js 12+なら標準入力が超簡単に読める

# `process.stdin`は`for await…of`でループできる

Node.js 12から`stream.Readable`が非同期反復オブジェクト(Async Iterable)になりました。

当然`process.stdin`もAsync Iterableなので、`for await…of`文でループできます。

“`js:nl.js
(async () => {
const buffers = [];
for await (const chunk of process.stdin) buffers.push(chunk);
const buffer = Buffer.concat(buffers);
const text = buffer.toString();
const lines = text.split(/\r?\n/);
lines.forEach((line, index) => console.log(‘%d: %s’, index + 1, line));
})();
“`

補足ですが、文字エンコーディングを

Node.jsの非同期処理でつまづいたところ

# 概要
以前の記事で、イベントループ方式の理解に苦しんだことについて記事にあげましたが、今回は、非同期処理についてつまづいたところを忘れないように記事にしてみようと思います。

つまづいた経緯としては、Node.jsでローカルサーバーを構築し、リクエストを受け付けられるようになったところで、「リクエストごとに処理を変えたいなぁ」、と思ったことが全ての始まりでした。

# 環境
自分が実際につまづいた時の環境は、以下となります。

– OS：Windows10
– ブラウザ：Chrome

# やりたかったこと

– データを取得して、それをページに表示する。

最初はMVCモデルに基づいてプログラムを組もうと考えていましたが、少しめんどくさくなりそうだったので、簡単にデータを取得・反映させるページを作ろうと思いました。

# つまづいたところ

最初に記述したコードになります。

“`sample_node.js
// モジュールの取り込み
const http = require(‘http’);
const fs = require(‘fs’);
const path = re