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

React Material UI + Node.js expressのアプリ構築手順をまとめた

# はじめに

フロントエンドがReact（Material UI）、バックエンドがNode.js expressのアプリを構築することがあったので、（何番煎じか分かりませんが）備忘録に手順を残します。

# 環境

– Windows 10
– Node.js v12.16.3
– npm 6.14.4
– yarn 1.22.4

# 手順

### ディレクトリ作成

“`
# アプリのコードを管理するディレクトリを作成
mkdir app
cd app
# クライアント、サーバーのコードを配置するディレクトリを作成
mkdir client server
“`

### フロントエンド：React, Material UI の導入

“`
cd client
npx create-react-app my-app ※my-app=アプリ名 ※npxはnpm 5.2 から利用できるパッケージランナーツール
cd my-app
yarn add @material-ui/core –save
# アプリ内でアイコンを使用したい場合はこれもインストールする。回線が遅い

Lambda&Serverless Frameworkで、multipart/form-data形式でデータを受け取る

## 前書き
最近業務でAWSのLambdaとServerless Frameworkを使うことが多いです。
業務の流れが早く、次から次へと新しいツールを触ってすべて忘れていきそうなので、個人的なまとめとして、記事を作成します。
言語はnode.js, TypeScriptを使用しています。

## multipart/form-dataとは？

>multipart/form-dataは、前述の通り複数の種類のデータを一度に扱える形式で、主な利用シーンはHTMLフォームです。特にファイルアップロードでよく利用されます。
引用元:
[フロントエンド] multipart/form-dataを理解してみよう
https://www.yoheim.net/blog.php?q=20171201

ボディはBoundaryという区切り文字で、ファイル送信時に指定したnameごとに区切られます。

“`
——WebKitFormBoundaryO5quBRiT4G7Vm3R7
Content-Disposition: form-data; name=”message”

Hello

gulpで画像を圧縮する

##はじめに
「この記事を見ればgulpで画像を圧縮する手順がわかる！」という記事です。

画像の圧縮ツールは色々とあり、有名なところですと[TinyPNG](https://tinypng.com/)を使用している方も多いと思います。
しかし、本番公開前の画像などを外部サービスで圧縮するのはどうなんだい、という会社もあると思いますので、今回はgulpを使用してローカル環境で圧縮する方法をまとめました。

参考になったらぜひLGTMをお願いします！！

##事前準備
gulpの環境構築の方法については、以前[gulp超入門](https://qiita.com/taka-hyt/items/d6053936f1b8eba6bac3)という記事を執筆していますので、そちらを参考にしてください。
環境構築はこちらの記事を元にできているものとして進めて行きます。

[gulp超入門](https://qiita.com/taka-hyt/items/d6053936f1b8eba6bac3)

ディレクトリ構成は以下の通りです。src配下が開発環境で、dist配下に圧縮した画像が吐き出されま

動かして理解するasync/await

JavaScriptのasync/awaitを動かしながら理解したい人向けです。
Node.jsで実行できます。

“`javascript:async/await
test()

// awaitを使う時はasyncが必要
async function test() {
try {
const code = await f(true)
console.log(code)
await f(false)
} catch (err) {
console.log(err)
}
}

function f(ok) {
// awaitする関数はPromiseを返す
return new Promise((resolve, reject) => {
setTimeout(() => {
if (ok) {
// 正常終了
resolve(200)
} else {

Amazon Echo で Google Drive 上の mp3 を 再生する (その3)

# 今回の実装機能

* [1. 最初から再生](#1-最初から再生)
* [2. シャッフル再生オン・オフ](#2-シャッフル再生オンオフ)
* [3. 前の曲、次の曲](#3-前の曲次の曲)
* [4. ループ再生オン・オフ](#4-ループ再生オンオフ)
* [5. リピート再生](#5-リピート再生)
* [6. 一時停止、再開](#6-一時停止再開)
* [7. ヘルプ](#7-ヘルプ)
* [8. 曲情報確認](#8-曲情報確認)

今回で残りの機能すべてを実装、説明します。

# 機能実装

## 1. 最初から再生

“`js:PlayRequestHandler
case(‘AMAZON.StartOverIntent’): {
const audioPlayer = handlerInput.requestEnvelope.context.AudioPlayer;
[playlistId, seed, , loop, , ] = audioPlayer.token.split(‘:’);
break;

LINE Messaging APIを使ってブルワリーを探してみた

#目的
　LINEBotを使って、対話でうまくブルワリーの情報を探したい！
　なぜLINEか？
　⇒___老若男女問わず使えるインターフェースですから！___
　なぜブルワリーか？
　⇒お酒が、、好きなんです。

#前提
　記事を読まれる前に、、、
　まだまだやりたいことの最初の慣れの部分なので、
　えっ？なんで？と思うことは多いかと思います。

#今回やったこと
　ブルワリー検索APIの「___Open Brewery DB___」と「___LINE MessagingAPI___」を使って、
　LINEのトーク画面からニューヨークのブルワリーを検索して、一覧をLINEのレスポンスとして返す。
　URL付きでページにとんだり、電話をかけやすくするなど。

#やってみてわかったこと
　★流れが何となく見えた。
　ユーザがLINEから何かメッセージをうつ。
　→LINEサーバにまず送られる。
　→LINEのサーバからWebhookでイベントがとんでくる。
　→イベントの何を取るのか、チェックしつつ、来た内容に対してどう返すかをプログラムで作る。
　
　リクエストのイベントが来るところの受

nodemonの使い方

#プログラミング勉強日記
2020年10月10日
nodemonというツールを初めて見かけたので、まとめておく。

#nodemonとは
　コードの変更を監視して自動でサーバーを再起動してくれるツール。
　Node.jsで動いてるアプリのコードを修正した後は、サーバーの再起動が必要になるが、コードを修正した後に毎回手動で再起動するのは面倒だし、再起動をし忘れてしまうことがある。そういった作業を自動化できるnodemonは便利である。

#nodemonのインストール
　使用したいプロジェクトの下で以下のコマンドを実行する。

“`
npm install nodemon –save-dev
“`
　開発環境のみで使用するので`–save-dev`を付ける。コマンドを実行するとpackage.jsonに以下のように追記される。

“`json:package.json
“devDependencies”: {
“nodemon”: “^2.0.3”
}
“`
　本番環境においては以下のコマンドを実行すると除外される。

“`
npm install –pro

node.js(express)でパスワードのハッシュ化 〜bcryptモジュールの使い方〜

## bcryptとは
`password`を`$2b$10$7f9myKwdo9BDUOkybKpQoOSMeEX90aRRFfOdj.c3dG6RIjZxZ/a4m`みたいな感じにぐっちゃぐちゃにしてくれるnpmモジュール

## 使い方
まずはrequireで読み込み

“`js
const bcrypt = require(‘bcrypt’)
“`
ハッシュ化

“`js
const hashed = bcrypt.hash(req.body.password, 10)
//bcrypt.hash(ハッシュ化したいpassword, ストレッチング回数)
//ストレッチング回数 =ハッシュ化の回数で、2のn乗のnのことで4~31を指定できる
“`
照合

“`js
const compared = bcrypt.compare(req.body.password, docs.password)
//bcrypt.compare(ハッシュ化前のpassword, ハッシュ化後のpassword)
“`

## ポイント
– bcrypt.hashは時間がかかる為、非

no such file or directory, open の理由を知る

fsを使用して、上のディレクトリのファイルを取得しようとするとError: ENOENT: no such file or directory, open が出て、喚いていたが解決したので残しておく。
~~既知の事実と言ってはいけない。~~

#ファイル内容
先に記しておくが、後の説明を読みながら解釈することを勧める。

“`:ディレクトリ構成
test(親ディレクトリ)
├── src
│ └── fileManeger.js
├── config ←(ここに出力)
│
└── main.js

“`

“`js:main.js
const fs = require(‘fs’); //nodeモジュール読みこみ
const fileManegerClass = require(‘./src/fileManeger.js’) //クラスファイル読みこみ
const fileManeger = new fileManegerClass(); //インスタンス化

const content = {“name” : “taro” , “

こんな私でもジェイソン・ステイサムになれる。そう、Face APIならね。

Qiitaで「__ジェイソン・ステイサム__」というタグを作り、ひそかに育んでいるたわちゃんです♪

先日、なんと同じステイサムファンの方が「ジェイソン・ステイサム」タグに記事を投稿してくださいました！
CHECK▶ [Pythonでジェイソン・ステイサムライクに渡された画像をアスキーアートに変換する](https://qiita.com/genshibangou16/items/c1df676b4f7746630ec4)

嬉しくて、その日は浴びるように金宮ホッピー割を飲んじゃいました。えへ。

その勢いで、ステイサムシリーズの新作を作ってみたので、ご紹介します！

#「Be ステイサム」

今回作ったのは、誰でもステイサムになれる「__Be ステイサム__」です。

ステイサムになることに成功しました。　#pr

@angular/cliのインストールからAngularプロジェクト作成まで

#はじめに
今回は@angular/cliのインストールをしてから実際にAngularプロジェクトを実行するまでを書いていきます！
Node.jsがインストールされている必要があるので、
まだインストールできていない人は[Node.jsのインストール方法（Windows）](https://qiita.com/masangular/items/2046f0b91c4c8cc9ada3)を見てね！

#目次
1. @angular/cliのインストール
2. ng new コマンドでAngularプロジェクトの作成
3. 実際にブラウザで確認してみよう！

#1. @angular/cliのインストール
* 「npm install -g @angular/cli」を実行するだけです

“`
$ npm install -g @angular/cli
“`
* インストールされているかを確認するには「ng –version」を実行し、下図のように表示されていれば成功！

“`
$ ng –version
“`
![angularcli_01.png](https://qiit

スプレッド構文を制するものは反復可能オブジェクトを制する

#はじめに
ES2015から使えるようになり、徐々にコード内でも市民権を得てきた **スプレッド構文** 。
とても便利な構文なので備忘録もかねてまとめてみました。

#スプレッド構文とは
よく見るピリオド3つのコイツです。

`…`

組織によっては可読性等の問題から使用を控えるように教えられているところもあるかもしれません。
初めて見る方もいると思うので、リファレンスから説明を引用します。

>スプレッド構文を使うと、配列式や文字列などの反復可能オブジェクトを、 0 個以上の引数 (関数呼び出しの場合) や要素 (配列リテラルの場合) を期待された場所で展開したり、オブジェクト式を、 0 個以上のキーと値のペア (オブジェクトリテラルの場合) を期待された場所で展開したりすることができます。

###反復可能なオブジェクトとは
iterablesなオブジェクトとも言われます。
簡単にいうと `for..of` ループで動作できるものになります。

一番イメージがつきやすいのは配列ではないでしょうか。

###配列を展開？
簡単にいうと配列から中身を全部出してくれるという様なイメ

Node.js(Express)のアプリ作成手順

# アプリ作成手順
Expressでアプリを作成するには、以下4つの手順があります。
1. アプリケーションのフォルダーを作成する。
2. コマンドを使い、npmの初期化をする。
3. expressをアプリケーションにインストールする。
4. プログラムのファイルを作成してソースコードを書く。

###1. アプリケーションのフォルダーを作成する。
“`
$ mkdir express-app
$ cd express-app
“`
###2. コマンドを使い、npmの初期化をする。
コマンドを実行し、npmの初期化をします。基本すべてEnterを押してデフォルトのままで大丈夫です。
一応下記に項目の内容を記載します。

|項目|説明|
|:–|:–|
|version|バージョン番号|
|description|プロジェクトの説明文|
|entry point|起動用のスクリプトファイル名|
|test command|テスト実行のコマンド|
|git repository|利用するGitリポジトリ|
|keywords|関連するキーワード|
|author|作者名|
|l

nodemonのcrossOS設定

# nodemonとは

**他力本願**

– [nodemonとは?](https://qiita.com/mitsuhiro_K/items/429ca479b4e191bfea4d)
– [nodemon で Node.js サーバの再起動を自動化する](https://maku77.github.io/nodejs/env/nodemon.html)

# 問題

nodemonを利用してexpressを立ち上げようとしていました。

私のPCはmacOSでしたが、チームメンバーのWindows端末で同じように立ち上げようとしたところ、以下のようにJSONのSyntaxErrorが出てしまいました。
`SyntaxError: Unexpected token ‘ in JSON at position 0`

nodemon.js

Node.jsのインストール方法（Windows）

# はじめに
今回はNode.jsのバージョン管理ツールNodistを用いてのインストール方法を書いていきます！
後々@angular/cliを入れるのでNode.jsのバージョンを12.18.2で指定しています。
（Node.js公式サイトの現在の推奨版12.19.0だと@angular/cliのインストールに失敗したため）

# 目次
1. Nodistのインストール
2. Nodistを用いてのNode.jsのインストール

# 1.Nodistのインストール
* 下記サイトで「NodistSetup-v0.x.x.exe」をダウンロード

[Nodistのインストールサイト](https://github.com/nullivex/nodist/releases)

* インストーラーを起動

![nodistinst

MacOS で Puppeteer が動かないとき

## エラー

最新の Puppeteer(v5.3.1) を Mac で動かそうとしたが、以下のようなエラーが出て起動ができなかった。(Node.js v14.0.0)

“`shell
(node:79152) UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!

TROUBLESHOOTING: https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md
“`

## 原因

これは、Node.js v14.0.0 のバグ (extract-zip module)っぽくて Chromium ブラウザが正しい場所に解凍できてないのが原因とのこと。（MacOS は関係なかった）

## 解決

解決する方法は３つ。

1. Node.js v12 系にダウングレードする (非推奨)
2. Node.js v14.1.0 で修正されているので、それ以降のバージョンにアップグレードする (推奨)

Node.js: stream.Readableを全部読み込む方法

この投稿では、Node.jsの`stream.Readable`の内容を全部読み込む方法を紹介します。

## stream.Readableを全部読み込む方法

`for await`を使う方法がシンプルです。

“`js
const { Readable } = require(‘stream’)
const stream = Readable.from([‘hello’, ‘world’])

async function readAll(stream) {
let data = ”
for await (const chunk of stream) {
data += chunk
}
return data
}

readAll(stream).then(console.log)
//=> “helloworld”
“`

## イベント駆動なコード

よく見かける方法として、`Readable`の`”data”`イベントを使うコードがあります:

“`js
const { Readable } = require(‘stream’)
const

NEM Symbol(nem2) インストール

暗号資産仮想通貨クリプトよろしくNEM2のtestnetが2020/09の終わりごろより開始されました。

[Symbol のテストネットがローンチしました！](https://japan.nem.io/article/symbol-%e3%81%ae%e3%83%86%e3%82%b9%e3%83%88%e3%83%8d%e3%83%83%e3%83%88%e3%81%8c%e3%83%ad%e3%83%bc%e3%83%b3%e3%83%81%e3%81%97%e3%81%be%e3%81%97%e3%81%9f%ef%bc%81/)

symbol, catapult, nem2、よくわからん単語がいろいろありますが、とりあえずよしなにセットアップできるブートストラップを利用して構築していきたいと思います。
https://github.com/nemtech/symbol-bootstrap

# tl;dr

symbol-bootstrap を利用してノードの構築を行っています。

# 環境

CPU Intel AVX2に対応(Haswell以降) fedora30

“npm run generate”してもfaviconが変わらない時の対処法【nuxt.js】

# 1. バグ内容
以下のような流れでデプロイをしたのですが、「**Nuxtのデフォルトアイコンがファビコンとして表示されるエラー**」が起こりました。

1. `nuxt.js (vue.js)`でプロジェクトを作成（`SPA / PWA`で作成）
2. `favicon.ico`と`icon.png`をカスタムのアイコンファイルに変更
3. `npm run dev`でファビコンが変わっていることを確認
4. `npm run build`して、`npm run generate`して、静的フォルダ（`dist`）を生成
5. `firebase hosting`へデプロイ

ホスティングしたサイトのタブを見ると以下のようになりました。
変えたはずのファビコンがなぜかNuxtのデフォルトアイコンのままになっていました、、、。
Nodejsのインストール方法（Windows）

まずはNode.js公式サイトへGO！
https://nodejs.org/ja/


「LTS 推奨版」と記載された緑色の左のボタンをクリック！
そうすると下図のようなインストーラーがダウンロードされます！
インストーラークリックして起動！


「Next」クリック！
![nodejs4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/748651/4f0ef96c-687d-3497-fb09-d43a6e87