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

Huskyを入れてもgitのhookが動かない

[husky@4.2.1](https://github.com/typicode/husky/tree/v4.2.1) + lint-stagedでpre commit時にprettierを動かそうとしたんだけどうまく動かなかった。

“`
$ ls .git/hooks
“`
してみてもhookが生成された形跡なし。

結論からいうと `ローカルのgitバージョンとhuskyのバージョンの問題` でした。

[husky@4.2.1](https://github.com/typicode/husky/tree/v4.2.1)の対応gitバージョンは
> Verify that your version of Git is >=2.13.0.

ということで2.13.0以上。
対して自分のPCのローカルgitバージョンは2.11.0。

単純にローカルgitバージョンを上げれば対応できそうだが、チーム開発だと全員のgitバージョン揃えるのもめんどそうなので（gitはそんな頻繁にバージョン上げないだろうし）低いgitバージョンでも動かせるように対応。

“`
$ yarn ad

YarnV2 こと Yarn@berry を試してみている


### Yarn とは
yarn とは雑には alternative npm。高速な Node.js 向けのパッケージマネージャ。
package.json を解釈し、高速にパッケージの依存解決を行ってくれる。

### Yarn V2 のインストール方法
Yarn v2 は現状 `yarn@berry` としてバージョンを指定することでインストール可能。

“`sh:how-to-install.sh
# インストール済みの場合はまずアンインストールする
npm uninstall -g yarn

# v2 を使いたければタグを明示してインストールする
npm install -g yarn@berry
“`

### V1 と V2 の違い
一次情報はこちらのエントリを参照のこと。スクショは公式から引用。
[https://dev.to/arcanis

既存のnpmをnpm audit fixエラーを出さずにアップデートする方法

# はじめに
gulpを使用していて、`npm audit fix`してください！ってエラーが表示される事が数回ありました。
これはパッケージに脆弱性のある箇所を自動修正してくれるコマンドらしく、これを入力する事で大半は通常通りに使用する事ができるようになります。(ダメな時もあるらしいですが私は通過しました)
ただ、エラーが出るのが苦手なので、どうすれば良いだろうな〜って漁っていたら、解決策を見つけました。

# 考え方

Q.なぜこのエラーが起こるのか
A.package.jsonのに入っているパッケージのバージョンが古いから

Q.どうすれば良いか
A.package.jsonに記載されてるバージョンが古くないかチェック
→package.json更新
→npmアップデート

意外と簡単に出来ちゃいます。

このアップデートで使用するコマンドが

“`
npm install npm-check-updates
“`

なのですが、具体的にどう言った時に使用すれば良いのか、以下に簡単に説明します。

### できる事
– `package.json`に書かれている`npm`

[JavaScript][Node.js]フロントエンドとバックエンドの処理を共通化する

#Overview

フロントエンドはReact、バックエンドはNode.jsで作っていると、どちらでも利用したい処理が出てきます。
両方とも同一言語なので、バックエンドをNode.jsにしたメリットを享受できます:relaxed:
…そう思っていたのですが、write at onceかと思いきやモジュールの入出力の違いでそのまま共有することができません。
最終的にはGitHubを介して共有することになりましたが、結果に至るまでの過程を残しておこうと思います。

#Target reader

– JavaScriptとNode.jsを扱っている方。

#Prerequisite

– バックエンドはGoogle Cloud Function(以降、GCF)を利用する、つまりNodeの起動オプションを指定するようなことはできない。
– Node.jsのバージョンはGoogle Cloud Function(GCF)に依存し、現時点ではV10系とする。
– フロントエンドはCreate React App（以降、CRA）をビルドに利用し、イジェクトしてWebpackの設定は変更しない。

Cloud RunでNode.jsのconsole.log, debug, warn, errorでログ出力するとどのように表示されるか

[公式に記載の通り](https://cloud.google.com/run/docs/logging?hl=en)Cloud RunのログはStackdriver Logging に自動的に送信されます。

下図のデフォルトのログ出力を確認すると500エラーで左のアイコンが `!!` になっていたり、404エラーで `!` になっていたりします。

[Stackdriverのドキュメント](https://cloud.google.com/logging/docs/reference/v2/rest/v2/LogEntry#logseverity)を確認すると9つのレベルが用意されており、Node.jsで以下のログ出力を行った場合にどのように表

CodeSandboxでReact学習用の開発環境をサクっと作ろう

## 本記事想定読者

– React初学者で、これから勉強を始めたいと思っている方 。
– **初学者にReactを教える立場の方。**

## 前書き
最近Reactを初学者の方に教える機会が多かったです。

初学者、と言ってもどの程度『初学』なのか、具体的には下記の通りです。

・**何らかのプログラミング言語に触れた事はある**
　　→条件分岐や繰り返し等のプログラミングの基礎概念は把握出来ている
・**Windows以外のOSを触った事が無い**
・**node.jsの存在を知らない**
　　→Reactの存在も知らない

数人に教えた時点で気づきましたが、教える際に一番難儀した部分は**開発環境の構築**でした。

というのも、Unix系のOS自体に触れた事が無い方にとって、npmを用いたインストールだったり、node.jsを利用した開発サーバーを構築する時点でハードルがかなり高くなってしまっている事に気づきました。

## CodeSandbox
そんな中で**[CodeSandbox](https://codesandbox.io/)**に出会い、学習に利用して頂い

docker上nestjsとmysqlを接続する

# docker上でnestjsとmysqlを接続する

### table of contents

1. nestjsのアプリケーションを作成する
2. localhostで立ち上げる
3. nestjsのアプリケーションをdockerniseする
4. docker-containerでmysqlを利用する
5. typeormを用いてapplicationを接続する

## 0. 環境

– docker
– nestjs

## 1. nestjsのアプリケーションを作成する

nest g をコマンドを用いてアプリケーションを作成するため、@nest/cliをインストールします。

“`terminal
$ npm i -g @nestjs/cli
“`

成功すると、

“`terminal
$ nest –version
6.12.9
“`
でインストールされたバージョンが表示されます。

コマンドが利用できる状況になったところで新規のアプリケーションを作成します。

“`terminal
$ nest g application my-app
“`

お

削除したnode_modulesを再インストールする

削除したnode_modulesフォルダを再インストールしたいが、可能であるか？

結論
package.jsonにモジュールが記載されているので、再インストールは可能である。

入れたいプロジェクトフォルダ上でnpm installコマンドを打つことで、新しくnode_moduleフォルダを作成することができる。

＊自分はPCを移行する際に、node_modulesフォルダだけ移行に時間がかかったので先に削除した。
新しいPC上で、再度インストールすることにした。時間の短縮です。

パッケージ版nodeをmacからアンインストールする。

#はじめに
nodebrewをインストールするつもりが、pkg版nodeをインストールしてしまったため、削除したくなりました。

#解決法
以下のコマンドで、まずnodeの存在を確認。

“`bash:terminal
User$ /usr/local/bin/node -v
v12.14.1
“`
バージョンが表示されたので、やはりパッケージ版がインストールされてしまっていることがわかります。
以下のコマンドを続けて打ってください。

“`bash:terminal
User$ sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}
“`
これでもう一度、冒頭で確認したコマンドを打ってみます。

“`bash:terminal
User$ /usr/local/bin/node -v
-bash: /usr/local/bin/node: No such file or directory
“`
きちんとアンインストールできました。

nodeをパッケージでインストールして、ほとんどのコマンドが “command not found”になったときの解決法

#はじめに
新しいMacbook Proを買ったので、早速nodeの設定をしようと思いました。
そこでnodebrewを入れるつもりが、誤ってパッケージ版のnode.jsをインストールしてしまい、ターミナルからほとんどのコマンドが使えない事態になりました。
ex. rm, ls, which など
rmも使えないため、nodeもアンインストールできなくなる事態になりました。

#原因
簡潔に書くと、nodeをインストールしたことにより、複数ファイルにパスが書かれてしまっているため、コマンドが使えなくなっていることがいえます。

nodeをパッケージ版でインストールした人ですとおそらく
“`/usr/local/bin/node -v“`
“`/usr/bin/vi ~/.bash_profile“`
などは通るのではないでしょうか。
試してみて、実行されるかどうか確認してみてください。もし実行されれば、筆者と同じ状況なので、以下の解決策が有効かもしれません。

#解決策
“`~/.zshrc“`に“`source $HOME/.bashrc“`を追加してください。

ajaxで取得したデータでrenderすると、Cannot read property xx of undefined エラーになる

# 問題点

例えば以下のように、バックグラウンドで取得したデータを表示させたいとします。

“`jsx:xxx.js
constructor(props) {
super(props);
this.state = {
result: {}
}

fetch(“http://localhost/api/test”)
.then(response => response.json())
.then(json => this.setState({ result: json }));
// /api/testは、以下のようなレスポンスを返す
// {
// test1 : “aaa”,
// test2 : {
// test3 : “bbb”
// }
// }
}

render() {
return (

{this.state.result.test1}

コード内で環境名 (dev,stg,prod) を使用しないことのすすめ

サービスを運用する場合、開発、運用で複数の環境でサーバーを動かしている場合がよくあると思います。このとき、パラメータ設定の口が柔軟でないと設定値の変更がしにくかったり、サーバーのビルドを環境毎にしなければならなず(特に docker 使っている場合)、デプロイに時間がかかったりします。
そうならないために環境名 (dev,stg,prod) を使用して動作変更するのをやめることをおすすめします。記事内では以下のような環境があると想定し、Javascript (Node.js) でいくつかの例を示します。

– 開発時ローカル PC
– ステージングサーバー環境
– 本番サーバー環境

# 変数を環境名に依存させるのをやめよう
サーバーでエラーが起きたときに管理者にメールを送るというケースで送り先を分ける場合で説明します。

##悪い例（コード内で環境ごとのメールアドレスを決めている）
コード内で設定されているアドレスにしか送ることができません、送信するメールアドレスが変更になったときはコードの変更が必要。

“`js
// process.env.NODE_ENV に環境名が指定され

Boltを使ったSlack BotをTypescriptで開発する方法

# はじめに
今までslack用のbotを開発するのにhubotやerrbotを利用してきたのですが、昨年slackがリリースしたBoltフレームワークのチュートリアルをいくつかやってみて簡単にbot実装ができそうだなと思ったので、それをTypeScriptで実装する場合の方法を紹介します。

# Bolt開発時に参考にしたサイト
Boltを使ったslack botアプリの作成方法や実装サンプルなどは、下記を参考にさせて頂きました。

– [Bolt入門ガイド](https://slack.dev/bolt/ja-jp/tutorial/getting-started)
– [Bolt フレームワークを使って Slack Bot を作ろう](https://api.slack.com/lang/ja-jp/hello-world-bolt)

# 開発環境
主に下記の開発環境で実装及び動作確認をしました。

– VSCode
– node.js
– [Glitch](https://glitch.com/)

Glitchは、ウェブ上で動くIDEを持っているのですが、ローカルでVSCo

AppiumでFlutterアプリのテストを自動化する 実践編(JavaScript)

# はじめに

[AppiumでFlutterアプリのテストを自動化する 環境構築編 – Qiita](https://qiita.com/hiesiea/items/b4e31b6f1f585a93bae1)
の続きになります。
実際にテストコードを書いて、それを実行し、レポートを出力するところまでやります。
今回は「JavaScript」を使います。

# 前提条件

[AppiumでFlutterアプリのテストを自動化する 環境構築編 – Qiita](https://qiita.com/hiesiea/items/b4e31b6f1f585a93bae1)
で、Appiumの環境構築が完了していること

# なぜAppiumで自動化するのか

Flutterには、「Integration Test」という仕組みが存在します。

– [An introduction to integration testing – Flutter](https://flutter.dev/docs/cookbook/testing/integration/introduction)

これは結合

expressによるウェブページテンプレート化の手法(express-ejs-layoutsを使用)

# 概要
Expressにおけるwebページのテンプレート化の方法をまとめてみる。
使用するパッケージは以下の通り。
・express
・express-ejs-layouts

作成するファイルは以下の通り。
(1) /main.js
テンプレート化に必要なパッケージの読み込み、レスポンスのロジックを実装

(2) /views/layout.ejs
テンプレートエンジンが使用するレイアウトのウェブページのテンプレート。このファイルでページのレイアウトとコンテンツの埋め込み箇所を定義する。

(3) /views/index.ejs
テンプレートエンジンがレイアウトに埋め込むファイル。
ここではindexのページを定義しているが、ユーザーのアクセスするパスに応じて他のejsファイルも作成する。

# Step1. main.jsの実装
まず、以下のようにmain.jsを実装する。
(1) パッケージのインポート
以下3つの定数を定義する。

“`
const express =require(“express”)
const layouts = require(“express-e

npm で全ての package をアップデートする

“`sh
$ npx npm-check-updates -u
“`

これで `package.json` のみ更新される。
あとは、いつも通り `npm i` 。

以下、オプション例。

“`sh
# “devDependencies” のみアップデートしたい
npx npm-check-updates -u –dep dev

# 特定の package はアップデートしたくない
npx npm-check-updates -u –reject typescript,@types/node
“`

## Ref.

https://www.npmjs.com/package/npm-check-updates

Node.js で Cloud Firestore のデータを削除 (Delete)

こちらで作成したデータのひとつを削除します。
[Node.js で Cloud Firestore のデータを作成 (Create)](https://qiita.com/ekzemplaro/items/fe9133236a8e04519acf)

“`js:firestore_delete.js
#! /usr/bin/node
// —————————————————————
// firestore_delete.js
//
// Jan/25/2020
//
// —————————————————————
console.error (“*** 開始 ***”)

const key_in=process.argv[2]
console.log (key_in)

const admin = require(‘firebase-admin’)
admin.initializeApp({
cred

Node.js で Cloud Firestore のデータを更新 (Update)

こちらで作成したデータを更新します。
[Node.js で Cloud Firestore のデータを作成 (Create)](https://qiita.com/ekzemplaro/items/fe9133236a8e04519acf)

“`js:firestore_update.js
#! /usr/bin/node
// —————————————————————
// firestore_update.js
//
// Jan/25/2020
//
// —————————————————————
console.error (“*** 開始 ***”)

const key_in=process.argv[2]
const population_in=process.argv[3]

console.log (key_in + “\t” + population_in)

const today

Node.js で Cloud Firestore のデータを読む (Read)

こちらで作成したデータを読みます。
[Node.js で Cloud Firestore のデータを作成 (Create)](https://qiita.com/ekzemplaro/items/fe9133236a8e04519acf)

“`js:firestore_read.js
#! /usr/bin/node
// —————————————————————
// firestore_read.js
//
// Jan/25/2020
//
// —————————————————————
console.error (“*** 開始 ***”)

const admin = require(‘firebase-admin’)
admin.initializeApp({
credential: admin.credential.applicationDefault()
})

const db =

Node.js で Cloud Firestore のデータを作成 (Create)

ライブラリーのインストール

“`bash
sudo npm install firebase-admin –save
“`

“`js:firestore_create.js
#! /usr/bin/node
// —————————————————————
// firestore_create.js
//
// Jan/25/2020
//
// —————————————————————
function add_data_proc(db,key,name,population,date_mod)
{
let tt_ref = db.collection(‘cities’).doc(key)
tt_ref.set({
‘name’: name,
‘population’: population,
‘date_mod’: date_mod
})
}

// ———–