f@ctor

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

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

cloud schedulerをfunctionから操作する

# 概要

GCPコンソールからではなく、Webクライアントから cloud schedulerを操作する方法の一つとしてfunctionから呼び出してみるメモ。

## やり方

cloud schedulerの操作は `google-cloud/scheduler` ライブラリを使えば利用できます。

– cloud schdeuler api
– https://cloud.google.com/scheduler/docs/reference/rest

webアプリから呼び出すには以下の方法

– 直接APIを叩く
– functionとして実装して呼び出す

直接叩く場合は、サーバにデフォルトの認証情報(環境変数 `GOOGLE_APPLICATION_CREDENTIALS`)を仕込んでおく、もしくはプログラム内で認証情報としてサービスアカウント、キー情報などを渡してあげる必要があります。

https://cloud.google.com/docs/authentication/production#automatically

今回はfunctionとして実装

元記事を表示

【Lambda】Node.js + Stream API によるファイル結合、圧縮、解凍

## きっかけ
– とある案件でLambdaでS3 to S3のファイル結合等の操作をするため、StreamAPIを用いたメモリに展開しないファイル変形を実装した。その実装の備忘録のため。
– 調べながら実装したため、不備等あればご指摘ください！
– 基本はasync/awaitの構文ですが、一部異なります。

## 変形内容
1. ファイル結合
1. ファイル圧縮
1. ファイル解凍

### 1. ファイル結合
– 大きな流れ
1. アップロード用の書き込みStream, S3アップロードPromiseを定義
1. 1つ目ファイルの読み込みファイルStreamを作成
1. 1つ目読み込みファイルStreamに書き込みStreamをend:falseでpipe　※end:falseをつけないと書き込みファイルStreamが閉じられてしまう
1. 2つ目ファイルの読み込みファイルStreamを作成
1. 2つ目読み込みファイルStreamに書き込みStreamをpipe
1. S3アップロードPromiseをawait

“`i

元記事を表示

nodistでnodeとnpmのバージョンを合わせる

## はじめに
備忘のため。
nodistを使っていると、たまに下記のようなエラーに遭遇します。

“`
$ npm i
Sorry, there’s a problem with nodist. Couldn’t resolve npm version spec match : Couldn’t find any matching version
“`

nodeのバージョンとnpmのバージョンに差異がある際に発生するっぽいです。

## 解決策

下記コマンドを実行します。

“`
$ nodist npm match
npm match

$ npm -v
6.12.0
“`

nodeバージョンに対応したnpmをインストールしてきてくれます。

元記事を表示

forEachの中で非同期処理を行う際、awaitやPromiseを使ってすべての作業が完了するまで待ちたい。

## はじめに ～ 非同期forEachは一斉に処理が始まる（並列処理？）

非同期処理とforEachについての簡単なプログラムを以下に示す

“`javascript:sample.js
const array = [1, 2, 3, 4, 5]

array.forEach(n => {
setTimeout(() => {
console.log(`${n}秒待ちました。`)
}, n*1000);
});
“`

これを実行すると以下のように出力される。

“`
1秒待ちました。
2秒待ちました。
3秒待ちました。
4秒待ちました。
5秒待ちました。
“`

さて、この出力は1秒おきに1行ずつ表示されるため、5種類の “`setTimeout(() => {})“` が同時に実行されていることが分かる。（正確には同時ではないが）

## つまづいた点 ～ 処理が終わってないのにforEachがスルーされている？（←勘違い）

とりあえずforEachの後ろに出力を追記する。

“`javascript:sample.js
con

元記事を表示

Reactの環境構築で詰まった時の対処法（yarn startが上手くいかない時）

# Reactの環境構築で詰まった時の対処法（yarn startが上手くいかない時）

[参考にしたreactの環境構築サイトはこちら](https://qiita.com/rspmharada7645/items/25c496aee87973bcc7a5)

####　まず前提として自分の設定されているnodebrewやnpmのバージョン確認（使えるか確認）
“`
$ node -v
v16.8.0
“`
“`
$ npm -v
7.21.0
“`
“`
$ yarn -v
1.22.11
“`
普通に使えることを確認。
そして“`yarn start “`してみると以下のようなエラー発生

“`
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Cre

元記事を表示

Undo/Redoが出来るお絵描きチャット”えんぴつチャット”をWasmで作った

![スクリーンショット 2021-09-17 132128.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497826/559a9ace-7352-2ac5-d2c7-135a6dbef5d4.png)

![IMG_0323.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497826/a6e162aa-7b72-faeb-1392-b9adc2c36415.png)

# 公開先
https://minordaimyo.net/pencilchat/

# えんぴつチャットの主な特徴・使い方
– 高解像度の256色キャンバス(A3 600dpi、9921x7016pixel)で軽快な描き味
– 多人数参加でもUndo/Redo可能
– 筆圧と傾き検知に対応
– 参加人数は8人まで(見学参加は現状40人まで)
– 2本指のタッチ操作でキャンバスのスクロール・拡縮
– 2本指タップでUndo、3本指タップでRedo
– キ

元記事を表示

Node.js+expressの空プロジェクトをマッハで作成チート (Mac)

# はじめに
今更企画！コピペ４回でちょっとイケてる hello world を10秒。たった10秒で作成。9割自分向けのチートですがひひーーん。今すげーアイディア思い浮かんだ。新しい Node の空環境すぐに欲しい。public ディレクトリに index.html を設置してすぐ見れるようにしたい。そんな私の願いを私が叶えて見せます！Node.js や npm コマンドはインストール済みの前提で行きます！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/594280/fc6b8414-dab7-d5a4-de29-c1f2a4be97a2.png)

# express
“`bash:bash
mkdir -p ~/IdeaProjects/sandbox-node-js
mkdir -p ~/IdeaProjects/sandbox-node-js/public
cd ~/IdeaProjects/sandbox-node-js
npm init –yes
npm instal

元記事を表示

Node.jsからmDNSでESP32を検索

mDNSがどんなものか実際に触ってみたかったことと、ESP32のIPアドレス管理を楽にしたく、Node.jsからmDNSでESP32を検索してみます。

「XXXX.local」という名前のホスト名を探したことがあるかもしれません。mDNSという機能のようです。
DNSに登録していないのに、なぜか名前解決しているので不思議に思っていましたが、ローカルネットワーク用の簡易なDNSサービスのような感じだと思っています。

* ESP32で提供するサービス情報をmDNSに登録します。
* Node.jsからmDNSでサービスを検索します。
* ブラウザから気軽に検索できるようにWebページを作成します。

ソースコードもろもろは以下に置いておきます。

poruruba/mDNS_Test

https://github.com/poruruba/mDNS_Test

#mDNSを触ってみる

Ubuntuを使っている場合は、「avahi-utils」というコマンド群を使って体験できます。

“`
> apt-get install avahi-utils
“`

以下のコマンドを入力す

元記事を表示

初心者による初心者のためのNode.js｜製作途中だからどんどん書き加えていくよ

#初心者のためのNode.js

初心者がNode.jsについて備忘録かねて、書いていく。
間違っている箇所あれば、教えていただけれると幸いです。

##Hello World

出力系統に関する話。
stdout（標準出力）する方法が２種類あるらしい。

“`js
console.log(‘Hello World’);
console.info(‘Hello World’);
“`

このような感じで出力ができる。

##変数を定義する

変数は“`var 変数名 = 初期値“`もしくは“`let 変数名 = 初期値“`で作成できる。
詳しい違いが分からなかったが、ぱっと見て“`let“`の方が使い勝手がよさそう。
（場合によりけりらしいです）

“`js
var var_hello = ‘HELLO’;
let let_hello – ‘HELLO’;
“`

##演算子　TypeOf

何かの型を調べたいときは“`typeof“`を使用する。

“`js
console.log(‘APPLE is a ‘ + typeof(‘ORANGE’) + ‘ t

元記事を表示

Node.js使ってdocker-composeでReact環境構築

# DockerでReactの環境作ってみよう
勉強でReactをやるくらいならNode.jsを入れて作ればOKなのですが、実際の開発ではdocker-compose使って開発環境を作ることが多いのでぜひできるようにしましょう！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260345/aefa6a98-c08f-7447-9e63-088519b38a3d.png)

# 環境
作成時環境

– Docker Desktop for Windows Version 4.0.0
– Windows10 home

作成した環境

– React 17.0.2
– Node.js 16.9.1

Windowsで作ってますが、Macでも同じ手順で使えると思います。

# ソースコード
コピペや確認で使ってください

https://github.com/kohishibashi/docker-react

# Dockerfile作成
Node.jsのイメージを使用します。Re

元記事を表示

JAMStack作成の軌跡Part2

## はじめに

– [前回](https://qiita.com/krkettle57/items/db23c433ec4ea7fb26e4)でGatsbyの環境構築を行った
– 今回はTypeScriptの恩恵を受けられるようにESLint, Prettierの設定を行う
– [GatsbyをTypeScript化してESLintとPrettierを導入する](https://kohsuk.tech/2020/12/5/)が非常に参考になった
– 普段はVSCodeを利用しているため、VSCodeの拡張機能も設定する
– 完成形は[こちら](https://github.com/krkettle57/gatsby-sample/tree/blog-part2)

## TypeScriptの導入

GatsbyにはデフォルトでTypeScriptに対応しているが、型チェックの恩恵を十分に得られないため、DX(Developer Experience)を向上させるために追加の設定を行っていく。

### tsconfig.jsonの作成

“`json
{
“include

元記事を表示

nodeからvueで深みに嵌った件。docker(160)

macOSでdocker起動。

“`macOS:bash
$ docker run -it node /bin/bash
“`

docker 上で

“`ubuntu:bash
# apt update; apt -y upgrade
# npm install -g @vue/cli
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated apollo-tracing@0.15.0: The `apollo-tracing` package is no longer part of Apollo

元記事を表示

【覚書】ReactDOM.render がコケたかどうかを取得する

React のレンダリングがエラーで失敗したときに
代わりの DOM を表示したいと思ったので調べた

どうやら ReactDOM そのものに
そういうエラーハンドリング機能はなさそうなので、App を細工する。

# というわけでこうした

“`jsx
class App extends React.Component {
constructor() {
super();
}
componentDidCatch(error, errorInfo) {
// ここにエラー時の処理
console.log({ error, errorInfo });
}
render() {
return (

Hello!

);
}
}

ReactDOM.render(, document.getElementById(“app”));
“`

hooks とかはないもよう

元記事を表示

Rhythmがお亡くなりになったのでdiscord.jsで音楽再生BOTを自作してみた

Youtubeが7日間以内のサービス停止を求めたためRhythmは音楽再生のサービスを停止してしまいました…
便利だったのでよく使ってたのですが…

別のものに乗り換えようかと思ったのですが今後有名なものは使えなくなりそうなので自作してみました。
招待リンクは[これ](https://discord.com/api/oauth2/authorize?client_id=887156889455038494&permissions=0&scope=bot)になります。よかったら使ってみてください。

コードは[ここ](https://gabrieltanner.org/blog/dicord-music-bot)のものを改造して作っています。

以下はソースコードの一部です。
tokenやprefixはご自分のものに置き換えてください。
また、toHms関数は[ここ](http://site.m-bsys.com/code/javascript-tohms)のものを改造して使用しています。
この記事のコードで実装されている機能は以下の写真のとおりです。
![E30155C9-4F27-4

元記事を表示

ブラウザ上の p5.js のプログラムで OSC を使う（サーバー・クライアントは osc-js で実装）

以下の記事の続きです。

●ブラウザで OSC を扱う初めの一歩（osc.js、osc-js、p5.js用ライブラリを見てみたりなど）【2021年9月】 – Qiita
　https://qiita.com/youtoy/items/efe9b07be57454dec5d5

上記の記事の中で記載していた「[osc-js](https://www.npmjs.com/package/osc-js)」を使い、Node.js でサーバーを用意しつつ、ブラウザ上で動くクライアントも実装してみます（osc-js を使いつつ、p5.js と併用する形）。

## OSC のサーバー（WebSocket を利用するもの）を Node.js ＋ osc-js で準備
[osc-js の Wiki の「Node.js Server」の項目](https://github.com/adzialocha/osc-js/wiki/Node.js-Server)を見つつ、サーバーを準備してみます。

Node.js の npm コマンドで、osc-js を準備します。
今回、グローバルインストールではなくロー

元記事を表示

ブラウザで OSC を扱う初めの一歩（osc.js、osc-js、p5.js用ライブラリを見てみたりなど）【2021年9月】

こちらの、非公式の toioユーザーコミュニティのもくもく会を開催してる中、試した内容を記事にしてみました。
「JavaScript を使って、かつブラウザ上でも動くもの」というのが自分のやりたい内容です。

元記事を表示

Cypress を用いたE2Eテスト方法 メモ

* E2Eテストツールの調査をする際にCypressに少し触れたためメモしておく。

## Cypressとは

* JavaScript製のブラウザテストに特化したE2Eテストフレームワーク。

## Cypress インストール

“`shell
npm install cypress
“`

## Cypress プロジェクト作成

* `cypress`という名称のプロジェクトディレクトリを作成する場合

“`
npx cypress open
“`

## テストコード

* `test.js`

* `{project名}/integration`配下に配置する。
* `cypress.io`でGoogle検索を行い、検索結果の1番上のページにアクセスし、タイトルの値を確認する。

“`javascript
describe(“Test Suite”, function(){
it(“Test 01”, function(){
// Googleページへ
cy.visit(“https://www.google.com

元記事を表示

色々な機能を追加したタイマーを作りたい

#初めに
　Guildという名前でwebサイトを作ろうと四苦八苦しておりますが、そもそもGuildが何を目的に作成しているのか忘れかけていたところで、ギリギリで何を作ってたのが今日この頃です。
　依頼を気軽に受けれる場所をネットで作りたいなと思ってGuildを作成していたのですが、たまには息抜きもいいかなと、とにかく機能を盛りだくさんにしてタイマーを作っていこうと思います。デザインに関しては例の如く。
因みにNode.jsをサーバーサイドで利用しています。だからせっかくなのでNode.jsのプログラムも載せておきましょう。

　最終的には、以下のを作ったよってお話です。

https://guild.click/timer
#バージョン
・Node.js　　　　　　15.11.0
・MongoDB　　　　　4.4.6
#仕様書
　考えつく限りタイマーに付けれる機能を考えていきます。
・無難にアラーム付きタイマー
・タイマーの設定
・タイマーアラームの変更
・周期的なタイマー
　あれ？案外思い浮かばないな、とりあえずこれらを作っていきましょう。思いついたら後から付け足すか、後日の記事の

元記事を表示

JAMStack作成の軌跡Part1

# JAMStack作成の軌跡Part1

## はじめに

– 最近業務ではAWS x サーバレスの構築が多い
– APIGW + Lambda + DynamoDBは構築するが、フロントを触ってないから練習したい…
– 過去にReact経験が少しあるが、いきなりNext.jsは厳しい…?
– ~~出来るだけお金かけたくない~~
– JAMStackというものがあるらしいからやってみるか
– Javascript + APIs + Markupの頭文字を組み合わせたもの
– [参考: Jamstackって何なの？何がいいの？](https://qiita.com/ozaki25/items/4075d03278d1fb51cc37)
– ~~S3の静的ホスティングで済むなら低コストじゃん！~~
– ※基本的には自分用の備忘録として残します

### 動作確認環境

– Amazon Linux2
– Node: v14.17.6
– Gatsby: v3.13.1

## Node.jsの環境構築

– Node.jsをダウンロードする
– Pythonの[p

元記事を表示

【Node.js】【Express】req.bodyが取得できない

Progateを参考に`Node.js`、`Express`、`ejs`でアプリを作成していたのだが、
POST処理の`req.body`でFromの値を取得することができない。

“`app.js
app.post(‘/edit/:id’,(req,res) => {
connection.query(
‘UPDATE users SET name = $1 WHERE id = $2’,
[req.body.nname, req.params.id], //ここでキャッチしたい〜
(error,result) => {
res.redirect(‘/top’);
}
);
});
“`

なんでや〜

いろいろ調べた結果、2つの原因が判明したので、メモ( ・∇・)

#原因1：body-parser
Expressでクライアントからデータを取得する場合、`body-parser`をインストールして`req.body`経由でデータを取得する必要があった。
なので以下の処理を実施

####1.body-parser のインス

元記事を表示

OTHERカテゴリの最新記事