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

[Node.js] response.writeHeadとresponse.setHeaderって何が違うの？

# はじめに
Node.jsを勉強していて、setHeaderとwriteHeadって何が違うの…？となったのでソースコードなどから調べてみました。

# setHeaderのソースコードを見てみる
setHeaderの実装部分を示します。setHeaderはheadersに名前と値を格納しているだけということがわかります。
headersに値を格納しているので、例えばgetHeader(name)によって値を取得することができます。

“`javascript
OutgoingMessage.prototype.setHeader = function setHeader(name, value) {
if (this._header) {
throw new ERR_HTTP_HEADERS_SENT(‘set’);
}
validateHeaderName(name);
validateHeaderValue(name, value);

let headers = this[kOutHeaders];
if (headers === nul

Chatwork に Node.js + TypeScript でメッセージを通知する

## スクリプト

ちょっとしたツールを作成していて Chatwork 通知が必要になりましたため、作成しました。

“`typescript
import { escape } from ‘querystring’;
import fetch from ‘isomorphic-unfetch’

export async function notify(
api_token: string,
room_id: string,
message: string,
self_unread?: 0 | 1
): Promise {
return await fetch(`https://api.chatwork.com/v2/rooms/${room_id}/messages`, {
method: ‘POST’,
headers: {
‘X-ChatWorkToken’: api_token,
‘Content-Type’: ‘application/x-www-form-urlencoded’,
}

AmazonLinux node.js/typescriptのインストール手順

typescriptを始めたくてAmazonLinuxにnode.jsとtypescriptをインストールしてみた。
まずはcurlでリポジトリを追加してyumでnode.jsをインストールする。

“`
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash –
sudo yum install -y nodejs
“`

これでLTSの14.x版がインストールされる。
次にnpmでtypescriptをインストールする。

“`
sudo npm install -g typescript
“`

これでtscが使えるようになり、typescriptのコンパイルができるようになった。

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

## 概要

[前回](https://qiita.com/hibohiboo/items/c2b7f879ba61c97bd770)の続き。
ハンズオン Node.jsの7章データストレージをtypescriptで試す。今回はsqlite。

[ソース](https://github.com/hibohiboo/develop/tree/c4f2c81f51f271d736f3eb13379d70b21e452c2b/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”: “node ./bin/www”,
“sqlite”: “node ./bin/www”,
“tsc”: “tsc”,

フロントエンドやるなら入れておくべきESlintってなに？

#プログラミング勉強日記
2020年11月28日
[昨日の記事](https://qiita.com/mzmz__02/items/12d198b696efa8b29bda)でPrettierについて扱ったが、Prettierと合わせて使用することのできるESlintについて紹介する。

#ESlintとは
　ESlint(読み方：「イーエスリント」)は、JavaScriptやTypeScriptなどの静的解析ツールである。ESlintを導入することで、単純な構文エラーやプロジェクト固有のコーディング規約を定義することができる。厳密なルールを定義することで、複数人で開発する場合でもシステム全体のコードの一貫性を維持することができる。

#ESlintの特徴

– 自由に多くのルールを設定できる
– 独自ルールを作成するAPI
– 固有のライブラリー、フレームワーク、および実践のルールを持つ多数のプラグイン
– ES6、ES7、JSXの内蔵サポート
– 迅速に開始できるように、推奨ルールだけでなくサードパーティの設定利用が可能
– Sublime、Vim、JetBrainsの製品およびV

Twitterのリスト内ツイートを取得する際の`slug`の確認方法

TwitterのリストをAPIで使用する際、例えば`ninomiyt`アカウントの`sample`リストを取得する際、以前は素直に以下のようなコードを書けば取得できました。

node.jsの[twitterライブラリ](https://www.npmjs.com/package/twitter)で書いていますが、他の言語でも概ね似たコードになると思います。

“`javascript
const response = await client.get(“lists/statuses”, {
“owner_screen_name”: “ninomiyt”,
“slug”: “sample”,
“count”: 100,
});
“`

しかし、現在は新規作成し

SIerエンジニアからWeb系フロントエンドエンジニアに転身するために今やっていること

こんにちは！SIerでJavaプログラマをしているゆうきデザイン（[@yuki_design_gr](https://twitter.com/yuki_design_gr “Twitter”)）と言います。

Qiita初投稿として、自己紹介も兼ねて
**”SIerエンジニアからWeb系フロントエンドエンジニアに転身するために今やっていること”**
というテーマで書いてみようと思います。

**同じような境遇にいる人の道しるべの1つになりますように！**

#目次
[1. 自己紹介](#1-自己紹介)
[2. なぜWeb系を目指すのか](#2-なぜweb系を目指すのか)
[3. SIerエンジニアからWeb系フロントエンドエンジニアに転身するために今やっていること](#3-sierエンジニアからweb系フロントエンドエンジニアに転身するために今やっていること)

#1. 自己紹介
東京在住の20代半ば。
####学歴
東京外大韓国語専攻卒業

####職歴
新卒で大手SIerに入社し、アカウント営業を担当(10ヶ月)
→SE(現職。Java・.NET・Oracleのコーディング実務1年

expressでOpenAPI仕様のAPIを実装するときのTips

## 要点

1. express-openapiを使おう (openapi-generatorではなく)
2. security handlerの実装には、シンプルにOpenAPIのinitializeメソッドに引数securityHandlersを渡すのが良い。(openapi-security-handlerは、必要ない)

## express-openapiを使おう (openapi-generatorではなく)

OpenAPI仕様のYAMLファイルを Swagger Editor (https://editor.swagger.io/) などを用いて作った後、openapi-generator (https://github.com/OpenAPITools/openapi-generator) を使ってスケルトンを作れそう…と思うのですが、openapi-generatorの出力するNode.js向けのスケルトンは、あまり良い感じではないです。

むしろexpress-openapi (https://www.npmjs.com/package/express-op

nodeJSとGoogleSpreadSheet(スプレッドシート)を連携する方法

nodeJSとスプレッドシートを連携して、スプレッドシート上の値を取得するところまでを解説します。

順序
①. auth情報を取得する
②. スプレッドシート側で権限を確認する
③. nodeJSのコードを書いて実行する

の３本立てで説明しました。

##①. auth情報を取得する
Google Cloud Platform(Google API)でGoogleSpreadSheetのAPIを有効化させます。すでに”サービスアカウント”の認証情報のjsonを持っている人は不要です

「プロジェクトの選択」→「新しいプロジェクト」へ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/651103/e6b5fee9-8a72-cf1b-da93-

ハンズオン 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 定