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

たぶん10分で試せる。Azure Static Web AppにWebサイトをデプロイして独自ドメイン設定とFunctionsでAPI公開まで

AzureにStatic Web AppsというJAMstack向けなサービスが登場した模様で、プレビュー段階だけど試せたのでメモ残しておきます。

**無料らしい**（大事）

> 参考: [Azure App Service に Static Web Apps が登場！](https://k-miyake.github.io/blog/appservice-static-webapps/)

NetlifyやVercel同様に静的ホスティングだけじゃなく、Functionsも利用できるのが良いですね。

ドキュメントに[GitHub Actionsと連携して〜](https://docs.microsoft.com/ja-jp/azure/static-web-apps/github-actions-workflow)みたいなことが書いててなんでだろう的なこと思ったけどそういえば買収されてましたね（忘れがち）

## 作るもの: 静的サイト & API

AzureのStatic Web ApssにVue.jsで作った簡単なアプリをデプロイします。(いつまで置いてるか分からないの

Node.js 12+なら標準入力が超簡単に読める

# `process.stdin`は`for await…of`でループできる

Node.js 12から`stream.Readable`が非同期反復オブジェクト(Async Iterable)になりました。

当然`process.stdin`もAsync Iterableなので、`for await…of`文でループできます。

“`js:nl.js
(async () => {
const buffers = [];
for await (const chunk of process.stdin) buffers.push(chunk);
const buffer = Buffer.concat(buffers);
const text = buffer.toString();
const lines = text.split(/\r?\n/);
lines.forEach((line, index) => console.log(‘%d: %s’, index + 1, line));
})();
“`

補足ですが、文字エンコーディングを

Node.jsの非同期処理でつまづいたところ

# 概要
以前の記事で、イベントループ方式の理解に苦しんだことについて記事にあげましたが、今回は、非同期処理についてつまづいたところを忘れないように記事にしてみようと思います。

つまづいた経緯としては、Node.jsでローカルサーバーを構築し、リクエストを受け付けられるようになったところで、「リクエストごとに処理を変えたいなぁ」、と思ったことが全ての始まりでした。

# 環境
自分が実際につまづいた時の環境は、以下となります。

– OS：Windows10
– ブラウザ：Chrome

# やりたかったこと

– データを取得して、それをページに表示する。

最初はMVCモデルに基づいてプログラムを組もうと考えていましたが、少しめんどくさくなりそうだったので、簡単にデータを取得・反映させるページを作ろうと思いました。

# つまづいたところ

最初に記述したコードになります。

“`sample_node.js
// モジュールの取り込み
const http = require(‘http’);
const fs = require(‘fs’);
const path = re

Node.js, npm, yarn, gitの環境構築+コマンド解説

EC2にフロントエンド開発ができる環境構築をしていくぞ〜〜
あわせてコマンドが色々わからなかったので解説もしてみる
ところどころ間違えてそうなので直してほしい

別にAWSじゃなくても、ローカルPCに環境構築するのでも同じだと後から気が付きました
なので、ローカルに環境構築したい人の参考にもなるはず

環境: AWS Linux
（WindowsとかMacOSの人はこの記事は参考にならないよ）

:zap:コメント大歓迎:zap:

## EC2インスタンスの立ち上げ & 接続

インスタンスを作ってなかったら[こっちの記事の1-4](https://qiita.com/jesuissuyaa/items/b0932540cc16edec6f03)を見てね
ここから先は、ターミナルからインスタンスにSSHで接続してる前提でいきます

## gitのインストール

“`
sudo yum install git
“`

`yum`はAWS Linuxのパッケージマネージャーで、macOSの`brew`みたいなやつ
Linux系だと`apt-get`とかもあるけど、このインスタンスで

ESLint v7.1.0

前 [v7.0.0](https://qiita.com/mysticatea/items/0931a7d910fcb91733ee) | 次 (2020-06-05 JST)

ESLint v7.1.0 has been released! ?https://t.co/r2Dk1UBQoy

— ESLint (@geteslint) May 23, 2020

ESLint `7.1.0` がリリースされ

console.logからの脱却 – node.jsでデバッグするには(Visual Studio Code編)

## 前回のおはなし
若き開発者ヒロロはNode.jsでバックエンド開発を任されたがデバッグ方法がわからず、苦戦。
自力で調査しChrome DevToolでデバッグする方法を見つけ出し、なんとか`console.log`地獄は免れた。
しかし、普段利用しているVSCodeのデバッグツールを活用してより快適なデバッグ環境を作ろうと決意する。

前回の詳細**「console.logからの脱却 – node.jsでデバッグするには(Chrome DevTool編)」**は[こちら](https://qiita.com/Hiroro0970/items/d48a865e8ba949bb666f)

## VSCodeでのデバッグ環境構築
公式ドキュメント(https://code.visualstudio.com/docs/editor/debugging) によればVSCodeでデバッグを有効にするにはあらかじめ設定ファイルに情報を記載する必要があるそうです。

VSCodeを起動してデバッグメニューを開き、「create a launch.json file.」をクリックします。
その

Node.jsとFirebaseを使ってRedmineチケットの更新を通知してくれるSlack Appのバックエンドメモ

## 通知イメージ


## root

### package.json

“`json
{
“name”: “redticket”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“serve”: “firebase emulators:start”,
“deploy”: “firebase deploy”,
“logs”: “firebase functions:log”
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“bab

[AtCoder]問題の入力と期待値を自動取得してみた

#はじめに
言語の勉強としてAtCoderのABC(AtCoder Beginners Contest)の問題を解いていました。
しかし問題ページにある複数の入力サンプルと出力サンプルをコピペして目視であってるかどうかを確認するのは面倒だなと思いました。
そこでpuppeteerによるスクレイピングで入力サンプルと出力サンプルを自動で取ってきて、自動でテストするスクリプトを書いてみました。
今回はpuppeteer部分でやったことなどを残しておきます。
#調査
問題ページのURLは、例えば第88回目のABCのB問題はhttps://atcoder.jp/contests/abc088/tasks/abc088_b
第160回目のABCのD問題はhttps://atcoder.jp/contests/abc160/tasks/abc160_b
となってます。
問題ページのURLは、

“`
https://atcoder.jp/contests/<コンテスト名>/tasks/<コンテスト名>_<問題名>
“`
で取れることがわかりました。
次に各問題ページ入力と出力例のDOM情報を調

GoogleMapを使ってサイクリングに出かけよう

タイトルからは、何の技術の話かわからないですね。
GoogleMapにナビゲーション機能ってありますよね、それをサイクリングでナビゲートしてもらおうというものです。
サイクリング中は、手が使えないので、音声ナビがあると便利です。
ですが、ポケストップを探すたびに、立ち止まってスマホを見るのは手間ですし、軽快ではありません。

そこで、(ポケストップに限りませんが)サイクリング前に、途中のチェックポイントを複数覚えておいて、チェックポイントまでの道のりをナビゲートしてもらって、到着したら、ポケストップのアイテムをもらったり、コンビニで休憩したのち、次のチェックポイントを目指す、というものです。


# 原理の説明：GoogleMapの機能

GoogleMapは、外部のアプリやブラウザから起動させることができます。
その際に、パラメータの指定によっ

Lambda@EdgeのテストをJestで書く

# 概要

Lambda@Edge の単体テストを [Jest](https://jestjs.io/ja/) で書いたときのメモ。今回書いたのは Lambda@Edge だけど、Lambda でも基本的には同じはず。Jest はシンプルで良いですね。

# 導入方法

導入したいディレクトリを作成して、そこで以下のコマンドを入力していく。Jest の導入はすごく簡単。

* `npm init`
* npm を初期化する
* インタラクティブに設定項目を聞かれるので、お好みで設定
* `test command` だけ `jest` と入力する
* `npm install -D jest`
* jest をインストールする

# テスト対象ファイル

今回テストするファイルはこちら。Lambda@Edge のリクエストオリジンで動作させるような処理。

“`javascript:main.js
“use strict”;

exports.handler = (event, context, callback) => {
const reque

Amazonの検索結果からasinをスクレイピング

node.jsのsync-requestとjsdomを使って、アマゾンから商品のasinを取得してみる。

　まず、５月２４日発売のkindleの本を例にとって取得する。browsenodeを変えると違う内容も同じように取得できるだろう。ページ数は４あり、それぞれを自動で切り替えて最終ページになるとbreakして止まるようにしている。sync-requestを利用しているので同期処理で書いています。
sync-requestとjsdomはそれぞれ、インストールする。

“`
npm install sync-request
npm install jsdom
“`

５月２４日発売のkindleの本のURL
https://www.amazon.co.jp/s?i=digital-text&bbn=2275256051&rh=n%3A2250738051%2Cn%3A2275256051%2Cp_n_date%3A20200524&dc&qid=1588732789&ref=sr_ex_n_1

　日付やページの部分を書き換えて自動で取得している。
ページからjsdomでasin

Node.jsでターミナルで動くテキスト編集可能なアプリケーションを作る

# こんなの作ってます

https://github.com/mk2/yabai


# 何ができるのか？

– BoostNote(v1)のデータの読み書き

# どうやって作ったか？

## 使うもの

– TypeScript
– blessed
– Node.jsからターミナルの表示を色々いじれるライブラリ
– MobX
– アプリケーションのベース部分
– TextBuffer
– テキストファイルへのアクセス補助

## 構成図


## blessedの使い方

blessedは今風の宣言的UIライブラリではないので、結構泥

文章中の誤字を発見するwebアプリを作った

文章中の誤字を見つけ出して修正するためのwebアプリを作った。

#できたもの
https://intriguing-soda.glitch.me/

#使ったもの
– Node.js + express + ejs
– [A3RT Proofreading API](http://a3rt.recruit-tech.co.jp/product/proofreadingAPI/)
– [glitch](https://glitch.com/)

#気になるところ
– 正しい箇所が修正候補として指摘されてしまう場合がある(特に間違っている箇所の隣の文字)
– ejsの使用について

“`node.js:server.js
//これがあれば
app.set(“view engine”

console.logからの脱却 – node.jsでデバッグするには(Chrome DevTools編)

## あらすじ
若き開発者ヒロロはJavascriptのデバッグで`console.log`をコード内に埋め込んで、一つのバグの調査で何十回もコードを実行するという不毛な行為をしていた。しかしChromeの開発者用ツールの存在を知りBreakpointを使いこなせるようになった彼はコードを追いながら値を確認できるようになり効率的に開発するようになった。
ある日、彼はNode.jsでの開発に携わることに。持ち前のJavascriptのスキルを生かしてサーバーサイドでも活躍するはずだったが、Node.jsでデバッグする方法を知らず苦戦を強いられることに。
フロントエンドと同じ方法でデバッグすることができず、このままではヒロロはまたあの日の`console.log`によるデバッグ地獄をNode.jsでも味わうことになる。

果たして`console.log`を使わずに効率的にデバッグすることはできるのか⁇

## Node.jsではGoogle Developer Toolが使えない？
…とまぁ少し昔の話をはじめにさせてもらいました。

通常、Node.jsでプログラムを動かす場合、ター

Teams に ProActive メッセージ（Push 通知）を送る

# はじめに
今回、Teams へ Azure Bot Service を使用して ProActive メッセージを送る手順をまとめてみました。
一応、公式の GitHub の sample にもあります。
ちょっと違うのが、“Http Request を post“ にしていることです。

今回は（も）Node.js を使用していきます。
また、コードは Github にあげるほどはないので、記事内にペタペタしときます。

また、Azure Bot Service の sample の試し方やDeploy方法は過去の以下の記事を参考にしていただけると嬉しいです！
– [local test 方法まで](https://qiita.com/MinoMinoMinoru/items/d02bcea1a7b681c40240)
– [Azure へのDeployなど](https://qiita.com/MinoMinoMinoru/items/410ea775baa9943f59ce)

# ProActive メッセージを post で送信する際に必要な情報
基本的には bod

Gridsomeを触ってみたメモ

JAMstackでVue.js以上Nuxt.js未満なCMS?のイメージのGridsomeを触ってみたのでメモ。

v14で試そうと思ったらうまくいかなかったのでv12にして試したら上手く行きました。（後述）

https://gridsome.org/docs/

## チュートリアルをなぞってみる

### コマンドラインツールのインストール

“`
$ npm i -g @gridsome/cli
“`

ここが既に重い印象。（ネガ

### ブログプロジェクトを作成

“`
$ gridsome create n0bisuke-app
“`

### ここでsharpのビルドエラー

“`
$ gridsome create n0bisuke-app
“`

内部でsharpという画像のリサイズとかをしてくれるモジュールを使ってるみたいで、このモジュールがNode.js v14だとビルドが通らなかったです。

> https://www.npmjs.com/package/sharp

“`
省略

info sharp Using cached /Users/

Playwrightで簡単なクロスブラウザテストを書いてみた

2020 年 5 月の頭頃、Playwright が 1.0 に到達した際に、作成チームによって書かれた記事がホットエントリーになっていました。
https://medium.com/@arjunattam/fast-and-reliable-cross-browser-testing-with-playwright-155c0e8a821f

タイミング良くクロスブラウザテストを書く機会があったので、簡単なテストを書いてみました。
※ ブラウザ毎に挙動の異なる API のテストだと良かったのですが、こちらで実施するのはボタンをクリックして innerText の変更をテストするのみです。

ソースはこちらにあります。
https://github.com/nnashiki/playwright_sample

# Playwrigh とは

Chromium、Firefox、Safari を簡単にクロスブラウザテストするための、Node library とのことです。

> Playwright is a Node library to automate Chromium, Fire

[JS1日クッキング]SequelizeとExpressでAPIサーバー

何かを簡単に作って、ちょっとした勉強になる。そんなシリーズになる予定です。

今回は、Node.jsで簡単なTodoアプリに使うAPIサーバーを作っていきます。データベースはMySQLで、データベース操作にはSequelizeを利用します。

完成品はこちら -> [sequelize-todo-api-server](https://github.com/kei-lvngbk/sequelize-todo-api-server/tree/base)

# 材料

– mysql2
– sequelize
– sequelize-cli
– express

# 作り方

## 1. ライブラリのインストール

適当にディテクトリ作って、`npm init`で初期化してから、今回使うライブラリをインストールします。

“`shell
npm i sequelize mysql2
npm i -D sequelize-cli
“`

予めMySQLサーバーをインストールして、設定をしておきます。以下は今回使うユーザー名とパスワードです。

“`sql
use mysql;
cre

yarn v2 は開発時における効率を損ねるのではないか

# 背景
[npm, yarn による zero install 戦略](https://yosuke-furukawa.hatenablog.com/entry/2019/06/10/113111)を読んで Zero Install を知り、yarn v2 の有用性が気になった。パッケージ追加の速度やパッケージのサイズは従来よりも改善されるそうだが、パッケージをランタイム時に読み込むということはアプリ起動速度は従来よりも劣るように思えたため、検証を行った。

# 検証方法
yarn v2 と v1 を用いる別環境にて、CRAを用いたプロジェクトを作成して以下の3点から優位性を比較する。
* パッケージ追加の所要時間
* プロジェクトディレクトリのサイズ
* アプリ起動の所要時間

# 検証
## 1. パッケージ追加の所要時間
ReactアプリのプロジェクトをCRA経由で作成する。途中でパッケージ追加が行われるため、以下のコマンドを実行してdateコマンドの差から所要時間を算出する。

“`bash
$ create-react-app –version
3.4.1
$ date

【Yarn】パッケージをオフラインでインストールする

# 背景
[Yarn v2についての動画](https://www.youtube.com/watch?v=XePfzVs852s)で出てきた「v1のオフラインインストール」について、よく知らなかったので調べてみた。

# 概要
Yarnのオフラインインストールとは、パッケージを追加する際に実態のtarballをローカルにダウンロードしておき、後からそれを用いてパッケージをインストール出来るようにしたものである。パッケージをインストールする際に `yarn.lock` ファイルにダウンロード元のURLが記録されているため、URLが有効な限りは何度実行しても同一のファイルがダウンロードされることが保証されるが、ダウンロード元のダウンや閉鎖等によってURLが無効になった場合はダウンロードに失敗する。このような場合に備えて予めtarballをダウンロードしておき、オフライン時に利用するのがオフラインインストールである。

# 詳解
## 事前準備
まずはじめに、適当なディレクトリを作成して以下のファイルを配置する。

“`json:package.json
{
“name”: “yar