f@ctor

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

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

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サーバーをローカル上に立ててスクレイピングする方法

件の通り。初心者向けだと思います。nodeサーバーをローカルに立てて、そのサーバーへスクレイピングを走らせます。
nodeで色々とやる上でlocal上でできればサクッと動かしてみたい人は多いと思いますがnodeサーバーサイドでそうした気の利いた？記事はなかったのでまとめました。

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

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

“`
mkdir nodeServer
cd nodeServer
“`

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

今回はシンプルに扱えるscraperjsのライブラリを使用します。
作成したディレクトリ上でインストールします。

“`
yarn add scraperjs
or
npm install –save s

元記事を表示

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にはほぼ触れてこなかったので簡単に触ってみます。

# 手順

### プロジェクトの作成
・言われるがままにデフォルトっぽい設定で次へ次へ
![スクリーンショット 2020-11-26 15.29.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/398540/b4da94a1-93a2-16b7-4cbe-12e3bcf0da61.png)
できました。

### ウェブアプリの作成
上記スクリーンショットではもう作成された表示になっていますが、ウェブアプリの追加を選択します。
・適当な名前を付けて
・前記事の[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”: “n

元記事を表示

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/) 向け

# 共通

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)
{
#if defined(_WIN32)
// windows

元記事を表示

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 (“*** 終了 ***”)
})
}

/

元記事を表示

alpine環境でyarn add cwebp-binする

# やりたいこと
– alpineベースのdockerコンテナにnodeのパッケージ `cwebp-bin`をインストールする

# やったこと

– alpine linuxはOSレベルで画像処理ライブラリが欠けてるので追加でインストールを実施するべし
– `apk add make automake nasm g++ libc6-compat libjpeg-turbo-dev libpng-dev`
…でいけるはず

### そもそもの経緯
1. まあまあデカめのプロダクトのCI設定の見直しをしていた
2. ビルドにalpine環境を使えば高速化できるのでは？と思い至った
3. やってみると `yarn`を実行したときの`cwebp-bin`のインストールで何故かコケる

### そもそもcwebp-binとは
https://github.com/imagemin/cwebp-bin
https://www.npmjs.com/package/cwebp-bin

>WebP is a new image format that provides lossles

元記事を表示

近すぎると小池都知事が『密です。』と連呼するデバイスを作ったら腹筋が崩壊したので、皆さんにも試して欲しい。

# 怒涛の「密です。」攻撃。
私は直接新型コロナと戦ってはいませんが、医療従事者の端くれとして、最前線で戦っている仲間のためにも、少しでも新型コロナ感染予防につながるデバイスを世の中に生み出したいと思い、こちらのデバイスを作りました。

挙動は以下の通りです。

OTHERカテゴリの最新記事