Node.js関連のことを調べてみた2021年10月18日

angular.jsonを書き換えてassetsフォルダのようなビルドと関係ないフォルダを作りたい

自分なりに調べたので備忘として残しておきます。
# angular.jsonとは
一言でいうとAngularアプリの設定を行うファイルとのこと。
ビルドの設定やフォルダ構成、sourceMap等の有効化など色々な設定を行っている。

# ビルドのオプションをいじって任意のフォルダを作成する
[参考サイト](https://angular.jp/guide/workspace-config#asset-config)

デフォルトではAngular.jsonのassetsプロパティに定義されている通り、**assetsフォルダ**の中身がdist/appフォルダ下に展開される。

“`angular.json
“assets”: [
“src/assets”,
“src/favicon.ico”
]
“`
これを詳しく書くと以下のようになる

“`angular.json
“assets”: [
{
“glob”: “**/*”,
“input”: “src/assets/”,
“output”: “/assets/”
},
{

Instagramにアップロードした画像をランダムにESP32に表示する

Instagramにアップロードしてある画像を、手元に置いておくLCD付のESP32に表示させます。
ついでに、ランダムに表示画像を切り替えさせるのと、日時も表示するようにして、卓上時計 兼 写真立てに仕立てます。

ソースコードもろもろを以下のGitHubに上げておきました。

poruruba/InstagramGallery

https://github.com/poruruba/InstagramGallery

とはいっても、ほとんど以下で紹介されている通りに実行すれば実現できました。（非常に助かりました。ありがとうございました！）

APIを使って自分のInstagram投稿写真を取得する方法【Instagram Basic Display API】

APIを使って自分のInstagram投稿写真を取得する方法【Instagram Basic Display API】

#Facebookにアプリを登録する。

InstagramにAPIでアクセスするには、Facebookにアプリとして登録する必要があります。

##Facebookに開発者アカウントを作成する

Faceboo

socket.ioでCORSを設定する

socket.ioのCORSはv3以降は有効にする必要があるようです。

## サーバ側

「socketio」の引数で「cors」を設定します

“`server.js
const socketio = require(‘socket.io’);
const http = require(‘http’);

// origin は function を設定できるようです
// ですので、正規表現を使用し、パターンマッチをさせることもできます。
const socketOptions = {
cors: {
origin: function (origin, fn) {
const isTarget = origin !== undefined && origin.match(/^https?:\/\/www\.test\.net/) !== null;
return isTarget ? fn(null, origin) : fn(‘error invalid domain’);
},
credentials: true
}

技術文章の校正アプリを Heroku + Node.js で開発した時のメモ書き

初めてHerokuを使ってみました。いろいろ新しい発見があったため、メモを残しておきます。

# 成果物

https://peaceful-dawn-16357.herokuapp.com/

技術文章を入力してボタンをクリックすると、誤字や、修正した方が良い箇所を教えてくれます。

趣味＋勉強を兼ねて開発してみました。


レポジトリはこちら。

https://github.com/Nick-smallworld/techtext-lint

# 構成

* インフラ
* [Heroku](https://jp.heroku.com/)
* 言語
* [Node.js](https://nodejs.org/ja/)
* フレームワーク
* [Vue.js](https://jp.vuejs.or

複数ノードでsocket.ioを使用する

**ALB配下に「socket.io」を使用しているインスタンスを複数立ち上げる際の対応**
※シングルインスタンスで動作していることが前提となります。

https://socket.io/docs/v4/

## シングルインスタンスのみ考慮されている状態の場合

`unknown sid “xxx”` のようなエラーがレスポンスに戻ってきたりします。
「socket.io」は標準で複数インスタンスに対応していません。

※「socketio-sticky-session」を使用すればいけるかもしれませんが、私は試していません。
※「@socket.io/redis-adapter」はメッセージを共有することは出来るそうですが、**「handshake」**時の動作には対応していません

## 対応方法

AWSのALBなら**「Stickiness」**で、「socket.io」の**「handshake」**に対応が出来ます。
※詳しくは

フォロー中のTwitter最新記事をしゃべらす(その２)

#はじめに
●「フォロー中のTwitter最新記事をしゃべらす」の記事のIFTTT/firebase版です。

#環境
●Windows10 HOMEのPCにWSLのubuntuをインストールして使用してます。
●ubuntuでnpm,node.js,firebaseなどをインストールする
●WSLのubuntuでpulseaudioでPCのスピーカを使うようにする
●Windows側でpulseaudioサーバのインストールが必要です
　https://www.cendio.com/thinlinc/download の 「Client Bundle」のリンクからダウンロードできます
●音声出力はGoogle Translate Text to Speechを使用しています。

#プログラム(nodejs)
var firebase = require(“firebase”);
var iconv = require(‘iconv-lite’);
require(‘date-utils’);

var value1 ;
var form

[メモ] Node.jsで開発するにあたっての基礎知識まとめ

# はじめに

この記事は自分がNode.js未経験の状態からNode.jsのプロジェクトに携わって学んだことを忘れない様にメモしておくための記事です。
今はプロジェクトを離れてNode.jsに関わっていないため、思い出すためのメモとしてまとめました。
各ツールの役割を解説する事で、開発時に知識として必要なキーワードを効率よく知る事を目的としています。
私自身常に最新の情報を追えていた訳ではないので、情報としては古い可能性があるかもしれませんのでご注意を。

また、ツールの導入の仕方はバージョンアップによって変わる事があり、都度公式の最新の情報をチェックすべきであり、かつ今回の趣旨ではないため省略します。
実際こちらの記事を記載中にバージョンアップによって色々と変わったツールが散見されました。

# より詳しい情報が欲しい方には

私はある程度自力で試行錯誤しながら学んだ後でこの本に出会ったので、本の内容の半分くらいは既に知っていましたが、知識を固めるのに非常に助かりました。
また、最初にこの本を読んでいたらもっと効率よく必要な知識を学べたと感じました。
ガチガチな技術書より実践的

LINE Bot のカルーセルテンプレートを Firebase Functions で実装する方法について

## 概要

3~4年も前に[公式のスタートガイド](https://firebase.google.com/docs/functions/get-started?hl=ja)ぐらいしか使ったことがなかったため、Firebase Functionsをちゃんと触るのは今回が初めてで、LINE Botも簡単なメッセージ返答ぐらいまでしか触ったことがなかったことと、FirebaseとLINE Botの組み合わせも初めてだったので色々とハマったことをまとめようかと。

## やったこと

　　　

最初は、FirebaseとLINE Botの組み合わせで定期的に何かをつぶやくBotを作りたいなと思い、つぶやく内容をスクレイピングで取得する

anyenv + nodenvでNode.jsのバージョンを上げる

個人の忘備録ですが、`anyenv`と`nodenv`でNode.jsのバージョンを管理してる方の役にも立てばと思います。

## 手順

### [STEP1] anyenvアップデート用のプラグインをインストールする

**既に、`anyenv-update`をインストールしてる方は不要**ですが、`anyenv`上に構築してる`nodenv`をアップデートするために、`anyenv-update`というプラグインが必要になるので、まずはインストール。

これを使うと、`nodenv`以外にも、`anyenv`が管理してる`*env(rbenv等)`を一括でアップロードすることができます。

https://github.com/znz/anyenv-update

“`terminal
$ mkdir -p $(anyenv root)/plugins
$ git clone https://github.com/znz/anyenv-update.git $(anyenv root)
“`

### [STEP2] nodenvを最新にする
上記がインストールされたら以下

C#とNode.jsを連携する

###C#とNode.jsを連携する

####EdgeJsを利用する
EdgeJsを利用しNode.jsからC#通信ができます。その逆もできます。.net4.6のみ。まだ.netCoreには未対応のようです。

#####Node.js側

“`
const edge = require(‘edge-js’);

const helloWorld = edge.func(‘cs’, function () {/*
async (input) => {
return “.NET Welcomes ” + input.ToString();
}
*/});

helloWorld(‘Node.js’, function (error, result) {
if (error) throw error;
console.log(result);
});
“`
#####C#側
NodeJsからC#のメソッドを実行しデーターを渡します
Angular CLIインストール時のWARN解消

## はじめに

Angular CLIインストール時にWARNが出たので調べてみました。

2021年10月時点

## 環境

“` shell
$ node -v
v14.18.1
$ npm -v
8.1.0
“`

Node.js(安定最新版) + npm(最新版)

## Angular CLIのインストール

“` shell
$npm i @angular/cli
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘@angular/cli@12.2.10’,
npm WARN EBADENGINE required: {
npm WARN EBADENGINE node: ‘^12.14.1 || >=14.0.0’,
npm WARN EBADENGINE npm: ‘^6.11.0 || ^7.5.6’,
npm WARN EBADENGINE yarn: ‘>= 1.13.0’
npm WARN EBADENGINE },
npm

React + Express + Docker の環境構築

Reactで作成した画面からExpressで作成したAPIを呼び、取得したデータを画面表示するところまでを構築していきます。
React/Expressはそれぞれ別のDockerコンテナで動作させます。

# ディレクトリ
“`
app/
　├── docker/
　│ ├── docker-compose.yml
　│ └── Dockerfile
　├── backend/
　└── frontend/
“`
`docker/` の2ファイルはホスト側で作成しますが、その他の `backend/` と `frontend/` 内のファイルは全てコンテナ側で作成していきます。

# Docker
`Dockerfile` と `docker-compose.yml` を作成し、コンテナを起動します。

## ファイル作成
React、Express で共通で使う Dockerfile を1つ作成します。

“`:Dockerfile
FROM node:14
“`
今回はひとまずnodeが動けば良いので何も設定していません。

次に docker-compose.ym

Azure Web PubSub と Node.js を組み合わせた軽いお試し

この記事は、以下の続きにあたる内容です。

●Azure Web PubSub を試してみるための下調べ（JavaScript を利用する方向で） – Qiita
　https://qiita.com/youtoy/items/c1c9c2893e0e0fe29703

記事執筆時点でプレビュー版の「[Azure Web PubSub](https://azure.microsoft.com/ja-jp/services/web-pubsub/)」を使ってみる話で、Node.js のプログラムと組み合わせてみたという内容になっています。

## サンプルプログラムを使ったお試し
[前の記事](https://qiita.com/youtoy/items/c1c9c2893e0e0fe29703)でも引用していた以下の記事の

Sequelizeを使う際のurl設定について

Node.jsのORマッパーを実現するライブラリである、sequelizeを使って、RDBMSに接続する際のurlの設定方式についてのメモ。

# 前提
– postgreSQLはDockerにてローカルに起動

“`
docker run –name postgres -e POSTGRES_PASSWORD=postgres -e POSTGRES_DB=sample_db -p 5432:5432 postgres:12
“`

– Version

“`
“sequelize”: “^6.6.5”
“`

# 確認結果

– OK

“`js
const url = process.env.DATABASE_URL || “postgres://postgres:postgres@localhost:5432/sample_db”;
“`

– OK (port番号を省略)

“`js
const url = process.env.DATABASE_URL || “postgres://postgres:postgres@localhost/sampl

ES2022のArray.prototype.atは今の所遅い (2021/10/16時点)

# Array.prototype.atは何ができるの

Pythonのように, 負数を指定すると配列の後ろから取得できます. 特に最後尾の数個や, 文字列での末尾からの指定など, 待ち望まれていた機能です. (String.prototype.atもあります)

“`js
const arr = [1, 2, 3]
console.log(arr.at(-1)); // 3
“`

## 速度

普通の添字で指定と速度を比べてみます.

バージョンは

“`text
> node -v
v16.9.0
“`

ソース

“`js
const arr = […Array(1000*1000)].map((_, i) => i);
// for内の余分な計算は取っ払いたいので先に
const len = arr.length;
const len2 = len – 1;
const nlen = -len;

// [] 昇順
{
const startTime = (new Date()).getTime();
for (let n = 0; n < 10

【Node.js】Qiita デイリー LGTM 数ランキング【自動更新】

# 他のタグ

[`AWS`](https://qiita.com/items/8c4aeec4fc98e4b1ba0e) [`Android`](https://qiita.com/items/9c6bf21a9880e242a0d6) [`Docker`](https://qiita.com/items/70aa655b580ed4f91756) [`Git`](https://qiita.com/items/36cfb2318aabe8b3f8df) [`Go`](https://qiita.com/items/16809f8444e0329bed8a) [`iOS`](https://qiita.com/items/da7fabcf41ed103528ae) [`Java`](https://qiita.com/items/9003b8beb47a46292028) [`JavaScript`](https://qiita.com/items/31e7365a838b890f7cc3) [`Linux`](https://qiita.com/items/7bcae94b268b

webpack入門（Node.jsの導入からjsファイルのバンドルまで）

# はじめに
業務でwebpackを使用する機会があるので、学習したことをまとめていきます。
今回は、Node.jsのインストール・jsファイルのバンドル~~・Loaderを使ってcssのバンドルを~~実際に行います。

※一度にいろいろやると分からなくなるので、今回はjsファイルのバンドルまで行います。次回Loaderを用いてcssやscssファイルをバンドルする手順についてまとめます。

以前の学習まとめはこちら[package.jsonとpackage-lock.jsonのバージョン指定や必要性について](https://qiita.com/sasao3/items/b794c1e44715bb6f834f)

# 今回使用するツールなどのバージョン

– Node.js：12.16.3
– npm：6.14.4
– webpack: 5.58.1
– webpack-cli: 4.9.0

# webpack導入の前に
図が多くわかりやすかったので、こちらの記事を見ておくとイメージが少しつくかと思います。
[webpack学習の基本のき](https://www.funde

GR-ROSE と Node.js のプログラムの間でシリアル通信（一方向）

表題の件を試した際のメモです。
GR-ROSE と Node.js のプログラムとの間で、一方向のシリアル通信を軽く試してみます。

## GR-ROSE側
以下の公式のプログラムを動かしてみます。

●GR-ROSE チュートリアル：IDE for GRでスケッチ | Renesas
　https://www.renesas.com/jp/ja/products/gadget-renesas/boards/gr-rose/project-arduino-sketch-ide-gr

開発には IDE for GR を使う形で、手順は上記のページ内のとおりです。
書き込みをする際、GR-ROSE のリセットボタンを押して USBドライブとして認識させてから行う、というのがあったりします。

プログラムは以下で、サンプルほぼそのままです。
遅延の設定だけ、100ミリ秒から 1秒に変えています。

“`c
void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
pinMode(P

これからWeb開発を始める人に知ってほしいGithubプロジェクト

## はじめに
この記事ではProgrammingを始める方や学生でこれからエンジニアを目指されている方々に私がよく紹介しているGithubのプロジェクトを紹介しています。どのプロジェクトも英語ですが、どのプロジェクトもきっと皆さんのキャリアにとって役に立つはずです。ぜひお役立ていただければと思います。

## 1. Web Developer Roadmap

https://github.com/kamranahmedse/developer-roadmap

このプロジェクトではWeb Developerになるまでにどのような知識が必要なのかを体型的にまとめてくれています。
これはFrontendのRoadmapの例ですが、以下のようにTopicにつき質問がいくつかあるのでそれに答えられるようになっていけば必然とFrontend開発を学ぶことができます。

![frontend.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/407956/1d648d3b-77cd-3305-e211-a13a8a

Azure Web PubSub を試してみるための下調べ（JavaScript を利用する方向で）

この記事は、以下の「Azure Web PubSub」に関する記事です。
どうやら、WebSocket を通信に使って、パブリッシュ – サブスクライブ型のメッセージングができるものらしく、「MQTTっぽい感じなのかな？」と気になりました。

●Azure Web PubSub – WebSocket Web パブリッシング | Microsoft Azure
　https://azure.microsoft.com/ja-jp/services/web-pubsub/

過去に書いた Qiita の記事でも、リアルタイム通信系で WebSocket・MQTT は何度も登場していて、リアルタイム通信周りの技術は非常に気になるところです。

この Azure Web PubSub は、記事執筆時点では以下の公式ページのサービス名の部分に書かれているように、「プレビュー」という位置付けのようです。
![Azure_Web_PubSub_–_WebSocket_Web_パブリッシング___Microsoft_Azure.jpg](https://qiita-image-store.s3