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

Node.jsとMongoDBのAPIをHerokuにデプロイするまで

## はじめに。

私は今、Reactと、Nodeでwebアプリを作っています。EC2に環境立ち上げるのはクソだるい… ってことで今までRailsでしか使ってなかったHerokuを使うことに。

Reactは超簡単にデプロイできて奇跡だと思った。Nodeも考える時間含めて２時間くらいでデプロイできた。奇跡！！！

セールスフォースの株買って大切に大切に保持しておきたい。

## Node.jsとMongoDBのAPIをHerokuにデプロイ成功した絵

単純にルートで文字返してるだけ。

## 一番最初はProcfileを作る

僕はローカルで、

“`
% node app/app.js
“`

でアプロを起動させていたので、

“

VSCodeのSSH接続機能で、RaspberryPi内のNode.jsコードをデバッグ

#はじめに
本記事は、[Pythonでのデバッグ実行](https://qiita.com/c60evaporator/items/26ab9cfb9cd36facc8fd)と同内容を、Node.jsで実行した記事です。

**Node.jsでもブレークポイント付きの快適デバッグが実現できました！**

#必要なもの
・RaspberryPi (本例ではRaspberryPi3 ModelB)
※あらかじめNode.jsをインストールしてください（最新のRaspbian10ではプリインストール）
・上記と同じネットワークにつながったPC (本例ではWindows10)
・Visual Studio Code 1.39.2以降（上記PCにインストール、本例では1.44.2使用）

#手順
下記記事を参考にさせて頂きました
https://qiita.com/GRGSIBERIA/items/b8cd4a2b3635d1bb0391

※手順④まではPythonのときと同内容です
##①SSH接続の設定と、configファイルの保存
[本記事「公開鍵認証の場合」](https://qiit

JupyterLabでnode.jsのカーネルが立たない

同じ状況に立つ人が果たして居るのか分からないので、雑にメモ

環境：
win10
anaconda 4.8.3

#起こった問題

node.jsのカーネルが立たない

“`
>jupyter lab
[I 19:33:43.066 LabApp] JupyterLab extension loaded from C:\ProgramData\Anaconda3\lib\site-packages\jupyterlab
[I 19:33:43.066 LabApp] JupyterLab application directory is C:\ProgramData\Anaconda3\share\jupyter\lab
[I 19:33:43.486 LabApp] Serving notebooks from local directory: C:\Users\fuga
[I 19:33:43.487 LabApp] The Jupyter Notebook is running at:
[I 19:33:43.487 LabApp] http://localhost:8888/

SlackBOT Node.js axios await asyncを使ったPOSTリクエスト

# はじめに
最近のJavaScriptでGET,POSTリクエストするには“axios“を使うのがイケてるらしいが、非同期の処理になるためコールバック地獄が起こる。それを解決するために`async` `await`を使ったPOSTリクエストのサンプルコード(個人的なメモ）

SlackBOTに指定のチャンネルにテキストを投稿させるためのコードです。
“カスタムインテグレーションではなく、「App」の方です“
基本的なPOSTリクエストなので応用は効くと思います

#コード
“`javascript:node.js
const axios = require(‘axios’);//npm install axios　してね

//Slackにメッセージを送る
//引数1(文字列) : チャンネル名 (例: #勤怠履歴)
//引数2(文字列) : 送りたいメッセージ
const postSlack = async (ch,msg) =>{
console.log(‘postSlack…’)
const req_url = ‘https://slack.com/api/c

LambdaからSlackにメッセージを送る際のソースコードと複数回メッセージを送る際の注意点

AWSのLambda関数から、SlackのIncoming Webhooksでメッセージを送信する機会があり、少々躓いた箇所があったので備忘録として残しておきます。
Lambda関数やIncoming Webhooksは準備できている想定として、これらの作成手順は省略します。

# 環境
– macOS
– AWS Cloud9
– Node.js 12

#実行コード
Lambda関数を1度実行する度に、Slackメッセージを1件だけ送るような場合は、以下のコードで動くと思います。
1度のLambdaで複数回メッセージを送る場合は、注意点があるので後ほど説明します。

“`javascript
const env = process.env
const request = require(‘request’);

exports.handler = function(event, context) {

// リクエスト設定
const options = {
url: env.WEB_HOOK_URL,

node-addon-apiについて

# Node-addon-api について

node.jsから、CやC++のAPIを直接実行するためには、
[N-API](https://nodejs.org/api/n-api.html) を使用することになるが、非常に複雑で、コーディングが面倒になるので、
C++でN-APIをラップした[node-addon-api](https://github.com/nodejs/node-addon-api)を使用したほうが良い。

ただ、Javascriptの知識と、C++の知識（メモリ管理等）が必要となりますが、
基本的に細かい制御はクラスライブラリがやってくれるので、
実装に集中できます。

## ビルド方法

### package.jsonの準備

まずは、package.json を準備する。
bindingsとnode-addon-apiをインストールします。

“`shell
npm init # 初期設定
npm install bindings node-addon-api
“`

### binding.gypファイル

binding.gypファイルを作成し

【JavaScript】forループ内でawaitする方法

#経緯
forループ内で同期処理を行いたかったので調べてみたら **for await…of** というものがあることを知りました。

#結論
このように `async` のなかに `for await…of` を書くことで forループ内で `await` を宣言できます。

“`index.js
// 対象の反復オブジェクト
const targetArr = [1, 2, 3];

// 実行する関数
const sampleFunc = (value) => {
// asyncの効果は各functionブロックで切れるので逐一指定が必要
return new Promise(resolve => {
// 2秒待ってから計算結果をresolveする
setTimeout(() => {
console.log(‘Calculating…’);
resolve(value * 2);
}, 2000);
})
}

// for await…of文

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