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

ハンズオン Node.jsの7章データストレージ(file-system)をTypescriptで試したメモ

## 概要

[ハンズオン Node.js][*1]の7章データストレージを試す。
型をつけて、typescriptで書いてみる。
今回はfile-systemの章。
環境は[nodeのexpressをtsで作って無料でazureに公開したメモ](https://qiita.com/hibohiboo/items/844cef3899c4fa5c4fa1)で作成したものを利用した

[ソース](https://github.com/hibohiboo/develop/tree/b91e7ae5e0dbb1f3aaa1fe8a59649045cc67ddc6/tutorial/lesson/azure/node-app)

## 環境

“`json:package.json
{
“name”: “node-app”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“start”: “node ./bin/www”,
“file-system”: “n

【Nuxt.js】Vue CLIによりアプリケーション雛形を作るまで


言語化するために記事に起こしました。
汎用性の高いスターターテンプレートで雛形を作成するまでを簡潔に記します。

#事前準備
①Node.jsの導入
②Yarnの導入
③direnvの導入

①、②共にNuxt.jsで開発する上で必須となるので導入する（ここではこれらの導入方法については省略します)。

③はターミナルのcurrentディレクトリで環境変数を自動で設定してくれるツール。環境変数の設定忘れを防止するため導入するとよい。

#1
“`ruby:ターミナル
npm i -g @vue/cli @vue/cli-init
“`
上記コマンドで、Vueコマンドを追加する。「Vue -V」でバージョン確認。

“`ruby:ターミナル
$ vue -V
@vue/cli 4.5.9

nodeのexpressをtsで作って無料でazureに公開したメモ

## 概要
[Azure で Node.js Web アプリを作成する](https://docs.microsoft.com/ja-jp/azure/app-service/quickstart-nodejs?pivots=platform-linux)を試してみたメモ。
ついでにTypescriptでトランスパイルするところまで。

## nodeアプリの作成
* expressで文字列を返すだけのアプリを作成する
* `npm run start`で開始して、http://localhost:3000/api/hello で文字列がかえることを確認。

[ソース](https://github.com/hibohiboo/develop/tree/3e90c0699457b8c34a62e1e926f215a771b02c85/tutorial/lesson/azure/node-app)

## Azureに公開

## VS Code 拡張機能をインストール
以下の拡張をインストール。
サブスクリプションとの紐づけを行っておく。

![image.png](https

EJSでもconsole.logが使える。デバッグに便利。

EJSでも、JavaScriptでおなじみの`console.log()`を使うことで実行環境へログを出力することができます。

“`js
<% const person = 'taro'; console.log(person); %>
“`
“`sh
taro
“`

使用しているNode.jsがv10が以上であれば`console.table()`なども使うことができます。

“`js
<% const people = [ {name: 'taro', age: 66}, {name: 'shota', age: 33}, {name: 'hiroto', age: 10}, ]; console.table(people); %>
“`
“`sh
┌─────────┬──────────┬─────┐
│ (index) │ name │ age │
├─────────┼──────────┼─────┤
│ 0 │ ‘taro’ │ 66 │
│

壁打ちnodeサーバーをローカル上に立ててスクレイピングする方法(ExpressJSコードサンプルもあり)

件の通り。初心者向けだと思います。nodeサーバーをローカルに立てて、そのサーバーへスクレイピングを走らせます。
(時短でとにかく立てたい人は記事の一番下にコードサンプルを置いているExpressJSのやり方がオススメです。学習もかねてであれば最初から読んだ方が良いと思います。)

nodeで色々とやる上でlocal上でできればサクッと動かしてみたい人は多いと思いますがnodeサーバーサイドでそうした気の利いた？記事はなかったのでまとめました。

献立
①. nodeを実行する環境を準備する
②. nodeサーバーでホスティングするページを準備する
③. nodeサーバーを立てるコードを書いて実行する
④. スクレイピング用のコードを書く

## ①. nodeを実行する環境を準備する
任意のところでnodeServerなど適当な名前でファイルを作成してそのディレクトリへ移動します。

“`
mkdir nodeServer
cd nodeServer
“`

node自体が入っていない場合は「node 実行環境」などでググりましょう。

今回はシンプルに扱えるscraperj

GitHub Actions を使って Next.js × AWS EC2 を自動デプロイした話

※ この記事は **[K-Ruby #25](https://k-ruby.connpass.com/event/195281/)** のLT資料として書かれた記事です。

こんにちは！
先日、[GMOペパボの東証一部上場が決まった](https://twitter.com/pepabo/status/1329677997171826689)ことで**「東証一部上場の Web 系企業に未経験転職した29歳」**になって怪しさに磨きがかかりました[よしこ @k2_yoshikouki](https://twitter.com/k2_yoshikouki) です。そろそろエンジニアになれる石売ります。

最近 [yoshikouki.net](http://yoshikouki.net) という個人サイトを作っている最中で、勉強も兼ねて以下の要件で作っています

– Infrastructure as Code で環境構築
– Chef（ホスト内の実装について定義）
– Terraform（各ホストの関係について定義）
– AWS を使用
– EC2 に ng

いまさらだけど簡単にFirebase触ってみる（Firebase Cloud Functionsでハローワールド）

# 概要
これまでAWSでごにょごにょ、はしてきたのですがFirebaseにはほぼ触れてこなかったので簡単に触ってみます。

# 手順

### プロジェクトの作成
・言われるがままにデフォルトっぽい設定で次へ次へ
できました。

### ウェブアプリの作成
上記スクリーンショットではもう作成された表示になっていますが、ウェブアプリの追加を選択します。
・適当な名前を付けて
・前記事の[riot.js](https://qiita.com/satoyut/items/d52071095702161717e0)のroot直下のindex.htmlにスクリプトをコピーしてペー。
・何の疑問も持たずにnpm install

“`
$ npm install -g firebase-tools
“`

Puppeteer(ぱぺてぃあ)、Headress Recorderで自動化が進んだ

#実現させたいこと
とあるサイトのマイページから、データを毎日ダウンロードしたい。しかし、ダウンロードには1,000クリック程度必要。
画面が遷移してもURLが変わらないので、SeleniumやPRAでの実現は難しい。
Chrome操作の自動化ができ、さらにExcelマクロのような録画ツールもあるそうなので、puppeteerを試してみた。
環境構築と習得に1日ほどかかったが、使いやすくて感動！

#puppeteerとは
Chromeブラウザを操作できるNode.jsのライブラリ
ヘッドレスブラウザを使用できるので高速

#Headless Recorderを使う
[HeadlessRecorder](https://chrome.google.com/webstore/detail/headless-recorder/djeegiggegleadkkbgopoonhjimgehda)をChromeの拡張機能に追加。
録画ボタンを押して、録画したい操作をすると、Puppeteerコードを出力してくれる。
puppeteerで必要なidやclassを調べる手間が省けて便利。

#Hea

Nodejsのコンテナを作成してみた。

## はじめに
`Nodejs`のバックエンドサーバーをコンテナで作成する際、ベースイメージを`nodejs(node:10)` にしてDockerfileを作成したが、コンテナにアタッチができず、中の構成などを直接見る方法が分からなかった。
困ったときには`nodejs`の設定などを見れるようにしたかったので、試しに`Ubuntu`ベース`にnodejs`をインストールする方法でDockerfileを作成してみた。
（記事の内容は、試しに動かすところまで記載あり。）

## 実行環境（前提）
【Docker導入環境】
　　・Ubuntu 20.04 LTS（GCP上）
　　・docker 19.03.13

## 今回やった事のメモ

今回の作業のためにテストフォルダを作成して、そこに移動。

“`shell:
$ sudo mkdir ./test_container
$ cd ./test_container
“`

**Dockerfileの作成**

“`
$ sudo nano ./Dockerfile
“`

“`docker:Dockerfile
# ベースイ

[Node.js][Deno] オブジェクト合成各種 ベンチマーク比較

先ほどの [クラスのベンチマーク](https://qiita.com/Yggdrasil-Leaves/items/62ee54ad98e2d6f758c1) の続編。
オブジェクト合成でより良い(というか速い)手法ないかなと悩みつつ。

# 実験環境

同じく

– Node.js 14.15.1
– Deno 1.5.4

# 実験設定

– 10要素で構成されるオブジェクト2組を1つのオブジェクトにまとめる
– 要素のうち5つは名前が重複しており、合成元を合成先に上書きする
– 合成先はプロトタイプではなく、独立したオブジェクトとして新規に生成される

という前提で

– 合成先オブジェクトを生成するファンクションと、合成元オブジェクトを用意
– 実行時間計測
– 合成先オブジェクト生成ファンクションだけの結果
– 合成先オブジェクト生成ファンクション+各種アルゴリズムの結果
– 結果表示
– 各種アルゴリズムの結果部分を抽出表示

という手順。

# オブジェクト合成アルゴリズム ここに集う

今回調査するアルゴリズムを御紹介いたしましょう。

[Node.js][Deno] クラス定義各種 ベンチマーク比較

JavaScriptのクラス定義手法はいっぱいあって、これを解説している記事もいっぱいありますが、パフォーマンスに言及しているところがなかったので、自前で実験してみた。

# 実験環境

– Node.js 14.15.1
– Deno 1.5.4

なお、webクライアントでの実行コストはあまり気にしてないので、各種ブラウザでの比較はパス。

# 実験設定

– 継承のあるクラスで
– インスタンス生成コストだけでなく、親メンバへのアクセスコストも重要
– とにかくランタイムで高速なものを追求
– プロトタイプ定義コストは、あまり気にしてない
– 標準的なクラス定義方法との互換性も、あまり気にしてない
– 各メンバの読み書きができれば充分
– ただしもちろん、書き込みによってプロトタイプを破壊しないことは重要

そんなわけで、各手法それぞれ

– TestClassA 定義
– プロパティ a とメソッド getA() を含める
– TestClassB 定義
– TestClassA を継承
– プロパティ b~i を含める
– TestClassC 定

Node.js基礎　備忘録

#リクエストの対処する仕組み

##スレッドモデル(Apache)

リクエストが来た際にスレッドを作成して対応する
※スレッドは同時にひとつのリクエストしか処理できない。
新しいリクエストが来た際には、新しいリクエストを作成して対応する

###問題
スレッドを作成するとメモリを消費するため、スレッドの作成限界がある。
リクエストが多い場合、スレッドが立ちあげれず、リクエストが待ち状態になる。

##イベントループ(Node.js)

メインスレッドとバックスレッドの２つがあり、動作している。

メインスレッドには、処理待ちのキューがあり、リクエストが来た際には、キューに登録する。
※新しくスレッドは作成しない

キューをループで回し、バックグランドで動くスレッドに渡し、そちらで処理を実行していく。

###プログラムを書く際は、ループをブロックしないように記述する。(Non-blocking)
時間がかかりそうな処理は、コールバック関数で実装する

メインで動くスレッドが、新規に作成されない為、シングルスレッドと呼ばれる。

WebSocket メモ

## WebSocket とは

– クライアントとリモートホストの間で双方向通信を可能とするプロトコル。
– セキュリティモデルはウェブブラウザでよく用いられるオリジンをベースとしたモデル。
– `XMLHttpRequest` やロングポーリングに頼らずにサーバとの双方向通信を必要とするブラウザアプリケーションのためのメカニズムを提供する。
– クライアント・サーバ間の双方向のトラフィックのためにTCPコネクションを一つだけ張る。

## プロトコルの概要

プロトコルは**ハンドシェイク**と**データ転送**の2つの部分からなる。

### ハンドシェイク

#### クライアント -> サーバ

“`http
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, s

Express Generatorを用いてプロジェクトを立ち上げる。

##1: Express Generatorをインストールする。

“`ターミナル.
npm install -g express-generator
“`

##2: Express Generatorでアプリケーションを作成する。

“`ターミナル.
express –view=ejs　<アプリ名>

#　–view=ejs　テンプレートエンジンにejsを指定するオプション。
“`

– bin　(アプリケーションを実行するためのwwwファイルが配置)
– public　(公開ディレクトリ images javascripts stylesheets配置)
– routes　(ルーティング)
– views　(テンプレートファイルを配置)
– app.js　(メインプログラム)
– package.json　(npmを管理)

が作成される。

##3:パッケージをインストールする。

“`ターミナル.
npm install
“`
package.jsonを元に必要なパッケージがインストールされる。

“`初期package.json

{
“name”:

EJSのif文でtrueの時だけ出力する。

## やりたいこと
“`js
<% const person = { name: 'taro' };%>
<% if (person.name) { %><%= person.name %><% } %>
“`
– 上記のような値があったときだけ出力する記述をスマートに書きたい。
– `<%`が多いので減らしたい。 ## 結論 以下のように書くと完結に書くことができます。 ```js <%= person.name ? person.name : '' %>
“`
三項演算子を使用します。偽値の場合は空文字です。

## 試したこと
“`js
<%= if(person.name) { person.name } %> // エラー
<%= if(person.name) person.name %> // エラー
<% if(person.name) person.name %> // 出力されない
“`

偽値を省略できていないのが心残りですが、
結論の`<%= person.name ? person.name : '' %>`がシンプル。

他にいい方法があっ

v8::Local と std::basic_string の相互変換

node.js C++ addons での文字列変換について
nan 等は使わずに [V8 API (14.x)](https://v8docs.nodesource.com/) 向け

2020/11/27
コメントを参考に C++11 以降向けに修正しました

# 共通

windows は `_UNICODE` が定義されている必要があります

“`cpp
#define ISOLATE v8::Isolate::GetCurrent()

#if defined(_WIN32)
// windows
typedef wchar_t _char_t;
#else
// mac, linux
typedef char _char_t;
#endif

typedef std::basic_string<_char_t> _string_t;
“`

# v8::Local<v8::String> → std::basic_string

“`cpp

_string_t to_string(const v8::Local& str)

Intl.DateTimeFormatを使った日付や時間の0詰め

# 本題

最近仕事でNode.jsとV8のチェンジログを追っていたところ、`Intl.DateTimeFormat`という新機能を見つけました。使うと、日付や時間の0詰めを外部ライブラリに頼らずにシュッと書けそうなので試してみました。

サンプルコードは以下のような感じです。

“`
const date = new Date(‘2020-01-01’);
const dateStr =new Intl.DateTimeFormat(‘jp’, {
year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’,
}).format(date);
console.log(dateStr); // 2020/01/01
“`
“`
const date2 = new Date(‘2020-01-01’);
const dateStr2 = new Intl.DateTimeFormat(‘jp’, options = {
year: ‘numeric’, month: ‘2-digit’, day: ‘2-digit’,
hour

Vue.jsのvue-cursol-fxを使ってみる

最近は就活中で暇なんでちょこちょこVue.jsを触っています。Railsでのバックエンドばかりだったのでフロントの知識もなく、Vue用のプラグインでとりあえずそれっぽくしたいなと思いvue-cursol-fxを使ってみました。

githubのインストレーションを参考にしています。詳しくはREADME.mdを見てください。
https://github.com/LuXDAmore/vue-cursor-fx?ref=kabanoki.net
## 環境
– Windowns 10
– Node.js v14.15.1
– @vue/cli 4.5.9

言い訳なんですがバーチャルボックスだとnodeのサーバー立ち上げた際ホットリロードが異常に遅い(約1分)ため仕方なくWindowsに直接Nodeをインストールして最近は遊んでいます。仮想環境でホットリロードがなんで遅いのかはいまだ原因分からないです。誰か教えて…

## 導入
まずはvue-cliでプロジェクトを作ります。

“`
vue create sample_app
“`

作成時の設定はデフォルトで、Vue2にしておき

Node.js: Google Cloud Translation API の使い方 (Advanced)

“`js:advanced01.js
#! /usr/bin/node
//
// advanced01.js
//
// Nov/25/2000
//
// —————————————————————
‘use strict’

// —————————————————————
const projectId = “project-translation”
const location = ‘global’
const text = “Es war einmal ein kleines Mädchen.”

const {TranslationServiceClient} = require(‘@google-cloud/translate’)

const translationClient = new TranslationServiceClient()

async function translat

Node.js: Google Cloud Translation API の使い方 (Basic)

“`js:basic01.js
#! /usr/bin/node
//
// basic01.js
//
// Nov/25/2000
//
// —————————————————————
‘use strict’

async function translateText() {
let [translations] = await translate.translate(text, target)
translations = Array.isArray(translations) ? translations : [translations]
console.log(‘Translations:’)
translations.forEach((translation, i) => {
console.log(`${text[i]} => (${target}) ${translation}`)
console.error (“*** 終了 ***”)
})
}

/