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

ESP32でお気に入りの写真チェンジャーを作る

ちょっとだけ脱線して、ESP32でお気に入りの写真チェンジャーを作ってみます。
よく、Googleで単語での検索に加えて、画像やイラストを検索していますよね。
そこで、お気に入りの有名人の写真画像を検索して、それをESP32のLCDに表示し、しかもそれを定期的に別の画像に切り替えます。


もろもろのソースコードをGitHubに置いておきました。

poruruba/FavoriteGallery
　https://github.com/poruruba/FavoriteGallery

# Google Custom Searchの取得

まずは、カスタム検索エンジンを作成します。

Google Programmable Search
　https://cse.google.com/cse/all

![image.png](https:/

cb.apply is not a function というエラーが出た時

nodistを使ってnodeのバージョンを切り替えてると以下のようなエラーが出ます。

“`
cb.apply is not a function
“`

いろいろ調べるとnodistやめてピュアにインストールしろなどのものがありますが、そもそもこのエラーが出るのは単にnpmがnodeとのバージョンで不整合がおきてるからです。
なので、npmを最新にしましょう！
…
と思っても

“`
npm i -g npm
“`

とアップデート作業しても、そもそもnpm iでエラーが出るのでできません。
悲しいけど無限ループ状態。
その場合は以下のようにnodist経由でnpmのバージョンを変更すると解決します。

“`
nodist npm 6.14.11
“`

macOS + Docker + Node.js で bcryptが使えない。

## 経緯
UdemyでNest.jsの講義中にパスワードをハッシュ化させようと`bcrypt`をインストールしたらNest.jsが下記のようなエラーを吐き出した。
エラー解法の日本語版がなかったので、作成。

## 各ミドルウェア
– Docker-Engine: 20.10.2
– node:15.4(元イメージ)
– macOS Catalina 10.15.7(ストレージが足りなくてアップデートできない…)

## エラー内容
“`console
node:internal/modules/cjs/loader:1167
return process.dlopen(module, path.toNamespacedPath(filename));
^

Error: /app/node_modules/bcrypt/lib/binding/napi-v3/bcrypt_lib.node: invalid ELF header
at Object.Module._extensions..node (node:internal/modules/cjs/loader:1167:

Node-RED（初級）：芝犬の画像をランダムに取り出すデモを作成する方法

#node-REDを使ってみる
Node.jsを少し触るようになってから、興味のあったローコードであるnode-REDについて学ぶ機会があったので、健忘録がてら使用方法についてまとめました。

#node-REDの初期設定
##ローカルで実行するための準備
###インストール

“`:ターミナル
$ sudo npm install -g node-red
“`

###node-redを実行

“`:ターミナル
$ node-red
“`

下記のような表示が出れば成功

###ブラウザで起動
今回の場合、http://127.0.0.1:1880/をブラウザに直接入力

![スクリーンショット 2021-02-11 21.45.55.png](https://qiita-image-st

Node.jsでファイル一覧取って一括リネームする

## 経緯
録音して貯めているラジオ番組のファイル名が長すぎてモヤモヤ。
カッとなったのでパッと見て誰のいつの放送か、わかりやすくするため一括でリネームさせることにしました。

## 要件

– 録音ファイル名は `_` アンダースコアで区切られている
– リネーム後は`[番組名]_日付.拡張子` にしたい
– ディレクトリ内の特定の拡張子だけ選択
– 一括でリネーム
– コマンドオプションで下位ディレクトリも指定できるようにしておく

つまりこういうのを

こういうことに
![スクリーンショット 2021-02-11 21.57.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30278/50c14153-10

【node】MacOSにインストール

## 概要
新端末にnodeをインストールする際に若干ハマったので解決方法を記します。

## 手順

### HomebrewでNodebrewをインストール

“`.sh
brew install nodebrew
“`

早速、エラーが出ます。

“`
Error: Your CLT does not support macOS 11.
It is either outdated or was modified.
Please update your CLT or delete it if no updates are available.
Update them from Software Update in System Preferences or run:
softwareupdate –all –install –force

If that doesn’t show you any updates, run:
sudo rm -rf /Library/Developer/CommandLineTools
sudo xcode-select —

React環境構築【Node.jsのインストールからCreate React Appまで】~macOS編~

本記事はmacOSでの、Reactの環境構築を解説した記事です。

Windowsを利用している方はこちらを御覧ください。
[React環境構築【Node.jsのインストールからCreate React Appまで】~Windows編~](https://qiita.com/techpit-jp/items/984b80a795b7a6f6dd60)

他にもプログラミング学習に役立つような情報を発信しています！[アカウントをフォロー](https://qiita.com/techpit-jp)してお待ちください！

# Node.jsの環境構築（macOS）
Webアプリケーションの開発を始めるにあたって、Node.jsをインストールしていきます。

すでにNode.jsがインストールされているかどうかは下記コマンドで確認できます。ターミナルを開いて下記コマンドを入力してみましょう。

“`
$ node -v
“`

下記のようにインストールされているNode.jsのバージョンが表示されれば、すでにインストール済みですので、本パートは読み飛ばしてください。

“`
v12.

React環境構築【Node.jsのインストールからCreate React Appまで】~Windows編~

本記事はmacOSでの、Reactの環境構築を解説した記事です。

Windowsを利用している方はこちらを御覧ください。
[React環境構築【Node.jsのインストールからCreate React Appまで】~macOS編~](https://qiita.com/techpit-jp/items/b4792f22ddc1155a1cb3)

他にもプログラミング学習に役立つような情報を発信しています！[アカウントをフォロー](https://qiita.com/techpit-jp)してお待ちください！

# Node.jsの環境構築（Windows）

Webアプリケーションの開発を始めるにあたって、Node.jsをインストールしていきます。

もし既にお手元のPCにNode.jsの環境があれば、このパートは読み飛ばしても大丈夫です。

注意）このパートで環境構築する対応のPCはWindowsになります。

すでにNode.jsがインストールされているかどうかは下記コマンドで確認できます。ターミナルを開いて下記コマンドを入力してみましょう。

“`
$ node -v
`

【AWS】EC2でExpressアプリケーションを動かす

# はじめに
趣味でAWSを触ってみようと思いその時調べたことを一通りまとめておこうと思います

# 環境
### AWS側

| 種類 | バージョン |
|:–:|:–:|
| Linux/UNIX | Amazon Linux 2 AMI |
| Git | 2.23.3 |
| nvm | 0.37.2 |
| Node | 14.15.5 |
– nvm(Node Version Manager)　・・・　Nodeのバージョンを手軽に変更できるもの

### ローカル
| 種類 | バージョン |
|:–:|:–:|
| Windows | Pro |
| Tera Term | 4.97 |

# インスタンスの作成
今回はAmazon Linux 2を選択します
![ap-northeast-1.console.aws.amazon.com_ec2_v2_home_region=ap-northeast-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/310163/86954f6

Netflixの日本での全配信タイトル一覧を作る

[アクシス Advent Calendar 2020](https://qiita.com/advent-calendar/2020/mediaxis) 3日目です!
休日は Netflix 三昧のシネフィルの皆さんなら、こんなことが気になったことはありませんか?

– 映画が好きすぎて、Netflix のレコメンドに満足できない。
– Netflixの一覧はレコメンドエンジンに基づいていて[フィルターバブル](https://www.axion.zone/what-filter-bubble-is-like/)を起こしそう。
– 本屋に行き、知らない本と出逢う感覚で新しい映画と出逢いたい。
– 見たことのある作品が多くてタイトルが分かればサムネイルはいらないから、Reactのレンダリングを待つのがだるい。

そこで、Netflix Japan で配信しているタイトルテキストの一覧をサムネイル無しでスクリーンスクレイピングにより収集する方法を模索します。

## スクレイピングと法律
スクレイピングで著作権を侵したり、サイトの価値を損なったりしないか調べました。

##### スクレイ

Reactの2大SSGフレームワークを変わった角度から比べてみようとしたデブリ記事

# この記事はデブリです
デブリ
https://ja.wikipedia.org/wiki/%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E3%83%87%E3%83%96%E3%83%AA

「なぜGatsby.jsを推すか」の通り、Apache単体で配信できるGatsby.jsが良いという趣旨で記事化したところ
わずか3時間後に「Next.jsもNode.js無しでOK」という情報を頂戴し、めでたくデブリ記事と化しました。

独力で見つけられなかった結構重要な情報が手を動かさずに3時間で得られることもあるので
アウトプットは大事！ということで。

それぞれのフレームワークでHTML生成した場合の流れが知りたい方は
「Next.js の環境を作成する」から読み進めて、最後にnext.js側で以下の手順を追加してください。

“`shell:shell
nano docker-compose.yml
“`

“`yml:dcoker-compose.yml
version: ‘3’

services:
next:
build:

Node.js+AWS Lambda+DynamoDBで作るLINEBot

先日、[X-HACK勉強会](https://x-hack.connpass.com/)でLINEBotの作り方を学びました。

勉強会ではおうむ返しをしてくれるBotを作ったのですが、自分がほしいBotを作ってみよう！と思いアレンジして作ってみました。

# 電車発車時刻を送ったら準備開始時間と家を出る時間を教えてくれるLINEBot

**家から駅が近い・電車が数分おきに来る都会の人には完全不要Botです。**


## 機能
– 電車発車時刻を送ると準備開始時間・家を出る時間を返信してくれる
– 準備時間を変更する（デフォルトは30分）
– 家から駅までの時間を変更する（デフォルトは15分）
– 現在の設定されている準備時間・家から駅までの時間を確認する

## 作ろうと思ったきっかけ
数ヶ月前に引っ越しをして

【Express】環境変数を取得する方法

#プログラミング勉強日記
2021年2月9日
ネットで調べると`process.env`を付けると環境編集を取得できるとあったが、それだけでは取得できなかった。その方法をまとめる。

#失敗した環境変数を取得する方法
　`process.env`で環境変数を取得できる。

“`js
const env = process.env.変数名;
console.log(env);
“`

“`:実行結果
$ node app.js
undefind
“`

#dotenvで.envを読み込む
　dotenvは.envファイルを読み込んで、`process.env`に設定するモジュール。

##1. dotenvをインストールする

“`
$ npm install –save dotenv
“`

##2. 環境変数を取得する

“`js:app.js
require(‘dotenv’).config();
const env = process.env.変数名;
console.log(env);
“`

“`:実行結果
$ node app.js
環境変数の値が表示さ

expressの開発にTypeScriptを利用する

expressをTypescriptで開発する方法のメモ。
nodeをTypeScriptで利用する基本的方法は[こちら](https://qiita.com/zaburo/items/0d47b3c8588bb3f96353)をどうぞ。

## 準備

### 場所の準備

“`bash
mkdir ts-express-test
cd ts-express-test
“`

### 必要なモジュールのインストール（Typescript使うため）

tsc, ts-nodeをインストールして、tsconfig.jsonも生成しておきます。

“`bash
npm init -y

npm install -D typescript
npm install -D types/node
npm install -D ts-node

npx tsc –init
“`

### expressのインストール

expressとtypesをインストールします。

“`bash
npm install express
npm install -D @types/express

nodeをTypeScriptで利用する

フロントエンドはだいたいTypescriptに書くのが普通になってきたので、次はバックエンドも。

## 準備

まずは準備。

### 作業場の作成

“`bash
mkdir ts-test
cd ts-test
npm init -y
“`

### 必要なモジュールインストール

必要なモジュールをインストールします。ポイントはts-nodeのインストールです。
ts-nodeはjsのトランスパイルなしにtsコードを実行してくれます。

“`bash
npm install -D typescript
npm install -D @types/node
npx tsc –init

npm install -D ts-node
“`

> -Dは–save-devと同義。tsc –initでtsconfig.jsonも生成しておきます。

## 実装

まずファイルを作ります。

“`bash
touch index.ts
“`

実装します。簡単なコードです。

“`ts:index.ts
const hello = (message: string

ロボットが毎日自動で情報収集してブログを書いて投稿するBOTをAzure Functionsで動かしてみる

#毎日自動で情報収集して、ブログを書いて投稿するBOTをAzure Functionsで動かしてみる

##はじめに

本記事は以下の続きです
※Node.jsでBOTを作成してワードプレスに記事を投稿する
https://qiita.com/abemaki/items/79e90f56f954e9eafb7d

前回、自動で記事を作成して投稿するBOTを書きましたが
このBOT自身を定期的に自動起動する仕組みがないので、今回はAzure Functionを用いてそれを実現しようと思います。

※当初はCIを構築して、定期実行しようと思ったんだけどいかんせんコストがかかる・・・。　
　今回はAzure Functionを活用してサーバレスでBOTを動かして記事をかきまくります。


　
　
##Azure Functionとは

[Azure F

【Firebase】サイトを公開する方法

## 手順

1. [firebase](https://firebase.google.com)　←こちらからfirebaseのサイトに行ってGoogleアカウントでログインする。

2. firebaseのコンソールで、サイトを管理するプロジェクトを作成する。
3. 自身のパソコンのデスクトップなどに先ほど作成したプロジェクト名と同じ名前のフォルダ(管理しやすいため)を作成する。(例:MyPortforioなど)。
4. そのフォルダの中に、公開したいサイトのフォルダを移動、またはコピーする。(※firebaseにアップロードすると全てのファイルが公開されてしまうため、みられたくないファイルは入れないようにする。)
5. [node.js](https://nodejs.org/ja/) をインストール。
6. ターミナルにて`node -v`、`npm -v`を実行し、node.jsとnpmがインストールされているか確認する。
7. firebaseのコマンドラインツールを、npm(Node Package Manager)を使って導入していく。管理者権限で導入したいので、コマ

配列とオブジェクトの扱いについての考察

#配列とオブジェクトの出力についてまとめてみた
題材

“`javascript

①　data[[“a” , “b”]]
②　data[“a” , “b”]
③　data{“a”,”b”}
“`
上記の取り扱いについて

###①data[[“a” , “b”]]//配列の中に配列が入っている。

“`javascript

data[[“a” , “b”]]
//呼び出す時は
console.log(data) //[[“a” , “b”]]
console.log(data[0]) // [“a”,”b”]
console.log(data[1]) // undefined
“`
###②data[“a” , “b”] //基本の配列

“`javascript

data[“a” , “b”]
//呼び出す時は
console.log(data) //[“a” , “b”]
console.log(data[0]) //a
console.log(data[1]) //b
“`
上記①、②は変数名（data)か変数名にインデックスを使用して呼び出す（data[n]

Webstorm + WSLでnode.jsやyarnを使う

# まえがき

普段 **React** や **Vue** を触るなら、Windows上にnode.jsを入れて動かせば十分ですが、
実環境で動作テストしたいとか、Linux上にある何かしらのライブラリを叩きたいときには不便です。

Ubuntu内にIDEをインストールしてXServとかで飛ばすのもナシではないですが、
WSL上でGUIを動かすと重かったりなんとなくイマイチな感じです。

ということで、Windows上でのWebstormにWSLを繋いで環境構築を行ってみました。
基本的にはかなり簡単ですが、yarnだけコケがちなので注意です。

# 前提

以下の環境があることが前提です。

* WebStorm (Windows上)
* WSL2が動作する環境 (今回はUbuntu 20.04を使用)

# WSL環境へのnode.jsのインストール

とりあえずWSL上にnode.jsが入っていないことには始まりません。

[パッケージマネージャを利用した Node.js のインストール | Node.js](https://nodejs.org/ja/download/pac

Amplifyをシンプルなライブラリとして使うサンプル

# 対象
Amplifyを使ってAWSのサービスを簡単に叩きたい人

# 準備
任意のディレクトリで

“`
npm init
“`
からの

“`
npm i aws-amplify
“`
としておきます。

# Amplifyライブラリの仕組み

amplify addやらでサービスを構築していくと、amplifyのconfigが自動的に構成されて、気が付かないうちに便利なツールになっているのが特徴です。
逆に言えばこれらを自分で書いてちょっとした便利ツールとして使うことも可能です。
Cogmnitoの認証やAPIの呼び出しなど、Amplifyライブラリを使用したほうが断然楽です。

例えばサインインでは

“`javascript

const Amplify = require(‘aws-amplify’)

const config {
“aws_project_region”:”ap-northeast-1″,
“aws_cognito_identity_pool_id”:”ap-northeast-1:0000000….”,
“aws_cogn