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

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

Node.jsで指定したディレクトリをZIP圧縮するサンプル (async/awaitを用いて書く)

`Node.js`で指定したディレクトリをZIP圧縮するためのサンプルコードとなります。
`async/await`を用いて書いてみます。

なお、圧縮処理には `archiver`というnpmライブラリを利用します。

https://github.com/archiverjs/node-archiver

下記のような状況を想定しています。
ここの`dir`を `dir.zip`にするイメージです。

“`sh
dir
├── sample1.mp4
├── sample1.mov
└── sample2.mov
“`

## サンプルコード

`archiver`をインストール

“`sh
yarn add archiver
“`

なるべくシンプルに書こうと思い、削れるところは削ってみています。
`archiver` 自体の細かな使い方は公式を参照してみてください。

“`javascript
const fs = require(‘fs’);
const path = require(‘path’);
const archiver = require(‘arch

元記事を表示

GulpでSassをコンパイル(環境構築)

* Gulp導入に必要なNode.jsとnodebrewについてはこちら
[nodebrewでNode.jsをインストール(初心者向け)](https://qiita.com/aya_omochimochimochi/items/21df67dd5337f6dbc47e)

## Gulp.jsのインストール
#### 1.まずは、Webサイトのファイル一式が保存されるフォルダーを作成します
任意の場所にフォルダーを作成してください。
ここでは「testproject」をDocuments(Macの「書類」ディレクトリ)に作成します。
#### 2.ターミナルを開いてフォルダー(testproject)の場所へ移動します
ターミナルに` cd`と打ってから、フォルダーをターミナルにドラッグ&ドロップして` return`キーを押すとドロップしたフォルダーが現在地になるよ!
#### 3.package.jsonを作成します
ターミナルで以下を実行して下さい。

“`zsh:ターミナル
npm init -y
“`
* package.jsonとは
プロジェクトの名前やバージ

元記事を表示

【Node.js + PostgreSQL】特殊なクエリ記法

# 悩んでいたこと

– IN句で複数の条件を指定したい
– INSERT文で複数レコード登録したい

これらはただSQL文を書くのは簡単ですが、プレースホルダーを使った上での書き方が難しく、日本語の情報が全くなかったので、まとめました。
上記以外に使えそうな記法もまとめてあります。

# 前提
pg-promiseパッケージを使用し、databaseとの接続などはできていることとします。
載せているサンプルコードではanyメソッドを使っていますが、非推奨なので、oneやmanyを適宜使いましょう。

# 普通のSELECT文
とりあえず、例としてただのSELECT文

“`javascript
const userName = ‘田中’;
const query = ‘SELECT * FROM user WHERE name = $1’;
const res = await db.any(query, [userName]);
“`

クエリ内の”$1″がanyメソッドの第二引数の値で置き換わる感じです。

# IN句に複数条件

“`javascript
const use

元記事を表示

javascriptができるのは非同期処理であって並列処理ではない

# はじめに
初投稿です
非同期処理と並列処理の違いをやっと理解できたのでそのことについて書きます。

## 並列処理
まず並列処理は複数スレッドを同時に立ち上げて処理を行う方式のことを言います。(マルチスレッド)

## 同期処理
同期処理とは通常の実行順番通りにプログラムが実行され実行が終わるまで次の処理に移らない、というような処理方式です。
javascriptは同期処理で処理が行われます。

以下のコードを実行すると、

“`javascript:sample1.js
function sleep(n, name) {
n = n * 1000
let start = Date.now();
while (Date.now() – start < n) { } console.log(name) } function A() { // 重たい処理A sleep(1, "A"); } function B() { // 重たい処理B sleep(2, "B"); } function C() { // 重たい処理C sleep(3,

元記事を表示

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つ1つ確認しながらやるのは面倒だと思うので、速攻で使えるようになるまでの手順を紹介します。

## 手順

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) だが、思いがけない落とし穴(バグではない)があったのでメモ。

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

– 次の2つの画像を Jimp で hash すると、同じハッシュ値 `80000000000` (base64) になる
– ![](https://img.hackforplay.xyz/u/k8iYlBvaCHXeUQNkuHekaEwzUyO2/80000000000.png)
– ![](https://img.hackforplay.xyz/u/fvnXbi6IzkWAykuzkTyzzXXXlA82/80000000000.png)
– [この 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上に公開する

エラー処理

https://itneko.com/nginx-ssl-deprecated/

# SSH証明書 設定
ポイントは各会社の中間証明書の存在を認識しておくこと。

SSL証明書の設定 Nginx

元記事を表示

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

##はじめに

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

「» 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
“`

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

元記事を表示

OTHERカテゴリの最新記事