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

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フレームワークをちょっと変わった角度から比べてみた

# はじめに
Reactはとても気に入っているのですが、Node.jsはどうもツールの入れ替わりが激しくて
環境のメンテナンスとかを考えると使いたくないなあと思っていたNode.js食わず嫌い勢です。

Node.jsは使いたくないので、ReactとReact-domをJSファイルでダウンロードして、
バックエンドは別の言語でAPIを組むのがベストプラクティスだと信じて生きてきました。

バックエンドに関しては今でも「Node.jsに固定される状況は避けたい」と思っていますが、
Reactフレームワークのトレンドを調べたら、バックエンドとして使わなくてもNode.jsを入れて
Node.js依存のフレームワークを使う機運は高まっているなあ思うようにはなりました。

で、結論は「Gatsby.jsがなかなかいいんじゃない？」という話なんですが、
実際にNext.jsとGatsby.jsでホスティングまで手を進めてみてその結論に至るまでの記録を書こうと思います。

今回は Windows 10 + WSL2 + Dockerが作業環境です。
WSLとDockerが使える状態でない方は”WS

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

【GCP】7 PERMISSION_DENIED: Missing or insufficient permissions

CloudFunctions for Firebaseでローカルエミュレーターではfires-tore へデータの登録ができるが、deployしてクラウドから実行すると下記のエラーが出ていた。

>7 PERMISSION_DENIED: Missing or insufficient permissions

ここを参考にFirebase Admin SDKのserviceAccountKeyを設定する
https://firebase.google.com/docs/admin/setup?hl=ja

Firebaseコンソール → （左上の）設定 → サービスアカウント
から、

新しい秘密鍵の生成
xxx.json
を任意の場所へ配置する。

“`
var admin = require

macOS 11.2 で M1 native な node を動かす

M1 Mac で macOS Big Sur 11.2 に更新したら M1 native な node が壊れたので、ソースを変更して動くようにしたメモです。

## 現象

homebrew で最新版の node v15.8.0 を入れて React での開発に使ってましたが、macOS を更新したら create-react-app で作ったプロジェクトで `yarn start` がクラッシュするようになりました。(create-react-app を使わずに `webpack serve` してれば大丈夫なようですが…。)

エラーを見る

“`
Starting the development server…

#
# Fatal error in , line 0
# Check failed: allocator->SetPermissions(reinterpret_cast(region.begin()), region.size(), PageAllocator::kNoAc

【Express】.envファイルとHerokuの環境変数を同期する方法

#プログラミング勉強日記
2021年2月8日

#前提条件

– すでにHerokuに環境変数が設定されている

まだ環境変数を設定していない場合は、[【Heroku】Herokuで環境変数を設定する方法](https://qiita.com/mzmz__02/items/64db94b8fc67ee0a9068) から環境変数を設定してみてください。

#Herokuの環境変数と.envファイルを同期する方法

##1. heroku-configをインストールする

“`
$ heroku plugins:install heroku-config
“`

##2. Herokuの環境変数を.envに同期する

“`
$ heroku config:pull
“`

“`:値を上書きしたい場合
$ heroku config:pull –overwrite
“`

“`:.envを編集して環境変数を上書きしたい場合
$ heroku config:push
“`

npmに公開する前に、パッケージの動作確認をする方法

## はじめに

`npm publish` で公開する前にパッケージを確認する方法として、以下の 2 つがありそうです。

– `npm link` で、開発中にパッケージの動作確認を行う
– `npm pack` で、`npm publish`で公開される内容を事前に確認する

それぞれ見ていきます。

## 環境

npm: 6.14.10

## 開発中にパッケージの動作確認を行う

npm-link を使うと、ローカルの別のパッケージから、確認したいパッケージを呼び出すことができます。

> npm link (in package dir)
> npm link [<@scope>/][@]
>
> alias: npm ln

引用: [npm-link](https://docs.npmjs.com/cli/v6/commands/npm-link)

npm-link は次の 2 ステップで行います。

### 1. 参照したいパッケージで、`npm link`を実行する

参照したいパッケージで`npm link`を実行すると、グローバル

【Mac】node_modulesを全削除するコマンド

自分はこれで30GBの容量確保に成功しました。

## コマンド

* カレントディレクトリ配下のnode_modulesが全て削除されます。適切なディレクトリで実行してください。
* コマンドを改変する際は自己責任でお願いします。

“`sh
find ./ -name “node_modules” | xargs rm -rf
“`

管理者権限はつけない方がいいですが、`permission denied` が出る場合は自己責任でお願いします。

Electron で ES Modules を使う。

# 概要

`Node.js`が`ES Modules`(以下`ESM`）をサポートするようになったので、`Electron`のメインプロセスでも`ESM`を使いたいというニーズが[当然のように出てきました。](https://github.com/electron/electron/issues/21457)
そこで[`Electron`のクイックスタートガイド](https://github.com/electron/electron-quick-start)を改変して、メインプロセス(`main.js`) で`ESM`をインポートできるようにやってみましたのでその方法を紹介します。ただし今のところ少し問題があるので、補足2を読んだ上で実際に使うかどうかは判定してください。

# 準備

[Electron Quick Start](https://github.com/electron/electron-quick-start)をクローンしてそのフォルダに入ります。

“`
$ git clonen https://github.com/electron/electron-qu

Nodeのバージョン管理ツールVOLTA⚡

## WindowsのNodeバージョン管理を探して三千里

みなさんWindowsのNodeのバージョン管理ってどうしてますか？

私はNodistを使っていたのですが、WSL環境と相性が悪い（npmのコンフィグが一部Windowsのパスと混在して壊れた）ので、ひとまずWinもLinuxも同じ管理ツールがないものか、と探していたところ、VOLTA⚡がRustで書かれていて早いしマルチプラットフォームだぞ、ということで使用してみました。

## VOLTA Install

新進気鋭なためか、MS開発の新進気鋭のパッケージ管理ツールWingetや毎度おなじみChocolateyには残念ながら対応していません。

そういうわけで[GitHubからインストールしよう](https://github.com/volta-cli/volta/releases)。.msiファイルで良いでしょう。

今回入れたバージョンは1.0.1。メジャー昇格おめでとう。みたいなタイミング。

## Node Install

他のNodeバージョン管理ツールに付いているような現在のNodeのリストをババーンと

【Slack/Bolt】Slackアプリで自分のステータスを設定する

#1 作ったもの

ソースコードは[こちら](https://github.com/syoppylife/slack-set-status-app)

#2 この記事で書くこと
**書くこと**
* Slackアプリのコンソール上の設定箇所と関連しているソースコードの説明
* ハマったところ①（Slash ‘/’ コマンドによるアプリの実行）
* ハマったところ②（アイコンを選択した人が自分のステータスを変更できる条件/方法）
* このアプリの問題点
* 作成に至った背景

**書かないこと**

* slackアプリの作り方
* Block Kit Builderの使い方
* Boltについてや使い方
* Herokuの使い方

書かないことばっかですが、それぞれ以下をみていただければ問題ないと思います。
[Slackアプリの作成]

Node.js: JWT のペイロード部をデコード

次の記事を参考にしました。
[JWTクレーム・セット部分のデコード方法](https://qiita.com/hoshimado/items/615173e1cdb37a597aa0)

“`js:decode_jwt.js
#! /usr/bin/node
// —————————————————————
// decode_jwt.js
//
// Feb/07/2021
//
// —————————————————————
‘use strict’

const fs = require(“fs”)

// —————————————————————
var atob = (base64) => {
const buffer = Buffer.from( base64, ‘base64’ )
const utf8 =