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

Reactプロジェクト環境の構築メモ

freeCodeCamp の [How to set up & deploy your React app from scratch using Webpack and Babel](https://medium.com/free-code-camp/how-to-set-up-deploy-your-react-app-from-scratch-using-webpack-and-babel-a669891033d4) より。

1. [nodejs, npm のインストール](#1)
2. [React プロジェクトのディレクトリ作成と npm 初期化](#2)
3. [必須 npm パッケージのインストール](#3)
4. [package.json の設定](#4)
5. [webpack.config.js の設定](#5)
6. [rc ファイルの設定](#6)
7. [サイトのコンテンツの作成](#7)
8. [サーバー起動](#8)

### 1. nodejs, npm のインストール

“`bash
$ sudo apt-get u

Node.js イベントループ

#Node.js とは
* Node.jsはChromeのV8 JavaScriptエンジンをベースに作られたJavaScriptランタイムです。
* Node.jsはevent-driven、non-blocking I/O modelデザインなので軽量で効率的です。

# Blocking vs Non-Blocking
この二つの違いは、リソースをプロセスに集中すべきか否かです。

**Blocking** (synchronous)
このオペレーションを処理する場合は、そのプロセス処理を終了するまで次のオペレーションに移ることが出来ません。

例えば、お茶を飲むという行動はBlockingオペレーションです。
>　1. カップを口までは運ぶ　2. お茶を飲む　3. カップをテーブルに置く　4. 完了

お茶を飲んでいる間は、お茶を飲むことに集中していると思います。

**Non-Blocking** (asynchronous)
このオペレーションを処理する場合は、とりあえずプロセス処理を開始します。
I/Oオペレーション等でリソースを使わない割に時間がかかりそうだったら、一旦

GoogleカレンダーAPIを用いて予定への出欠登録を行う

# はじめに
明けましておめでとうございます。早いもので令和2年(2020年)になりました。
なかなか投稿できておらず、久々の投稿となってしまいました。
2020年も気軽に投稿していければなと思っています。
今回は、前回の記事「[GoogleカレンダーAPIを用いてカレンダー一覧を取得する](https://qiita.com/kenbou/items/0fc85fa787db15c8b807)」に続き、
GoogleカレンダーAPIに関する記事です。

## やりたいこと
+ Googleカレンダーに登録されてされている予定に対して出席・欠席の登録をAPI経由で行う

私はこのAPIをAlexaスキルに組み込んで、共有カレンダーに対して音声経由で出欠登録できるようにしてみました。

## 実装

“`registEvent.js
‘use strict’;
const url = require(‘url’);
const https = require(‘https’);

const HTTP_RESPONSE_OK = 200;
const ACCESS_TOKEN =

Express (Node.js) の Graceful shutdown

基本的な実装の仕方と、実装した場合 / しなかった場合、で実際にどういう動作をするか〜、について書きます。

> Linux, Node.js 12.13.0, での話だけをします。

## Graceful shutdown ?

[Express] \(Node.js\) に限りませんが、Web サーバーを停止する際、クライアントから接続中のリクエスト (リクエスト受付してまだレスポンスしていない接続) はどうなるでしょうか？

Graceful shutdown とは一般的に以下の停止を指します。

* 停止指示後に、新しい接続を受付しない
* 残った処理中の接続が完了するのを待ってから、プロセスを安全に停止する

## SIGNALs

そもそも Web サーバープロセスはどうやって停止するかというと、 [SIGNAL] を用いて停止します。

具体的には下表の通り、コマンド等によって [SIGNAL] を送信できます。

| SIGNAL | kill command | Linux Terminal | Kubernetes | 実装依存 | 説明 |
|:——

EnterpriseEthereum/Kaleidoをローカルtruffleからアクセスする

# What’s this?

パーミッションドのブロックチェーン勉強中です。

BaaS色々使いたいですが如何せんお金がかかります。
そんな中、EthereumベースのBaaS「Kaleido」は永久無料プランがあるのでそれは使いやすい、ということで勉強しています。

あんまり情報ないですが、マルチリージョンとかにもできるしEnterpriseEthereumのBaaSとしてはかなり優秀なのでは、という印象です。
詳しくは下記をみてください。

[「Kaleido」企業向けイーサリアム開発のフルスタックBaaSとは？](https://coinpost.jp/?post_type=column&p=118876)

今回はコンソーシアムを立ててコントラクトをデプロイ、ローカルのアプリケーションからパーミッションドアクセスできるところまでを確認します。
ここまでできればDAppが作れるはずです。

# 環境

下記で検証

“`sh
$ sw_vers
> ProductName: Mac OS X
> ProductVersion: 10.14.5
> BuildVersion:

「node.js」「npm」を使って「bootstrap」を導入するまでのまとめ

# 1. はじめに

## 1.1. 背景
「node.js」でSPA（シングル・ページ・アプリケーション）を作りたい。
それにあたって、「bootstrap」を使いたい！

## 1.2. 目的
「node.js」の「npm」を使って「bootstrap」を読み込むこと。

# 2. 「npm」で「bootstrap」の導入

早速、「npm」コマンドでbootstrapをインストールします。

## 2.1. 筆者の開発環境の確認

bootstrapの導入にはCDNを使うのが一番楽です。

“`html:（なんらかのHTMLにて）CDNでの導入
Mac で npm install すると Cannot find module ‘./lib/async’ が出るようになったので、Nodeとnpmを削除して、nodebew で node を再インストールした時のメモ

# はじめに
タイトルのように、npm install すると [Cannot find module ‘./lib/async’] と表示されてインストールが進まなくなって、色々調べて結果 Node.jsを削除して、再度インストールした時のメモです。

自分のメモ書きなので特にまとめもありませんし、役立つ情報も無いかもしれませんが残しておきます。

# 現象
npm -g でインストールしたのに、依存ライブラリが無いと言われる。
node.js のパスがおかしい感じ。

## ログ

“`
$ npm root -g
/Users/kazoo/.npm-global/lib/node_modules

$ node
Welcome to Node.js v12.12.0.
Type “.help” for more information.
> .help
.break Sometimes you get stuck, this gets you out
.clear Alias for .break
.editor Enter editor mode
.exit

これから NestJS をはじめようとしている方へ

この記事は [NestJS アドベントカレンダー 2019](https://qiita.com/advent-calendar/2019/nestjs) の 25 日目の枠です。

## はじめに

NestJS の知名度は 2019 年を通して上昇したように感じられますが、まだまだ日本語情報が少ないという思いからこのアドベントカレンダーを開始しました。

まず、 NestJS とは何か、どういうユースケースにマッチするか、という紹介については以下のスライドにまとまっています。

What is NestJS? / @potato4d
[https://speakerdeck.com/potato4d/what-is-nestjs-number-nestjs-meetup](https://speakerdeck.com/potato4d/what-is-nestjs-number-nestjs-meetup)

次に 1 日目 〜 7 日目では、 NestJS を触ってみてアプリケーションを作るまでの具体的な作法を、コードを交えて紹介しています。
8 日目以降は NestJS を使

ウェブスクレイピング

# 概要

CSVに記入したURL一覧からページの情報をスクレイピングします。

# ソース

## package.json

“`
{
“name”: “scraping”,
“version”: “1.0.0”,
“description”: “scraping”,
“author”: “”,
“devDependencies”: {
“cheerio”: “^1.0.0-rc.3”,
“csv-parser”: “^2.3.2”,
“fs”: “0.0.1-security”,
“json2csv”: “^4.5.4”,
“request”: “^2.88.0”,
“request-promise”: “^4.2.5”
}
}
“`

– cheerio　・・・　読み込んだページをjQuery形式でDOM操作できる
– csv-parser　・・・　CSV形式をJSONに変換
– fs　・・・　ファイル操作
– json2csv　・・・　JSON形式をCSVに変換
– request　・・・ HTTP通

高解像度降水ナウキャストの画像をpuppeteerによってロボット的に取得

# これは何ですか？
気象庁の降水レーダー画像を取得するスクレーパーです。今はこれもロボットと言えば言えるようです。長らくWatir + ChromeDriverで頑張ってきましたが、解析の困難なエラーが出るようになって、ChromeDriverがいくら更新しても直ってこないので、迂回策としてpuppeteerで書いてみたところあっさり動作した次第です。

[高解像度降水ナウキャストの画像取得 by puppeteer/node.js](https://gist.github.com/59t9/4244463dd836d0fa5c322b622c8325e7)

習作以上の物ではございませんが、お役に立てれば幸いです。

VuePress でテンプレートから記事生成

最近 VuePress で[個人ブログの運用をはじめました](https://openjny.github.io/)。

ですが、VuePress 単体では記事の Markdown を自動で生成できないことに悩んでいたので、[{{ mustache }}](https://mustache.github.io/) を使った簡易的な記事生成スクリプトを作りました。

イメージ的には `hexo` の [new コマンド](https://hexo.io/docs/commands.html#new) のような感じです。

# 登場人物

`new-post.js` と `templates/*.mustache` を新規に追加します。

“`
$ tree vuepress
.
├── new-post.js <------------------------- スクリプト本体 ├── package.json ├── docs <-------------------------------- VuePress のプロジェクトフォルダ │ ├── .vuepress │ │

年末の断捨離アプリをFirebaseでhostingしてみた話（webアプリが少しずつ良くなっていく過程編）

# Firebaseのhostingを使ってReactのSPAアプリをデプロイした話
です。
結論だけ話すとそんな感じです。(domainをとっていないことをお許しください)
https://dan-syari.web.app/#/

年末の短期休暇でアプリを１つ作ろうと考えていて、今回作りました。(開発期間は2日間)

## 今回作ったアプリについて

– タイトル： 「Dan Syari」
– 内容： 来年したい目標を3つ立て、それについて簡単な質問に答えるとその目標の中で重要なことがわかる
– 技術：
– React
– Typescript ☆
– React Hooks ☆
– Reduxを使わない状態管理 (Context) ☆
– Firebase (Hosting) ☆
– Firestore ☆
– Material UI ☆
– SPA ☆

☆がついているものは著者は初めて使ったものです

洗い出して列挙してみると、結構挑戦してたことがわかります

## 本記事の対象者

– 意気揚々と壮大なアプリを

Electronで「要素の検証」を再現する方法

##本文
初投稿です。
Chromeで右クリックすると出てくる「検証(I)」。
押すとデベロッパーツール内でカーソル直下の要素にジャンプします。
Electron内でも使えると開発中なにかと便利なので、この機能を再現してみます。

##openDevTools

Electronで単にデベロッパーツールを開く場合は`webContents.openDevTools([options])`を使います。

“`javascript
const { remote } = require(‘electron’)
const webContents = remote.getCurrentWindow()
webContents.openDevTools()
“`
modeオプションで表示位置の指定ができます。

| mode |状態|
|:-:|:–|
|right|画面右に表示|
|bottom|画面下に表示|
|detach|別ウィンドウに切り離して表示|
|undocked|別ウィンドウに切り離すが画面内に戻すこともできる|
“`javascript
webContents.ope

ReactのBDD勉強としてサービス作ってみた

# TL;DR

– フロントエンドBDDの勉強用に、簡単なサービス作った。
– テスト書くの良い。
– サービス公開とか色々本筋でないとこに結構引っかかった。
– Javascript難しい。
– フロントエンド難しい。

# What’s this?

最近業務でswiftを触っていたのもあり、勉強の方向性がフロントエンドに偏りつつある。
Reactは以前から学習に取り組み、簡易な実装経験があったが、
そもそも機能を実現することも重要だが、システムとして長期運用していく上で重要になるテストコードについても勉強したいと思ったので、じゃあReactでテスト書きつつシステム一個作って見よう！という試みで開始した。

# 作ったもの


サービス：https://timer-d73c3.web.app
GitHub：https://github.c

Node.js の Async Hooks API の動作を検証しました

必要に迫られて、Node.js の [Async Hooks] API について調べたので、その仕組を実例を用いて説明します。

## Async Hooks とは?

Node.js の [Stability: 1 – Experimental](https://nodejs.org/dist/latest-v12.x/docs/api/documentation.html#documentation_stability_index) (2019/12/30 現在) な機能です。
主に **非同期呼出を追跡する** のに使われています。例えば以下の様な NPM Module が [Async Hooks] を使っています。

* [longjohn](https://github.com/mattinsler/longjohn) → 非同期呼出で途切れる Stack trace を繋げて表示する
* [trace](https://github.com/AndreasMadsen/trace) → 非同期呼出で途切れる Stack trace を繋げて表示する
* [express

AWS+NodeJSでサーバレスな環境構築①

# はじめに
サーバレスは完全に未経験ですが、勉強がてら備忘録として残しておこうと思います。
表現等が正しく無い場合はご指摘いただければ、幸いです。

# サーバレスってなぁに？
簡単に言ってしまうと、ユーザーがサーバー領域を意識せず、直接利用出来るサービスを活用した構成のことです。
「Lambda」は設定されているプログラムを起動させる実行環境となります。起動条件が整った際に、プログラムをLambda環境に呼び出し、実行されます。この為、Lambdaでは、実行した時間とその回数のみの課金となります。

**向いているサービス**
・待機時間の長いシステム
・CPUの負荷が時間帯によって差のあるシステム

**不向きなサービス**
・常にシステムの動いている必要のあるサービス
・高負荷な状態が長時間続くシステム

もう少し詳しいことを知りたい場合はこちらのサイトをご覧ください。
[サーバーレス アーキテクチャ](https://www.skyarch.net/iot/serverless.html)

# Lambda関数の作成
・AWS Lambdaページ＞関数の作成＞一から作成
・

なっがいSQLをNode.jsで生成してみた

# 背景
– 似たような処理の繰り返しなので共通化できそう
– でも、SQLの知識がそこまでない
– Gitでコード管理しているが、なっがいSQLをプッシュすると、全コードにおけるSQLの割合が増えてなんか気分が悪い

## なっがいSQLサンプル
SELECT箇所・LEFT JOIN箇所で多数の重複があり、見やすくするため省略しています

“`sql
— CREATE TABLE sample_table
SELECT
pb.id, p.name, p.team,
— bat1
IFNULL(fst.slug_ave, 0) AS rate1,
IFNULL(fst.pa, 0) AS pa1,
IFNULL(fst.ab, 0) AS ab1,
IFNULL(fst.tb, 0) AS cnt1,
— bat2
— ︙
— bat3
— ︙
— bat4
— ︙
— bat5
— ︙
— bat6
— ︙
— bat7
IFNULL(sev.slug_ave, 0) AS rat

ReferenceError: fetch is not definedで困ったときに読む記事

### 少年は困っていた。
#### node-fetch がfetchできない。

“`
ReferenceError: fetch is not defined
at Client.request (/var/task/node_modules/amazon-cognito-identity-js/lib/Client.js:55:3)
at /var/task/node_modules/amazon-cognito-identity-js/lib/CognitoUser.js:333:18
at AuthenticationHelper.getLargeAValue (/var/task/node_modules/amazon-cognito-identity-js/lib/AuthenticationHelper.js:96:4)
at CognitoUser.authenticateUserDefaultAuth (/var/task/node_modules/amazon-cognito-identity-js/lib/CognitoUse

yarn installで”The engine “node” is incompatible with this module”というエラーが発生した件

## yarnをinstallしようとしたら、以下のエラーが発生しました

“`bash
error get-caller-file@2.0.5: The engine “node” is incompatible with this module.
Expected version “6.* || 8.* || >= 10.*”. Got “9.5.0”
error Found incompatible module.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
“`

### 環境
Ruby: 2.6.3
Rails: 5.2.3

## メッセージを和訳してみた
「バージョンは、6.* または8.* または10.*以上がいいんだけど、あなたは9.5.0だったよ」
てなとこかな？

## 解決策
#### nodeのバージョンを確認

“`bash
$ node -v
v9.5.0
“`
やっぱし。

#### インストール済みのnodeの

Firebase開発環境構築

久々に個人アプリを作ろうと思い、Firebaseの勉強がてら一から構築したのでその備忘録です。
# Node.jsインストール

“`
// Node.jsのバージョン管理にnodebrewを導入する
$ brew install nodebrew
$ echo “export PATH=$HOME/.nodebrew/current/bin:$PATH” >> ~/.bash_profile
$ source ~/.bash_profile
$ which nodebrew
/usr/local/bin/nodebrew
$ nodebrew setup
Fetching nodebrew…
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================