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

JS1日クッキング まとめページ

キューピー3分クッキングのように、お手軽に何か作ってお勉強するシリーズのまとめページです。

コンセプトは、

– JavaScript(or TypeScript)を使う
– 1日前後でお手軽に作れる
– どの記事からでも独立して読めるように努めるけど、繋がりのある記事は前のものも読むとわかりやすいかも

です。

# APIサーバー

1. [[JS1日クッキング]SequelizeとExpressでAPIサーバー – Qiita](https://qiita.com/kei_lb6/items/86491a87d9154de05e76)
1. [[JS1日クッキング]APIサーバーにJestでユニットテストをする – Qiita](https://qiita.com/kei_lb6/items/c0923745dd8ecfaa68f7)
1. [[JS1日クッキング]APIサーバーをCircleCIで自動テスト – Qiita](https://qiita.com/kei_lb6/items/19465f0803db971e6be7)

# Promise

1. [[JS1日ク

[JS1日クッキング]小さなPromiseライブラリでPromiseを理解する

Promiseはthenとcatchでチェーンで、async/awaitで非同期処理が終わるまで待つことができる。それくらいはわかる。でも、Promiseの解説を読んでもイマイチよくわからない。

そんな人のために、自作した小さなPromiseライブラリを読みながらPromiseを理解する記事です。

今回は、同時に動かす非同期処理の数を制限しながら非同期処理をする`forEach()`, `map()`とタイムアウトを設定して処理をリトライする`retry()`を書いていきます。

コード → [promise-utils](https://github.com/kei-lb6/promise-utils)

[JS1日クッキング まとめページ – Qiita](https://qiita.com/kei_lb6/items/bde95a536e978c3fa7fe)

# 材料

– Promise、async/awaitを使った経験

# 作り方

## 1. `forEach()`を書く

同時実行数を制限して、Promiseを実行する`forEach()`を書きます。Prom

【Laravel 6.0】スピード環境構築！

# 背景
Laravelを使う際に環境構築が必要ですが、１つ１つ確認しながらやるのは面倒だと思うので、速攻で使えるようになるまでの手順を紹介します。

## 手順

1.Xcodeのインストール

“`
$ xcode-select –install
“`

2.Homebrewのインストール

“`
$ /usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”
“`

3.PHP7.3のインストール

“`
$ brew search php@7

$ brew install php@7.3
“`

4.Composerのインストール

“`
$ brew search composer

$ brew install composer
“`

5.[Node.js](https://nodejs.org/ja/)公式サイトへアクセス

6.「推奨版」をクリック

7.ダウンロードされたファイルを開き、インストールを完了させる

Jimp の hash はすぐに衝突するので注意する

Node.js の画像処理によく使われる [Jimp](https://github.com/oliver-moran/jimp) だが、思いがけない落とし穴（バグではない）があったのでメモ。

# 全く異なる２つの画像のハッシュ値が同じになってしまう

– 次の２つの画像を Jimp で hash すると、同じハッシュ値 `80000000000` (base64) になる
– 
– 
– [この Codesandbox](https://codesandbox.io/s/loving-ride-eiljq?file=/src/index.js) を開けばブラウザ上で再現可能

– ハッシュ値が衝突してしまうことは「起こりうる事象」なのだが、 Jim

Puppeteerにはまだまだ負けられないcheerio-httpcliの底力を見せる時が来た

昨今のWEBスクレイピングといえばSPAなどの動的更新WEBサイトの増加もあって[Puppeteer](https://pptr.dev/)が主流になっていますが、かつて一世を風靡した（言いすぎ）[cheerio-httpcli](https://www.npmjs.com/package/cheerio-httpcli)というスクレイピングライブラリもあるのをご存知でしょうか。

静的HTMLを解析してjQueryのように要素を検索・操作するいわゆる古いタイプのライブラリではありますが、まだまだ現役でやれるところを見せるべく、目玉機能をいくつか引っさげてバージョン0.8.0へと進化したのでこの場を借りて紹介させていただきます。

Puppeteer使いの方にも役立つ情報もあるのでぜひぜひ最後までご覧ください。

ちなみに、cheerio-httpcliについての紹介記事は過去に何度かQiitaで紹介しているので「cheerio-httpcli？なにそれおいしいの？?」的な人はそちらもご覧になるとより分かりやすいと思います。

#### 過去の紹介記事

* [Node.js用のスクレ

AWS IoT Greengrassを使ってGoogleHomeにしゃべらせる

今回は、AWS IoT Greengrassの勉強を兼ねて、自宅にあるGoogleHomeにしゃべってもらいましょう。

これまでいろんな記事でGoogleHomeをしゃべらせてきましたが、GoogleHomeはローカルネットワーク上にある必要がありました。
したがって、いつも使っているAWS Lambdaに配置したNode.jsから、GoogleHomeにアクセスしようにも、ローカルネットワークにないのでダメでした。

そこで、GreengrassによってNode.jsのロジックをサーバ側のAWS Lambdaで管理しつつ、ローカルネットワークに配置するGreengrassコアにロジックをデプロイしてGoogleHomeを操ります。
また、IoTの特徴であるMQTTで起動させたりできますし、PublishするクライアントをX.509公開鍵ペアできちんと認証することができます。

全体像です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/261826/968182a0-bfb3-d6

Nginx on AWS EC2

# リバースプロキシー

“`
sudo vi /etc/nginx/conf.d/default.conf
“`

参考

nginxを使ってnode.jsをWeb上に公開する

【ドットインストール】Express入門講座の仕様変更点【 #19 記事を更新/削除してみよう】

##はじめに

ドットインストールのExpress講座は最終更新日が２０１４年のままアーカイブされていて、講座内容そのままやってもうまくいかない箇所がある。

「» 19 記事を更新/削除してみよう」
の章では、Expressのmethod-overrideモジュールの仕様が変わっているため、POSTメソッドの書き換えができず、エラーが出てしまった。新しい仕様に対応した正しいやり方をメモしておく。

Expressの公式ドキュメントでは、Express3からExpress4にバージョンが変わって以降、仕様変更されたミドルウェア・システムがまとめられている。

「Express 4 への移行」
https://expressjs.com/ja/guide/migrating-4.html

※「method-overrideモジュール」とは

ブラウザを、HTTPのPUT,DELETEメソッドに対応させるためのモジュール。

Express では get、post、put、delete というHTTPリクエストを送れるが、ブラウザは get と post

Yes/Noの対話形式でnodejs使う

nodejs使うときに対話形式で確認するやり方を書きます。

# インストール
モジュールをインストール

“`shell
$ npm i –save readline-sync colors
“`

# 使い方
`keyInYN`でy/nで答えて、後続の処理を続けるか、やめるか判断する
（colorsはconsoleに色をつけるだけ）

“`javascript:test.js
const readlineSync = require(‘readline-sync’)
const colors = require(‘colors/safe’)

if (readlineSync.keyInYN(‘本当に実行しますか？’)) {
console.log(colors.green(‘実行します。’))
} else {
console.log(colors.yellow(‘キャンセルしました。’))
process.exit()
}

console.log(‘後続の処理’)
“`

## 実行
`test.js`を実行します。

“`shell
$ node t

VScodeでReact開発環境構築

#はじめに
Macを買い換えたときに、いろいろ忘れていたので備忘録も兼ねて書いていきます。
以下の良記事を参考にしていますので詰まった場合はこちらも読んでみてください。

[nvm + Node.js + npmのインストール]
(https://qiita.com/sansaisoba/items/242a8ba95bf70ba179d3)
[create-react-appでyarn startできない(できた)](https://qiita.com/hppRC/items/4c09c1f33135a40870bd)

動作環境
– macOS Catalina 10.15.5
– node.js 12.18.0
– Visual Studio Code 1.45.1
#nvmのインストール

はじめにnvmのインストールをします。
nvmとはNode.js のバージョンを切り替えて使うことを可能にするツールのことです。
[nvmのGithubはこちら](https://github.com/nvm-sh/nvm)
VScodeのターミナルで以下のコマンドを実行します。

“`

Firestore から発生するエラーを HttpsError に変換する

## 概要

firestore thrown -> HttpsError への変換器を作って
ある程度汎用的に firestore のエラーをハンドリングしてしまおう。

### 背景

あるプロジェクトのサーバーサイドでは、
想定内のエラーが起きた時に HttpsError を throw する決まりとしている。
(throw された HttpsError は独自の共通処理により、内容に応じたステータスコードをレスポンスしている。)

firestore では、例えば存在しない document を update しようとした場合などにエラーを throw してくる。
しかし、 firestore にふれるすべての部分で、
想定内の firestore thrown -> HttpsError への変換を担うのはとてもコストが高く現実的ではない。
(本日時点では firestore thrown の型の定義が参照できないこともその一因だ。)

## 実装

### firestore thrown ハンドラ

“`ts:firestore-helper.ts
import { H

【Nuxt Vue】ファイルダウンロード（エクセル）する。

サーバー側の処理は問題ないことを確認したが、クラアント側でうまく受け取れずに少しハマってしまいました。
また似たようなことがありそうなのでメモ。

#サーバー側の処理

expressを使用、詳細は省略。

“`Server.js
app.get(‘/download_excel_file’, async(req, res) => {
try {
const excelPath = ‘エクセルファイルのパス/ファイル名.xlsx’
return res.status(200).download(excelPath)
} catch (err) {
return res.status(500)
}
}
“`

#クライアント側の処理
こちらも詳細は割愛しますが、要は { responseType : ‘blob’ } が必要で、抜けてしまっていた為にうまく受け取れませんでした。
responseTypeが何かわからない、という方はこちら参照願います。
https://developer.mozilla.org/ja/docs/XMLHttpRequ

git cloneしたVueプロジェクトを仮想環境で起動できない！！

#はじめに
タイトルにもある通り、リモートのVueプロジェクトをローカルの仮想環境で動かそうとした際に二転三転とエラーが重なって解決に時間がかかったので、解決方法及び内容理解のための内容です。
#環境
ローカル
Vagrant 2.2.7
Virtualbox 6.1.6
Vue 2.6.11

仮想環境
centos 7.2

共有フォルダの設定

“`file:vagrantfile
config.vm.synced_folder “..”, “/home/vagrant/vue_project”,
create: true, owner: “vagrant”, group: “vagrant”
“`

#内容
まずはgit cloneでリモートリポジトリからソースをクローン

“`
git clone [リポジトリURL]
“`
今回はソースコードの中にvagrantファイルを入れてあるので、vagrantfileのあるディレクトリまで移動。

“`
cd vue_project/vagrant
“`
仮想環境立ち上げて、ssh接続

“`
vagran

Puppeteerで繰り返し処理

# はじめに
[【初心者】Puppeteerでよく使うコードベスト3](https://qiita.com/Shin/items/aa5b82d1f0505ca9608f)
に処理追加。
繰り返し処理を追加しました。

# 繰り返し処理するコード
以下のようにdo whileで処理を記載する。

“`javascript
do {
// 処理
} while(true);
“`

# 最終的なコード

“`javascript
const puppeteer = require(‘puppeteer’);
// ID・アカウント認証する時はここでID・アカウント情報を読み込む
const {USER, PWD} = require(‘./config.json’); // 認証が必要であれば別ファイルのconfigファイルから読み込む

(async () => {
const browser = await puppeteer.launch({
headless: false, // ブラウザの動きを表示
slowMo: 50

node_modulesをインストールして死にかけた話

## node_modulesをインストールして死にかけた話

React学習のため

“`ruby:ターミナル
$ npm install
“`

npmをインストールしてwebpackやreactをインストールしたいとコマンドを実行。

無事`node_modules`をインストール完了！これからパッケージのインストールしていくぞ！！

一旦Githubにコミットしておこう。

##### ところが。。

差分があまりにも大きすぎてGithubにコミットできないようになっていた。

エラー文を読解して理解した。

どうすればいいんだろう。初学者の私は必死で解決策を考えました。

##### あっ、そういえば`gitignore`なるものがあったな

“`ruby:gitignore
node_modules
“`

こちらを追加してgit commit

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/575665/8dda78fe-be9b-a347-5f16-26bbc2

CentOS: Node.jsインストール

yumでNode.jsをインストールします。

“`console
$ curl -sL https://rpm.nodesource.com/setup_{指定バージョン}.x | sudo bash –
$ sudo yum install -y nodejs
$ node -v
“`

リポジトリ登録からインストール、バージョン確認！

npm installについての質問です。

###質問内容
npm install puppeteerを入力すると
フォルダごと墓のフォルダに保存されるのを防ぎたい

###状況
puppeteerを使用するため、ターミナルにて下記入力。

// パッケージをインストールする場合
$ npm install puppeteer

入力後、他のフォルダに
$ npm install puppeteer
を打ち込んだフォルダごと保存されます。

なぜ、他のフォルダに移動しているのか
原因がわからず困っています。

わかる方いらっしゃいましたら
恐縮では、ございますが
ご協力お願い致します。

WindowsでReactの環境構築をしてみる

#はじめに
今回は、自分のWindowsの環境でReactの環境構築をしたときの備忘録になります。

お付き合い頂ければ幸いです。

#Reactの環境構築に必要なもの
今回は、Facebookが開発している`create-react-app`というコマンドを使って、サクッとReactの環境構築をしていきたいと思います。

まず最初に、`Node.js`を、管理するための`nodist`をインストールしてみましょう。また、その後にNode.jsのパッケージを管理するnpmを使用して同じくNode.jsのパッケージを管理するyarnをインストールしましょう。

##nodistとは
nodistとはWindowsOSにおけるNode.jsのバージョン管理ツールです。

Node.jsをアンインストールする必要なく、複数のNode.jsのバージョンを切り替えることができます。

以下のリンクからNodistSetup-vx.x.x.exeをダウンロードして実行すればインストールできます。

[Nodist – Github](https://github.com/nullivex/nod

LINEで文字数をカウントしてくれるともだちをつくる

## ともだち召喚の背景

６月になり、各企業さんが夏季インターンの募集を初めています。私も今年からインターンに参加しようと思っていますが、ES作成がとっても不安な私は先輩にESの添削をお願いしました。

LINEで先輩に文章を送って見てもらうのですが、困ったことがありました。ESにはだいたい文字数制限があるのです。（しかもギリギリまで書くのが推奨されているらしい）制限文字数ちょうどで書いた文章を添削してもらうとき、先輩に直された文章が文字数を超過していたらいたたまれない気持ちになります。もうちょっと減らしてもらえますか？なんて言えたもんじゃないです。

また、文字数を数えること自体もそれはそれで面倒です。ESの形式によっては数えてくれるものもありますが、大抵私はWordに貼り付けて文字数を数えていました。面倒です。

そこで、カウント係の友達をもう一人トークに招待し、文章の文字数を数えてもらうことを思いつきました。が、そんな都合のいい友達はいません。よって、LineBOTを召喚します。

## 環境

せっかくなので、研究に必要で勉強している最中のNode.jsを使ってみることにしま

nodeとnpmとyarnをmacから削除したコマンド

“`
$ which node
→ /usr/local/bin/node
$ sudo rm -rf /usr/local/bin/node
“`

“`
$ brew uninstall nodebrew
$ brew uninstall node
“`

“`
brew: brew uninstall yarn

tarball: rm -rf “$HOME/.yarn”

npm: npm uninstall -g yarn

ubuntu: sudo apt-get remove yarn && sudo apt-get purge yarn

centos: yum remove yarn

windows: choco uninstall yarn
“`

## 参考

[How Do I Uninstall Yarn](https://stackoverflow.com/questions/42334978/how-do-i-uninstall-yarn)

[ローカルからnode.jsを削除する](https://qiita.com/gaipoi/it