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

【Slack】OOOoO、キミにきめた！Bolt on Docker + Cloud Runでユーザーをランダムで選んでくれるSlash commandを作った話

こんにちは。
チーム内で週一で勉強会をやっているのですが、気付いたら3回に2回は僕がやってます。
「こりゃいかんぞ！Outputこそ最大の学びの場やぞ！」と思ったのですが、なんか自分から次はあなたねと指名するのもプレッシャー与えちゃうかも…と悩んでいました。

その仕事、Slackで。

ということで、Slackのslash commandに次の発表者を決めてもらうことにしました。
Slackには[Bolt](https://slack.dev/bolt/ja-jp/concepts)というnode.jsで動作するSlack app frameworkがあるので、今回はそれをDocker上で動作させ、最終的にはGCPのサーバーレスコンテナランタイム[Cloud Run](https://cloud.google.com/run/?hl=ja)でslash commandを提供するところまでやってみます。

アウトプットとしては、Slackのチャンネルで`/kiminikimeta`とコマンドを打つと、Botが「`@xxxxx、キミに決めた`」とそのチャンネルのユーザー

Puppeteerを使ってスクレイピングする時に個人的にはまったポイントのメモ

# 概要

Puppeteerを使用してヘッドレスブラウザとしてウェブスクレイピングを行う時に、個人的に詰まった点のメモです。

## 前提

Mac OS v10.15.2（19C57)
VSCode 1.41.1
node v12.14.1
Puppeteer 2.1.0

## その１ コンソール出力ができない

### 問題

page.evaluateを使うことで、ページ読み込み後にブラウザ内で任意のスクリプトを実行してHTMLの解析などが可能ですが、デバッグ用にconsoleを仕込んでも何も表示されません。

“`js

// 初期化処理
const browser = await puppeteer.launch({
headless: true,
args: [‘–no-sandbox’, ‘–disable-setuid-sandbox’]
});
const page = await browser.newPage();

// 指定のURLのページを開く
await page.goto(‘https://hoge.

Laravel mixで環境変数を.env以外のファイルから読み込む

ステージング、本番サーバーにElasticbeanstalkを使っていて、ハマったのでメモ。

## 結論

https://laravel-mix.com/extensions/env-file
を使う。

“`
// package.json
“scripts”: {
“local”: “npm run development”, // localは.envを読めばいいので上記使う必要なし
“dev”: “NODE_ENV=development ENV_FILE=./env/.env.staging node_modules/webpack/bin/webpack.js –progress –hide-modules –config=node_modules/laravel-mix/setup/webpack.config.js”, // デフォルトから変更。
“development”: “cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js

electron-storeがパッケージ化したら動かねぇ！

# 解決方法はとっても単純でした．

package.jsonの`dependencies`に`electron-store`を追加するだけ．

“`json
{
(省略)
“devDependencies”: {
“electron”: “^7.1.10”,
“electron-builder”: “^22.3.2”,
“electron-store”: “^5.1.0”
},
“dependencies”: {
“electron-store”: “^5.1.0”
}
}

“`

※ `dependencies`がない場合は作ってください．

nestjsで.envを利用できるようにする。ついでにdockerも

# nestjsで.envを利用できるようにする。ついでにdockerも

###### Table of Contents

1. configModuleを追加する
2. .envを作成
3. nestjsに.envの設定を読み込ませる
4. dockerに.envを適応する

## 1.configModuleを追加する

nestjsでは[dot-env](https://github.com/motdotla/dotenv#readme)を拡張した[@nestjs/config](https://github.com/nestjs/config)があります。

上記を追加します。

“`terminal
$ npm i –save @nestjs/config
“`

プロジェクトディレクトリにあるapp.moduleにconfigの読み込みを追加します。

“`src/app.module.ts
import { Module } from ‘@nestjs/common’;
import { ConfigModule } from ‘@nestjs/config’

簡単に投票を共有できるツールをOSSで公開したよ

# 何に使うためにつくったの？
チームのメンバーでブログのテーマを決めるため（結局間に合わなかったけど）

# URLは？
https://syukei-san.xyz/

# 使い方は？
1. 投票したい/多数決を取りたいデータを１行ごとに入力
1. 利用規約を読んで同意する
1. 出来上がったフォームをメンバーにシェアする
1. メンバーがフォームで投票する（一人が複数投票することはできません！）

# どの言語で作ったの？
nodejs

# github URLは？
https://github.com/newsdict/syukei-san.xyz/

# なんでテスト書いてないの？
急いで作ったのでテスト書いてないです。。。
もっと使う用途が出てきたら書いていこうと思います。

仕様を考えながら作る場合、テストコードどうしてるんだろう？

# いつ公開しはじめたの？
[7 Jul 2019](https://github.com/newsdict/syukei-san.xyz/commit/b4c76660a74046d9756fcbf1ca126078074224eb)

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はそんな頻繁にバージョン上げないだろうし）低いgitバ

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)

これは結合