Node.js関連のことを調べてみた2022年09月22日

【Let’s ハンズオン?】node.jsをDocker化してDocker run❗️

# 【Let’s ハンズオン?】node.jsをDocker化してDocker run❗️

## 目次
0. Dockerをインストール
1. アプリを準備
2. アプリをDocker化
3. Docker run!!

# Dockerをインストール
なにがともあれDockerを使用するので、自身の環境にDockerをインスト-ルしちゃいましょう！

## Macの方はこちら
https://docs.docker.com/desktop/install/mac-install/
## Windowsの方はこちら
https://docs.docker.com/desktop/install/windows-install/

ダウンロードのボタンをクリックでダウンロードが開始されます。

# アプリを準備
Expressのアプリを作成しちゃいましょう！

まずは、Node.jsがインストールされているか確認です。

以下、二つのコマンドを実行して確認してみてください。

“`bash
node -v
“`

“`bash
npm -v
“`

ゆうじろうはこんな感じの表示

[Azure Functions] function.jsonのscriptFileプロパティは、気をつけないとはまる

# はじめに

困ったことが。
TimerTriggerのAzureFunctionsをローカルデバッグしていて、ある特定のタイミングで必ず別プロセスが起動してしまう。
別の言い方をすると、Functionsが二重で起動してしまう。
しかも後から立ち上がった方はブレークポイントで止まってくれない。(デバッグ用のポート(デフォルト9229)が既に使われてるから当たり前だけど

`runOnStartup`はデバッグのために`true`にしてたけど、こんなことなるの不便すぎるしどう考えても変だ。

# 環境

OS: Mac OS 12.6(Windows10端末でも再現性あり)
IDE: VSCode
Node.js: 16.14.0
npm: 8.3.1
azure function core tools: 4.0.4483

# 疑ったもの

## Azurite

ローカルデバッグ時のストレージアカウントエミュレータ
インストールし直してみたり、クリーンしたけど変わらず

## azure function core tools

これも再インストール。けど違いそう。

## そも

Mac node バージョン変更　nodebrew

##### nodeのパスを確認

“`
$ which node
/Users/user/.nodebrew/current/bin/node
“`
##### nodebrewで対象バージョンをインストール・切り替え

“`
//対象のバージョンをインストール
nodebrew install-binary v16.14.2

//バージョン切り替え
nodebrew use v16.14.2

“`

【Pug】Pugで編集されたファイルを元に、JQueryで値埋め込み

# 概要

[前回](https://qiita.com/myantyuWorld/items/8a223c7c6e917e822cee)”Pug”とは何なのか、簡単ではありますが、説明させていただきました。
今回は、Pugで記述されたテンプレートファイルを元に、JQueryの値埋め込み処理を記述する例を自分用にメモとして残します

# 前提

システム開発において、固定値で画面が作成される、なんてことはありえないです
jsのソースコードに、動的に値をDOMに埋め込んでいく実装を進めていくと思いますが、Pug記法を使用することはできない
（＝Pugは、あくまでHTMLのテンプレートエンジン）

# ステップ１
#### index.js
JQueryで値を動的にHTMLに対して設定する例として、まず思いつくのは
1. モック画面を開発者ツールなどで調べ、明細部のHTMLをコピー
2. それをjs部分に貼り付けて、テンプレートリテラルなどを使って、値を設定する

感じでしょうか。私のレベルはここでした。。。

![image.png](https://qiita-image-store.

ESModuleかつTypeScriptでNode.jsの環境構築を行う

# はじめに
普段Reactを触っているので、フロントエンドでのNode.jsは触ったことありますが、バックエンドは触ったことがありませんでした。
普通に環境構築すると、import文が使えず、require文になってしまい、とても不便だったので、ESModuleで環境構築を行なったメモを残したいと思います。
色々と誤りもあると思いますので、ご指摘いただけますと幸いです。

# 実行環境
macOS Monterey ver12.5.1
MacBookAir(M1, 2020)

# パッケージのインストールを行う
まずNode.jsがインストールされていることを確認します。
Dockerで環境構築したい場合はコンテナの中に入ってコマンド実行してください。

“`:ターミナル
node -v
v16.10.0
“`

プロジェクトの初期化を行います。
色々質問されますが、とりあえず全てそのままで大丈夫です。

“`:ターミナル
npm init
“`

以下のようになっていることを確認してください。

“`package.json
{
“name”: “test”,

特定のバージョンのnodeをインストールしたDocker環境を用意する方法

各バージョンのnodeのインストール方法は、[nodesource/distributions: NodeSource Node.js Binary Distributions](https://github.com/nodesource/distributions)で記載されています。

“`shell
# Using Ubuntu
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash –
sudo apt-get install -y nodejs

# Using Debian, as root
curl -fsSL https://deb.nodesource.com/setup_16.x | bash –
apt-get install -y nodejs
“`

ただこの方法は、仕事の関係で**ちょっと古いマイナーバージョン**が使いたいときに使えません。必ず最新のマイナーバージョンがインストールされるからです。

## 直接バイナリを取得する

上記の場合は、https://nodejs.org

Node.JS忘備録 ~簡易Webサイト公開方法

Node.JSかつ静的なサイト限定の方法です。
Surgeという無料サービスを用います。
Herokuに似ています。
# npmにてライブラリインストール
“`bash
sudo npm install -global surge
“`
# Node.JSのデプロイしたいディレクトリにて…(package.json)があるところ
“`bash
surge デプロイするディレクトリのパス 任意URL.surge.sh
(例) surge ./ namaeportofolio.surge.sh
“`
初回メールアドレスとパスワード聞かれますので入力してください。
最後にSuccedという表示が出たらOKです。

出なかったらURLが世界中の誰かと被っていたのかもです。
誰もやってなさそうなURLに変えてみてください。

Discord Botの作り方 node.jp

## はじめに
Discordでオウム返しするbotのコードを載せます。
[Discord Botの作り方、まとめ（Node）](https://qiita.com/kiririri/items/845da86f95f0e3472953)
をそのまま実行しようとしたら、うまくいきませんでした。そこで、
[【discord.js】TypeErrorを解決したい。](https://teratail.com/questions/360420?link=qa_related_pc)
を参考に修正したらうまく動きました。
コードの修正箇所以外は、参照元と同じです。

## コード

“`javascript
const Discord = require(“discord.js”);
const client = new Discord.Client({intents: Object.values(Discord.IntentsBitField.Flags)});
const token = “your token id “;

client.on(“ready”, ()=> {

Nitro + TypeScript で作る軽量APIサーバ

## Nitroって何？

**`Universal JavaScript Servers`** を自称するTypeScript製の軽量サーバだよ。
`Vue` や `Nuxt` の開発メンバーを中心に作られていて、`Nuxt3` にも組み込まれているよ。

GitHubのリポジトリはこちら。

https://github.com/unjs/nitro

この [unjs](https://github.com/unjs) というプロジェクトには `Unified JavaScript Tools` という意味合いで、さまざまなTypeScript製ツールが作られていて、他にも [unjs/ohmyfetch](https://github.com/unjs/ohmyfetch) など便利なツールが開発されているよ。unjsの各種ツールは、Nuxt3のエコシステムとしても使われているから、これからも継続的なサポートと機能向上が期待できるよ。

## 筆者プロフィール

[Kenpal株式会社](https://www.kenpalinc.com/) でITエンジニアとして色々いじって

Promiseで定義したコールバックの実行順序

Promiseを定義したときにasync/awaitするとコードを見たまま上から下に実行されるので難しくないのですが、then/catchで後の処理を定義するとどのタイミングでコールバックが実行されるのかわかっていませんでした。

ちょっと調べてみたのでまとめます。

# サンプル

aとbというPromiseを作ってそれぞれの関数の中でログを出力してみます。
また、各定義の間と、aとbをPromise.allした後にもログを出力します。

“`TypeScript
const a = new Promise((resolve, reject) => {
console.log(‘a’);
resolve(‘a: resolve’);
})
.then(() => { console.log(‘a: then’); });

console.log(‘aの後’)

const b = new Promise((resolve, reject) => {
console.log(‘b’);
resolve(‘b: resolve’);
})
.then(() =

Vue/CliをIISにデプロイ

# やりたいこと
– Vue/Cliで作ったものをIIS上で動かす
– ついでに、Vue 2.xとVue 3.xで作ったものを、両方動かす

必要な手順だけに絞って、なるべくシンプルに整理してみた。

# 前提条件
– Windows10に、IISがインストールされていること
– Windows10に、Node、Vue/Cliがインストールされていること

# 手順
– Vueのサンプルを作成
– 基点ディレクトリを設定
– Vueのプロジェクトをビルド
– IISにVueのプロジェクトをデプロイ

# Vueのサンプルを作成

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

> まずは、Vue 2.xでサンプルを作成する。
> “`> vue create vue_v2“`
> ～ 選択肢で「Default ([Vue 2] babel, eslint)」を選択
> ![01_プロジェクト作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2850619/8a0eba04-7712-7292-3366-4ea5

【NestJS入門?】NestJSを使用してCRUD実装!

### NestJSとは
NestJSとは、NodeJS環境で動くサーバーサイドアプリケーションフレームワークです。

基本的にTypeScriptでコーディングを行いますが、JavaScriptで書くことも可能です。

Expressをコアに作られているので、Expressの機能は備えつつ、テストフレームワークJestを標準装備していたり、NestCLIを利用して効率良く開発を進めることができたり、多くの機能を搭載しています。

今回は、DockerでPostgreSQLサーバを立ち上げ、NestJSを用いた商品管理のCRUD実装を行なっていこうと思います。

### 1. NestJSのプロジェクト作成
NestCLIを使用して、NestJSのプロジェクトを立ち上げます。

まずは以下コマンドで、NestCLIがインストールされて

俺みたいになるな！Lambda+Node.jsでDynamoDBにputItemするだけで半日溶かしたAWS SAP

## やりたいこと
ただただシンプルにLambdaでDynamoDBに書き込みたい。それだけなんです。初体験でも無い。
なのにハマって、シルバーウィークの初日の半日それで溶かしてしまいました。
AWS SAPの称号を剥奪されるかと思って誰にも相談できませんでした。

https://qiita.com/kakudaisuke/items/174ff82b558b86d041b4

ちなみに、なんでそんなことしたいかというとコレです↓ :frog:

https://qiita.com/kakudaisuke/items/18681418cebc3bee93b5

## 実装！
### DyanmoDBの設計
完了したタスク(task)を、ユーザー(user)、日付(date)ごとに登録したいです。
で、取り出す時はあるuserとdateのtaskを全て取得したい。

試行錯誤の末、保存したいアイテムはuser, unixtime, date, taskにしました。

ちなみに、user, dateはDynamoDBの予約語。予約語だけど使えちゃう。queryする時にちょい厄介だけど使

AWS Lambda + Node.jsの実行環境でローカルタイムを扱いたいが、とりま日本時間JSTに甘んじる（JavaScript）

## やりたいこと
AWS Lambdaで時間を扱うのに、日本時間JSTが欲しい。（本当はローカルタイムが欲しい。）
だけど、Lambdaではローカルタイムという概念がないらしく、全てUTCになってしまう。
日本時間JSTが欲しいと思っていると、9時間ずれた値が返ってきたり、表示が`19/9/2022`となって欧米か！とツッコミたくなったり、してしまう。

ちなみに、なんでそんなことしたいかというとコレです↓ :frog:

https://qiita.com/kakudaisuke/items/18681418cebc3bee93b5

## 実装！
色々調べたが簡単に済ませたかったので、とりま+9時間してJ、日本的なフォーマットに自力でした。

“`js:index.js
let dateTime = new Date();

// JSTにする
time.setHours(dateTime.getHours() + 9);

// 2022/9/19の形にする
const year = dateTime.getFullYear();
const month = dateTim

Node.js忘備録 ~WEBサーバーの建て方

NodeJSを用いたWEBサーバーの作り方について忘備録です。
# 環境について
Replit.comというオンラインIDEを用いています。
全ての言語使えるので便利です。
https://replit.com

# WEBサーバー
## ファイル構成
|
|ーーindex.js
|ーーindex.html
## コード (index.js)
“`javascript
//———————————
// HTTPサーバー (express)
//———————————
// ライブラリインポート
const express = require(‘express’);
const app = express();
const http = require(‘http’).createServer(app);

// “/”にアクセスがあったらindex.htmlを返却
app.use(‘/’, express.static(__dirname + ‘/’));
app.get(“/”, (req, r

Node.jsのインストール方法①

“`
ys@mbp ~ % nodebrew -v
zsh: command not found: nodebrew
ys@mbp ~ % node -v
v18.9.0
ys@mbp ~ % brew install nodebrew
Running `brew update –auto-update`…
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).

==> Downloading https://ghcr.io/v2/homebrew/core/nodebrew/manifests/1.2.0
######################################################################## 100.0%
==> Downloading https://ghcr.io/v2/homebrew/core/nodebrew/blobs/sha256:eed2aeff4fd05a4c2969d670ce9a38bc01832ac90b65a1c773689532c

【TypeScript】ある型から変数プロパティを抽出するUtility Types

TypeScriptで実装をしてると、特定の型の変数プロパティだけ抽出した型を指定したくなることがたまにあります。
そういうときに使えるUtility Typesをつくりました。

# 前提

例えば次のようなクラスAがあって、コンストラクタの引数は自身と同じインターフェイスを持つオブジェクトにしたいとき、クラスAの持つメソッドも引数に指定しないといけません。

“`TypeScript
class A {
a: string;

constructor(v: A) {
this.a = v.a;
}

func () {
//
}
}

const c = new A({
a: ‘a’,
func: () => {}, // これはよくないので無くしたい
});

“`

でもメソッドまで実際の引数に指定するのは無駄なので、メンバ変数だけを指定したくなります。
このクラスAの場合はメンバ変数が1つなので

“`TypeScript
constructor(v: { a: string }) {
“`

このようにコンストラクタを

完全無料のDeta Cloudを利用して画像ファイルのアップロード/ダウンロードサイトを作ってみた

# はじめに

Node-RED実行環境としてHerokuの代替え先を探している時に見つけた完全無料のDeta Cloud。


Node-RED実行環境としては利用できなかったが、画像ファイルのアップロード/ダウンロードサイトを作ってみた。

https://qiita.com/kitazaki/items/970a10cbd1059c89aca5

## Deta Cloudとは

完全無料で以下の3つのサービスが提供されている。

– Deta Base: NoSQLデータベース (保存容量は無制限)
– Deta Micros: PythonまたはNode.jsの実行環境 (AWS API Gateway + Lambdaが利用されている)
– Deta Drive: 保存容量は10GB

## 画像のアップロード/ダウンロード

Data M

市販の汎用赤外線リモコンをスマートリモコンにする

複数のメーカーのテレビに対応した赤外線リモコンが多数販売されており、ボタンが大きく、卓上に置いたまま使えるリモコンが増えてきました。
リモコンで、室内の家電を操作するのもありますが、一方で、WebAPIが一般化し、よくある家電のリモコンで、ボタン一つでWebAPI呼び出せるとよいなあと思いました。

そこで、ボタンの大きなリモコンを机の上において、ボタン一つでいろいろなIoTを制御するスマートリモコンを作ります。


汎用赤外線リモコンは、学習リモコンである必要はありません。
見た目や操作性を重視すればよいです。
複数の国内メーカに対応したリモコンがよいですが、NEC式の赤外線信号プロトコルを使う場合は例えばパナソニックを選択します。
汎用赤外線リモコンでボタンを押下すると、パナソニックのテレビ用の信号が赤外線で送信されます。

赤外線は、M5S

Auth0の「Actions」を使い、ログイン後に＊＊する

Auth0 には「[Actions](!https://auth0.com/docs/customize/actions)」という機能があります。
Actions を利用すると

* ユーザーがログインした直後に「＊＊」する
* ユーザー登録を行う直前に「＊＊」する
* ユーザーがパスワードを変更した後に「＊＊」する

など、ユーザーのアクションに合わせて、決まった処理を行うことができます。

今回は、Auth0の「Actions」について調べてみました。

## ユーザーがログインした後に、新しいプロパティを設定する

最初はシンプルなユースケースにします。
ユーザーがログインした後、ユーザー名やEmailアドレスなどのユーザー情報に加えて「Hello」というプロパティに「World」という値を設定してみます。

Auth0の管理画面から [Actions] → [Flows]　→ [Login] を選択する